import { View, Text, StyleSheet, Image } from "@react-pdf/renderer";
import { pdfStyles } from "./PDFStyles";

interface TenantMaintenancePDFProps {
  formData: any;
}

const styles = StyleSheet.create({
  header: {
    textAlign: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 16,
     fontWeight: 'semibold',
    marginBottom: 5,
  },
  subtitle: {
    fontSize: 10,
    marginBottom: 15,
  },
  box: {
    border: '1px solid #000',
    padding: 10,
    marginBottom: 15,
  },
  boxTitle: {
    fontSize: 12,
     fontWeight: 'semibold',
    marginBottom: 10,
  },
  field: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  label: {
    fontSize: 10,
    width: '40%',
  },
  underline: {
    borderBottom: '1px solid #000',
    flex: 1,
    fontSize: 10,
    paddingBottom: 2,
  },
  
  checkbox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  },
  checkboxSquare: {
    width: 10,
    height: 10,
    border: '1px solid #000',
    marginRight: 5,
  },
  checkboxChecked: {
    backgroundColor: '#000',
  },
  checkboxLabel: {
    fontSize: 10,
  },
  signatureImage: {
    width: 200,
    height: 60,
    marginTop: 5,
    marginBottom: 5,
  },
});

export const TenantMaintenancePDFContent = ({ formData }: TenantMaintenancePDFProps) => {
  const data = formData.tenantMaintenance || formData;
  
  return (
    <>
      <View style={styles.header}>
        <Text style={styles.title}>Lackawanna Housing Development Corporation (LHDC)</Text>
        <Text style={styles.title}>Rental Maintenance Request Form</Text>
        <Text style={styles.subtitle}>For LHDC Tenants Only – Please Complete All Applicable Sections</Text>
      </View>

      <View style={styles.box}>
        <Text style={styles.boxTitle}>Tenant Information</Text>
        <View style={styles.field}>
          <Text style={styles.label}>Name:</Text>
          <Text style={styles.underline}>{formData.applicant_name || formData.applicantName || ''}</Text>
        </View>
        <View style={styles.field}>
          <Text style={styles.label}>Phone Number:</Text>
          <Text style={styles.underline}>{formData.applicant_cellphone || formData.phoneCell || ''}</Text>
        </View>
        <View style={styles.field}>
          <Text style={styles.label}>Email Address:</Text>
          <Text style={styles.underline}>{formData.applicant_email || formData.email || ''}</Text>
        </View>
        <View style={styles.field}>
          <Text style={styles.label}>Property Address:</Text>
          <Text style={styles.underline}>{formData.applicant_address || formData.applicantProperty || ''}</Text>
        </View>
      </View>

      <View style={styles.box}>
        <Text style={styles.boxTitle}>Access Permission</Text>
        <Text style={[styles.checkboxLabel, { marginBottom: 8 }]}>To complete repairs, LHDC may need access to your unit.</Text>
        <Text style={[styles.checkboxLabel, { marginBottom: 5 }]}>Please select one:</Text>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.authorize_maintenance || data.authorizeMaintenance) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>I authorize maintenance staff to enter my unit when I am not home.</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.contact_to_schedule || data.contactToSchedule) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Please contact me to schedule an appointment.</Text>
        </View>
        <View style={{ flexDirection: 'row', marginTop: 8 }}>
          <Text style={styles.checkboxLabel}>Preferred contact method:</Text>
          <View style={[styles.checkbox, { marginLeft: 10, marginBottom: 0 }]}>
            <View style={[styles.checkboxSquare, (data.preferred_phone || data.preferredPhone) && styles.checkboxChecked]} />
            <Text style={styles.checkboxLabel}>Phone</Text>
          </View>
          <View style={[styles.checkbox, { marginLeft: 10, marginBottom: 0 }]}>
            <View style={[styles.checkboxSquare, (data.preferred_text || data.preferredText) && styles.checkboxChecked]} />
            <Text style={styles.checkboxLabel}>Text</Text>
          </View>
          <View style={[styles.checkbox, { marginLeft: 10, marginBottom: 0 }]}>
            <View style={[styles.checkboxSquare, (data.preferred_email || data.preferredEmail) && styles.checkboxChecked]} />
            <Text style={styles.checkboxLabel}>Email</Text>
          </View>
        </View>
      </View>

      <View style={styles.box}>
        <Text style={styles.boxTitle}>Maintenance Issue Details</Text>
        <Text style={[styles.checkboxLabel, { marginBottom: 5 }]}>Type of Issue (check all that apply):</Text>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_heating_cooling || data.maintenanceHeatingCooling) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Heating / Cooling{(data.maintenance_heating_cooling_text || data.maintenanceHeatingCoolingText) ? ` - ${data.maintenance_heating_cooling_text || data.maintenanceHeatingCoolingText}` : ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_plumbing || data.maintenancePlumbing) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Plumbing (sinks, toilets, leaks){(data.maintenance_plumbing_text || data.maintenancePlumbingText) ? ` - ${data.maintenance_plumbing_text || data.maintenancePlumbingText}` : ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_electrical || data.maintenanceElectrical) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Electrical{(data.maintenance_electrical_text || data.maintenanceElectricalText) ? ` - ${data.maintenance_electrical_text || data.maintenanceElectricalText}` : ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_appliances || data.maintenanceAppliances) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Appliances{(data.maintenance_appliances_text || data.maintenanceAppliancesText) ? ` - ${data.maintenance_appliances_text || data.maintenanceAppliancesText}` : ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_doors_windows || data.maintenanceDoorsWindows) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Doors / Windows{(data.maintenance_doors_windows_text || data.maintenanceDoorsWindowsText) ? ` - ${data.maintenance_doors_windows_text || data.maintenanceDoorsWindowsText}` : ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_flooring_walls || data.maintenanceFlooringWalls) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Flooring / Walls{(data.maintenance_flooring_walls_text || data.maintenanceFlooringWallsText) ? ` - ${data.maintenance_flooring_walls_text || data.maintenanceFlooringWallsText}` : ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_pest || data.maintenancePest) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Pest Concerns{(data.maintenance_pest_text || data.maintenancePestText) ? ` - ${data.maintenance_pest_text || data.maintenancePestText}` : ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.maintenance_safety || data.maintenanceSafety) && styles.checkboxChecked]} />
          <Text style={styles.checkboxLabel}>Safety Issue{(data.maintenance_safety_text || data.maintenanceSafetyText) ? ` - ${data.maintenance_safety_text || data.maintenanceSafetyText}` : ''}</Text>
        </View>
        <View style={styles.field} break>
          <View style={[styles.checkboxSquare, { marginRight: 5 }]} />
          <Text style={styles.checkboxLabel}>Other:</Text>
          <Text style={[styles.underline, { marginLeft: 5 }]}>{data.maintenance_other_text || data.maintenanceOtherText || ''}</Text>
        </View>

        <Text style={[styles.checkboxLabel, { marginTop: 10, marginBottom: 5 }]}>Describe the Issue:</Text>
        <Text style={[styles.checkboxLabel, { fontSize: 8, marginBottom: 5 }]}>(Please provide as much detail as possible, including location in the unit.)</Text>
        <View>
          <Text>{data.maintenance_description || data.maintenanceDescription || ''}</Text>
        </View>

        <View style={[styles.field, { marginTop: 10 }]}>
          <Text style={styles.label}>When did this issue begin?</Text>
          <Text style={styles.underline}>{data.issue_start_time || data.issueStartTime || ''}</Text>
        </View>

        <Text style={[styles.checkboxLabel, { marginTop: 10, marginBottom: 5 }]}>Is this an urgent/emergency issue? (e.g., no heat, active leak, sewer backup)</Text>
        <View style={styles.checkbox}>
        <View style={[styles.checkboxSquare, (data.is_urgent === true || data.isUrgent === 'yes') ? styles.checkboxChecked : {}]} />
          <Text style={styles.checkboxLabel}>Yes</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, (data.is_urgent === false || data.isUrgent === 'no') ? styles.checkboxChecked : {}]} />
          <Text style={styles.checkboxLabel}>No</Text>
        </View>
      </View>

      <View style={styles.box}>
        <Text style={styles.boxTitle}>Photos (Optional but Helpful)</Text>
        <Text style={styles.checkboxLabel}>If possible, attach or send photos to help maintenance diagnose the issue.</Text>
        {formData.photos && formData.photos.length > 0 && (
          <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginTop: 8, gap: 6 }}>
            {formData.photos.map((photo: any, index: number) => (
              <Image
                key={index}
                src={photo.file_url}
                style={{ width: 120, height: 90, objectFit: 'cover', marginRight: 6, marginBottom: 6 }}
              />
            ))}
          </View>
        )}
      </View>

      <View style={styles.box}>
        <Text style={styles.boxTitle}>Pets in Unit</Text>
        <Text style={[styles.checkboxLabel, { marginBottom: 5 }]}>Do you have pets that staff should be aware of?</Text>
        <View style={styles.field}>
          <View style={[styles.checkboxSquare, ...(data.pets_in_unit === true || data.petsInUnit === 'yes' ? [styles.checkboxChecked] : []), { marginRight: 5 }]} />
          <Text style={styles.checkboxLabel}>Yes – Type:</Text>
          <Text style={[styles.underline, { marginLeft: 5 }]}>{data.pet_type || data.petType || ''}</Text>
        </View>
        <View style={styles.checkbox}>
          <View style={[styles.checkboxSquare, ...(data.pets_in_unit === false || data.petsInUnit === 'no' ? [styles.checkboxChecked] : [])]} />
          <Text style={styles.checkboxLabel}>No</Text>
        </View>
      </View>

      <View style={styles.box} break>
        <Text style={styles.boxTitle}>Acknowledgment</Text>
        <Text style={[styles.checkboxLabel, { marginBottom: 10 }]}>
          By submitting this request, I certify that the above information is accurate and that I will provide reasonable access for maintenance to inspect and complete repairs.
        </Text>
        <View style={styles.field}>
          <Text style={styles.label}>Date:</Text>
          <Text style={styles.underline}>{(data.tenant_signature_datetime || data.tenantSignatureDateTime) ? new Date(data.tenant_signature_datetime || data.tenantSignatureDateTime).toLocaleDateString() : ''}</Text>
        </View>
        <View style={styles.field}>
          <Text style={styles.label}>Tenant Name:</Text>
          <Text style={styles.underline}>{data.signer_legal_name || data.signerLegalName || ''}</Text>
        </View>
        <View style={styles.field}>
          <Text style={styles.label}>Tenant Signature:</Text>
           {(data.tenant_signature || data.tenantSignature) && (
          <View style={{ marginTop: 5, marginBottom: 5 }}>
            <Image src={data.tenant_signature || data.tenantSignature} style={styles.signatureImage} />
          </View>
        )}
          
        </View>
       
        
      </View>
      
    </>
  );
};