bakery-ia/frontend/src/pages/app/operations/suppliers/SuppliersPage.tsx

import React, { useState } from 'react';
import { Plus, Building2, Phone, Mail, Eye, Edit, CheckCircle, AlertCircle, Timer, Users, Euro, Loader } from 'lucide-react';
import { Button, Badge, StatsGrid, StatusCard, getStatusColor, EditViewModal, SearchAndFilter, type FilterConfig } from '../../../../components/ui';
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
import { PageHeader } from '../../../../components/layout';
import { SupplierStatus, SupplierType, PaymentTerms } from '../../../../api/types/suppliers';
import { useSuppliers, useSupplierStatistics } from '../../../../api/hooks/suppliers';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useAuthUser } from '../../../../stores/auth.store';
import { useTranslation } from 'react-i18next';

const SuppliersPage: React.FC = () => {
  const [activeTab] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [typeFilter, setTypeFilter] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
  const [selectedSupplier, setSelectedSupplier] = useState<any>(null);
  const [isCreating, setIsCreating] = useState(false);

  // Get tenant ID from tenant store (preferred) or auth user (fallback)
  const currentTenant = useCurrentTenant();
  const user = useAuthUser();
  const tenantId = currentTenant?.id || user?.tenant_id || '';

  // API hooks
  const {
    data: suppliersData,
    isLoading: suppliersLoading,
    error: suppliersError
  } = useSuppliers(tenantId, {
    search_term: searchTerm || undefined,
    status: activeTab !== 'all' ? activeTab as any : undefined,
    limit: 100
  });

  const {
    data: statisticsData,
    isLoading: statisticsLoading,
    error: statisticsError
  } = useSupplierStatistics(tenantId);

  const suppliers = suppliersData || [];
  const { t } = useTranslation(['suppliers', 'common']);

  const getSupplierStatusConfig = (status: SupplierStatus) => {
    const statusConfig = {
      [SupplierStatus.ACTIVE]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: CheckCircle },
      [SupplierStatus.INACTIVE]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: Timer },
      [SupplierStatus.PENDING_APPROVAL]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: AlertCircle },
      [SupplierStatus.SUSPENDED]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: AlertCircle },
      [SupplierStatus.BLACKLISTED]: { text: t(`suppliers:status.${status.toLowerCase()}`), icon: AlertCircle },
    };
    
    const config = statusConfig[status];
    const Icon = config?.icon;
    
    return {
      color: getStatusColor(status === SupplierStatus.ACTIVE ? 'completed' : 
             status === SupplierStatus.PENDING_APPROVAL ? 'pending' : 'cancelled'),
      text: config?.text || status,
      icon: Icon,
      isCritical: status === SupplierStatus.BLACKLISTED,
      isHighlight: status === SupplierStatus.PENDING_APPROVAL
    };
  };

  const getSupplierTypeText = (type: SupplierType): string => {
    return t(`suppliers:types.${type.toLowerCase()}`);
  };

  const getPaymentTermsText = (terms: PaymentTerms): string => {
    return t(`suppliers:payment_terms.${terms.toLowerCase()}`);
  };

  // Apply additional client-side filtering
  const filteredSuppliers = suppliers.filter(supplier => {
    const matchesStatus = !statusFilter || supplier.status === statusFilter;
    const matchesType = !typeFilter || supplier.supplier_type === typeFilter;
    return matchesStatus && matchesType;
  });

  const supplierStats = statisticsData || {
    total_suppliers: 0,
    active_suppliers: 0,
    pending_suppliers: 0,
    avg_quality_rating: 0,
    avg_delivery_rating: 0,
    total_spend: 0
  };

  const stats = [
    {
      title: 'Total Proveedores',
      value: supplierStats.total_suppliers,
      variant: 'default' as const,
      icon: Building2,
    },
    {
      title: 'Activos',
      value: supplierStats.active_suppliers,
      variant: 'success' as const,
      icon: CheckCircle,
    },
    {
      title: 'Pendientes',
      value: supplierStats.pending_suppliers,
      variant: 'warning' as const,
      icon: AlertCircle,
    },
    {
      title: 'Gasto Total',
      value: formatters.currency(supplierStats.total_spend),
      variant: 'info' as const,
      icon: Euro,
    },
    {
      title: 'Calidad Media',
      value: supplierStats.avg_quality_rating?.toFixed(1) || '0.0',
      variant: 'success' as const,
      icon: CheckCircle,
    },
    {
      title: 'Entrega Media',
      value: supplierStats.avg_delivery_rating?.toFixed(1) || '0.0',
      variant: 'info' as const,
      icon: Building2,
    },
  ];

  // Loading state
  if (suppliersLoading || statisticsLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <Loader className="h-8 w-8 animate-spin mx-auto mb-4 text-[var(--primary)]" />
          <p className="text-[var(--text-secondary)]">Cargando proveedores...</p>
        </div>
      </div>
    );
  }

  // Error state
  if (suppliersError || statisticsError) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <AlertCircle className="h-8 w-8 mx-auto mb-4 text-red-500" />
          <p className="text-red-600 mb-2">Error al cargar los proveedores</p>
          <p className="text-[var(--text-secondary)] text-sm">
            {(suppliersError as any)?.message || (statisticsError as any)?.message || 'Error desconocido'}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader 
        title="Gestión de Proveedores"
        description="Administra y supervisa todos los proveedores de la panadería"
        actions={[
          {
            id: "new",
            label: "Nuevo Proveedor",
            variant: "primary" as const,
            icon: Plus,
            onClick: () => {
              setSelectedSupplier({
                name: '',
                contact_person: '',
                email: '',
                phone: '',
                city: '',
                country: '',
                supplier_code: '',
                supplier_type: SupplierType.INGREDIENTS,
                payment_terms: PaymentTerms.NET_30,
                standard_lead_time: 3,
                minimum_order_amount: 0,
                credit_limit: 0,
                currency: 'EUR'
              });
              setIsCreating(true);
              setModalMode('edit');
              setShowForm(true);
            }
          }
        ]}
      />

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

      {/* Search and Filter Controls */}
      <SearchAndFilter
        searchValue={searchTerm}
        onSearchChange={setSearchTerm}
        searchPlaceholder="Buscar proveedores por nombre, código, email o contacto..."
        filters={[
          {
            key: 'status',
            label: 'Estado',
            type: 'dropdown',
            value: statusFilter,
            onChange: (value) => setStatusFilter(value as string),
            placeholder: 'Todos los estados',
            options: Object.values(SupplierStatus).map(status => ({
              value: status,
              label: t(`suppliers:status.${status.toLowerCase()}`)
            }))
          },
          {
            key: 'type',
            label: 'Tipo',
            type: 'dropdown',
            value: typeFilter,
            onChange: (value) => setTypeFilter(value as string),
            placeholder: 'Todos los tipos',
            options: Object.values(SupplierType).map(type => ({
              value: type,
              label: t(`suppliers:types.${type.toLowerCase()}`)
            }))
          }
        ] as FilterConfig[]}
      />

      {/* Suppliers Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {filteredSuppliers.map((supplier) => {
          const statusConfig = getSupplierStatusConfig(supplier.status);

          return (
            <StatusCard
              key={supplier.id}
              id={supplier.id}
              statusIndicator={statusConfig}
              title={supplier.name}
              subtitle={`${getSupplierTypeText(supplier.supplier_type)} • ${supplier.city || 'Sin ubicación'}`}
              primaryValue={supplier.standard_lead_time || 0}
              primaryValueLabel="días"
              secondaryInfo={{
                label: 'Pedido Min.',
                value: `€${formatters.compact(supplier.minimum_order_amount || 0)}`
              }}
              metadata={[
                supplier.contact_person || 'Sin contacto',
                supplier.email || 'Sin email',
                supplier.phone || 'Sin teléfono',
                `Creado: ${new Date(supplier.created_at).toLocaleDateString('es-ES')}`
              ]}
              onClick={() => {
                setSelectedSupplier(supplier);
                setIsCreating(false);
                setModalMode('view');
                setShowForm(true);
              }}
              actions={[
                // Primary action - View supplier details
                {
                  label: 'Ver Detalles',
                  icon: Eye,
                  variant: 'primary',
                  priority: 'primary',
                  onClick: () => {
                    setSelectedSupplier(supplier);
                    setIsCreating(false);
                    setModalMode('view');
                    setShowForm(true);
                  }
                },
                // Secondary action - Edit supplier
                {
                  label: 'Editar',
                  icon: Edit,
                  priority: 'secondary',
                  onClick: () => {
                    setSelectedSupplier(supplier);
                    setIsCreating(false);
                    setModalMode('edit');
                    setShowForm(true);
                  }
                }
              ]}
            />
          );
        })}
      </div>

      {/* Empty State */}
      {filteredSuppliers.length === 0 && (
        <div className="text-center py-12">
          <Building2 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 proveedores
          </h3>
          <p className="text-[var(--text-secondary)] mb-4">
            Intenta ajustar la búsqueda o crear un nuevo proveedor
          </p>
          <Button onClick={() => setShowForm(true)}>
            <Plus className="w-4 h-4 mr-2" />
            Nuevo Proveedor
          </Button>
        </div>
      )}

      {/* Supplier Details Modal */}
      {showForm && selectedSupplier && (() => {
        const sections = [
          {
            title: 'Información de Contacto',
            icon: Users,
            fields: [
              {
                label: 'Nombre',
                value: selectedSupplier.name || '',
                type: 'text',
                highlight: true,
                editable: true,
                required: true,
                placeholder: 'Nombre del proveedor'
              },
              {
                label: 'Persona de Contacto',
                value: selectedSupplier.contact_person || '',
                type: 'text',
                editable: true,
                placeholder: 'Nombre del contacto'
              },
              {
                label: 'Email',
                value: selectedSupplier.email || '',
                type: 'email',
                editable: true,
                placeholder: 'email@ejemplo.com'
              },
              {
                label: 'Teléfono',
                value: selectedSupplier.phone || '',
                type: 'tel',
                editable: true,
                placeholder: '+34 123 456 789'
              },
              {
                label: 'Ciudad',
                value: selectedSupplier.city || '',
                type: 'text',
                editable: true,
                placeholder: 'Ciudad'
              },
              {
                label: 'País',
                value: selectedSupplier.country || '',
                type: 'text',
                editable: true,
                placeholder: 'País'
              }
            ]
          },
          {
            title: 'Información Comercial',
            icon: Building2,
            fields: [
              {
                label: 'Código de Proveedor',
                value: selectedSupplier.supplier_code || '',
                type: 'text',
                highlight: true,
                editable: true,
                placeholder: 'Código único'
              },
              {
                label: 'Tipo de Proveedor',
                value: selectedSupplier.supplier_type || SupplierType.INGREDIENTS,
                type: 'select',
                editable: true,
                options: Object.values(SupplierType).map(value => ({
                  value,
                  label: t(`suppliers:types.${value.toLowerCase()}`)
                }))
              },
              {
                label: 'Condiciones de Pago',
                value: selectedSupplier.payment_terms || PaymentTerms.NET_30,
                type: 'select',
                editable: true,
                options: Object.values(PaymentTerms).map(value => ({
                  value,
                  label: t(`suppliers:payment_terms.${value.toLowerCase()}`)
                }))
              },
              {
                label: 'Tiempo de Entrega (días)',
                value: selectedSupplier.standard_lead_time || 3,
                type: 'number',
                editable: true,
                placeholder: '3'
              },
              {
                label: 'Pedido Mínimo',
                value: selectedSupplier.minimum_order_amount || 0,
                type: 'currency',
                editable: true,
                placeholder: '0.00'
              },
              {
                label: 'Límite de Crédito',
                value: selectedSupplier.credit_limit || 0,
                type: 'currency',
                editable: true,
                placeholder: '0.00'
              }
            ]
          },
          {
            title: 'Rendimiento y Estadísticas',
            icon: Euro,
            fields: [
              {
                label: 'Moneda',
                value: selectedSupplier.currency || 'EUR',
                type: 'text',
                editable: true,
                placeholder: 'EUR'
              },
              {
                label: 'Fecha de Creación',
                value: selectedSupplier.created_at,
                type: 'datetime',
                highlight: true
              },
              {
                label: 'Última Actualización',
                value: selectedSupplier.updated_at,
                type: 'datetime'
              }
            ]
          },
          ...(selectedSupplier.notes ? [{
            title: 'Notas',
            fields: [
              {
                label: 'Observaciones',
                value: selectedSupplier.notes,
                type: 'list',
                span: 2 as const,
                editable: true,
                placeholder: 'Notas sobre el proveedor'
              }
            ]
          }] : [])
        ];

        return (
          <EditViewModal
          isOpen={showForm}
          onClose={() => {
            setShowForm(false);
            setSelectedSupplier(null);
            setModalMode('view');
            setIsCreating(false);
          }}
          mode={modalMode}
          onModeChange={setModalMode}
          title={isCreating ? 'Nuevo Proveedor' : selectedSupplier.name || 'Proveedor'}
          subtitle={isCreating ? 'Crear nuevo proveedor' : `Proveedor ${selectedSupplier.supplier_code || ''}`}
          statusIndicator={isCreating ? undefined : getSupplierStatusConfig(selectedSupplier.status)}
          size="lg"
          sections={sections}
          showDefaultActions={true}
          onSave={async () => {
            // TODO: Implement save functionality
            console.log('Saving supplier:', selectedSupplier);
          }}
          onFieldChange={(sectionIndex, fieldIndex, value) => {
            // Update the selectedSupplier state when fields change
            const newSupplier = { ...selectedSupplier };
            const section = sections[sectionIndex];
            const field = section.fields[fieldIndex];

            // Map field labels to supplier properties
            const fieldMapping: { [key: string]: string } = {
              'Nombre': 'name',
              'Persona de Contacto': 'contact_person',
              'Email': 'email',
              'Teléfono': 'phone',
              'Ciudad': 'city',
              'País': 'country',
              'Código de Proveedor': 'supplier_code',
              'Tipo de Proveedor': 'supplier_type',
              'Condiciones de Pago': 'payment_terms',
              'Tiempo de Entrega (días)': 'standard_lead_time',
              'Pedido Mínimo': 'minimum_order_amount',
              'Límite de Crédito': 'credit_limit',
              'Moneda': 'currency',
              'Observaciones': 'notes'
            };

            const propertyName = fieldMapping[field.label];
            if (propertyName) {
              newSupplier[propertyName] = value;
              setSelectedSupplier(newSupplier);
            }
          }}
        />
        );
      })()}
    </div>
  );
};

export default SuppliersPage;