import React, { useState } from 'react';
import { Plus, Download, ShoppingCart, Truck, DollarSign, Calendar, Clock, CheckCircle, AlertCircle, Package, Eye, Loader, Edit, ArrowRight, X, Save, Building2, Play } from 'lucide-react';
import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
import { PageHeader } from '../../../../components/layout';
import {
  useProcurementDashboard,
  useProcurementPlans,
  usePlanRequirements,
  useGenerateProcurementPlan,
  useUpdateProcurementPlanStatus,
  useTriggerDailyScheduler
} from '../../../../api';
import { useTenantStore } from '../../../../stores/tenant.store';

const ProcurementPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
  const [selectedPlan, setSelectedPlan] = useState<any>(null);
  const [editingPlan, setEditingPlan] = useState<any>(null);
  const [editFormData, setEditFormData] = useState<any>({});
  const [selectedPlanForRequirements, setSelectedPlanForRequirements] = useState<string | null>(null);
  const [showCriticalRequirements, setShowCriticalRequirements] = useState(false);

  const { currentTenant } = useTenantStore();
  const tenantId = currentTenant?.id || '';

  // Real API data hooks
  const { data: dashboardData, isLoading: isDashboardLoading } = useProcurementDashboard(tenantId);
  const { data: procurementPlans, isLoading: isPlansLoading } = useProcurementPlans({
    tenant_id: tenantId,
    limit: 50,
    offset: 0
  });

  // Get plan requirements for selected plan
  const { data: allPlanRequirements, isLoading: isPlanRequirementsLoading } = usePlanRequirements({
    tenant_id: tenantId,
    plan_id: selectedPlanForRequirements || ''
    // Remove status filter to get all requirements
  }, {
    enabled: !!selectedPlanForRequirements && !!tenantId
  });

  // Filter critical requirements client-side
  const planRequirements = allPlanRequirements?.filter(req => {
    // Check various conditions that might make a requirement critical
    const isLowStock = req.current_stock_level && req.required_quantity &&
                       (req.current_stock_level / req.required_quantity) < 0.5;
    const isNearDeadline = req.required_by_date &&
                          (new Date(req.required_by_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24) < 7;
    const hasHighPriority = req.priority === 'high';

    return isLowStock || isNearDeadline || hasHighPriority;
  });

  // Debug logging
  console.log('📊 Plan Requirements Debug:', {
    selectedPlanId: selectedPlanForRequirements,
    allRequirements: allPlanRequirements?.length || 0,
    criticalRequirements: planRequirements?.length || 0,
    sampleRequirement: allPlanRequirements?.[0]
  });
  
  const generatePlanMutation = useGenerateProcurementPlan();
  const updatePlanStatusMutation = useUpdateProcurementPlanStatus();
  const triggerSchedulerMutation = useTriggerDailyScheduler();

  // Helper functions for stage transitions and edit functionality
  const getNextStage = (currentStatus: string): string | null => {
    const stageFlow: { [key: string]: string } = {
      'draft': 'pending_approval',
      'pending_approval': 'approved',
      'approved': 'in_execution',
      'in_execution': 'completed'
    };
    return stageFlow[currentStatus] || null;
  };

  const getStageActionConfig = (status: string) => {
    const configs: { [key: string]: { label: string; icon: any; variant: 'primary' | 'outline'; color?: string } } = {
      'draft': { label: 'Enviar a Aprobación', icon: ArrowRight, variant: 'primary' },
      'pending_approval': { label: 'Aprobar', icon: CheckCircle, variant: 'primary' },
      'approved': { label: 'Iniciar Ejecución', icon: Play, variant: 'primary' },
      'in_execution': { label: 'Completar', icon: CheckCircle, variant: 'primary' }
    };
    return configs[status];
  };

  const canEdit = (status: string): boolean => {
    return status === 'draft';
  };

  const handleStageTransition = (planId: string, currentStatus: string) => {
    const nextStage = getNextStage(currentStatus);
    if (nextStage) {
      updatePlanStatusMutation.mutate({
        tenant_id: tenantId,
        plan_id: planId,
        status: nextStage as any
      });
    }
  };

  const handleCancelPlan = (planId: string) => {
    updatePlanStatusMutation.mutate({
      tenant_id: tenantId,
      plan_id: planId,
      status: 'cancelled'
    });
  };

  const handleEditPlan = (plan: any) => {
    setEditingPlan(plan);
    setEditFormData({
      special_requirements: plan.special_requirements || '',
      planning_horizon_days: plan.planning_horizon_days || 14,
      priority: plan.priority || 'medium'
    });
  };

  const handleSaveEdit = () => {
    // For now, we'll just update the special requirements since that's the main editable field
    // In a real implementation, you might have a separate API endpoint for updating plan details
    console.log('Saving plan edits:', editFormData);
    setEditingPlan(null);
    setEditFormData({});
    // Here you would typically call an update API
  };

  const handleCancelEdit = () => {
    setEditingPlan(null);
    setEditFormData({});
  };

  const handleShowCriticalRequirements = (planId: string) => {
    console.log('🔍 Opening critical requirements for plan:', planId);
    setSelectedPlanForRequirements(planId);
    setShowCriticalRequirements(true);
  };

  const handleCloseCriticalRequirements = () => {
    setShowCriticalRequirements(false);
    setSelectedPlanForRequirements(null);
  };

  if (!tenantId) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="text-center">
          <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
            No hay tenant seleccionado
          </h3>
          <p className="text-[var(--text-secondary)]">
            Selecciona un tenant para ver los datos de procurement
          </p>
        </div>
      </div>
    );
  }


  const getPlanStatusConfig = (status: string) => {
    const statusConfig = {
      draft: { text: 'Borrador', icon: Clock },
      pending_approval: { text: 'Pendiente Aprobación', icon: Clock },
      approved: { text: 'Aprobado', icon: CheckCircle },
      in_execution: { text: 'En Ejecución', icon: Truck },
      completed: { text: 'Completado', icon: CheckCircle },
      cancelled: { text: 'Cancelado', icon: AlertCircle },
    };
    
    const config = statusConfig[status as keyof typeof statusConfig];
    const Icon = config?.icon;
    
    return {
      color: getStatusColor(status === 'in_execution' ? 'inTransit' : status === 'pending_approval' ? 'pending' : status),
      text: config?.text || status,
      icon: Icon,
      isCritical: status === 'cancelled',
      isHighlight: status === 'pending_approval'
    };
  };

  const filteredPlans = procurementPlans?.plans?.filter(plan => {
    const matchesSearch = plan.plan_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
      plan.status.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (plan.special_requirements && plan.special_requirements.toLowerCase().includes(searchTerm.toLowerCase()));
    
    return matchesSearch;
  }) || [];

  const stats = {
    totalPlans: dashboardData?.summary?.total_plans || 0,
    activePlans: dashboardData?.summary?.active_plans || 0,
    pendingRequirements: dashboardData?.summary?.pending_requirements || 0,
    criticalRequirements: dashboardData?.summary?.critical_requirements || 0,
    totalEstimatedCost: dashboardData?.summary?.total_estimated_cost || 0,
    totalApprovedCost: dashboardData?.summary?.total_approved_cost || 0,
  };

  const procurementStats = [
    {
      title: 'Planes Totales',
      value: stats.totalPlans,
      variant: 'default' as const,
      icon: Package,
    },
    {
      title: 'Planes Activos',
      value: stats.activePlans,
      variant: 'success' as const,
      icon: CheckCircle,
    },
    {
      title: 'Requerimientos Pendientes',
      value: stats.pendingRequirements,
      variant: 'warning' as const,
      icon: Clock,
    },
    {
      title: 'Críticos',
      value: stats.criticalRequirements,
      variant: 'warning' as const,
      icon: AlertCircle,
    },
    {
      title: 'Costo Estimado',
      value: formatters.currency(stats.totalEstimatedCost),
      variant: 'info' as const,
      icon: DollarSign,
    },
    {
      title: 'Costo Aprobado',
      value: formatters.currency(stats.totalApprovedCost),
      variant: 'success' as const,
      icon: DollarSign,
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        title="Planificación de Compras"
        description="Administra planes de compras, requerimientos y análisis de procurement"
        actions={[
          {
            id: "export",
            label: "Exportar",
            variant: "outline" as const,
            icon: Download,
            onClick: () => console.log('Export procurement data')
          },
          {
            id: "generate",
            label: "Generar Plan",
            variant: "primary" as const,
            icon: Plus,
            onClick: () => generatePlanMutation.mutate({
              tenantId,
              request: {
                force_regenerate: false,
                planning_horizon_days: 14,
                include_safety_stock: true,
                safety_stock_percentage: 20
              }
            })
          },
          {
            id: "trigger",
            label: triggerSchedulerMutation.isPending ? "Ejecutando..." : "Ejecutar Programador",
            variant: "outline" as const,
            icon: triggerSchedulerMutation.isPending ? Loader : Calendar,
            onClick: () => {
              triggerSchedulerMutation.mutate(tenantId, {
                onSuccess: (data) => {
                  console.log('✅ Scheduler ejecutado exitosamente:', data.message);
                  // Show success notification (if you have a notification system)
                  // toast.success(data.message);
                },
                onError: (error) => {
                  console.error('❌ Error ejecutando scheduler:', error);
                  // Show error notification
                  // toast.error('Error ejecutando el programador de compras');
                }
              })
            },
            disabled: triggerSchedulerMutation.isPending
          }
        ]}
      />

      {/* Stats Grid */}
      {isDashboardLoading ? (
        <div className="flex justify-center items-center h-32">
          <Loader className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
        </div>
      ) : (
        <StatsGrid 
          stats={procurementStats}
          columns={3}
        />
      )}


      <Card className="p-4">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <Input
              placeholder="Buscar planes por número, estado 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>

      {/* Procurement Plans Grid - Mobile-Optimized */}
      <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
        {isPlansLoading ? (
          <div className="col-span-full flex justify-center items-center h-32">
            <Loader className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
          </div>
        ) : (
          filteredPlans.map((plan) => {
              const statusConfig = getPlanStatusConfig(plan.status);
              const nextStageConfig = getStageActionConfig(plan.status);
              const isEditing = editingPlan?.id === plan.id;
              const isEditable = canEdit(plan.status);
              
              // Build actions array with proper priority hierarchy for better UX
              const actions = [];
              
              // Edit mode actions (highest priority when editing)
              if (isEditing) {
                actions.push(
                  {
                    label: 'Guardar',
                    icon: Save,
                    variant: 'primary' as const,
                    priority: 'primary' as const,
                    onClick: handleSaveEdit
                  },
                  {
                    label: 'Cancelar',
                    icon: X,
                    variant: 'outline' as const,
                    priority: 'primary' as const,
                    destructive: true,
                    onClick: handleCancelEdit
                  }
                );
              } else {
                // Primary action: Stage transition (most important)
                if (nextStageConfig) {
                  actions.push({
                    label: nextStageConfig.label,
                    icon: nextStageConfig.icon,
                    variant: nextStageConfig.variant,
                    priority: 'primary' as const,
                    onClick: () => handleStageTransition(plan.id, plan.status)
                  });
                }

                // Secondary actions: Edit and View
                if (isEditable) {
                  actions.push({
                    label: 'Editar',
                    icon: Edit,
                    variant: 'outline' as const,
                    priority: 'secondary' as const,
                    onClick: () => handleEditPlan(plan)
                  });
                }

                actions.push({
                  label: 'Ver',
                  icon: Eye,
                  variant: 'outline' as const,
                  priority: 'secondary' as const,
                  onClick: () => {
                    setSelectedPlan(plan);
                    setModalMode('view');
                    setShowForm(true);
                  }
                });

                // Show Critical Requirements button
                actions.push({
                  label: 'Req. Críticos',
                  icon: AlertCircle,
                  variant: 'outline' as const,
                  priority: 'secondary' as const,
                  onClick: () => handleShowCriticalRequirements(plan.id)
                });

                // Tertiary action: Cancel (least prominent, destructive)
                if (!['completed', 'cancelled'].includes(plan.status)) {
                  actions.push({
                    label: 'Cancelar',
                    icon: X,
                    variant: 'outline' as const,
                    priority: 'tertiary' as const,
                    destructive: true,
                    onClick: () => handleCancelPlan(plan.id)
                  });
                }
              }

              return (
                <div key={plan.id} className="space-y-2">
                  <StatusCard
                    id={plan.plan_number}
                    statusIndicator={statusConfig}
                    title={`Plan ${plan.plan_number}`}
                    subtitle={`${new Date(plan.plan_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: '2-digit' })} • ${plan.procurement_strategy}`}
                    primaryValue={plan.total_requirements}
                    primaryValueLabel="requerimientos"
                    secondaryInfo={{
                      label: 'Presupuesto',
                      value: `€${formatters.compact(plan.total_estimated_cost)}`
                    }}
                    progress={plan.planning_horizon_days ? {
                      label: `${plan.planning_horizon_days} días de horizonte`,
                      percentage: Math.min((plan.planning_horizon_days / 30) * 100, 100),
                      color: plan.planning_horizon_days > 14 ? '#10b981' : plan.planning_horizon_days > 7 ? '#f59e0b' : '#ef4444'
                    } : undefined}
                    metadata={[
                      `Período: ${new Date(plan.plan_period_start).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })} - ${new Date(plan.plan_period_end).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })}`,
                      `Creado: ${new Date(plan.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })}`,
                      ...(plan.special_requirements ? [`Req. especiales: ${plan.special_requirements}`] : [])
                    ]}
                    actions={actions}
                  />

                  {/* Inline Edit Form for Draft Plans */}
                  {isEditing && (
                    <Card className="p-4 border-l-4 border-l-[var(--color-primary)] bg-[var(--color-primary)]/5">
                      <h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">
                        Editando Plan {plan.plan_number}
                      </h4>
                      <div className="space-y-3">
                        <div>
                          <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                            Requerimientos Especiales
                          </label>
                          <textarea
                            value={editFormData.special_requirements}
                            onChange={(e) => setEditFormData((prev: any) => ({ ...prev, special_requirements: e.target.value }))}
                            placeholder="Ingrese requerimientos especiales para este plan..."
                            className="w-full px-3 py-2 text-sm border border-[var(--border-primary)] rounded-lg
                              bg-[var(--bg-primary)] text-[var(--text-primary)] placeholder-[var(--text-tertiary)]
                              focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]
                              transition-colors duration-200 resize-vertical min-h-[60px]"
                            rows={2}
                          />
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                              Días de Horizonte
                            </label>
                            <Input
                              type="number"
                              value={editFormData.planning_horizon_days}
                              onChange={(e) => setEditFormData((prev: any) => ({ ...prev, planning_horizon_days: parseInt(e.target.value) }))}
                              min="1"
                              max="365"
                              className="w-full"
                            />
                          </div>
                          <div>
                            <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                              Prioridad
                            </label>
                            <select
                              value={editFormData.priority}
                              onChange={(e) => setEditFormData((prev: any) => ({ ...prev, priority: e.target.value }))}
                              className="w-full px-3 py-2 text-sm border border-[var(--border-primary)] rounded-lg
                                bg-[var(--bg-primary)] text-[var(--text-primary)]
                                focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]
                                transition-colors duration-200"
                            >
                              <option value="low">Baja</option>
                              <option value="medium">Media</option>
                              <option value="high">Alta</option>
                              <option value="urgent">Urgente</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </Card>
                  )}
                </div>
              );
            })
          )
        }
      </div>

      {/* Empty State for Procurement Plans */}
      {!isPlansLoading && filteredPlans.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 planes de compra
          </h3>
          <p className="text-[var(--text-secondary)] mb-4">
            Intenta ajustar la búsqueda o generar un nuevo plan de compra
          </p>
          <Button 
            onClick={() => generatePlanMutation.mutate({
              tenantId,
              request: {
                force_regenerate: false,
                planning_horizon_days: 14,
                include_safety_stock: true,
                safety_stock_percentage: 20
              }
            })}
            disabled={generatePlanMutation.isPending}
          >
            {generatePlanMutation.isPending ? (
              <Loader className="w-4 h-4 mr-2 animate-spin" />
            ) : (
              <Plus className="w-4 h-4 mr-2" />
            )}
            Generar Plan de Compra
          </Button>
        </div>
      )}

      {/* Critical Requirements Modal */}
      {showCriticalRequirements && selectedPlanForRequirements && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-[var(--bg-primary)] rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden mx-4">
            {/* Header */}
            <div className="flex items-center justify-between p-6 border-b border-[var(--border-primary)]">
              <div className="flex items-center space-x-3">
                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-red-100">
                  <AlertCircle className="w-5 h-5 text-red-600" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">
                    Requerimientos Críticos
                  </h2>
                  <p className="text-sm text-[var(--text-secondary)]">
                    Plan {filteredPlans.find(p => p.id === selectedPlanForRequirements)?.plan_number || selectedPlanForRequirements}
                  </p>
                </div>
              </div>
              <Button
                variant="outline"
                onClick={handleCloseCriticalRequirements}
                className="p-2"
              >
                <X className="w-4 h-4" />
              </Button>
            </div>

            {/* Content */}
            <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
              {isPlanRequirementsLoading ? (
                <div className="flex justify-center items-center h-32">
                  <Loader className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
                </div>
              ) : planRequirements && planRequirements.length > 0 ? (
                <div className="grid gap-4">
                  {planRequirements.map((requirement) => (
                    <StatusCard
                      key={requirement.id}
                      id={requirement.requirement_number}
                      statusIndicator={{
                        color: getStatusColor('danger'),
                        text: 'Crítico',
                        icon: AlertCircle,
                        isCritical: true
                      }}
                      title={requirement.product_name}
                      subtitle={`${requirement.requirement_number} • ${requirement.supplier_name || 'Sin proveedor'} • Plan: ${filteredPlans.find(p => p.id === selectedPlanForRequirements)?.plan_number || 'N/A'}`}
                      primaryValue={requirement.required_quantity}
                      primaryValueLabel={requirement.unit_of_measure}
                      secondaryInfo={{
                        label: 'Límite',
                        value: new Date(requirement.required_by_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })
                      }}
                      progress={requirement.current_stock_level && requirement.required_quantity ? {
                        label: `${Math.round((requirement.current_stock_level / requirement.required_quantity) * 100)}% cubierto`,
                        percentage: Math.min((requirement.current_stock_level / requirement.required_quantity) * 100, 100),
                        color: requirement.current_stock_level >= requirement.required_quantity ? '#10b981' : requirement.current_stock_level >= requirement.required_quantity * 0.5 ? '#f59e0b' : '#ef4444'
                      } : undefined}
                      metadata={[
                        `Stock: ${requirement.current_stock_level || 0} ${requirement.unit_of_measure}`,
                        `Necesario: ${requirement.required_quantity - (requirement.current_stock_level || 0)} ${requirement.unit_of_measure}`,
                        `Costo: €${formatters.compact(requirement.estimated_total_cost || 0)}`,
                        `Días restantes: ${Math.ceil((new Date(requirement.required_by_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24))}`,
                        `Estado: ${requirement.status || 'N/A'}`,
                        `PO: ${requirement.purchase_order_number || 'Sin PO asignado'}`,
                        `Prioridad: ${requirement.priority || 'N/A'}`
                      ]}
                      actions={[
                        {
                          label: 'Ver Detalles',
                          icon: Eye,
                          variant: 'primary',
                          priority: 'primary',
                          onClick: () => console.log('View requirement details', requirement)
                        },
                        ...(requirement.purchase_order_number ? [
                          {
                            label: 'Ver PO',
                            icon: Eye,
                            variant: 'outline' as const,
                            priority: 'secondary' as const,
                            onClick: () => console.log('View PO', requirement.purchase_order_number)
                          }
                        ] : [
                          {
                            label: 'Crear PO',
                            icon: Plus,
                            variant: 'outline' as const,
                            priority: 'secondary' as const,
                            onClick: () => console.log('Create PO for', requirement)
                          }
                        ]),
                        {
                          label: requirement.supplier_name ? 'Cambiar Proveedor' : 'Asignar Proveedor',
                          icon: Building2,
                          variant: 'outline' as const,
                          priority: 'secondary' as const,
                          onClick: () => console.log('Assign supplier')
                        }
                      ]}
                    />
                  ))}
                </div>
              ) : (
                <div className="text-center py-12">
                  <CheckCircle className="mx-auto h-12 w-12 text-green-500 mb-4" />
                  <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
                    No hay requerimientos críticos
                  </h3>
                  <p className="text-[var(--text-secondary)]">
                    Este plan no tiene requerimientos críticos en este momento
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Procurement Plan Modal */}
      {showForm && selectedPlan && (
        <StatusModal
          isOpen={showForm}
          onClose={() => {
            setShowForm(false);
            setSelectedPlan(null);
            setModalMode('view');
          }}
          mode={modalMode}
          onModeChange={setModalMode}
          title={`Plan de Compra ${selectedPlan.plan_number}`}
          subtitle={new Date(selectedPlan.plan_date).toLocaleDateString('es-ES')}
          statusIndicator={getPlanStatusConfig(selectedPlan.status)}
          size="lg"
          sections={[
            {
              title: 'Información del Plan',
              icon: Package,
              fields: [
                {
                  label: 'Número de Plan',
                  value: selectedPlan.plan_number,
                  highlight: true
                },
                {
                  label: 'Tipo de Plan',
                  value: selectedPlan.plan_type
                },
                {
                  label: 'Estrategia',
                  value: selectedPlan.procurement_strategy
                },
                {
                  label: 'Prioridad',
                  value: selectedPlan.priority,
                  type: 'status'
                }
              ]
            },
            {
              title: 'Fechas y Períodos',
              icon: Calendar,
              fields: [
                {
                  label: 'Fecha del Plan',
                  value: selectedPlan.plan_date,
                  type: 'date'
                },
                {
                  label: 'Período de Inicio',
                  value: selectedPlan.plan_period_start,
                  type: 'date'
                },
                {
                  label: 'Período de Fin',
                  value: selectedPlan.plan_period_end,
                  type: 'date',
                  highlight: true
                },
                {
                  label: 'Horizonte de Planificación',
                  value: `${selectedPlan.planning_horizon_days} días`
                }
              ]
            },
            {
              title: 'Información Financiera',
              icon: DollarSign,
              fields: [
                {
                  label: 'Costo Estimado Total',
                  value: selectedPlan.total_estimated_cost,
                  type: 'currency',
                  highlight: true
                },
                {
                  label: 'Costo Aprobado Total',
                  value: selectedPlan.total_approved_cost,
                  type: 'currency'
                },
                {
                  label: 'Varianza de Costo',
                  value: selectedPlan.cost_variance,
                  type: 'currency'
                }
              ]
            },
            {
              title: 'Estadísticas',
              icon: ShoppingCart,
              fields: [
                {
                  label: 'Total de Requerimientos',
                  value: `${selectedPlan.total_requirements} requerimientos`
                },
                {
                  label: 'Demanda Total (Cantidad)',
                  value: `${selectedPlan.total_demand_quantity} unidades`
                },
                {
                  label: 'Proveedores Primarios',
                  value: `${selectedPlan.primary_suppliers_count} proveedores`
                },
                {
                  label: 'Proveedores de Respaldo',
                  value: `${selectedPlan.backup_suppliers_count} proveedores`
                }
              ]
            },
            ...(selectedPlan.special_requirements ? [{
              title: 'Requerimientos Especiales',
              fields: [
                {
                  label: 'Observaciones',
                  value: selectedPlan.special_requirements,
                  span: 2 as const,
                  editable: true,
                  placeholder: 'Añadir requerimientos especiales para el plan...'
                }
              ]
            }] : [])
          ]}
          onEdit={() => {
            console.log('Editing procurement plan:', selectedPlan.id);
          }}
        />
      )}
    </div>
  );
};

export default ProcurementPage;