bakery-ia/frontend/src/components/domain/unified-wizard/wizards/EquipmentWizard.tsx

import React from 'react';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { Wrench } from 'lucide-react';

const EquipmentDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
  const data = dataRef?.current || {};

  const handleFieldChange = (field: string, value: any) => {
    onDataChange?.({ ...data, [field]: value });
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Wrench className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Equipo de Panadería</h3>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Tipo de Equipo *</label>
          <select
            value={data.type || 'oven'}
            onChange={(e) => handleFieldChange('type', e.target.value)}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          >
            <option value="oven">Horno</option>
            <option value="mixer">Amasadora</option>
            <option value="proofer">Fermentadora</option>
            <option value="refrigerator">Refrigerador</option>
            <option value="other">Otro</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Marca/Modelo</label>
          <input
            type="text"
            value={data.brand || ''}
            onChange={(e) => handleFieldChange('brand', e.target.value)}
            placeholder="Ej: Rational SCC 101"
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Ubicación</label>
          <input
            type="text"
            value={data.location || ''}
            onChange={(e) => handleFieldChange('location', e.target.value)}
            placeholder="Ej: Cocina principal"
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Fecha de Compra</label>
          <input
            type="date"
            value={data.purchaseDate || ''}
            onChange={(e) => handleFieldChange('purchaseDate', e.target.value)}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
      </div>
    </div>
  );
};

export const EquipmentWizardSteps = (dataRef: React.MutableRefObject<Record<string, any>>, setData: (data: Record<string, any>) => void): WizardStep[] => {
  // New architecture: return direct component references instead of arrow functions
  // dataRef and onDataChange are now passed through WizardModal props
  return [
    {
      id: 'equipment-details',
      title: 'Detalles del Equipo',
      description: 'Tipo, modelo, ubicación',
      component: EquipmentDetailsStep,
      validate: async () => {
        const { useTenant } = await import('../../../../stores/tenant.store');
        const { equipmentService } = await import('../../../../api/services/equipment');
        const { showToast } = await import('../../../../utils/toast');

        const data = dataRef.current;
        const { currentTenant } = useTenant.getState();

        if (!currentTenant?.id) {
          showToast.error('No se pudo obtener información del tenant');
          return false;
        }

        try {
          const equipmentCreateData: any = {
            name: `${data.type || 'oven'} - ${data.brand || 'Sin marca'}`,
            type: data.type || 'oven',
            model: data.brand || '',
            serialNumber: data.model || '',
            location: data.location || '',
            status: data.status || 'active',
            installDate: data.purchaseDate || new Date().toISOString().split('T')[0],
            lastMaintenance: new Date().toISOString().split('T')[0],
            nextMaintenance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
            maintenanceInterval: 30,
            is_active: true
          };

          await equipmentService.createEquipment(currentTenant.id, equipmentCreateData);
          showToast.success('Equipo creado exitosamente');
          return true;
        } catch (err: any) {
          console.error('Error creating equipment:', err);
          const errorMessage = err.response?.data?.detail || 'Error al crear el equipo';
          showToast.error(errorMessage);
          return false;
        }
      },
    },
  ];
};