import React, { useState } from 'react';
import { Plus, Search, Download, ShoppingCart, Truck, DollarSign, Calendar, Clock, CheckCircle, AlertCircle, Package, Eye, Edit } 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';

const ProcurementPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState('orders');
  const [searchTerm, setSearchTerm] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
  const [selectedOrder, setSelectedOrder] = useState<typeof mockPurchaseOrders[0] | null>(null);

  const mockPurchaseOrders = [
    {
      id: 'PO-2024-001',
      supplier: 'Molinos del Sur',
      status: 'pending',
      orderDate: '2024-01-25',
      deliveryDate: '2024-01-28',
      totalAmount: 1250.00,
      items: [
        { name: 'Harina de Trigo', quantity: 50, unit: 'kg', price: 1.20, total: 60.00 },
        { name: 'Harina Integral', quantity: 100, unit: 'kg', price: 1.30, total: 130.00 },
      ],
      paymentStatus: 'pending',
      notes: 'Entrega en horario de mañana',
    },
    {
      id: 'PO-2024-002',
      supplier: 'Levaduras SA',
      status: 'delivered',
      orderDate: '2024-01-20',
      deliveryDate: '2024-01-23',
      totalAmount: 425.50,
      items: [
        { name: 'Levadura Fresca', quantity: 5, unit: 'kg', price: 8.50, total: 42.50 },
        { name: 'Mejorante', quantity: 10, unit: 'kg', price: 12.30, total: 123.00 },
      ],
      paymentStatus: 'paid',
      notes: '',
    },
    {
      id: 'PO-2024-003',
      supplier: 'Lácteos Frescos',
      status: 'in_transit',
      orderDate: '2024-01-24',
      deliveryDate: '2024-01-26',
      totalAmount: 320.75,
      items: [
        { name: 'Mantequilla', quantity: 20, unit: 'kg', price: 5.80, total: 116.00 },
        { name: 'Nata', quantity: 15, unit: 'L', price: 3.25, total: 48.75 },
      ],
      paymentStatus: 'pending',
      notes: 'Producto refrigerado',
    },
  ];

  const mockSuppliers = [
    {
      id: '1',
      name: 'Molinos del Sur',
      contact: 'Juan Pérez',
      email: 'juan@molinosdelsur.com',
      phone: '+34 91 234 5678',
      category: 'Harinas',
      rating: 4.8,
      totalOrders: 24,
      totalSpent: 15600.00,
      paymentTerms: '30 días',
      leadTime: '2-3 días',
      location: 'Sevilla',
      status: 'active',
    },
    {
      id: '2',
      name: 'Levaduras SA',
      contact: 'María González',
      email: 'maria@levaduras.com',
      phone: '+34 93 456 7890',
      category: 'Levaduras',
      rating: 4.6,
      totalOrders: 18,
      totalSpent: 8450.00,
      paymentTerms: '15 días',
      leadTime: '1-2 días',
      location: 'Barcelona',
      status: 'active',
    },
    {
      id: '3',
      name: 'Lácteos Frescos',
      contact: 'Carlos Ruiz',
      email: 'carlos@lacteosfrescos.com',
      phone: '+34 96 789 0123',
      category: 'Lácteos',
      rating: 4.4,
      totalOrders: 32,
      totalSpent: 12300.00,
      paymentTerms: '20 días',
      leadTime: '1 día',
      location: 'Valencia',
      status: 'active',
    },
  ];

  const getPurchaseStatusConfig = (status: string, paymentStatus: string) => {
    const statusConfig = {
      pending: { text: 'Pendiente', icon: Clock },
      approved: { text: 'Aprobado', icon: CheckCircle },
      in_transit: { text: 'En Tránsito', icon: Truck },
      delivered: { text: 'Entregado', icon: CheckCircle },
      cancelled: { text: 'Cancelado', icon: AlertCircle },
    };
    
    const config = statusConfig[status as keyof typeof statusConfig];
    const Icon = config?.icon;
    const isPaymentPending = paymentStatus === 'pending';
    const isOverdue = paymentStatus === 'overdue';
    
    return {
      color: getStatusColor(status === 'in_transit' ? 'inTransit' : status),
      text: config?.text || status,
      icon: Icon,
      isCritical: isOverdue,
      isHighlight: isPaymentPending
    };
  };

  const filteredOrders = mockPurchaseOrders.filter(order => {
    const matchesSearch = order.supplier.toLowerCase().includes(searchTerm.toLowerCase()) ||
      order.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
      order.notes.toLowerCase().includes(searchTerm.toLowerCase());
    
    return matchesSearch;
  });

  const mockPurchaseStats = {
    totalOrders: mockPurchaseOrders.length,
    pendingOrders: mockPurchaseOrders.filter(o => o.status === 'pending').length,
    inTransit: mockPurchaseOrders.filter(o => o.status === 'in_transit').length,
    delivered: mockPurchaseOrders.filter(o => o.status === 'delivered').length,
    totalSpent: mockPurchaseOrders.reduce((sum, order) => sum + order.totalAmount, 0),
    activeSuppliers: mockSuppliers.filter(s => s.status === 'active').length,
  };

  const purchaseOrderStats = [
    {
      title: 'Total Órdenes',
      value: mockPurchaseStats.totalOrders,
      variant: 'default' as const,
      icon: ShoppingCart,
    },
    {
      title: 'Pendientes',
      value: mockPurchaseStats.pendingOrders,
      variant: 'warning' as const,
      icon: Clock,
    },
    {
      title: 'En Tránsito',
      value: mockPurchaseStats.inTransit,
      variant: 'info' as const,
      icon: Truck,
    },
    {
      title: 'Entregadas',
      value: mockPurchaseStats.delivered,
      variant: 'success' as const,
      icon: CheckCircle,
    },
    {
      title: 'Gasto Total',
      value: formatters.currency(mockPurchaseStats.totalSpent),
      variant: 'success' as const,
      icon: DollarSign,
    },
    {
      title: 'Proveedores',
      value: mockPurchaseStats.activeSuppliers,
      variant: 'info' as const,
      icon: Package,
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        title="Gestión de Compras"
        description="Administra órdenes de compra, proveedores y seguimiento de entregas"
        actions={[
          {
            id: "export",
            label: "Exportar",
            variant: "outline" as const,
            icon: Download,
            onClick: () => console.log('Export purchase orders')
          },
          {
            id: "new",
            label: "Nueva Orden de Compra",
            variant: "primary" as const,
            icon: Plus,
            onClick: () => console.log('New purchase order')
          }
        ]}
      />

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

      {/* Tabs Navigation */}
      <div className="border-b border-[var(--border-primary)]">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => setActiveTab('orders')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'orders'
                ? 'border-orange-500 text-[var(--color-primary)]'
                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
            }`}
          >
            Órdenes de Compra
          </button>
          <button
            onClick={() => setActiveTab('suppliers')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'suppliers'
                ? 'border-orange-500 text-[var(--color-primary)]'
                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
            }`}
          >
            Proveedores
          </button>
          <button
            onClick={() => setActiveTab('analytics')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'analytics'
                ? 'border-orange-500 text-[var(--color-primary)]'
                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
            }`}
          >
            Análisis
          </button>
        </nav>
      </div>

      {activeTab === 'orders' && (
        <Card className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <Input
                placeholder="Buscar órdenes por proveedor, ID o notas..."
                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>
      )}

      {/* Purchase Orders Grid */}
      {activeTab === 'orders' && (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {filteredOrders.map((order) => {
            const statusConfig = getPurchaseStatusConfig(order.status, order.paymentStatus);
            const paymentNote = order.paymentStatus === 'pending' ? 'Pago pendiente' : order.paymentStatus === 'overdue' ? 'Pago vencido' : '';
            
            return (
              <StatusCard
                key={order.id}
                id={order.id}
                statusIndicator={statusConfig}
                title={order.supplier}
                subtitle={order.id}
                primaryValue={formatters.currency(order.totalAmount)}
                primaryValueLabel={`${order.items?.length} artículos`}
                secondaryInfo={{
                  label: 'Entrega',
                  value: `${new Date(order.deliveryDate).toLocaleDateString('es-ES')} (pedido: ${new Date(order.orderDate).toLocaleDateString('es-ES')})`
                }}
                metadata={[
                  ...(order.notes ? [`"${order.notes}"`] : []),
                  ...(paymentNote ? [paymentNote] : [])
                ]}
                actions={[
                  {
                    label: 'Ver',
                    icon: Eye,
                    variant: 'outline',
                    onClick: () => {
                      setSelectedOrder(order);
                      setModalMode('view');
                      setShowForm(true);
                    }
                  },
                  {
                    label: 'Editar',
                    icon: Edit,
                    variant: 'outline',
                    onClick: () => {
                      setSelectedOrder(order);
                      setModalMode('edit');
                      setShowForm(true);
                    }
                  }
                ]}
              />
            );
          })}
        </div>
      )}

      {/* Empty State for Purchase Orders */}
      {activeTab === 'orders' && filteredOrders.length === 0 && (
        <div className="text-center py-12">
          <ShoppingCart 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 órdenes de compra
          </h3>
          <p className="text-[var(--text-secondary)] mb-4">
            Intenta ajustar la búsqueda o crear una nueva orden de compra
          </p>
          <Button onClick={() => console.log('New purchase order')}>
            <Plus className="w-4 h-4 mr-2" />
            Nueva Orden de Compra
          </Button>
        </div>
      )}

      {activeTab === 'suppliers' && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {mockSuppliers.map((supplier) => (
            <Card key={supplier.id} className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div>
                  <h3 className="text-lg font-semibold text-[var(--text-primary)]">{supplier.name}</h3>
                  <p className="text-sm text-[var(--text-secondary)]">{supplier.category}</p>
                </div>
                <Badge variant="green">Activo</Badge>
              </div>

              <div className="space-y-2 mb-4">
                <div className="flex justify-between text-sm">
                  <span className="text-[var(--text-secondary)]">Contacto:</span>
                  <span className="font-medium">{supplier.contact}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-[var(--text-secondary)]">Email:</span>
                  <span className="font-medium">{supplier.email}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-[var(--text-secondary)]">Teléfono:</span>
                  <span className="font-medium">{supplier.phone}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-[var(--text-secondary)]">Ubicación:</span>
                  <span className="font-medium">{supplier.location}</span>
                </div>
              </div>

              <div className="border-t pt-4">
                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <p className="text-xs text-[var(--text-secondary)]">Valoración</p>
                    <p className="text-sm font-medium flex items-center">
                      <span className="text-yellow-500">★</span>
                      <span className="ml-1">{supplier.rating}</span>
                    </p>
                  </div>
                  <div>
                    <p className="text-xs text-[var(--text-secondary)]">Pedidos</p>
                    <p className="text-sm font-medium">{supplier.totalOrders}</p>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <p className="text-xs text-[var(--text-secondary)]">Total Gastado</p>
                    <p className="text-sm font-medium">€{supplier.totalSpent.toLocaleString()}</p>
                  </div>
                  <div>
                    <p className="text-xs text-[var(--text-secondary)]">Tiempo Entrega</p>
                    <p className="text-sm font-medium">{supplier.leadTime}</p>
                  </div>
                </div>

                <div className="mb-4">
                  <p className="text-xs text-[var(--text-secondary)]">Condiciones de Pago</p>
                  <p className="text-sm font-medium">{supplier.paymentTerms}</p>
                </div>

                <div className="flex space-x-2">
                  <Button variant="outline" size="sm" className="flex-1">
                    Ver Detalles
                  </Button>
                  <Button size="sm" className="flex-1">
                    Nuevo Pedido
                  </Button>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {activeTab === 'analytics' && (
        <div className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card className="p-6">
              <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Gastos por Mes</h3>
              <div className="h-64 flex items-center justify-center bg-[var(--bg-secondary)] rounded-lg">
                <p className="text-[var(--text-tertiary)]">Gráfico de gastos mensuales</p>
              </div>
            </Card>

            <Card className="p-6">
              <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Top Proveedores</h3>
              <div className="space-y-3">
                {mockSuppliers
                  .sort((a, b) => b.totalSpent - a.totalSpent)
                  .slice(0, 5)
                  .map((supplier, index) => (
                    <div key={supplier.id} className="flex items-center justify-between">
                      <div className="flex items-center">
                        <span className="text-sm font-medium text-[var(--text-tertiary)] w-4">
                          {index + 1}.
                        </span>
                        <span className="ml-3 text-sm text-[var(--text-primary)]">{supplier.name}</span>
                      </div>
                      <span className="text-sm font-medium text-[var(--text-primary)]">
                        €{supplier.totalSpent.toLocaleString()}
                      </span>
                    </div>
                  ))}
              </div>
            </Card>
          </div>

          <Card className="p-6">
            <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Gastos por Categoría</h3>
            <div className="h-64 flex items-center justify-center bg-[var(--bg-secondary)] rounded-lg">
              <p className="text-[var(--text-tertiary)]">Gráfico de gastos por categoría</p>
            </div>
          </Card>
        </div>
      )}

      {/* Purchase Order Modal */}
      {showForm && selectedOrder && (
        <StatusModal
          isOpen={showForm}
          onClose={() => {
            setShowForm(false);
            setSelectedOrder(null);
            setModalMode('view');
          }}
          mode={modalMode}
          onModeChange={setModalMode}
          title={selectedOrder.supplier}
          subtitle={`Orden de Compra ${selectedOrder.id}`}
          statusIndicator={getPurchaseStatusConfig(selectedOrder.status, selectedOrder.paymentStatus)}
          size="lg"
          sections={[
            {
              title: 'Información del Proveedor',
              icon: Package,
              fields: [
                {
                  label: 'Proveedor',
                  value: selectedOrder.supplier,
                  highlight: true,
                  editable: true,
                  required: true,
                  placeholder: 'Nombre del proveedor'
                },
                {
                  label: 'ID de Orden',
                  value: selectedOrder.id
                },
                {
                  label: 'Estado de Pago',
                  value: selectedOrder.paymentStatus === 'paid' ? 'Pagado' : selectedOrder.paymentStatus === 'pending' ? 'Pendiente' : 'Vencido',
                  type: 'status'
                }
              ]
            },
            {
              title: 'Fechas Importantes',
              icon: Calendar,
              fields: [
                {
                  label: 'Fecha de pedido',
                  value: selectedOrder.orderDate,
                  type: 'date',
                  editable: true
                },
                {
                  label: 'Fecha de entrega',
                  value: selectedOrder.deliveryDate,
                  type: 'date',
                  highlight: true,
                  editable: true,
                  required: true
                }
              ]
            },
            {
              title: 'Información Financiera',
              icon: DollarSign,
              fields: [
                {
                  label: 'Importe total',
                  value: selectedOrder.totalAmount,
                  type: 'currency',
                  highlight: true,
                  editable: true,
                  required: true,
                  placeholder: '0.00'
                },
                {
                  label: 'Número de artículos',
                  value: `${selectedOrder.items?.length} productos`
                }
              ]
            },
            {
              title: 'Artículos Pedidos',
              icon: ShoppingCart,
              fields: [
                {
                  label: 'Lista de productos',
                  value: selectedOrder.items?.map(item => `${item.name}: ${item.quantity} ${item.unit} - ${formatters.currency(item.total)}`),
                  type: 'list',
                  span: 2
                }
              ]
            },
            ...(selectedOrder.notes ? [{
              title: 'Notas Adicionales',
              fields: [
                {
                  label: 'Observaciones',
                  value: selectedOrder.notes,
                  span: 2 as const,
                  editable: true,
                  placeholder: 'Añadir notas sobre la orden de compra...'
                }
              ]
            }] : [])
          ]}
          onEdit={() => {
            console.log('Editing purchase order:', selectedOrder.id);
          }}
        />
      )}
    </div>
  );
};

export default ProcurementPage;