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 } 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 [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 getStockStatusBadge = (item: typeof mockInventoryItems[0]) => {
    const { currentStock, minStock, status } = item;
    
    if (status === 'expired') {
      return (
        <Badge 
          variant="error"
          icon={<AlertTriangle size={12} />}
          text="Caducado"
        />
      );
    }
    
    if (currentStock === 0) {
      return (
        <Badge 
          variant="error"
          icon={<AlertTriangle size={12} />}
          text="Sin Stock"
        />
      );
    }
    
    if (currentStock <= minStock) {
      return (
        <Badge 
          variant="warning"
          icon={<AlertTriangle size={12} />}
          text="Stock Bajo"
        />
      );
    }
    
    return (
      <Badge 
        variant="success"
        icon={<CheckCircle size={12} />}
        text="Normal"
      />
    );
  };

  const getCategoryBadge = (category: string) => {
    const categoryConfig = {
      'Harinas': { color: 'default' },
      'Levaduras': { color: 'info' },
      'Lácteos': { color: 'secondary' },
      'Grasas': { color: 'warning' },
      'Azúcares': { color: 'primary' },
      'Especias': { color: 'success' },
    };
    
    const config = categoryConfig[category as keyof typeof categoryConfig] || { color: 'default' };
    return (
      <Badge 
        variant={config.color as any}
        text={category}
      />
    );
  };

  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={6}
      />

      {/* 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) => (
          <Card key={item.id} className="p-4">
            <div className="space-y-4">
              {/* Header */}
              <div className="flex items-start justify-between">
                <div className="flex items-start gap-3">
                  <div className="flex-shrink-0 bg-[var(--color-primary)]/10 p-2 rounded-lg">
                    <Package className="w-4 h-4 text-[var(--text-tertiary)]" />
                  </div>
                  <div>
                    <div className="font-medium text-[var(--text-primary)]">
                      {item.name}
                    </div>
                    <div className="text-sm text-[var(--text-secondary)]">
                      {item.supplier}
                    </div>
                  </div>
                </div>
                {getStockStatusBadge(item)}
              </div>

              {/* Category and Stock */}
              <div className="flex items-center justify-between">
                <div>
                  {getCategoryBadge(item.category)}
                </div>
                <div className="text-right">
                  <div className="text-lg font-bold text-[var(--text-primary)]">
                    {item.currentStock} {item.unit}
                  </div>
                  <div className="text-xs text-[var(--text-tertiary)]">
                    Mín: {item.minStock} | Máx: {item.maxStock}
                  </div>
                </div>
              </div>

              {/* Value and Dates */}
              <div className="flex items-center justify-between text-sm">
                <div>
                  <div className="text-[var(--text-secondary)]">Costo unitario:</div>
                  <div className="font-medium text-[var(--text-primary)]">
                    {formatters.currency(item.cost)}
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-[var(--text-secondary)]">Valor total:</div>
                  <div className="font-medium text-[var(--text-primary)]">
                    {formatters.currency(item.currentStock * item.cost)}
                  </div>
                </div>
              </div>

              {/* Dates */}
              <div className="space-y-2 text-xs">
                <div className="flex items-center justify-between">
                  <span className="text-[var(--text-secondary)]">Último restock:</span>
                  <span className="text-[var(--text-primary)]">
                    {new Date(item.lastRestocked).toLocaleDateString('es-ES')}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-[var(--text-secondary)]">Caducidad:</span>
                  <span className={`font-medium ${
                    new Date(item.expirationDate) < new Date() 
                      ? 'text-[var(--color-error)]' 
                      : new Date(item.expirationDate) < new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
                      ? 'text-[var(--color-warning)]'
                      : 'text-[var(--text-primary)]'
                  }`}>
                    {new Date(item.expirationDate).toLocaleDateString('es-ES')}
                  </span>
                </div>
              </div>

              {/* Stock Level Progress */}
              <div className="space-y-1">
                <div className="flex justify-between text-xs">
                  <span className="text-[var(--text-secondary)]">Nivel de stock</span>
                  <span className="text-[var(--text-primary)]">
                    {Math.round((item.currentStock / item.maxStock) * 100)}%
                  </span>
                </div>
                <div className="w-full bg-[var(--bg-tertiary)] rounded-full h-2">
                  <div 
                    className={`h-2 rounded-full transition-all duration-300 ${
                      item.currentStock <= item.minStock 
                        ? 'bg-[var(--color-error)]' 
                        : item.currentStock <= item.minStock * 1.5
                        ? 'bg-[var(--color-warning)]'
                        : 'bg-[var(--color-success)]'
                    }`}
                    style={{ width: `${Math.min((item.currentStock / item.maxStock) * 100, 100)}%` }}
                  />
                </div>
              </div>

              {/* Actions */}
              <div className="flex gap-2 pt-2 border-t border-[var(--border-primary)]">
                <Button 
                  variant="outline" 
                  size="sm" 
                  className="flex-1"
                  onClick={() => {
                    setSelectedItem(item);
                    setShowForm(true);
                  }}
                >
                  <Eye className="w-4 h-4 mr-1" />
                  Ver
                </Button>
                <Button 
                  variant="outline" 
                  size="sm" 
                  className="flex-1"
                  onClick={() => {
                    setSelectedItem(item);
                    setShowForm(true);
                  }}
                >
                  <Edit className="w-4 h-4 mr-1" />
                  Editar
                </Button>
              </div>
            </div>
          </Card>
        ))}
      </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 Form Modal */}
      {showForm && (
        <InventoryForm
          item={selectedItem}
          onClose={() => {
            setShowForm(false);
            setSelectedItem(null);
          }}
          onSave={(item) => {
            // Handle save logic
            console.log('Saving item:', item);
            setShowForm(false);
            setSelectedItem(null);
          }}
        />
      )}
    </div>
  );
};

export default InventoryPage;