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

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Input } from '../../../ui';
import { AddressAutocomplete } from '../../../ui/AddressAutocomplete';
import { useRegisterBakery, useTenant, useUpdateTenant } from '../../../../api/hooks/tenant';
import { BakeryRegistration, TenantUpdate } from '../../../../api/types/tenant';
import { AddressResult } from '../../../../services/api/geocodingApi';
import { useWizardContext } from '../context';
import { poiContextApi } from '../../../../services/api/poiContextApi';

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

// Map bakeryType to business_model
const getBakeryBusinessModel = (bakeryType: string | null): string => {
  switch (bakeryType) {
    case 'production':
      return 'central_baker_satellite'; // Production-focused bakery
    case 'retail':
      return 'retail_bakery'; // Retail/finishing bakery
    case 'mixed':
      return 'hybrid_bakery'; // Mixed model (enterprise or hybrid)
    default:
      return 'individual_bakery'; // Default fallback
  }
};

export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
  onComplete,
  isFirstStep
}) => {
  const { t } = useTranslation();
  const wizardContext = useWizardContext();
  const tenantId = wizardContext.state.tenantId;

  // Check if user is enterprise tier for conditional labels
  const subscriptionTier = localStorage.getItem('subscription_tier');
  const isEnterprise = subscriptionTier === 'enterprise';

  // Get business_model from wizard context's bakeryType
  const businessModel = getBakeryBusinessModel(wizardContext.state.bakeryType);

  const [formData, setFormData] = useState<BakeryRegistration>({
    name: '',
    address: '',
    postal_code: '',
    phone: '',
    city: 'Madrid',
    business_type: 'bakery',
    business_model: businessModel
  });

  // Fetch existing tenant data if we have a tenantId (persistence)
  const { data: existingTenant, isLoading: isLoadingTenant } = useTenant(tenantId || '');

  // Update formData when existing tenant data is fetched
  useEffect(() => {
    if (existingTenant) {
      console.log('🔄 Populating RegisterTenantStep with existing data:', existingTenant);
      setFormData({
        name: existingTenant.name,
        address: existingTenant.address,
        postal_code: existingTenant.postal_code,
        phone: existingTenant.phone || '',
        city: existingTenant.city,
        business_type: existingTenant.business_type,
        business_model: existingTenant.business_model || businessModel
      });

      // Update location in context if available from tenant
      // Note: Backend might not store lat/lon directly in Tenant table in all versions,
      // but if we had them or if we want to re-trigger geocoding, we'd handle it here.
    }
  }, [existingTenant, businessModel]);

  // Update business_model when bakeryType changes in context
  useEffect(() => {
    const newBusinessModel = getBakeryBusinessModel(wizardContext.state.bakeryType);
    if (newBusinessModel !== formData.business_model) {
      setFormData(prev => ({
        ...prev,
        business_model: newBusinessModel
      }));
    }
  }, [wizardContext.state.bakeryType, formData.business_model]);

  const [errors, setErrors] = useState<Record<string, string>>({});
  const registerBakery = useRegisterBakery();
  const updateTenant = useUpdateTenant();

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

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

  const handleAddressSelect = (address: AddressResult) => {
    setFormData(prev => ({
      ...prev,
      address: address.display_name,
      city: address.address.city || address.address.municipality || address.address.suburb || prev.city,
      postal_code: address.address.postcode || prev.postal_code,
    }));
  };

  const handleCoordinatesChange = (lat: number, lon: number) => {
    // Store coordinates in the wizard context immediately
    // This allows the POI detection step to access location information when it's available
    wizardContext.updateLocation({ latitude: lat, longitude: lon });
    console.log('Coordinates captured and stored:', { latitude: lat, longitude: lon });
  };

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

    // Required fields according to backend BakeryRegistration schema
    if (!formData.name.trim()) {
      newErrors.name = t('onboarding:steps.tenant_registration.validation.name_required');
    } else if (formData.name.length < 2 || formData.name.length > 200) {
      newErrors.name = t('onboarding:steps.tenant_registration.validation.name_length');
    }

    if (!formData.address.trim()) {
      newErrors.address = t('onboarding:steps.tenant_registration.validation.address_required');
    } else if (formData.address.length < 10 || formData.address.length > 500) {
      newErrors.address = t('onboarding:steps.tenant_registration.validation.address_length');
    }

    if (!formData.postal_code.trim()) {
      newErrors.postal_code = t('onboarding:steps.tenant_registration.validation.postal_code_required');
    } else if (!/^\d{5}$/.test(formData.postal_code)) {
      newErrors.postal_code = t('onboarding:steps.tenant_registration.validation.postal_code_format');
    }

    if (!formData.phone.trim()) {
      newErrors.phone = t('onboarding:steps.tenant_registration.validation.phone_required');
    } else if (formData.phone.length < 9 || formData.phone.length > 20) {
      newErrors.phone = t('onboarding:steps.tenant_registration.validation.phone_length');
    } 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 = t('onboarding:steps.tenant_registration.validation.phone_format');
      }
    }

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

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

    console.log('📝 Submitting tenant data:', {
      isUpdate: !!tenantId,
      bakeryType: wizardContext.state.bakeryType,
      business_model: formData.business_model,
      formData
    });

    try {
      let tenant;
      if (tenantId) {
        // Update existing tenant
        const updateData: TenantUpdate = {
          name: formData.name,
          address: formData.address,
          phone: formData.phone,
          business_type: formData.business_type,
          business_model: formData.business_model
        };
        tenant = await updateTenant.mutateAsync({ tenantId, updateData });
        console.log('✅ Tenant updated successfully:', tenant.id);
      } else {
        // Create new tenant
        tenant = await registerBakery.mutateAsync(formData);
        console.log('✅ Tenant registered successfully:', tenant.id);
      }

      // Trigger POI detection in the background (non-blocking)
      // This replaces the removed POI Detection step
      const bakeryLocation = wizardContext.state.bakeryLocation;
      if (bakeryLocation?.latitude && bakeryLocation?.longitude && tenant.id) {
        // Run POI detection asynchronously without blocking the wizard flow
        poiContextApi.detectPOIs(
          tenant.id,
          bakeryLocation.latitude,
          bakeryLocation.longitude,
          false // use_cache = false for initial detection
        ).then((result) => {
          console.log(`✅ POI detection completed automatically for tenant ${tenant.id}:`, result.summary);

          // Phase 3: Handle calendar suggestion if available
          if (result.calendar_suggestion) {
            const suggestion = result.calendar_suggestion;
            console.log(`📊 Calendar suggestion available:`, {
              calendar: suggestion.calendar_name,
              confidence: `${suggestion.confidence_percentage}%`,
              should_auto_assign: suggestion.should_auto_assign
            });

            // Store suggestion in wizard context for later use
            // Frontend can show this in settings or a notification later
            if (suggestion.confidence_percentage >= 75) {
              console.log(`✅ High confidence suggestion: ${suggestion.calendar_name} (${suggestion.confidence_percentage}%)`);
              // TODO: Show notification to admin about high-confidence suggestion
            } else {
              console.log(`📋 Lower confidence suggestion: ${suggestion.calendar_name} (${suggestion.confidence_percentage}%)`);
              // TODO: Store for later review in settings
            }
          }
        }).catch((error) => {
          console.warn('⚠️  Background POI detection failed (non-blocking):', error);
          // This is non-critical, so we don't block the user
        });
      }

      // Update the wizard context with tenant info
      onComplete({
        tenant,
        tenantId: tenant.id,
        bakeryLocation: wizardContext.state.bakeryLocation
      });
    } catch (error) {
      console.error('Error registering bakery:', error);
      setErrors({ submit: t('onboarding:steps.tenant_registration.errors.register') });
    }
  };

  return (
    <div className="space-y-6 md:space-y-8">
      {/* Informational header */}
      <div className="bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 border-l-4 border-[var(--color-primary)] rounded-lg p-4 md:p-5">
        <div className="flex items-start gap-3">
          <div className="text-2xl flex-shrink-0">{isEnterprise ? '🏭' : '🏪'}</div>
          <div>
            <h3 className="font-semibold text-[var(--text-primary)] mb-1">
              {t(isEnterprise
                ? 'onboarding:steps.tenant_registration.header.title_enterprise'
                : 'onboarding:steps.tenant_registration.header.title'
              )}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {t(isEnterprise
                ? 'onboarding:steps.tenant_registration.header.description_enterprise'
                : 'onboarding:steps.tenant_registration.header.description'
              )}
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
        <div className="transform transition-all duration-200 hover:scale-[1.01]">
          <Input
            label={t(isEnterprise
              ? 'onboarding:steps.tenant_registration.fields.business_name_enterprise'
              : 'onboarding:steps.tenant_registration.fields.business_name'
            )}
            placeholder={t(isEnterprise
              ? 'onboarding:steps.tenant_registration.placeholders.business_name_enterprise'
              : 'onboarding:steps.tenant_registration.placeholders.business_name'
            )}
            value={formData.name}
            onChange={(e) => handleInputChange('name', e.target.value)}
            error={errors.name}
            isRequired
          />
        </div>

        <div className="transform transition-all duration-200 hover:scale-[1.01]">
          <Input
            label={t('onboarding:steps.tenant_registration.fields.phone')}
            type="tel"
            placeholder={t('onboarding:steps.tenant_registration.placeholders.phone')}
            value={formData.phone}
            onChange={(e) => handleInputChange('phone', e.target.value)}
            error={errors.phone}
            isRequired
          />
        </div>

        <div className="md:col-span-2 transform transition-all duration-200 hover:scale-[1.01] relative z-20">
          <label className="block text-sm font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
            <span className="text-lg">📍</span>
            {t('onboarding:steps.tenant_registration.fields.address')} <span className="text-red-500">*</span>
          </label>
          <AddressAutocomplete
            value={formData.address}
            placeholder={t(isEnterprise
              ? 'onboarding:steps.tenant_registration.placeholders.address_enterprise'
              : 'onboarding:steps.tenant_registration.placeholders.address'
            )}
            onAddressSelect={(address) => {
              console.log('Selected:', address.display_name);
              handleAddressSelect(address);
            }}
            onCoordinatesChange={handleCoordinatesChange}
            countryCode="es"
            required
          />
          {errors.address && (
            <div className="mt-2 text-sm text-red-600 flex items-center gap-1.5 animate-shake">
              <span>⚠️</span>
              {errors.address}
            </div>
          )}
        </div>

        <div className="transform transition-all duration-200 hover:scale-[1.01]">
          <Input
            label={t('onboarding:steps.tenant_registration.fields.postal_code')}
            placeholder={t('onboarding:steps.tenant_registration.placeholders.postal_code')}
            value={formData.postal_code}
            onChange={(e) => handleInputChange('postal_code', e.target.value)}
            error={errors.postal_code}
            isRequired
            maxLength={5}
          />
        </div>

        <div className="transform transition-all duration-200 hover:scale-[1.01]">
          <Input
            label={t('onboarding:steps.tenant_registration.fields.city')}
            placeholder={t('onboarding:steps.tenant_registration.placeholders.city')}
            value={formData.city}
            onChange={(e) => handleInputChange('city', e.target.value)}
            error={errors.city}
          />
        </div>
      </div>

      {errors.submit && (
        <div className="bg-gradient-to-r from-[var(--color-error)]/10 to-[var(--color-error)]/5 border-l-4 border-[var(--color-error)] rounded-lg p-4 animate-shake">
          <div className="flex items-start gap-3">
            <span className="text-2xl flex-shrink-0">⚠️</span>
            <div>
              <h4 className="font-semibold text-[var(--color-error)] mb-1">
                {t('onboarding:steps.tenant_registration.errors.register_title')}
              </h4>
              <p className="text-sm text-[var(--text-secondary)]">{errors.submit}</p>
            </div>
          </div>
        </div>
      )}

      <div className="flex justify-end pt-4 border-t-2 border-[var(--border-color)]/50">
        <Button
          onClick={handleSubmit}
          isLoading={registerBakery.isPending || updateTenant.isPending}
          loadingText={t(tenantId
            ? 'onboarding:steps.tenant_registration.loading.updating'
            : (isEnterprise
              ? 'onboarding:steps.tenant_registration.loading.creating_enterprise'
              : 'onboarding:steps.tenant_registration.loading.creating'
            )
          )}
          size="lg"
          className="w-full sm:w-auto sm:min-w-[280px] text-base font-semibold transform transition-all duration-300 hover:scale-105 shadow-lg"
        >
          {t(tenantId
            ? (isEnterprise
              ? 'onboarding:steps.tenant_registration.buttons.update_enterprise'
              : 'onboarding:steps.tenant_registration.buttons.update'
            )
            : (isEnterprise
              ? 'onboarding:steps.tenant_registration.buttons.create_enterprise'
              : 'onboarding:steps.tenant_registration.buttons.create'
            )
          )}
        </Button>
      </div>
    </div>
  );
};