bakery-ia/frontend/src/components/domain/inventory/BatchAddIngredientsModal.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useCreateIngredient } from '../../../api/hooks/inventory';
import type { Ingredient } from '../../../api/types/inventory';
import { commonIngredientTemplates } from './ingredientHelpers';

interface BatchIngredientRow {
  id: string;
  name: string;
  category: string;
  unit_of_measure: string;
  stock_quantity?: number;
  cost_per_unit?: number;
  error?: string;
}

interface BatchAddIngredientsModalProps {
  isOpen: boolean;
  onClose: () => void;
  onCreated: (ingredients: Ingredient[]) => void;
  tenantId: string;
}

export const BatchAddIngredientsModal: React.FC<BatchAddIngredientsModalProps> = ({
  isOpen,
  onClose,
  onCreated,
  tenantId
}) => {
  const { t } = useTranslation();
  const createIngredient = useCreateIngredient();

  const [rows, setRows] = useState<BatchIngredientRow[]>([
    { id: '1', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
    { id: '2', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
    { id: '3', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' }
  ]);

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [globalError, setGlobalError] = useState<string | null>(null);

  const categoryOptions = [
    'Baking Ingredients',
    'Dairy',
    'Fruits',
    'Vegetables',
    'Meat',
    'Seafood',
    'Spices',
    'Other'
  ];

  const unitOptions = ['kg', 'g', 'l', 'ml', 'units', 'pcs', 'pkg', 'bags', 'boxes'];

  const updateRow = (id: string, field: keyof BatchIngredientRow, value: any) => {
    setRows(rows.map(row =>
      row.id === id ? { ...row, [field]: value, error: undefined } : row
    ));
  };

  const addRow = () => {
    const newId = String(Date.now());
    setRows([...rows, {
      id: newId,
      name: '',
      category: 'Baking Ingredients',
      unit_of_measure: 'kg'
    }]);
  };

  const removeRow = (id: string) => {
    if (rows.length > 1) {
      setRows(rows.filter(row => row.id !== id));
    }
  };

  const loadFromTemplates = () => {
    const templateRows: BatchIngredientRow[] = commonIngredientTemplates.slice(0, 10).map((template, index) => ({
      id: String(Date.now() + index),
      name: template.name,
      category: template.category,
      unit_of_measure: template.unit_of_measure,
      stock_quantity: 0,
      cost_per_unit: 0
    }));
    setRows(templateRows);
  };

  const validateRows = (): boolean => {
    let hasError = false;
    const updatedRows = rows.map(row => {
      if (!row.name.trim()) {
        hasError = true;
        return { ...row, error: 'El nombre es requerido' };
      }
      if (!row.category) {
        hasError = true;
        return { ...row, error: 'La categoría es requerida' };
      }
      return { ...row, error: undefined };
    });

    if (hasError) {
      setRows(updatedRows);
      return false;
    }

    // Check for duplicates within batch
    const names = rows.map(r => r.name.toLowerCase().trim());
    const duplicates = names.filter((name, index) => names.indexOf(name) !== index);
    if (duplicates.length > 0) {
      setGlobalError(`Hay nombres duplicados en el lote: ${duplicates.join(', ')}`);
      return false;
    }

    return true;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setGlobalError(null);

    if (!validateRows()) return;

    setIsSubmitting(true);

    try {
      const createdIngredients: Ingredient[] = [];
      const errors: string[] = [];

      // Create all ingredients
      for (const row of rows) {
        try {
          const ingredientData = {
            name: row.name.trim(),
            product_type: 'ingredient',
            category: row.category,
            unit_of_measure: row.unit_of_measure,
            low_stock_threshold: 1,
            max_stock_level: 100,
            reorder_point: 2,
            shelf_life_days: 30,
            requires_refrigeration: false,
            requires_freezing: false,
            is_seasonal: false,
            average_cost: row.cost_per_unit || 0,
            notes: 'Creado mediante adición por lote',
            metadata: {
              created_context: 'batch',
              is_complete: !!(row.stock_quantity && row.cost_per_unit),
              needs_review: !(row.stock_quantity && row.cost_per_unit),
            }
          };

          const created = await createIngredient.mutateAsync({
            tenantId,
            ingredientData
          });

          createdIngredients.push(created);
        } catch (error: any) {
          errors.push(`${row.name}: ${error.message || 'Error al crear'}`);
        }
      }

      if (createdIngredients.length > 0) {
        onCreated(createdIngredients);
        handleClose();
      }

      if (errors.length > 0) {
        setGlobalError(`Algunos ingredientes no se pudieron crear:\n${errors.join('\n')}`);
      }
    } catch (error) {
      console.error('Error in batch creation:', error);
      setGlobalError('Error al crear los ingredientes. Inténtalo de nuevo.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleClose = () => {
    setRows([
      { id: '1', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
      { id: '2', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
      { id: '3', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' }
    ]);
    setGlobalError(null);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50 z-40 animate-fadeIn"
        onClick={handleClose}
      />

      {/* Modal */}
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
        <div
          className="bg-[var(--bg-primary)] rounded-lg shadow-2xl max-w-6xl w-full max-h-[90vh] overflow-y-auto pointer-events-auto animate-slideUp"
          onClick={(e) => e.stopPropagation()}
        >
          {/* Header */}
          <div className="flex items-center justify-between p-6 border-b border-[var(--border-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center">
                <svg className="w-5 h-5 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <div>
                <h2 className="text-xl font-semibold text-[var(--text-primary)]">
                  📋 Agregar Múltiples Ingredientes
                </h2>
                <p className="text-sm text-[var(--text-secondary)] mt-0.5">
                  Agrega varios ingredientes a la vez para ahorrar tiempo
                </p>
              </div>
            </div>
            <button
              onClick={handleClose}
              className="p-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          {/* Form */}
          <form onSubmit={handleSubmit} className="p-6 space-y-5">
            {/* Quick Actions */}
            <div className="flex gap-2">
              <button
                type="button"
                onClick={loadFromTemplates}
                className="px-4 py-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] rounded-lg hover:bg-[var(--color-primary)]/20 transition-colors text-sm font-medium flex items-center gap-2"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                Cargar Plantillas Comunes
              </button>
              <button
                type="button"
                onClick={addRow}
                className="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-sm font-medium flex items-center gap-2"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                Agregar Fila
              </button>
            </div>

            {/* Table */}
            <div className="border border-[var(--border-secondary)] rounded-lg overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="bg-[var(--bg-secondary)] border-b border-[var(--border-secondary)]">
                      <th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)] w-8">#</th>
                      <th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Nombre *</th>
                      <th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Categoría *</th>
                      <th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Unidad *</th>
                      <th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Stock Inicial</th>
                      <th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Costo (€)</th>
                      <th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)] w-12"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {rows.map((row, index) => (
                      <tr
                        key={row.id}
                        className={`border-b border-[var(--border-secondary)] hover:bg-[var(--bg-secondary)]/50 transition-colors ${row.error ? 'bg-[var(--color-error)]/5' : ''}`}
                      >
                        <td className="px-3 py-2 text-sm text-[var(--text-secondary)]">
                          {index + 1}
                        </td>
                        <td className="px-3 py-2">
                          <input
                            type="text"
                            value={row.name}
                            onChange={(e) => updateRow(row.id, 'name', e.target.value)}
                            className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                            placeholder="Ej: Harina"
                          />
                          {row.error && (
                            <p className="text-xs text-[var(--color-error)] mt-1">{row.error}</p>
                          )}
                        </td>
                        <td className="px-3 py-2">
                          <select
                            value={row.category}
                            onChange={(e) => updateRow(row.id, 'category', e.target.value)}
                            className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                          >
                            {categoryOptions.map(cat => (
                              <option key={cat} value={cat}>{cat}</option>
                            ))}
                          </select>
                        </td>
                        <td className="px-3 py-2">
                          <select
                            value={row.unit_of_measure}
                            onChange={(e) => updateRow(row.id, 'unit_of_measure', e.target.value)}
                            className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                          >
                            {unitOptions.map(unit => (
                              <option key={unit} value={unit}>{unit}</option>
                            ))}
                          </select>
                        </td>
                        <td className="px-3 py-2">
                          <input
                            type="number"
                            min="0"
                            step="0.01"
                            value={row.stock_quantity || ''}
                            onChange={(e) => updateRow(row.id, 'stock_quantity', parseFloat(e.target.value) || undefined)}
                            className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                            placeholder="0"
                          />
                        </td>
                        <td className="px-3 py-2">
                          <input
                            type="number"
                            min="0"
                            step="0.01"
                            value={row.cost_per_unit || ''}
                            onChange={(e) => updateRow(row.id, 'cost_per_unit', parseFloat(e.target.value) || undefined)}
                            className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                            placeholder="0.00"
                          />
                        </td>
                        <td className="px-3 py-2">
                          <button
                            type="button"
                            onClick={() => removeRow(row.id)}
                            disabled={rows.length === 1}
                            className="p-1.5 text-[var(--color-error)] hover:bg-[var(--color-error)]/10 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                            title="Eliminar fila"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Info Box */}
            <div className="bg-[var(--color-info)]/10 border border-[var(--color-info)]/20 rounded-lg p-3">
              <p className="text-sm text-[var(--text-secondary)] flex items-start gap-2">
                <svg className="w-4 h-4 text-[var(--color-info)] mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>
                  💡 Los campos de stock y costo son opcionales. Puedes completarlos más tarde en la gestión de inventario.
                </span>
              </p>
            </div>

            {/* Global Error */}
            {globalError && (
              <div className="bg-[var(--color-error)]/10 border border-[var(--color-error)]/20 rounded-lg p-3">
                <p className="text-sm text-[var(--color-error)] flex items-center gap-2 whitespace-pre-line">
                  <svg className="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                  </svg>
                  {globalError}
                </p>
              </div>
            )}

            {/* Actions */}
            <div className="flex gap-3 pt-2 sticky bottom-0 bg-[var(--bg-primary)] pb-2 border-t border-[var(--border-secondary)] -mx-6 px-6 -mb-5">
              <button
                type="button"
                onClick={handleClose}
                disabled={isSubmitting}
                className="flex-1 px-4 py-2.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors font-medium disabled:opacity-50"
              >
                Cancelar
              </button>
              <button
                type="submit"
                disabled={isSubmitting}
                className="flex-1 px-4 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium flex items-center justify-center gap-2"
              >
                {isSubmitting ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    Creando {rows.length} ingredientes...
                  </>
                ) : (
                  <>
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    Crear {rows.length} Ingredientes
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>

      {/* Animation Styles */}
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes slideUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fadeIn {
          animation: fadeIn 0.2s ease-out;
        }
        .animate-slideUp {
          animation: slideUp 0.3s ease-out;
        }
      `}</style>
    </>
  );
};