import React, {useState, useEffect} from "react";
import { PencilSquare, Download } from "react-bootstrap-icons";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { AuthService, CustomerService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { 
  CUSTOMER_TYPE_TEXT, 
  PROGRAM_TYPE_TEXT,
  PAY_SOURCE_TEXT,
  LEGAL_SEX_TEXT,
  MARITAL_STATUS_TEXT,
  IMMIGRATION_STATUS_TEXT,
  LANGUAGE_OPTIONS,
  STATE_OPTIONS_TEXT,
  EMERGENCY_CONTACT_RELATIONSHIP_TEXT,
  EMERGENCY_CONTACT_ROLE_OPTIONS,
  DAYS_OF_WEEK_OPTIONS,
  REFERRAL_SOURCE_TEXT,
  CUSTOMER_DISCHARGE_REASON_TEXT,
  DIETARY_RESTRICTIONS_OPTIONS,
  DIET_TEXTURE_TEXT,
  TRANSPORTATION_TYPE_TEXT,
  YES_NO_TEXT,
  PREFERRED_TEXT_LANGUAGE_TEXT
} from "../../shared";

const ViewCustomer = () => {
  const navigate = useNavigate();

  const urlParams = useParams();
  const [searchParams] = useSearchParams();
  const [currentCustomer, setCurrentCustomer] = useState(undefined);
  const [currentAvatar, setCurrentAvatar] = useState(undefined);
  const initialTab = searchParams.get('tab');
  const normalizedInitialTab = ['additionalInfo', 'complianceDeadlines'].includes(initialTab) ? 'personalInfo' : initialTab;
  const [activeTab, setActiveTab] = useState(normalizedInitialTab || 'personalInfo');
  const [formFiles, setFormFiles] = useState({});
  
	
  const isFormUploaded = (fieldValue) => fieldValue === true || fieldValue === 'true';

  const redirectTo = () => {
    navigate(`/customers/list`)
  }

  const goToEdit = (id) => {
    navigate(`/customers/edit/${id}?tab=${activeTab}`)
  }

  // Check if customer is active
  const isCustomerActive = () => {
    return currentCustomer?.status === 'active' && 
           currentCustomer?.type !== 'discharged' && 
           currentCustomer?.type !== 'transferred' && 
           currentCustomer?.type !== 'deceased';
  };

  useEffect(() => {
    if (!AuthService.canViewCustomers()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    if (!currentCustomer) {
      CustomerService.getCustomer(urlParams.id).then((data) => {
        setCurrentCustomer(data.data);
      })
    }
  }, []);

  useEffect(() => {
    if (currentCustomer?.id ) {
      CustomerService.getAvatar(currentCustomer?.id).then((data) => {
        setCurrentAvatar(data.data);
      })

      const formTypes = [
        'hipaa_authorization_form', 'medication_management_consent_form', 'freedom_of_choice_form',
        'meal_benefit_application_form', 'photo_video_release_form', 'security_deposit_agreement_form',
        'recreational_program_contract_form', 'tb_form', 'pre_screening_form'
      ];
      const uploadedTypes = formTypes.filter(ft => isFormUploaded(currentCustomer?.[ft]));
      if (uploadedTypes.length > 0) {
        Promise.all(
          uploadedTypes.map(ft =>
            CustomerService.getCustomerFormFiles(currentCustomer.id, currentCustomer.name || '', ft)
              .then(res => ({ fileType: ft, files: res.data?.data?.files || [] }))
              .catch(() => ({ fileType: ft, files: [] }))
          )
        ).then(results => {
          const filesMap = {};
          results.forEach(r => { if (r.files.length > 0) filesMap[r.fileType] = r.files; });
          setFormFiles(filesMap);
        });
      }
    }
  }, [currentCustomer]);

  // Helper to convert array values to display text
  const formatArrayToDisplay = (values, optionsList) => {
    if (!values || !Array.isArray(values) || values.length === 0) return '';
    return values.map(val => {
      const found = optionsList.find(opt => opt.value === val);
      return found ? found.label : val;
    }).join(', ');
  };

  const renderFormStatus = (fieldValue, fileType) => {
    if (!isFormUploaded(fieldValue)) return 'Not Uploaded';
    const files = formFiles[fileType];
    if (files && files.length > 0) {
      const latestFile = files[files.length - 1];
      const downloadUrl = CustomerService.getFileDownloadUrl(latestFile.url);
      return (
        <a href={downloadUrl} target="_blank" rel="noopener noreferrer" style={{ color: '#28a745', textDecoration: 'none' }}>
          <Download size={12} className="me-1"/>Uploaded - Download
        </a>
      );
    }
    return <span style={{ color: '#28a745' }}>Uploaded</span>;
  };

  // Helper to format Yes/No values
  const formatYesNo = (value) => {
    if (value === 'yes' || value === true) return 'Yes';
    if (value === 'no' || value === false) return 'No';
    return YES_NO_TEXT[value] || value || '';
  };
  
  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/">General</Breadcrumb.Item>
          <Breadcrumb.Item href="/customers/list">
            Customer Information
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            View Customer Details
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>View Customer Information <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h4> 
        </div>
      </div>
      <div className="app-main-content-list-container form-page">
        <div className="app-main-content-list-func-container">
          <Tabs activeKey={activeTab} onSelect={(k) => setActiveTab(k)} id="customers-tab">
            <Tab eventKey="personalInfo" title="Personal Information">
              {/* Basic Info Section */}
              <h6 className="text-primary">Basic Info</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">First Name</div> 
                  <div className="field-value">{currentCustomer?.firstname}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Middle Name</div> 
                  <div className="field-value">{currentCustomer?.middle_name}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Last Name</div>
                  <div className="field-value">{currentCustomer?.lastname}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Chinese / Preferred Name</div>
                  <div className="field-value">{currentCustomer?.name_cn}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Name On ID</div>
                  <div className="field-value">{currentCustomer?.name_on_id}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Customer Type</div>
                  <div className="field-value">{CUSTOMER_TYPE_TEXT[currentCustomer?.type] || currentCustomer?.type}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Program Type</div>
                  <div className="field-value">{PROGRAM_TYPE_TEXT[currentCustomer?.program_type] || currentCustomer?.program_type}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Pay Source</div>
                  <div className="field-value">
                    {PAY_SOURCE_TEXT[currentCustomer?.pay_source] || currentCustomer?.pay_source}
                    {currentCustomer?.pay_source === 'other' && currentCustomer?.pay_source_other && ` (${currentCustomer?.pay_source_other})`}
                  </div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Date Of Birth</div>
                  <div className="field-value">{currentCustomer?.birth_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Legal Sex</div>
                  <div className="field-value">{LEGAL_SEX_TEXT[currentCustomer?.legal_sex] || LEGAL_SEX_TEXT[currentCustomer?.gender] || currentCustomer?.gender}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Marital Status</div>
                  <div className="field-value">{MARITAL_STATUS_TEXT[currentCustomer?.marital_status] || currentCustomer?.marital_status}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Marriage Date</div>
                  <div className="field-value">{currentCustomer?.marriage_date}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Immigration Status</div>
                  <div className="field-value">
                    {IMMIGRATION_STATUS_TEXT[currentCustomer?.immigration_status] || currentCustomer?.immigration_status}
                    {currentCustomer?.immigration_status === 'other' && currentCustomer?.immigration_status_other && ` (${currentCustomer?.immigration_status_other})`}
                  </div>
                </div>
                <div className="field-body">
                  <div className="field-label">Language Spoken</div>
                  <div className="field-value">
                    {formatArrayToDisplay(currentCustomer?.language_spoken, LANGUAGE_OPTIONS) || currentCustomer?.language}
                    {currentCustomer?.language_spoken?.includes('other') && currentCustomer?.language_spoken_other && ` (${currentCustomer?.language_spoken_other})`}
                  </div>
                </div>
              </div>

              {/* Contact Info Section */}
              <h6 className="text-primary">Contact Info</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Primary Phone Number</div>
                  <div className="field-value">{currentCustomer?.phone}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Phone Number 2</div>
                  <div className="field-value">{currentCustomer?.mobile_phone}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Phone Number 3</div>
                  <div className="field-value">{currentCustomer?.home_phone}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Email</div>
                  <div className="field-value">{currentCustomer?.email}</div>
                </div>
              </div>

              {/* Address Section */}
              <h6 className="text-primary">Address</h6>
              {/* Address 1 */}
              {(currentCustomer?.address_line_1 || currentCustomer?.street_address_1 || currentCustomer?.city || currentCustomer?.city1) && (
                <>
                  <strong className="text-secondary d-block mb-2">Address 1</strong>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Address Line 1</div>
                      <div className="field-value">{currentCustomer?.address_line_1 || currentCustomer?.street_address_1}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Line 2</div>
                      <div className="field-value">{currentCustomer?.address_line_2 || currentCustomer?.apartment}</div>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">City</div>
                      <div className="field-value">{currentCustomer?.city || currentCustomer?.city1}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">State</div>
                      <div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state] || STATE_OPTIONS_TEXT[currentCustomer?.state1] || currentCustomer?.state || currentCustomer?.state1}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Zip Code</div>
                      <div className="field-value">{currentCustomer?.zip_code || currentCustomer?.zip_code1}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Note</div>
                      <div className="field-value">{currentCustomer?.address_note}</div>
                    </div>
                  </div>
                </>
              )}
              {/* Address 2 */}
              {(currentCustomer?.address2_line_1 || currentCustomer?.street_address_2 || currentCustomer?.city2) && (
                <>
                  <strong className="text-secondary d-block mb-2 mt-3">Address 2</strong>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Address Line 1</div>
                      <div className="field-value">{currentCustomer?.address2_line_1 || currentCustomer?.street_address_2}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Line 2</div>
                      <div className="field-value">{currentCustomer?.address2_line_2}</div>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">City</div>
                      <div className="field-value">{currentCustomer?.city2}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">State</div>
                      <div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state2] || currentCustomer?.state2}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Zip Code</div>
                      <div className="field-value">{currentCustomer?.zip_code2}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Note</div>
                      <div className="field-value">{currentCustomer?.address2_note}</div>
                    </div>
                  </div>
                </>
              )}
              {/* Address 3 */}
              {(currentCustomer?.address3_line_1 || currentCustomer?.street_address_3 || currentCustomer?.city3) && (
                <>
                  <strong className="text-secondary d-block mb-2 mt-3">Address 3</strong>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Address Line 1</div>
                      <div className="field-value">{currentCustomer?.address3_line_1 || currentCustomer?.street_address_3}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Line 2</div>
                      <div className="field-value">{currentCustomer?.address3_line_2}</div>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">City</div>
                      <div className="field-value">{currentCustomer?.city3}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">State</div>
                      <div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state3] || currentCustomer?.state3}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Zip Code</div>
                      <div className="field-value">{currentCustomer?.zip_code3}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Note</div>
                      <div className="field-value">{currentCustomer?.address3_note}</div>
                    </div>
                  </div>
                </>
              )}
              {/* Address 4 */}
              {(currentCustomer?.address4_line_1 || currentCustomer?.street_address_4 || currentCustomer?.city4) && (
                <>
                  <strong className="text-secondary d-block mb-2 mt-3">Address 4</strong>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Address Line 1</div>
                      <div className="field-value">{currentCustomer?.address4_line_1 || currentCustomer?.street_address_4}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Line 2</div>
                      <div className="field-value">{currentCustomer?.address4_line_2}</div>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">City</div>
                      <div className="field-value">{currentCustomer?.city4}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">State</div>
                      <div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state4] || currentCustomer?.state4}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Zip Code</div>
                      <div className="field-value">{currentCustomer?.zip_code4}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Note</div>
                      <div className="field-value">{currentCustomer?.address4_note}</div>
                    </div>
                  </div>
                </>
              )}
              {/* Address 5 */}
              {(currentCustomer?.address5_line_1 || currentCustomer?.street_address_5 || currentCustomer?.city5) && (
                <>
                  <strong className="text-secondary d-block mb-2 mt-3">Address 5</strong>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Address Line 1</div>
                      <div className="field-value">{currentCustomer?.address5_line_1 || currentCustomer?.street_address_5}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Line 2</div>
                      <div className="field-value">{currentCustomer?.address5_line_2}</div>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">City</div>
                      <div className="field-value">{currentCustomer?.city5}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">State</div>
                      <div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state5] || currentCustomer?.state5}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Zip Code</div>
                      <div className="field-value">{currentCustomer?.zip_code5}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Address Note</div>
                      <div className="field-value">{currentCustomer?.address5_note}</div>
                    </div>
                  </div>
                </>
              )}

              {/* Emergency Contact Section */}
              <h6 className="text-primary">Emergency Contact</h6>
              {/* Emergency Contact 1 */}
              {(currentCustomer?.emergency_contact_name || currentCustomer?.emergency_contact_phone) && (
                <>
                  <strong className="text-secondary d-block mb-2">Emergency Contact 1</strong>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Name</div>
                      <div className="field-value">{currentCustomer?.emergency_contact_name}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Phone Number</div>
                      <div className="field-value">{currentCustomer?.emergency_contact_phone}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Relationship</div>
                      <div className="field-value">
                        {EMERGENCY_CONTACT_RELATIONSHIP_TEXT[currentCustomer?.emergency_contact_relationship] || currentCustomer?.emergency_contact_relationship}
                        {currentCustomer?.emergency_contact_relationship === 'other' && currentCustomer?.emergency_contact_relationship_other && ` (${currentCustomer?.emergency_contact_relationship_other})`}
                      </div>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Role</div>
                      <div className="field-value">{formatArrayToDisplay(currentCustomer?.emergency_contact_role, EMERGENCY_CONTACT_ROLE_OPTIONS)}</div>
                    </div>
                  </div>
                </>
              )}
              {/* Emergency Contact 2 */}
              {(currentCustomer?.emergency_contact2_name || currentCustomer?.emergency_contact2_phone) && (
                <>
                  <strong className="text-secondary d-block mb-2 mt-3">Emergency Contact 2</strong>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Name</div>
                      <div className="field-value">{currentCustomer?.emergency_contact2_name}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Phone Number</div>
                      <div className="field-value">{currentCustomer?.emergency_contact2_phone}</div>
                    </div>
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Relationship</div>
                      <div className="field-value">
                        {EMERGENCY_CONTACT_RELATIONSHIP_TEXT[currentCustomer?.emergency_contact2_relationship] || currentCustomer?.emergency_contact2_relationship}
                        {currentCustomer?.emergency_contact2_relationship === 'other' && currentCustomer?.emergency_contact2_relationship_other && ` (${currentCustomer?.emergency_contact2_relationship_other})`}
                      </div>
                    </div>
                  </div>
                  <div className="app-main-content-fields-section">
                    <div className="field-body">
                      <div className="field-label">Emergency Contact Role</div>
                      <div className="field-value">{formatArrayToDisplay(currentCustomer?.emergency_contact2_role, EMERGENCY_CONTACT_ROLE_OPTIONS)}</div>
                    </div>
                  </div>
                </>
              )}

              {/* Schedule Section */}
              <h6 className="text-primary">Schedule</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Days of Week</div>
                  <div className="field-value">{formatArrayToDisplay(currentCustomer?.days_of_week, DAYS_OF_WEEK_OPTIONS)}</div>
                </div>
              </div>

              {/* Admission & Discharge Record Section */}
              <h6 className="text-primary">Admission & Discharge Record</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Admission Date</div>
                  <div className="field-value">{currentCustomer?.admission_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Enrolled Date</div>
                  <div className="field-value">{currentCustomer?.enrolled_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Created By</div>
                  <div className="field-value">{currentCustomer?.create_by}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Referral Source</div>
                  <div className="field-value">
                    {REFERRAL_SOURCE_TEXT[currentCustomer?.referral_source] || currentCustomer?.referral_source}
                    {currentCustomer?.referral_source === 'other' && currentCustomer?.referral_source_other && ` (${currentCustomer?.referral_source_other})`}
                  </div>
                </div>
              </div>
              {/* Only show discharge fields when customer is NOT active */}
              {!isCustomerActive() && (
                <div className="app-main-content-fields-section">
                  <div className="field-body">
                    <div className="field-label">Discharge Date</div>
                    <div className="field-value">{currentCustomer?.discharge_date}</div>
                  </div>
                  <div className="field-body">
                    <div className="field-label">Discharge By</div>
                    <div className="field-value">{currentCustomer?.discharge_by}</div>
                  </div>
                  <div className="field-body">
                    <div className="field-label">Discharge Reason</div>
                    <div className="field-value">
                      {CUSTOMER_DISCHARGE_REASON_TEXT[currentCustomer?.discharge_reason] || currentCustomer?.discharge_reason}
                      {currentCustomer?.discharge_reason === 'other' && currentCustomer?.discharge_reason_other && ` (${currentCustomer?.discharge_reason_other})`}
                    </div>
                  </div>
                </div>
              )}

              <h6 className="text-primary">Additional Information</h6>
              <div className="app-main-content-fields-section base-line" style={{ marginBottom: '24px' }}>
                <div className="field-body">
                  <div className="field-label">Profile Picture</div>
                  {currentAvatar && <img height="100px" width="100px" src={`data:image/png;base64, ${currentAvatar}`}/>}
                </div>
                <div className="field-body">
                  <div className="field-label">Notes And Attachments</div>
                  <div className="field-value">{currentCustomer?.note || currentCustomer?.private_note}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Notes for Driver</div>
                  <div className="field-value">{currentCustomer?.notes_for_driver}</div>
                </div>
              </div>
            </Tab>

            <Tab eventKey="careServices" title="Care & Services">
              <h6 className="text-primary">Care & Services</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Dietary Restrictions</div>
                  <div className="field-value">
                    {formatArrayToDisplay(currentCustomer?.dietary_restrictions, DIETARY_RESTRICTIONS_OPTIONS)}
                    {currentCustomer?.dietary_restrictions?.includes('other') && currentCustomer?.dietary_restrictions_other && ` (${currentCustomer?.dietary_restrictions_other})`}
                  </div>
                </div>
                <div className="field-body">
                  <div className="field-label">Diet Texture</div>
                  <div className="field-value">{DIET_TEXTURE_TEXT[currentCustomer?.diet_texture] || currentCustomer?.diet_texture}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Table Number</div>
                  <div className="field-value">{currentCustomer?.table_id}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Seat Number</div>
                  <div className="field-value">{currentCustomer?.seat_number || currentCustomer?.seating}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Transportation Type</div>
                  <div className="field-value">{TRANSPORTATION_TYPE_TEXT[currentCustomer?.transportation_type] || currentCustomer?.transportation_type}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Consent To Text Messages</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.consent_to_text_messages || currentCustomer?.text_msg_enabled)}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Preferred Text Language</div>
                  <div className="field-value">{PREFERRED_TEXT_LANGUAGE_TEXT[currentCustomer?.preferred_text_language] || currentCustomer?.preferred_text_language}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Consent to Media Use</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.consent_to_media_use)}</div>
                </div>
              </div>
            </Tab>

            <Tab eventKey="medicalInsurance" title="Medical & Insurance">
              {/* Providers Section */}
              <h6 className="text-primary">Providers</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Primary Care Physician</div>
                  <div className="field-value">{currentCustomer?.primary_care_physician || currentCustomer?.care_provider}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Pharmacy Name</div>
                  <div className="field-value">{currentCustomer?.pharmacy}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Pharmacy ID</div>
                  <div className="field-value">{currentCustomer?.pharmacy_id}</div>
                </div>
              </div>

              {/* General Conditions Section */}
              <h6 className="text-primary">General Conditions</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Diabetes Mellitus</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.diabetes_mellitus)}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Eyes-On</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.eyes_on || currentCustomer?.disability)}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Wheelchair</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.wheelchair)}</div>
                </div>
              </div>

              {/* Legal Section */}
              <h6 className="text-primary">Legal</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">MOLST</div>
                  <div className="field-value">{currentCustomer?.molst}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Provisions for Advance Medical</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.provisions_for_advance_medical)}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Hospice</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.hospice)}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Burial Arrangements</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.burial_arrangements)}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Power of Attorney</div>
                  <div className="field-value">{currentCustomer?.power_of_attorney}</div>
                </div>
              </div>

              {/* Rounding Section */}
              <h6 className="text-primary">Rounding</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Requires Rounding</div>
                  <div className="field-value">{formatYesNo(currentCustomer?.requires_rounding)}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Rounding Notes</div>
                  <div className="field-value">{currentCustomer?.rounding_notes}</div>
                </div>
              </div>

              <h6 className="text-primary">Compliance & Deadlines</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Adcaps Completed Date</div>
                  <div className="field-value">{currentCustomer?.adcaps_completed_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Center Qualification Renew Date</div>
                  <div className="field-value">{currentCustomer?.center_qualification_renew_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Medicaid Renew Date</div>
                  <div className="field-value">{currentCustomer?.medicaid_renew_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">ID Expiration Date</div>
                  <div className="field-value">{currentCustomer?.id_expiration_date}</div>
                </div>
              </div>
            </Tab>

            <Tab eventKey="confidentialDetails" title="Confidential Details">
              <h6 className="text-primary">Confidential Details</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Medicare Number</div>
                  <div className="field-value">{currentCustomer?.medicare_number}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Medicaid Number</div>
                  <div className="field-value">{currentCustomer?.medicaid_number}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Social Security Number</div>
                  <div className="field-value">{currentCustomer?.social_security_number}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Adcaps ID</div>
                  <div className="field-value">{currentCustomer?.adcaps_id}</div>
                </div>
              </div>
            </Tab>


            <Tab eventKey="formSubmission" title="Form Submission">
              {/* Admission Forms Section */}
              <h6 className="text-primary">Admission Forms</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Maryland HIPAA Authorization</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.hipaa_authorization_form, 'hipaa_authorization_form')}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Medication Management Consent Form</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.medication_management_consent_form, 'medication_management_consent_form')}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Freedom Of Choice</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.freedom_of_choice_form, 'freedom_of_choice_form')}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Meal Benefit Application</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.meal_benefit_application_form, 'meal_benefit_application_form')}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Photo-Video Release Waiver Form</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.photo_video_release_form, 'photo_video_release_form')}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Security Deposit Payment Agreement</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.security_deposit_agreement_form, 'security_deposit_agreement_form')}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Recreational Program Contract</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.recreational_program_contract_form, 'recreational_program_contract_form')}</div>
                </div>
              </div>

              {/* Medical Forms Section */}
              <h6 className="text-primary">Medical Forms</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">TB Form</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.tb_form, 'tb_form')}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Pre-Screening Form</div>
                  <div className="field-value">{renderFormStatus(currentCustomer?.pre_screening_form, 'pre_screening_form')}</div>
                </div>
              </div>
            </Tab>

          </Tabs>
          <div className="list-func-panel">
            <button className="btn btn-primary me-2" onClick={() => goToEdit(currentCustomer?.id)}><PencilSquare className="me-2" size={16}></PencilSquare>Edit</button>
          </div>
        </div>
      </div>
    </>
  );
};

export default ViewCustomer;