// src/pages/admin/components/AddressForm.tsx
import React from 'react';
import { Address } from '../../../types';
import { MapPinIcon } from 'lucide-react';
import { LoadingSpinner } from '../../../components/LoadingSpinner';

interface AddressFormProps {
  address: Partial<Address>;
  onAddressChange: (field: keyof Address, value: string) => void;
  onGeocode: () => void;
  isGeocoding: boolean;
}

export const AddressForm: React.FC<AddressFormProps> = ({ address, onAddressChange, onGeocode, isGeocoding }) => {
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    onAddressChange(name as keyof Address, value);
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-medium text-gray-900 dark:text-white">Home Address</h3>
        {isGeocoding && (
          <div className="w-4 h-4 text-brand-primary"><LoadingSpinner /></div>
        )}
        <button type="button" onClick={onGeocode} disabled={isGeocoding} className="text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-1 px-3 rounded-lg flex items-center disabled:opacity-50">
          {isGeocoding ? <LoadingSpinner /> : <MapPinIcon className="w-4 h-4 mr-2" />}
          Re-Geocode
        </button>
      </div>
      <div>
        <label htmlFor="address_line_1" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Address Line 1</label>
        <input
          type="text"
          name="address_line_1"
          id="address_line_1"
          value={address.address_line_1 || ''}
          onChange={handleInputChange}
          className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
        />
      </div>
      <div>
        <label htmlFor="address_line_2" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Address Line 2</label>
        <input
          type="text"
          name="address_line_2"
          id="address_line_2"
          value={address.address_line_2 || ''}
          onChange={handleInputChange}
          className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
        />
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="city" className="block text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
          <input type="text" name="city" id="city" value={address.city || ''} onChange={handleInputChange} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm" />
        </div>
        <div>
          <label htmlFor="province_state" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Province / State</label>
          <input type="text" name="province_state" id="province_state" value={address.province_state || ''} onChange={handleInputChange} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm" />
        </div>
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="postal_code" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Postal / ZIP Code</label>
          <input type="text" name="postal_code" id="postal_code" value={address.postal_code || ''} onChange={handleInputChange} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm" />
        </div>
        <div>
          <label htmlFor="country" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
          <input type="text" name="country" id="country" value={address.country || ''} onChange={handleInputChange} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm" />
        </div>
      </div>
    </div>
  );
};