bakery-ia/frontend/src/pages/app/operations/inventory/InventoryPage.tsx

import React, { useState } from 'react';
import { Plus, Download, AlertTriangle, Package, Clock, CheckCircle, Eye, Edit, Calendar, DollarSign } from 'lucide-react';
import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
import { PageHeader } from '../../../../components/layout';
import { InventoryForm, LowStockAlert } from '../../../../components/domain/inventory';

const InventoryPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
  const [selectedItem, setSelectedItem] = useState<typeof mockInventoryItems[0] | null>(null);

  const mockInventoryItems = [
    {
      id: '1',
      name: 'Harina de Trigo',
      category: 'Harinas',
      currentStock: 45,
      minStock: 20,
      maxStock: 100,
      unit: 'kg',
      cost: 1.20,
      supplier: 'Molinos del Sur',
      lastRestocked: '2024-01-20',
      expirationDate: '2024-06-30',
      status: 'normal',
    },
    {
      id: '2',
      name: 'Levadura Fresca',
      category: 'Levaduras',
      currentStock: 8,
      minStock: 10,
      maxStock: 25,
      unit: 'kg',
      cost: 8.50,
      supplier: 'Levaduras SA',
      lastRestocked: '2024-01-25',
      expirationDate: '2024-02-15',
      status: 'low',
    },
    {
      id: '3',
      name: 'Mantequilla',
      category: 'Lácteos',
      currentStock: 15,
      minStock: 5,
      maxStock: 30,
      unit: 'kg',
      cost: 5.80,
      supplier: 'Lácteos Frescos',
      lastRestocked: '2024-01-24',
      expirationDate: '2024-02-10',
      status: 'normal',
    },
    {
      id: '4',
      name: 'Azúcar Blanco',
      category: 'Azúcares',
      currentStock: 0,
      minStock: 15,
      maxStock: 50,
      unit: 'kg',
      cost: 0.95,
      supplier: 'Distribuidora Central',
      lastRestocked: '2024-01-10',
      expirationDate: '2024-12-31',
      status: 'out',
    },
    {
      id: '5',
      name: 'Leche Entera',
      category: 'Lácteos',
      currentStock: 3,
      minStock: 10,
      maxStock: 40,
      unit: 'L',
      cost: 1.45,
      supplier: 'Lácteos Frescos',
      lastRestocked: '2024-01-22',
      expirationDate: '2024-01-28',
      status: 'expired',
    },
  ];

  const getInventoryStatusConfig = (item: typeof mockInventoryItems[0]) => {
    const { currentStock, minStock, status } = item;
    
    if (status === 'expired') {
      return {
        color: getStatusColor('expired'),
        text: 'Caducado',
        icon: AlertTriangle,
        isCritical: true,
        isHighlight: false
      };
    }
    
    if (currentStock === 0) {
      return {
        color: getStatusColor('out'),
        text: 'Sin Stock',
        icon: AlertTriangle,
        isCritical: true,
        isHighlight: false
      };
    }
    
    if (currentStock <= minStock) {
      return {
        color: getStatusColor('low'),
        text: 'Stock Bajo',
        icon: AlertTriangle,
        isCritical: false,
        isHighlight: true
      };
    }
    
    return {
      color: getStatusColor('normal'),
      text: 'Normal',
      icon: CheckCircle,
      isCritical: false,
      isHighlight: false
    };
  };

  const filteredItems = mockInventoryItems.filter(item => {
    const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.supplier.toLowerCase().includes(searchTerm.toLowerCase());
    
    return matchesSearch;
  });

  const lowStockItems = mockInventoryItems.filter(item => 
    item.currentStock <= item.minStock || item.status === 'low' || item.status === 'out' || item.status === 'expired'
  );

  const mockInventoryStats = {
    totalItems: mockInventoryItems.length,
    lowStockItems: lowStockItems.length,
    outOfStock: mockInventoryItems.filter(item => item.currentStock === 0).length,
    expiringSoon: mockInventoryItems.filter(item => item.status === 'expired').length,
    totalValue: mockInventoryItems.reduce((sum, item) => sum + (item.currentStock * item.cost), 0),
    categories: [...new Set(mockInventoryItems.map(item => item.category))].length,
  };

  const inventoryStats = [
    {
      title: 'Total Artículos',
      value: mockInventoryStats.totalItems,
      variant: 'default' as const,
      icon: Package,
    },
    {
      title: 'Stock Bajo',
      value: mockInventoryStats.lowStockItems,
      variant: 'warning' as const,
      icon: AlertTriangle,
    },
    {
      title: 'Sin Stock',
      value: mockInventoryStats.outOfStock,
      variant: 'error' as const,
      icon: AlertTriangle,
    },
    {
      title: 'Por Caducar',
      value: mockInventoryStats.expiringSoon,
      variant: 'error' as const,
      icon: Clock,
    },
    {
      title: 'Valor Total',
      value: formatters.currency(mockInventoryStats.totalValue),
      variant: 'success' as const,
      icon: DollarSign,
    },
    {
      title: 'Categorías',
      value: mockInventoryStats.categories,
      variant: 'info' as const,
      icon: Package,
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        title="Gestión de Inventario"
        description="Controla el stock de ingredientes y materias primas"
        actions={[
          {
            id: "export",
            label: "Exportar",
            variant: "outline" as const,
            icon: Download,
            onClick: () => console.log('Export inventory')
          },
          {
            id: "new",
            label: "Nuevo Artículo",
            variant: "primary" as const,
            icon: Plus,
            onClick: () => setShowForm(true)
          }
        ]}
      />

      {/* Stats Grid */}
      <StatsGrid 
        stats={inventoryStats}
        columns={3}
      />

      {/* Low Stock Alert */}
      {lowStockItems.length > 0 && (
        <LowStockAlert items={lowStockItems} />
      )}

      {/* Simplified Controls */}
      <Card className="p-4">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <Input
              placeholder="Buscar artículos por nombre, categoría o proveedor..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full"
            />
          </div>
          <Button variant="outline" onClick={() => console.log('Export filtered')}>
            <Download className="w-4 h-4 mr-2" />
            Exportar
          </Button>
        </div>
      </Card>

      {/* Inventory Items Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {filteredItems.map((item) => {
          const statusConfig = getInventoryStatusConfig(item);
          const stockPercentage = Math.round((item.currentStock / item.maxStock) * 100);
          const isExpiringSoon = new Date(item.expirationDate) < new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
          const isExpired = new Date(item.expirationDate) < new Date();
          
          return (
            <StatusCard
              key={item.id}
              id={item.id}
              statusIndicator={statusConfig}
              title={item.name}
              subtitle={`${item.category} • ${item.supplier}`}
              primaryValue={item.currentStock}
              primaryValueLabel={item.unit}
              secondaryInfo={{
                label: 'Valor total',
                value: `${formatters.currency(item.currentStock * item.cost)} (${formatters.currency(item.cost)}/${item.unit})`
              }}
              progress={{
                label: 'Nivel de stock',
                percentage: stockPercentage,
                color: statusConfig.color
              }}
              metadata={[
                `Rango: ${item.minStock} - ${item.maxStock} ${item.unit}`,
                `Caduca: ${new Date(item.expirationDate).toLocaleDateString('es-ES')}${isExpired ? ' (CADUCADO)' : isExpiringSoon ? ' (PRONTO)' : ''}`,
                `Último restock: ${new Date(item.lastRestocked).toLocaleDateString('es-ES')}`
              ]}
              actions={[
                {
                  label: 'Ver',
                  icon: Eye,
                  variant: 'outline',
                  onClick: () => {
                    setSelectedItem(item);
                    setModalMode('view');
                    setShowForm(true);
                  }
                },
                {
                  label: 'Editar',
                  icon: Edit,
                  variant: 'outline',
                  onClick: () => {
                    setSelectedItem(item);
                    setModalMode('edit');
                    setShowForm(true);
                  }
                }
              ]}
            />
          );
        })}
      </div>

      {/* Empty State */}
      {filteredItems.length === 0 && (
        <div className="text-center py-12">
          <Package className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
          <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
            No se encontraron artículos
          </h3>
          <p className="text-[var(--text-secondary)] mb-4">
            Intenta ajustar la búsqueda o agregar un nuevo artículo al inventario
          </p>
          <Button onClick={() => setShowForm(true)}>
            <Plus className="w-4 h-4 mr-2" />
            Nuevo Artículo
          </Button>
        </div>
      )}

      {/* Inventory Item Modal */}
      {showForm && selectedItem && (
        <StatusModal
          isOpen={showForm}
          onClose={() => {
            setShowForm(false);
            setSelectedItem(null);
            setModalMode('view');
          }}
          mode={modalMode}
          onModeChange={setModalMode}
          title={selectedItem.name}
          subtitle={`${selectedItem.category} - ${selectedItem.supplier}`}
          statusIndicator={getInventoryStatusConfig(selectedItem)}
          size="lg"
          sections={[
            {
              title: 'Información Básica',
              icon: Package,
              fields: [
                {
                  label: 'Nombre',
                  value: selectedItem.name,
                  highlight: true
                },
                {
                  label: 'Categoría',
                  value: selectedItem.category
                },
                {
                  label: 'Proveedor',
                  value: selectedItem.supplier
                },
                {
                  label: 'Unidad de medida',
                  value: selectedItem.unit
                }
              ]
            },
            {
              title: 'Stock y Niveles',
              icon: Package,
              fields: [
                {
                  label: 'Stock actual',
                  value: `${selectedItem.currentStock} ${selectedItem.unit}`,
                  highlight: true
                },
                {
                  label: 'Stock mínimo',
                  value: `${selectedItem.minStock} ${selectedItem.unit}`
                },
                {
                  label: 'Stock máximo',
                  value: `${selectedItem.maxStock} ${selectedItem.unit}`
                },
                {
                  label: 'Porcentaje de stock',
                  value: Math.round((selectedItem.currentStock / selectedItem.maxStock) * 100),
                  type: 'percentage',
                  highlight: selectedItem.currentStock <= selectedItem.minStock
                }
              ]
            },
            {
              title: 'Información Financiera',
              icon: DollarSign,
              fields: [
                {
                  label: 'Costo por unidad',
                  value: selectedItem.cost,
                  type: 'currency'
                },
                {
                  label: 'Valor total en stock',
                  value: selectedItem.currentStock * selectedItem.cost,
                  type: 'currency',
                  highlight: true
                }
              ]
            },
            {
              title: 'Fechas Importantes',
              icon: Calendar,
              fields: [
                {
                  label: 'Último restock',
                  value: selectedItem.lastRestocked,
                  type: 'date'
                },
                {
                  label: 'Fecha de caducidad',
                  value: selectedItem.expirationDate,
                  type: 'date',
                  highlight: new Date(selectedItem.expirationDate) < new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
                }
              ]
            }
          ]}
          onEdit={() => {
            console.log('Editing inventory item:', selectedItem.id);
          }}
        />
      )}
    </div>
  );
};

export default InventoryPage;