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

const formStyles = StyleSheet.create({
  formSection: {
    marginBottom: 15,
  },
  formRow: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  formLabel: {
    fontSize: 10,
    fontWeight: 'semibold',
    marginBottom: 5,
  },
  formValue: {
    fontSize: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#000',
    paddingBottom: 2,
    minHeight: 14,  
    
  },
  formNumberLabel: {
    fontSize: 10,
     fontWeight: 'semibold',
    marginRight: 8,
    width: 20,
  },
  formField: {
    flex: 1,
  },
  formFieldSmall: {
    width: '30%',
    marginRight: 10,
  },
  formFieldMedium: {
    width: '48%',
    marginRight: 10,
  },
  formFieldLarge: {
    width: '100%',
  },
  checkboxRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  },
  checkbox: {
    width: 10,
    height: 10,
    borderWidth: 1,
    borderColor: '#000',
    marginRight: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkboxChecked: {
    width: 10,
    height: 10,
    borderWidth: 1,
    borderColor: '#000',
    backgroundColor: '#000',
    marginRight: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkboxText: {
    fontSize: 7,
    color: '#fff',
     fontWeight: 'semibold',
  },
  inlineLabel: {
    fontSize: 10,
    marginRight: 5,
    marginBottom: 5,
    fontWeight: 'semibold',
  },
  sectionTitle: {
    fontSize: 11,
     fontWeight: 'semibold',
    marginBottom: 10,
    marginTop: 5,
  },
  tableRow: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  tableCell: {
    flex: 1,
    marginRight: 10,
  },
  signatureImage: {
    maxWidth: 150,
    maxHeight: 50,
    objectFit: 'contain',
  },
});

interface FormFieldProps {
  label: string;
  value: string | number;
  width?: 'small' | 'medium' | 'large';
  layout?: 'horizontal' | 'vertical';
  signatureImage?: string;
  paddingTop?: number;
}

export const PDFFormField = ({ label, value, width = 'large', layout = 'vertical', signatureImage, paddingTop }: FormFieldProps) => {
  const widthStyle = width === 'small' ? formStyles.formFieldSmall :
                     width === 'medium' ? formStyles.formFieldMedium :
                     formStyles.formFieldLarge;

  if (layout === 'horizontal') {
    return (
      <View style={[widthStyle, { flexDirection: 'row', alignItems: 'flex-end' }]}>
        <Text style={formStyles.inlineLabel}>{label}</Text>
        <Text style={formStyles.formValue}>{value || ""}</Text>
      </View>
    );
  }

  return (
    <View style={[widthStyle, paddingTop ? { paddingTop } : {}]}>
      <Text style={formStyles.formLabel}>{label}</Text>
      {signatureImage ? (
        <View style={{ borderBottomWidth: 1, borderBottomColor: '#000', paddingBottom: 2, minHeight: 50 }}>
          <Image src={signatureImage} style={formStyles.signatureImage} />
        </View>
      ) : (
        <Text style={formStyles.formValue}>{value || ""}</Text>
      )}
    </View>
  );
};

interface FormRowProps {
  children: React.ReactNode;
}

export const PDFFormRow = ({ children }: FormRowProps) => (
  <View style={formStyles.formRow}>
    {children}
  </View>
);

interface FormSectionProps {
  number?: string;
  children: React.ReactNode;
}

export const PDFFormSection = ({ number, children }: FormSectionProps) => (
  <View style={formStyles.formSection}>
    <View style={formStyles.formRow}>
      {number && <Text style={formStyles.formNumberLabel}>{number})</Text>}
      <View style={formStyles.formField}>
        {children}
      </View>
    </View>
  </View>
);

interface CheckboxProps {
  label: string;
  checked: boolean;
}

export const PDFCheckbox = ({ label, checked }: CheckboxProps) => (
  <View style={formStyles.checkboxRow}>
    <View style={checked ? formStyles.checkboxChecked : formStyles.checkbox}>
      {checked && <Text style={formStyles.checkboxText}>X</Text>}
    </View>
    <Text style={formStyles.inlineLabel}>{label}</Text>
  </View>
);

interface InlineCheckboxGroupProps {
  label: string;
  options: { label: string; checked: boolean }[];
}

export const PDFInlineCheckboxGroup = ({ label, options }: InlineCheckboxGroupProps) => (
  <View style={formStyles.formRow}>
    <Text style={formStyles.inlineLabel}>{label}</Text>
    {options.map((option, index) => (
      <View key={index} style={{ flexDirection: 'row', alignItems: 'center', marginRight: 10 }}>
        <View style={option.checked ? formStyles.checkboxChecked : formStyles.checkbox}>
          {option.checked && <Text style={formStyles.checkboxText}>X</Text>}
        </View>
        <Text style={formStyles.inlineLabel}>{option.label}</Text>
      </View>
    ))}
  </View>
);

interface HouseholdMemberRowProps {
  name: string;
  age: string | number;
  relation?: string;
}

export const PDFHouseholdMemberRow = ({ name, age, relation }: HouseholdMemberRowProps) => (
  <View style={formStyles.tableRow}>
    <View style={{ flex: 3 }}>
      <Text style={[formStyles.inlineLabel, { fontSize: 8 }]}>Name</Text>
      <Text style={formStyles.formValue}>{name || '______________________________'}</Text>
    </View>
    <View style={{ flex: 2, marginLeft: 8 }}>
      <Text style={[formStyles.inlineLabel, { fontSize: 8 }]}>Relation</Text>
      <Text style={formStyles.formValue}>{relation || '________________'}</Text>
    </View>
    <View style={{ width: 45, marginLeft: 8 }}>
      <Text style={[formStyles.inlineLabel, { fontSize: 8 }]}>Age</Text>
      <Text style={formStyles.formValue}>{age || '_____'}</Text>
    </View>
  </View>
);

interface LiabilityRowProps {
  payee: string;
  amount: string | number;
}

export const PDFLiabilityRow = ({ payee, amount }: LiabilityRowProps) => (
  <View style={formStyles.tableRow}>
    <View style={formStyles.tableCell}>
      <Text style={formStyles.inlineLabel}>Payee:</Text>
      <Text style={formStyles.formValue}>{payee || '_________________'}</Text>
    </View>
    <View style={formStyles.tableCell}>
      <Text style={formStyles.inlineLabel}>Amount:</Text>
      <Text style={formStyles.formValue}>{amount || '_________________'}</Text>
    </View>
  </View>
);

interface CheckboxGridProps {
  items: { label: string; checked: boolean }[];
  columns?: number;
}

export const PDFCheckboxGrid = ({ items, columns = 3 }: CheckboxGridProps) => {
  const rows: { label: string; checked: boolean }[][] = [];
  for (let i = 0; i < items.length; i += columns) {
    rows.push(items.slice(i, i + columns));
  }
  return (
    <View>
      {rows.map((row, rowIdx) => (
        <View key={rowIdx} style={{ flexDirection: 'row', marginBottom: 5 }}>
          {row.map((item, colIdx) => (
            <View key={colIdx} style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
              <View style={item.checked ? formStyles.checkboxChecked : formStyles.checkbox}>
                {item.checked && <Text style={formStyles.checkboxText}>X</Text>}
              </View>
              <Text style={{ fontSize: 10, marginLeft: 4, flex: 1 }}>{item.label}</Text>
            </View>
          ))}
        </View>
      ))}
    </View>
  );
};

export const PDFFormSectionTitle = ({ title }: { title: string }) => (
  <Text style={formStyles.sectionTitle}>{title}</Text>
);