bakery-ia/frontend/src/components/domain/onboarding/steps/RegisterTenantStep.tsx

import React, { useState, useCallback, useEffect } from 'react';
import { Button } from '../../../ui/Button';
import { Input } from '../../../ui/Input';
import { useRegisterBakery } from '../../../../api/hooks/tenant';
import { BakeryRegistration } from '../../../../api/types/tenant';
import { nominatimService, NominatimResult } from '../../../../api/services/nominatim';
import { debounce } from 'lodash';

interface RegisterTenantStepProps {
  onNext: () => void;
  onPrevious: () => void;
  onComplete: (data?: any) => void;
  isFirstStep: boolean;
  isLastStep: boolean;
}

export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
  onComplete,
  isFirstStep
}) => {
  const [formData, setFormData] = useState<BakeryRegistration>({
    name: '',
    address: '',
    postal_code: '',
    phone: '',
    city: 'Madrid',
    business_type: 'bakery',
    business_model: 'individual_bakery'
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [addressSuggestions, setAddressSuggestions] = useState<NominatimResult[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [isSearching, setIsSearching] = useState(false);
  const registerBakery = useRegisterBakery();

  // Debounced address search
  const searchAddress = useCallback(
    debounce(async (query: string) => {
      if (query.length < 3) {
        setAddressSuggestions([]);
        return;
      }

      setIsSearching(true);
      try {
        const results = await nominatimService.searchAddress(query);
        setAddressSuggestions(results);
        setShowSuggestions(true);
      } catch (error) {
        console.error('Address search failed:', error);
      } finally {
        setIsSearching(false);
      }
    }, 500),
    []
  );

  // Cleanup debounce on unmount
  useEffect(() => {
    return () => {
      searchAddress.cancel();
    };
  }, [searchAddress]);

  const handleInputChange = (field: keyof BakeryRegistration, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));

    // Trigger address search when address field changes
    if (field === 'address') {
      searchAddress(value);
    }

    if (errors[field]) {
      setErrors(prev => ({
        ...prev,
        [field]: ''
      }));
    }
  };

  const handleAddressSelect = (result: NominatimResult) => {
    const parsed = nominatimService.parseAddress(result);

    setFormData(prev => ({
      ...prev,
      address: parsed.street,
      city: parsed.city,
      postal_code: parsed.postalCode,
    }));

    setShowSuggestions(false);
    setAddressSuggestions([]);
  };

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    // Required fields according to backend BakeryRegistration schema
    if (!formData.name.trim()) {
      newErrors.name = 'El nombre de la panadería es obligatorio';
    } else if (formData.name.length < 2 || formData.name.length > 200) {
      newErrors.name = 'El nombre debe tener entre 2 y 200 caracteres';
    }

    if (!formData.address.trim()) {
      newErrors.address = 'La dirección es obligatoria';
    } else if (formData.address.length < 10 || formData.address.length > 500) {
      newErrors.address = 'La dirección debe tener entre 10 y 500 caracteres';
    }

    if (!formData.postal_code.trim()) {
      newErrors.postal_code = 'El código postal es obligatorio';
    } else if (!/^\d{5}$/.test(formData.postal_code)) {
      newErrors.postal_code = 'El código postal debe tener exactamente 5 dígitos';
    }

    if (!formData.phone.trim()) {
      newErrors.phone = 'El número de teléfono es obligatorio';
    } else if (formData.phone.length < 9 || formData.phone.length > 20) {
      newErrors.phone = 'El teléfono debe tener entre 9 y 20 caracteres';
    } else {
      // Basic Spanish phone validation
      const phone = formData.phone.replace(/[\s\-\(\)]/g, '');
      const patterns = [
        /^(\+34|0034|34)?[6789]\d{8}$/, // Mobile
        /^(\+34|0034|34)?9\d{8}$/       // Landline
      ];
      if (!patterns.some(pattern => pattern.test(phone))) {
        newErrors.phone = 'Introduce un número de teléfono español válido';
      }
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async () => {
    if (!validateForm()) {
      return;
    }

    try {
      const tenant = await registerBakery.mutateAsync(formData);
      onComplete({ tenant });
    } catch (error) {
      console.error('Error registering bakery:', error);
      setErrors({ submit: 'Error al registrar la panadería. Por favor, inténtalo de nuevo.' });
    }
  };

  return (
    <div className="space-y-4 md:space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
        <Input
          label="Nombre de la Panadería"
          placeholder="Ingresa el nombre de tu panadería"
          value={formData.name}
          onChange={(e) => handleInputChange('name', e.target.value)}
          error={errors.name}
          isRequired
        />

        <Input
          label="Teléfono"
          type="tel"
          placeholder="+34 123 456 789"
          value={formData.phone}
          onChange={(e) => handleInputChange('phone', e.target.value)}
          error={errors.phone}
          isRequired
        />

        <div className="md:col-span-2 relative">
          <Input
            label="Dirección"
            placeholder="Calle Principal 123, Madrid"
            value={formData.address}
            onChange={(e) => handleInputChange('address', e.target.value)}
            onFocus={() => {
              if (addressSuggestions.length > 0) {
                setShowSuggestions(true);
              }
            }}
            onBlur={() => {
              setTimeout(() => setShowSuggestions(false), 200);
            }}
            error={errors.address}
            isRequired
          />
          {isSearching && (
            <div className="absolute right-3 top-10 text-gray-400">
              Buscando...
            </div>
          )}
          {showSuggestions && addressSuggestions.length > 0 && (
            <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
              {addressSuggestions.map((result) => (
                <div
                  key={result.place_id}
                  className="px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0"
                  onClick={() => handleAddressSelect(result)}
                >
                  <div className="text-sm font-medium text-gray-900">
                    {nominatimService.formatAddress(result)}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <Input
          label="Código Postal"
          placeholder="28001"
          value={formData.postal_code}
          onChange={(e) => handleInputChange('postal_code', e.target.value)}
          error={errors.postal_code}
          isRequired
          maxLength={5}
        />

        <Input
          label="Ciudad (Opcional)"
          placeholder="Madrid"
          value={formData.city}
          onChange={(e) => handleInputChange('city', e.target.value)}
          error={errors.city}
        />
      </div>

      {errors.submit && (
        <div className="text-[var(--color-error)] text-sm bg-[var(--color-error)]/10 p-3 rounded-lg">
          {errors.submit}
        </div>
      )}

      <div className="flex justify-end">
        <Button
          onClick={handleSubmit}
          isLoading={registerBakery.isPending}
          loadingText="Registrando..."
          size="lg"
        >
          Crear Panadería y Continuar
        </Button>
      </div>
    </div>
  );
};