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

// frontend/src/pages/onboarding.tsx - ORIGINAL DESIGN WITH AUTH FIXES ONLY
import React, { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';
import {
  CheckIcon,
  ArrowRightIcon,
  ArrowLeftIcon,
  CloudArrowUpIcon,
  BuildingStorefrontIcon,
  UserCircleIcon,
  CpuChipIcon
} from '@heroicons/react/24/outline';
import { SalesUploader } from '../components/data/SalesUploader';
import { TrainingProgressCard } from '../components/training/TrainingProgressCard';
import { useAuth } from '../contexts/AuthContext';
import { RegisterData } from '../api/services/authService'; 
import { dataApi, TrainingRequest, TrainingTask } from '../api/services/api';
import { NotificationToast } from '../components/common/NotificationToast';
import { Product, defaultProducts } from '../components/common/ProductSelector';

// 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[];

  // 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 } = useAuth(); // FIXED: Removed login - not needed anymore
  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,
        };
        
        // FIXED: Registration now handles tokens automatically - no auto-login needed!
        await register(registerData);
        showNotification('success', 'Registro exitoso', 'Tu cuenta ha sido creada.');
        setCompletedSteps([...completedSteps, 1]);
      } catch (err: any) {
        newErrors.email = err.message || 'Error al registrar usuario.';
        showNotification('error', 'Error de registro', newErrors.email);
        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.' as any;

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

      setCompletedSteps([...completedSteps, 2]);
    } else if (currentStep === 3) {
      if (!formData.salesFile) {
        showNotification('warning', 'Archivo requerido', 'Debes subir un archivo de historial de ventas.');
        return;
      }

      setCompletedSteps([...completedSteps, 3]);
    } else if (currentStep === 4) {
      setLoading(true);
      try {
        // Start model training logic here
        const trainingRequest: TrainingRequest = {
          products: formData.selected_products.map(p => p.name),
          location_factors: {
            has_nearby_schools: formData.has_nearby_schools,
            has_nearby_offices: formData.has_nearby_offices,
            city: formData.city
          }
        };
        
        showNotification('success', 'Entrenamiento iniciado', 'El modelo de predicción está siendo entrenado.');
        setCompletedSteps([...completedSteps, 4]);
      } catch (err: any) {
        showNotification('error', 'Error de entrenamiento', 'No se pudo iniciar el entrenamiento del modelo.');
        return;
      } finally {
        setLoading(false);
      }
    }

    // Move to next step
    if (currentStep < 5) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handleBack = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  const handleSubmitFinal = async () => {
    setLoading(true);
    try {
      showNotification('success', '¡Configuración completa!', 'Tu sistema está listo para usar.');
      setTimeout(() => {
        router.push('/dashboard');
      }, 2000);
    } catch (err: any) {
      showNotification('error', 'Error final', 'Hubo un problema al completar la configuración.');
    } finally {
      setLoading(false);
    }
  };

  // ORIGINAL DESIGN: Step configuration with icons and content
  const steps = [
    {
      id: 1,
      name: 'Cuenta de Usuario',
      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="space-y-3">
            <p className="text-sm font-medium text-gray-700">Factores de Ubicación</p>
            <div className="space-y-2">
              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={formData.has_nearby_schools}
                  onChange={(e) => setFormData({ ...formData, has_nearby_schools: e.target.checked })}
                  className="rounded border-gray-300 text-pania-blue focus:ring-pania-blue"
                />
                <span className="ml-2 text-sm text-gray-700">Hay colegios cerca</span>
              </label>
              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={formData.has_nearby_offices}
                  onChange={(e) => setFormData({ ...formData, has_nearby_offices: e.target.checked })}
                  className="rounded border-gray-300 text-pania-blue focus:ring-pania-blue"
                />
                <span className="ml-2 text-sm text-gray-700">Hay oficinas cerca</span>
              </label>
            </div>
          </div>
        </div>
      ),
    },
    {
      id: 3,
      name: 'Historial de Ventas',
      icon: CloudArrowUpIcon,
      content: (
        <div className="space-y-4">
          <div className="text-center">
            <CloudArrowUpIcon className="mx-auto h-12 w-12 text-pania-blue" />
            <h3 className="mt-4 text-lg font-medium text-gray-900">
              Sube tu historial de ventas
            </h3>
            <p className="mt-2 text-sm text-gray-600">
              Para crear predicciones precisas, necesitamos tus datos históricos de ventas
            </p>
          </div>
          <SalesUploader
            onUpload={async (file) => {
              // Store the file in form data
              setFormData({ ...formData, salesFile: file });
              // Show success notification
              showNotification('success', 'Archivo seleccionado', `Archivo "${file.name}" listo para procesar.`);
            }}
          />
        </div>
      ),
    },
    {
      id: 4,
      name: 'Entrenar Modelo',
      icon: CpuChipIcon,
      content: (
        <div className="space-y-4">
          <div className="text-center">
            <CpuChipIcon className="mx-auto h-12 w-12 text-pania-blue" />
            <h3 className="mt-4 text-lg font-medium text-gray-900">
              Entrenar tu modelo de predicción
            </h3>
            <p className="mt-2 text-sm text-gray-600">
              Crearemos un modelo personalizado basado en tus datos de ventas
            </p>
          </div>
          <TrainingProgressCard
            status={formData.trainingStatus}
            progress={formData.trainingStatus === 'completed' ? 100 : 45}
            currentStep="Entrenando modelos de predicción..."
            onStart={() => setFormData({ ...formData, trainingStatus: 'running' })}
          />
        </div>
      ),
    },
    {
      id: 5,
      name: 'Completado',
      icon: CheckIcon,
      content: (
        <div className="text-center space-y-4">
          <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
            <CheckIcon className="h-6 w-6 text-green-600" />
          </div>
          <h3 className="text-lg font-medium text-gray-900">
            ¡Configuración Completada!
          </h3>
          <p className="text-sm text-gray-600">
            Tu sistema de predicción de demanda está listo para usar.
          </p>
          <div className="bg-green-50 border border-green-200 rounded-md p-4">
            <div className="text-sm text-green-700">
              <ul className="list-disc list-inside space-y-1">
                <li>Cuenta de usuario creada</li>
                <li>Información de panadería guardada</li>
                <li>Historial de ventas procesado</li>
                <li>Modelo de predicción entrenado</li>
              </ul>
            </div>
          </div>
        </div>
      ),
    },
  ];

  const currentStepData = steps.find(step => step.id === currentStep) || steps[0];

  return (
    <div className="min-h-screen bg-gradient-to-br from-pania-cream to-white">
      <Head>
        <title>Configuración - Bakery Forecast</title>
      </Head>

      {notification && (
        <NotificationToast
          id={notification.id}
          type={notification.type}
          title={notification.title}
          message={notification.message}
          onClose={() => setNotification(null)}
        />
      )}

      <div className="container mx-auto px-4 py-8">
        <div className="max-w-2xl mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-pania-charcoal">Configuración Inicial</h1>
            <p className="mt-2 text-gray-600">Configura tu cuenta y comienza a predecir la demanda</p>
          </div>

          {/* ORIGINAL DESIGN: Step Progress Indicator */}
          <nav aria-label="Progress" className="mb-8">
            <ol role="list" className="flex items-center justify-between">
              {steps.map((step, stepIdx) => (
                <li key={step.name} className="relative">
                  {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>

          {/* ORIGINAL DESIGN: 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>

          {/* ORIGINAL DESIGN: 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>
    </div>
  );
};

export default OnboardingPage;