import React from 'react';
import { FormSection } from '../../../components/forms/FormSection';
import { FormField } from '../../../components/forms/FormField';
import { SelectField } from '../../../components/forms/SelectField';

const usStates = [
  'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA',
  'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
  'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT',
  'VA', 'WA', 'WV', 'WI', 'WY',
];

const caProvinces = ['AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'NT', 'NU', 'ON', 'PE', 'QC', 'SK', 'YT'];

const countries = [
  { value: 'US', label: 'United States' },
  { value: 'CA', label: 'Canada' },
];

interface BusinessAddressStepProps {
  data: any;
  errors: Record<string, string>;
  onChange: (data: any) => void;
}

export function BusinessAddressStep({ data, errors, onChange }: BusinessAddressStepProps) {
  const regions = data.isoCountry === 'CA' ? caProvinces : usStates;

  return (
    <div>
      <FormSection
        title="Business Address"
        description="Physical location of your business"
      >
        <FormField
          label="Customer Name"
          name="customerName"
          value={data.customerName}
          onChange={(v) => onChange({ customerName: v })}
          helpText="Name associated with this address"
          error={errors.customerName}
          required
        />

        <FormField
          label="Street Address"
          name="street"
          value={data.street}
          onChange={(v) => onChange({ street: v })}
          placeholder="123 Main Street"
          error={errors.street}
          required
        />

        <FormField
          label="Street Address Line 2"
          name="streetSecondary"
          value={data.streetSecondary}
          onChange={(v) => onChange({ streetSecondary: v })}
          placeholder="Suite 100 (optional)"
        />

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--spacing-4)' }}>
          <FormField
            label="City"
            name="city"
            value={data.city}
            onChange={(v) => onChange({ city: v })}
            error={errors.city}
            required
          />

          <SelectField
            label={data.isoCountry === 'CA' ? 'Province' : 'State'}
            name="region"
            value={data.region}
            onChange={(v) => onChange({ region: v })}
            options={regions}
            error={errors.region}
            required
          />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-4)' }}>
          <FormField
            label="Postal Code"
            name="postalCode"
            value={data.postalCode}
            onChange={(v) => onChange({ postalCode: v })}
            placeholder={data.isoCountry === 'CA' ? 'A1A 1A1' : '12345'}
            error={errors.postalCode}
            required
          />

          <SelectField
            label="Country"
            name="isoCountry"
            value={data.isoCountry}
            onChange={(v) => onChange({ isoCountry: v, region: '' })}
            options={countries}
            required
          />
        </div>
      </FormSection>
    </div>
  );
}