bakery-ia/frontend/src/pages/onboarding.tsx

// src/pages/onboarding.tsx
import React, { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';
import {
  CheckIcon,
  ArrowRightIcon,
  ArrowLeftIcon,
  CloudArrowUpIcon,
  BuildingStorefrontIcon,
  UserCircleIcon,
} from '@heroicons/react/24/outline';
import { SalesUploader } from '../components/data/SalesUploader';
import { TrainingProgressCard } from '../components/training/TrainingProgressCard';
import { useAuth } from '../contexts/AuthContext';
import { authService, RegisterData } from '../api/services/authService';
import { dataApi, TrainingRequest, TrainingTask } from '../api/services/api'; // Assuming dataApi and types are in api/services/api.ts
import { NotificationToast } from '../components/common/NotificationToast'; // Assuming this exists
import { Product, defaultProducts } from '../components/common/ProductSelector'; // Assuming defaultProducts are here

// Define the shape of the form data
interface OnboardingFormData {
  // Step 1: User Registration
  full_name: string;
  email: string;
  password: string;
  confirm_password: string;

  // Step 2: Bakery Information
  bakery_name: string;
  address: string;
  city: string;
  postal_code: string;
  has_nearby_schools: boolean;
  has_nearby_offices: boolean;
  selected_products: Product[]; // New: For product selection

  // Step 3: Sales History File
  salesFile: File | null;

  // Step 4: Model Training status
  trainingStatus: 'pending' | 'running' | 'completed' | 'failed';
  trainingTaskId: string | null;
}

const OnboardingPage: React.FC = () => {
  const router = useRouter();
  const { user, register, login } = useAuth(); // Use login from AuthContext to set user state
  const [currentStep, setCurrentStep] = useState(1);
  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
  const [loading, setLoading] = useState(false);
  const [notification, setNotification] = useState<{
    id: string;
    type: 'success' | 'error' | 'warning' | 'info';
    title: string;
    message: string;
  } | null>(null);

  const [formData, setFormData] = useState<OnboardingFormData>({
    full_name: '',
    email: '',
    password: '',
    confirm_password: '',
    bakery_name: '',
    address: '',
    city: 'Madrid', // Default to Madrid
    postal_code: '',
    has_nearby_schools: false,
    has_nearby_offices: false,
    selected_products: defaultProducts.slice(0, 3), // Default selected products
    salesFile: null,
    trainingStatus: 'pending',
    trainingTaskId: null,
  });

  const [errors, setErrors] = useState<Partial<OnboardingFormData>>({});

  useEffect(() => {
    // If user is already authenticated and on onboarding, redirect to dashboard
    if (user && currentStep === 1) {
      router.push('/dashboard');
    }
  }, [user, router, currentStep]);

  const showNotification = useCallback((type: 'success' | 'error' | 'warning' | 'info', title: string, message: string) => {
    setNotification({ id: Date.now().toString(), type, title, message });
    setTimeout(() => setNotification(null), 5000);
  }, []);

  const handleNext = async () => {
    setErrors({}); // Clear previous errors
    let newErrors: Partial<OnboardingFormData> = {};

    // Validate current step before proceeding
    if (currentStep === 1) {
      if (!formData.full_name) newErrors.full_name = 'Nombre completo es requerido.';
      if (!formData.email || !/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Email inválido.';
      if (!formData.password || formData.password.length < 6) newErrors.password = 'La contraseña debe tener al menos 6 caracteres.';
      if (formData.password !== formData.confirm_password) newErrors.confirm_password = 'Las contraseñas no coinciden.';

      if (Object.keys(newErrors).length > 0) {
        setErrors(newErrors);
        return;
      }

      setLoading(true);
      try {
        const registerData: RegisterData = {
          full_name: formData.full_name,
          email: formData.email,
          password: formData.password,
          // tenant_name will be derived from bakery_name later or provided by backend
        };
        // Call register from AuthContext to handle token storage and user state
        await register(registerData);
        showNotification('success', 'Registro exitoso', 'Tu cuenta ha sido creada.');
      } catch (err: any) {
        newErrors.email = err.message || 'Error al registrar usuario.';
        showNotification('error', 'Error de registro', newErrors.email);
        setLoading(false);
        setErrors(newErrors);
        return;
      } finally {
        setLoading(false);
      }
    } else if (currentStep === 2) {
      if (!formData.bakery_name) newErrors.bakery_name = 'Nombre de la panadería es requerido.';
      if (!formData.address) newErrors.address = 'Dirección es requerida.';
      if (!formData.city) newErrors.city = 'Ciudad es requerida.';
      if (!formData.postal_code) newErrors.postal_code = 'Código postal es requerido.';
      if (formData.selected_products.length === 0) newErrors.selected_products = 'Debes seleccionar al menos un producto.';

      if (Object.keys(newErrors).length > 0) {
        setErrors(newErrors);
        return;
      }
      setLoading(true);
      try {
        // Assume an API call to update user/tenant profile with bakery info
        // This is a placeholder; actual implementation depends on your backend API for onboarding/user updates
        await authService.updateProfile({
          tenant_name: formData.bakery_name, // Assuming tenant_name can be updated via profile
        });
        showNotification('success', 'Datos de panadería', 'Información guardada correctamente.');
      } catch (err: any) {
        showNotification('error', 'Error al guardar', 'No se pudo guardar la información de la panadería.');
        setErrors({ bakery_name: 'Error al guardar la información.' });
        setLoading(false);
        return;
      } finally {
        setLoading(false);
      }
    } else if (currentStep === 3) {
      if (!formData.salesFile) {
        newErrors.salesFile = 'Por favor, sube tu historial de ventas.';
        setErrors(newErrors);
        return;
      }
      // Sales file will be uploaded by the SalesUploader component directly
    }

    setCompletedSteps((prev) => [...new Set([...prev, currentStep])]);
    setCurrentStep((prev) => prev + 1);
  };

  const handleBack = () => {
    setCurrentStep((prev) => prev - 1);
    setErrors({}); // Clear errors when going back
  };

  const handleSalesFileUpload = useCallback(async (file: File) => {
    setLoading(true);
    setErrors({});
    try {
      // Assuming dataApi.uploadSalesHistory exists for uploading files
      const response = await dataApi.uploadSalesHistory(file, { products: formData.selected_products.map(p => p.id) });
      setFormData((prev) => ({ ...prev, salesFile: file }));
      showNotification('success', 'Archivo subido', 'Historial de ventas cargado exitosamente.');

      // After successful upload, immediately trigger training
      const trainingRequest: TrainingRequest = {
        force_retrain: true, // Example: force a new training
        products: formData.selected_products.map(p => p.id),
      };
      const trainingTask: TrainingTask = await dataApi.startTraining(trainingRequest);
      setFormData((prev) => ({
        ...prev,
        trainingStatus: trainingTask.status,
        trainingTaskId: trainingTask.job_id,
      }));
      showNotification('info', 'Entrenamiento iniciado', 'Tu modelo de predicción se está entrenando.');
      setCompletedSteps((prev) => [...new Set([...prev, currentStep])]); // Mark step 3 as complete
      setCurrentStep(4); // Move to the training progress step
    } catch (err: any) {
      const errorMessage = err.message || 'Error al subir el archivo o iniciar el entrenamiento.';
      setErrors({ salesFile: errorMessage });
      showNotification('error', 'Error', errorMessage);
    } finally {
      setLoading(false);
    }
  }, [formData.selected_products, showNotification, currentStep]);

  const handleTrainingComplete = useCallback(() => {
    setFormData((prev) => ({ ...prev, trainingStatus: 'completed' }));
    showNotification('success', 'Entrenamiento completado', 'Tu modelo ha sido entrenado y está listo.');
    setCompletedSteps((prev) => [...new Set([...prev, 4])]); // Mark step 4 as complete
    setCurrentStep(5); // Move to final step
  }, [showNotification]);


  const handleSubmitFinal = () => {
    router.push('/dashboard');
  };

  const steps = [
    {
      id: 1,
      name: 'Información Personal',
      icon: UserCircleIcon,
      content: (
        <div className="space-y-4">
          <div>
            <label htmlFor="full_name" className="block text-sm font-medium text-gray-700">
              Nombre Completo
            </label>
            <input
              type="text"
              id="full_name"
              className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
              value={formData.full_name}
              onChange={(e) => setFormData({ ...formData, full_name: e.target.value })}
              required
            />
            {errors.full_name && <p className="mt-1 text-sm text-red-600">{errors.full_name}</p>}
          </div>
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
              Email
            </label>
            <input
              type="email"
              id="email"
              className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              required
            />
            {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
          </div>
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
              Contraseña
            </label>
            <input
              type="password"
              id="password"
              className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
              value={formData.password}
              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              required
            />
            {errors.password && <p className="mt-1 text-sm text-red-600">{errors.password}</p>}
          </div>
          <div>
            <label htmlFor="confirm_password" className="block text-sm font-medium text-gray-700">
              Confirmar Contraseña
            </label>
            <input
              type="password"
              id="confirm_password"
              className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
              value={formData.confirm_password}
              onChange={(e) => setFormData({ ...formData, confirm_password: e.target.value })}
              required
            />
            {errors.confirm_password && <p className="mt-1 text-sm text-red-600">{errors.confirm_password}</p>}
          </div>
        </div>
      ),
    },
    {
      id: 2,
      name: 'Detalles de la Panadería',
      icon: BuildingStorefrontIcon,
      content: (
        <div className="space-y-4">
          <div>
            <label htmlFor="bakery_name" className="block text-sm font-medium text-gray-700">
              Nombre de la Panadería
            </label>
            <input
              type="text"
              id="bakery_name"
              className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
              value={formData.bakery_name}
              onChange={(e) => setFormData({ ...formData, bakery_name: e.target.value })}
              required
            />
            {errors.bakery_name && <p className="mt-1 text-sm text-red-600">{errors.bakery_name}</p>}
          </div>
          <div>
            <label htmlFor="address" className="block text-sm font-medium text-gray-700">
              Dirección
            </label>
            <input
              type="text"
              id="address"
              className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
              value={formData.address}
              onChange={(e) => setFormData({ ...formData, address: e.target.value })}
              required
            />
            {errors.address && <p className="mt-1 text-sm text-red-600">{errors.address}</p>}
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="city" className="block text-sm font-medium text-gray-700">
                Ciudad
              </label>
              <input
                type="text"
                id="city"
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
                value={formData.city}
                onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                required
              />
              {errors.city && <p className="mt-1 text-sm text-red-600">{errors.city}</p>}
            </div>
            <div>
              <label htmlFor="postal_code" className="block text-sm font-medium text-gray-700">
                Código Postal
              </label>
              <input
                type="text"
                id="postal_code"
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
                value={formData.postal_code}
                onChange={(e) => setFormData({ ...formData, postal_code: e.target.value })}
                required
              />
              {errors.postal_code && <p className="mt-1 text-sm text-red-600">{errors.postal_code}</p>}
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <input
              type="checkbox"
              id="has_nearby_schools"
              checked={formData.has_nearby_schools}
              onChange={(e) => setFormData({ ...formData, has_nearby_schools: e.target.checked })}
              className="h-4 w-4 text-pania-blue border-gray-300 rounded focus:ring-pania-blue"
            />
            <label htmlFor="has_nearby_schools" className="text-sm font-medium text-gray-700">
              ¿Hay colegios cercanos?
            </label>
          </div>
          <div className="flex items-center space-x-4">
            <input
              type="checkbox"
              id="has_nearby_offices"
              checked={formData.has_nearby_offices}
              onChange={(e) => setFormData({ ...formData, has_nearby_offices: e.target.checked })}
              className="h-4 w-4 text-pania-blue border-gray-300 rounded focus:ring-pania-blue"
            />
            <label htmlFor="has_nearby_offices" className="text-sm font-medium text-gray-700">
              ¿Hay oficinas cercanas?
            </label>
          </div>
          {/* Product Selector */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Productos Principales
            </label>
            <p className="text-xs text-gray-500 mb-2">Selecciona los productos para los que deseas predicciones.</p>
            {/* Simple checkbox-based product selection for demo, replace with ProductSelector */}
            <div className="grid grid-cols-2 gap-2">
              {defaultProducts.map(product => (
                <div key={product.id} className="flex items-center">
                  <input
                    type="checkbox"
                    id={`product-${product.id}`}
                    checked={formData.selected_products.some(p => p.id === product.id)}
                    onChange={(e) => {
                      if (e.target.checked) {
                        setFormData(prev => ({
                          ...prev,
                          selected_products: [...prev.selected_products, product]
                        }));
                      } else {
                        setFormData(prev => ({
                          ...prev,
                          selected_products: prev.selected_products.filter(p => p.id !== product.id)
                        }));
                      }
                    }}
                    className="h-4 w-4 text-pania-blue border-gray-300 rounded focus:ring-pania-blue"
                  />
                  <label htmlFor={`product-${product.id}`} className="ml-2 text-sm text-gray-700">
                    {product.icon} {product.displayName}
                  </label>
                </div>
              ))}
            </div>
            {errors.selected_products && <p className="mt-1 text-sm text-red-600">{errors.selected_products}</p>}
          </div>
        </div>
      ),
    },
    {
      id: 3,
      name: 'Subir Historial de Ventas',
      icon: CloudArrowUpIcon,
      content: (
        <div className="text-center space-y-4">
          <p className="text-lg font-semibold text-gray-800">Casi estamos listos para predecir tus ventas.</p>
          <p className="text-gray-600">
            Por favor, sube tu historial de ventas en formato CSV o Excel.
            Cuantos más datos, ¡más precisas serán las predicciones!
          </p>
          <SalesUploader onUpload={handleSalesFileUpload} />
          {formData.salesFile && (
            <p className="text-sm text-gray-500 mt-2">Archivo seleccionado: {formData.salesFile.name}</p>
          )}
          {errors.salesFile && <p className="mt-1 text-sm text-red-600">{errors.salesFile}</p>}
        </div>
      ),
    },
    {
      id: 4,
      name: 'Entrenamiento del Modelo',
      icon: CpuChipIcon, // Using CpuChipIcon for training
      content: (
        <div className="text-center space-y-4">
          <p className="text-lg font-semibold text-gray-800">
            Estamos entrenando tu modelo de predicción.
          </p>
          <p className="text-gray-600">
            Esto puede tomar unos minutos, por favor, no cierres esta página.
          </p>
          {formData.trainingTaskId ? (
            <TrainingProgressCard jobId={formData.trainingTaskId} onComplete={handleTrainingComplete} />
          ) : (
            <p className="text-gray-500">Esperando el inicio del entrenamiento...</p>
          )}
        </div>
      ),
    },
    {
      id: 5,
      name: '¡Listo!',
      icon: CheckIcon,
      content: (
        <div className="text-center space-y-4">
          <CheckIcon className="h-24 w-24 text-green-500 mx-auto" />
          <h2 className="text-2xl font-bold text-gray-900">¡Tu modelo de IA está listo!</h2>
          <p className="text-lg text-gray-700">
            Ahora puedes ir al Dashboard para ver tus predicciones y comenzar a optimizar tu negocio.
          </p>
        </div>
      ),
    },
  ];

  const currentStepData = steps[currentStep - 1];

  return (
    <div className="min-h-screen flex items-center justify-center bg-pania-golden py-12 px-4 sm:px-6 lg:px-8">
      <Head>
        <title>Onboarding - PanIA</title>
      </Head>
      {notification && (
        <div className="fixed top-4 right-4 z-50">
          <NotificationToast
            id={notification.id}
            type={notification.type}
            title={notification.title}
            message={notification.message}
            onClose={() => setNotification(null)}
          />
        </div>
      )}
      <div className="max-w-4xl w-full bg-white p-8 rounded-lg shadow-lg">
        <div className="text-center mb-8">
          <h1 className="text-4xl font-extrabold text-pania-charcoal mb-2">PanIA</h1>
          <p className="text-pania-blue text-lg">Configuración Inicial</p>
        </div>

        {/* Step Indicator */}
        <nav className="flex justify-center mb-8" aria-label="Progress">
          <ol role="list" className="space-y-4 sm:flex sm:space-x-8 sm:space-y-0">
            {steps.map((step, index) => (
              <li key={step.name} className="flex items-center">
                {currentStep > step.id || completedSteps.includes(step.id) ? (
                  <div className="group flex flex-col items-center">
                    <span className="flex h-10 w-10 items-center justify-center rounded-full bg-pania-blue group-hover:bg-pania-blue-dark">
                      <CheckIcon className="h-6 w-6 text-white" aria-hidden="true" />
                    </span>
                    <span className="mt-2 text-sm font-medium text-pania-blue">{step.name}</span>
                  </div>
                ) : currentStep === step.id ? (
                  <div className="flex flex-col items-center" aria-current="step">
                    <span className="relative flex h-10 w-10 items-center justify-center rounded-full border-2 border-pania-blue">
                      <span className="h-2.5 w-2.5 rounded-full bg-pania-blue" />
                    </span>
                    <span className="mt-2 text-sm font-medium text-pania-blue">{step.name}</span>
                  </div>
                ) : (
                  <div className="group flex flex-col items-center">
                    <span className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400">
                      <step.icon className="h-6 w-6 text-gray-500 group-hover:text-gray-900" aria-hidden="true" />
                    </span>
                    <span className="mt-2 text-sm font-medium text-gray-500 group-hover:text-gray-900">
                      {step.name}
                    </span>
                  </div>
                )}
              </li>
            ))}
          </ol>
        </nav>

        {/* Step Content */}
        <div className="mt-8 bg-gray-50 p-6 rounded-lg shadow-inner">
          <h2 className="text-2xl font-bold text-pania-charcoal mb-6 text-center">
            Paso {currentStep}: {currentStepData.name}
          </h2>
          {currentStepData.content}
        </div>

        {/* Navigation Buttons */}
        <div className="mt-8 flex justify-between">
          {currentStep > 1 && currentStep < 5 && (
            <button
              onClick={handleBack}
              disabled={loading}
              className={`inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pania-blue ${loading ? 'opacity-50 cursor-not-allowed' : ''
                }`}
            >
              <ArrowLeftIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
              Atrás
            </button>
          )}

          {currentStep < 5 && (
            <button
              onClick={handleNext}
              disabled={loading || (currentStep === 3 && !formData.salesFile)}
              className={`inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-pania-blue hover:bg-pania-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pania-blue ${loading || (currentStep === 3 && !formData.salesFile) ? 'opacity-50 cursor-not-allowed' : ''
                } ${currentStep === 1 && !user ? '' : 'ml-auto'}`} // Align right if no back button
            >
              {loading ? (
                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
              ) : (
                <>
                  Siguiente
                  <ArrowRightIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
                </>
              )}
            </button>
          )}

          {currentStep === 5 && (
            <button
              onClick={handleSubmitFinal}
              disabled={loading}
              className={`flex items-center px-6 py-3 rounded-lg font-medium transition-colors ${loading
                  ? 'bg-gray-400 cursor-not-allowed'
                  : 'bg-green-600 hover:bg-green-700'
                } text-white ml-auto`}
            >
              {loading ? (
                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
              ) : (
                'Ir al Dashboard'
              )}
              {!loading && <ArrowRightIcon className="w-5 h-5 ml-2" />}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default OnboardingPage;