/**
 * AddressFields - Reusable address form fields
 *
 * Used by: SupplierWizard, CustomerWizard, CustomerOrderWizard
 */

import React from 'react';
import { useTranslation } from 'react-i18next';

interface AddressFieldsProps {
  data: {
    address?: string;
    city?: string;
    state?: string;
    postalCode?: string;
    country?: string;
  };
  onFieldChange: (field: string, value: string) => void;
  required?: {
    address?: boolean;
    city?: boolean;
    state?: boolean;
    postalCode?: boolean;
    country?: boolean;
  };
  labels?: {
    address?: string;
    city?: string;
    state?: string;
    postalCode?: string;
    country?: string;
  };
  fieldPrefix?: string; // For delivery addresses: 'delivery'
}

export const AddressFields: React.FC<AddressFieldsProps> = ({
  data,
  onFieldChange,
  required = {},
  labels = {},
  fieldPrefix = '',
}) => {
  const { t } = useTranslation('wizards');

  const getFieldName = (field: string) => {
    return fieldPrefix ? `${fieldPrefix}${field.charAt(0).toUpperCase()}${field.slice(1)}` : field;
  };

  return (
    <div className="space-y-4">
      {/* Address */}
      <div>
        <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
          {labels.address || t('common.fields.address')}
          {required.address && ' *'}
        </label>
        <input
          type="text"
          value={data.address || ''}
          onChange={(e) => onFieldChange(getFieldName('address'), e.target.value)}
          placeholder={t('common.fields.addressPlaceholder')}
          className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
        />
      </div>

      {/* City and State */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            {labels.city || t('common.fields.city')}
            {required.city && ' *'}
          </label>
          <input
            type="text"
            value={data.city || ''}
            onChange={(e) => onFieldChange(getFieldName('city'), e.target.value)}
            placeholder={t('common.fields.cityPlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            {labels.state || t('common.fields.state')}
            {required.state && ' *'}
          </label>
          <input
            type="text"
            value={data.state || ''}
            onChange={(e) => onFieldChange(getFieldName('state'), e.target.value)}
            placeholder={t('common.fields.statePlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
      </div>

      {/* Postal Code and Country */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            {labels.postalCode || t('common.fields.postalCode')}
            {required.postalCode && ' *'}
          </label>
          <input
            type="text"
            value={data.postalCode || ''}
            onChange={(e) => onFieldChange(getFieldName('postalCode'), e.target.value)}
            placeholder={t('common.fields.postalCodePlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            {labels.country || t('common.fields.country')}
            {required.country && ' *'}
          </label>
          <input
            type="text"
            value={data.country || ''}
            onChange={(e) => onFieldChange(getFieldName('country'), e.target.value)}
            placeholder={t('common.fields.countryPlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
      </div>
    </div>
  );
};
