import React, { useState } from 'react';
import { Plus, Search, Filter, Download, AlertTriangle } from 'lucide-react';
import { Button, Input, Card, Badge } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { InventoryTable, InventoryForm, LowStockAlert } from '../../../../components/domain/inventory';

const InventoryPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);
  const [filterCategory, setFilterCategory] = useState('all');
  const [filterStatus, setFilterStatus] = useState('all');

  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',
    },
  ];

  const lowStockItems = mockInventoryItems.filter(item => item.status === 'low');

  const stats = {
    totalItems: mockInventoryItems.length,
    lowStockItems: lowStockItems.length,
    totalValue: mockInventoryItems.reduce((sum, item) => sum + (item.currentStock * item.cost), 0),
    needsReorder: lowStockItems.length,
  };

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title="Gestión de Inventario"
        description="Controla el stock de ingredientes y materias primas"
        action={
          <Button onClick={() => setShowForm(true)}>
            <Plus className="w-4 h-4 mr-2" />
            Nuevo Artículo
          </Button>
        }
      />

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Total Artículos</p>
              <p className="text-3xl font-bold text-[var(--text-primary)]">{stats.totalItems}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-info)]/10 rounded-full flex items-center justify-center">
              <svg className="h-6 w-6 text-[var(--color-info)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4-8-4m16 0v10l-8 4-8-4V7" />
              </svg>
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Stock Bajo</p>
              <p className="text-3xl font-bold text-[var(--color-error)]">{stats.lowStockItems}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-error)]/10 rounded-full flex items-center justify-center">
              <AlertTriangle className="h-6 w-6 text-[var(--color-error)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Valor Total</p>
              <p className="text-3xl font-bold text-[var(--color-success)]">€{stats.totalValue.toFixed(2)}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
              <svg className="h-6 w-6 text-[var(--color-success)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
              </svg>
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Necesita Reorden</p>
              <p className="text-3xl font-bold text-[var(--color-primary)]">{stats.needsReorder}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
              <svg className="h-6 w-6 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
            </div>
          </div>
        </Card>
      </div>

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

      {/* Filters and Search */}
      <Card className="p-6">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--text-tertiary)] h-4 w-4" />
              <Input
                placeholder="Buscar artículos..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
          
          <div className="flex gap-2">
            <select
              value={filterCategory}
              onChange={(e) => setFilterCategory(e.target.value)}
              className="px-3 py-2 border border-[var(--border-secondary)] rounded-md"
            >
              <option value="all">Todas las categorías</option>
              <option value="Harinas">Harinas</option>
              <option value="Levaduras">Levaduras</option>
              <option value="Lácteos">Lácteos</option>
              <option value="Grasas">Grasas</option>
              <option value="Azúcares">Azúcares</option>
              <option value="Especias">Especias</option>
            </select>

            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
              className="px-3 py-2 border border-[var(--border-secondary)] rounded-md"
            >
              <option value="all">Todos los estados</option>
              <option value="normal">Stock normal</option>
              <option value="low">Stock bajo</option>
              <option value="out">Sin stock</option>
              <option value="expired">Caducado</option>
            </select>

            <Button variant="outline">
              <Filter className="w-4 h-4 mr-2" />
              Más filtros
            </Button>

            <Button variant="outline">
              <Download className="w-4 h-4 mr-2" />
              Exportar
            </Button>
          </div>
        </div>
      </Card>

      {/* Inventory Table */}
      <Card>
        <InventoryTable
          data={mockInventoryItems}
          onEdit={(item) => {
            setSelectedItem(item);
            setShowForm(true);
          }}
        />
      </Card>

      {/* 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;