import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '../../components/layout';
import StatsGrid from '../../components/ui/Stats/StatsGrid';
import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
import PendingPOApprovals from '../../components/domain/dashboard/PendingPOApprovals';
import TodayProduction from '../../components/domain/dashboard/TodayProduction';
import SustainabilityWidget from '../../components/domain/sustainability/SustainabilityWidget';
import { EditViewModal } from '../../components/ui';
import { useTenant } from '../../stores/tenant.store';
import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
import { useDashboardStats } from '../../api/hooks/dashboard';
import { usePurchaseOrder, useApprovePurchaseOrder, useRejectPurchaseOrder } from '../../api/hooks/purchase-orders';
import { useBatchDetails, useUpdateBatchStatus } from '../../api/hooks/production';
import { ProductionStatusEnum } from '../../api';
import {
  AlertTriangle,
  Clock,
  Euro,
  Package,
  FileText,
  Building2,
  Calendar,
  CheckCircle,
  X,
  ShoppingCart,
  Factory,
  Timer
} from 'lucide-react';
import toast from 'react-hot-toast';

const DashboardPage: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { availableTenants, currentTenant } = useTenant();
  const { startTour } = useDemoTour();
  const isDemoMode = localStorage.getItem('demo_mode') === 'true';

  // Modal state management
  const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
  const [selectedBatchId, setSelectedBatchId] = useState<string | null>(null);
  const [showPOModal, setShowPOModal] = useState(false);
  const [showBatchModal, setShowBatchModal] = useState(false);
  const [approvalNotes, setApprovalNotes] = useState('');

  // Fetch real dashboard statistics
  const { data: dashboardStats, isLoading: isLoadingStats, error: statsError } = useDashboardStats(
    currentTenant?.id || '',
    {
      enabled: !!currentTenant?.id,
    }
  );

  // Fetch PO details when modal is open
  const { data: poDetails, isLoading: isLoadingPO } = usePurchaseOrder(
    currentTenant?.id || '',
    selectedPOId || '',
    {
      enabled: !!currentTenant?.id && !!selectedPOId && showPOModal
    }
  );

  // Fetch Production batch details when modal is open
  const { data: batchDetails, isLoading: isLoadingBatch } = useBatchDetails(
    currentTenant?.id || '',
    selectedBatchId || '',
    {
      enabled: !!currentTenant?.id && !!selectedBatchId && showBatchModal
    }
  );

  // Mutations
  const approvePOMutation = useApprovePurchaseOrder();
  const rejectPOMutation = useRejectPurchaseOrder();
  const updateBatchStatusMutation = useUpdateBatchStatus();

  useEffect(() => {
    console.log('[Dashboard] Demo mode:', isDemoMode);
    console.log('[Dashboard] Should start tour:', shouldStartTour());
    console.log('[Dashboard] SessionStorage demo_tour_should_start:', sessionStorage.getItem('demo_tour_should_start'));

    if (isDemoMode && shouldStartTour()) {
      console.log('[Dashboard] Starting tour in 1.5s...');
      const timer = setTimeout(() => {
        console.log('[Dashboard] Executing startTour()');
        startTour();
        clearTourStartPending();
      }, 1500);

      return () => clearTimeout(timer);
    }
  }, [isDemoMode, startTour]);

  const handleViewAllProcurement = () => {
    navigate('/app/operations/procurement');
  };

  const handleViewAllProduction = () => {
    navigate('/app/operations/production');
  };

  const handleOrderItem = (itemId: string) => {
    console.log('Ordering item:', itemId);
    navigate('/app/operations/procurement');
  };

  const handleStartBatch = async (batchId: string) => {
    try {
      await updateBatchStatusMutation.mutateAsync({
        tenantId: currentTenant?.id || '',
        batchId,
        statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
      });
      toast.success('Lote iniciado');
    } catch (error) {
      console.error('Error starting batch:', error);
      toast.error('Error al iniciar lote');
    }
  };

  const handlePauseBatch = async (batchId: string) => {
    try {
      await updateBatchStatusMutation.mutateAsync({
        tenantId: currentTenant?.id || '',
        batchId,
        statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
      });
      toast.success('Lote pausado');
    } catch (error) {
      console.error('Error pausing batch:', error);
      toast.error('Error al pausar lote');
    }
  };

  const handleViewDetails = (batchId: string) => {
    setSelectedBatchId(batchId);
    setShowBatchModal(true);
  };

  const handleApprovePO = async (poId: string) => {
    try {
      await approvePOMutation.mutateAsync({
        tenantId: currentTenant?.id || '',
        poId,
        notes: 'Aprobado desde el dashboard'
      });
      toast.success('Orden aprobada');
    } catch (error) {
      console.error('Error approving PO:', error);
      toast.error('Error al aprobar orden');
    }
  };

  const handleRejectPO = async (poId: string) => {
    try {
      await rejectPOMutation.mutateAsync({
        tenantId: currentTenant?.id || '',
        poId,
        reason: 'Rechazado desde el dashboard'
      });
      toast.success('Orden rechazada');
    } catch (error) {
      console.error('Error rejecting PO:', error);
      toast.error('Error al rechazar orden');
    }
  };

  const handleViewPODetails = (poId: string) => {
    setSelectedPOId(poId);
    setShowPOModal(true);
  };

  const handleViewAllPOs = () => {
    navigate('/app/operations/procurement');
  };

  // Build stats from real API data
  const criticalStats = React.useMemo(() => {
    if (!dashboardStats) {
      // Return loading/empty state
      return [];
    }

    // Format currency values
    const formatCurrency = (value: number): string => {
      return `${dashboardStats.salesCurrency}${value.toLocaleString('en-US', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      })}`;
    };

    // Determine trend direction
    const getTrendDirection = (value: number): 'up' | 'down' | 'neutral' => {
      if (value > 0) return 'up';
      if (value < 0) return 'down';
      return 'neutral';
    };

    // Build subtitle for sales
    const salesChange = dashboardStats.salesToday * (dashboardStats.salesTrend / 100);
    const salesSubtitle = salesChange > 0
      ? `+${formatCurrency(salesChange)} ${t('dashboard:messages.more_than_yesterday', 'more than yesterday')}`
      : salesChange < 0
      ? `${formatCurrency(Math.abs(salesChange))} ${t('dashboard:messages.less_than_yesterday', 'less than yesterday')}`
      : t('dashboard:messages.same_as_yesterday', 'Same as yesterday');

    // Build subtitle for products
    const productsChange = Math.round(dashboardStats.productsSoldToday * (dashboardStats.productsSoldTrend / 100));
    const productsSubtitle = productsChange !== 0
      ? `${productsChange > 0 ? '+' : ''}${productsChange} ${t('dashboard:messages.more_units', 'units')}`
      : t('dashboard:messages.same_as_yesterday', 'Same as yesterday');

    return [
      {
        title: t('dashboard:stats.sales_today', 'Sales Today'),
        value: formatCurrency(dashboardStats.salesToday),
        icon: Euro,
        variant: 'success' as const,
        trend: {
          value: Math.abs(dashboardStats.salesTrend),
          direction: getTrendDirection(dashboardStats.salesTrend),
          label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
        },
        subtitle: salesSubtitle
      },
      {
        title: t('dashboard:stats.pending_orders', 'Pending Orders'),
        value: dashboardStats.pendingOrders.toString(),
        icon: Clock,
        variant: dashboardStats.pendingOrders > 10 ? ('warning' as const) : ('info' as const),
        trend: dashboardStats.ordersTrend !== 0 ? {
          value: Math.abs(dashboardStats.ordersTrend),
          direction: getTrendDirection(dashboardStats.ordersTrend),
          label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
        } : undefined,
        subtitle: dashboardStats.pendingOrders > 0
          ? t('dashboard:messages.require_attention', 'Require attention')
          : t('dashboard:messages.all_caught_up', 'All caught up!')
      },
      {
        title: t('dashboard:stats.products_sold', 'Products Sold'),
        value: dashboardStats.productsSoldToday.toString(),
        icon: Package,
        variant: 'info' as const,
        trend: dashboardStats.productsSoldTrend !== 0 ? {
          value: Math.abs(dashboardStats.productsSoldTrend),
          direction: getTrendDirection(dashboardStats.productsSoldTrend),
          label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
        } : undefined,
        subtitle: productsSubtitle
      },
      {
        title: t('dashboard:stats.stock_alerts', 'Critical Stock'),
        value: dashboardStats.criticalStock.toString(),
        icon: AlertTriangle,
        variant: dashboardStats.criticalStock > 0 ? ('error' as const) : ('success' as const),
        trend: undefined, // Stock alerts don't have historical trends
        subtitle: dashboardStats.criticalStock > 0
          ? t('dashboard:messages.action_required', 'Action required')
          : t('dashboard:messages.stock_healthy', 'Stock levels healthy')
      }
    ];
  }, [dashboardStats, t]);

  // Helper function to build PO detail sections (reused from ProcurementPage)
  const buildPODetailsSections = (po: any) => {
    if (!po) return [];

    const getPOStatusConfig = (status: string) => {
      const normalizedStatus = status?.toUpperCase().replace(/_/g, '_');
      const configs: Record<string, any> = {
        PENDING_APPROVAL: { text: 'Pendiente de Aprobación', color: 'var(--color-warning)' },
        APPROVED: { text: 'Aprobado', color: 'var(--color-success)' },
        SENT_TO_SUPPLIER: { text: 'Enviado al Proveedor', color: 'var(--color-info)' },
        CONFIRMED: { text: 'Confirmado', color: 'var(--color-success)' },
        RECEIVED: { text: 'Recibido', color: 'var(--color-success)' },
        COMPLETED: { text: 'Completado', color: 'var(--color-success)' },
        CANCELLED: { text: 'Cancelado', color: 'var(--color-error)' },
      };
      return configs[normalizedStatus] || { text: status, color: 'var(--color-info)' };
    };

    const statusConfig = getPOStatusConfig(po.status);

    return [
      {
        title: 'Información General',
        icon: FileText,
        fields: [
          { label: 'Número de Orden', value: po.po_number, type: 'text' as const },
          { label: 'Estado', value: statusConfig.text, type: 'status' as const },
          { label: 'Prioridad', value: po.priority === 'urgent' ? 'Urgente' : po.priority === 'high' ? 'Alta' : po.priority === 'low' ? 'Baja' : 'Normal', type: 'text' as const },
          { label: 'Fecha de Creación', value: new Date(po.created_at).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }), type: 'text' as const }
        ]
      },
      {
        title: 'Información del Proveedor',
        icon: Building2,
        fields: [
          { label: 'Proveedor', value: po.supplier?.name || po.supplier_name || 'N/A', type: 'text' as const },
          { label: 'Email', value: po.supplier?.contact_email || 'N/A', type: 'text' as const },
          { label: 'Teléfono', value: po.supplier?.contact_phone || 'N/A', type: 'text' as const }
        ]
      },
      {
        title: 'Resumen Financiero',
        icon: Euro,
        fields: [
          { label: 'Subtotal', value: `€${(typeof po.subtotal === 'string' ? parseFloat(po.subtotal) : po.subtotal || 0).toFixed(2)}`, type: 'text' as const },
          { label: 'Impuestos', value: `€${(typeof po.tax_amount === 'string' ? parseFloat(po.tax_amount) : po.tax_amount || 0).toFixed(2)}`, type: 'text' as const },
          { label: 'TOTAL', value: `€${(typeof po.total_amount === 'string' ? parseFloat(po.total_amount) : po.total_amount || 0).toFixed(2)}`, type: 'text' as const, highlight: true }
        ]
      },
      {
        title: 'Entrega',
        icon: Calendar,
        fields: [
          { label: 'Fecha Requerida', value: po.required_delivery_date ? new Date(po.required_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const },
          { label: 'Fecha Esperada', value: po.expected_delivery_date ? new Date(po.expected_delivery_date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' }) : 'No especificada', type: 'text' as const }
        ]
      }
    ];
  };

  // Helper function to build Production batch detail sections
  const buildBatchDetailsSections = (batch: any) => {
    if (!batch) return [];

    return [
      {
        title: 'Información General',
        icon: Package,
        fields: [
          { label: 'Producto', value: batch.product_name, type: 'text' as const, highlight: true },
          { label: 'Número de Lote', value: batch.batch_number, type: 'text' as const },
          { label: 'Cantidad Planificada', value: `${batch.planned_quantity} unidades`, type: 'text' as const },
          { label: 'Cantidad Real', value: batch.actual_quantity ? `${batch.actual_quantity} unidades` : 'Pendiente', type: 'text' as const },
          { label: 'Estado', value: batch.status, type: 'text' as const },
          { label: 'Prioridad', value: batch.priority, type: 'text' as const }
        ]
      },
      {
        title: 'Cronograma',
        icon: Clock,
        fields: [
          { label: 'Inicio Planificado', value: batch.planned_start_time ? new Date(batch.planned_start_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
          { label: 'Fin Planificado', value: batch.planned_end_time ? new Date(batch.planned_end_time).toLocaleString('es-ES') : 'No especificado', type: 'text' as const },
          { label: 'Inicio Real', value: batch.actual_start_time ? new Date(batch.actual_start_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const },
          { label: 'Fin Real', value: batch.actual_end_time ? new Date(batch.actual_end_time).toLocaleString('es-ES') : 'Pendiente', type: 'text' as const }
        ]
      },
      {
        title: 'Producción',
        icon: Factory,
        fields: [
          { label: 'Personal Asignado', value: batch.staff_assigned?.join(', ') || 'No asignado', type: 'text' as const },
          { label: 'Estación', value: batch.station_id || 'No asignada', type: 'text' as const },
          { label: 'Duración Planificada', value: batch.planned_duration_minutes ? `${batch.planned_duration_minutes} minutos` : 'No especificada', type: 'text' as const }
        ]
      },
      {
        title: 'Calidad y Costos',
        icon: CheckCircle,
        fields: [
          { label: 'Puntuación de Calidad', value: batch.quality_score ? `${batch.quality_score}/10` : 'Pendiente', type: 'text' as const },
          { label: 'Rendimiento', value: batch.yield_percentage ? `${batch.yield_percentage}%` : 'Calculando...', type: 'text' as const },
          { label: 'Costo Estimado', value: batch.estimated_cost ? `€${batch.estimated_cost}` : '€0.00', type: 'text' as const },
          { label: 'Costo Real', value: batch.actual_cost ? `€${batch.actual_cost}` : '€0.00', type: 'text' as const }
        ]
      }
    ];
  };

  return (
    <div className="space-y-6 p-4 sm:p-6">
      <PageHeader
        title={t('dashboard:title', 'Dashboard')}
        description={t('dashboard:subtitle', 'Overview of your bakery operations')}
      />

      {/* Critical Metrics using StatsGrid */}
      <div data-tour="dashboard-stats">
        {isLoadingStats ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {[1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="h-32 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg animate-pulse"
              />
            ))}
          </div>
        ) : statsError ? (
          <div className="mb-6 p-4 bg-[var(--color-error)]/10 border border-[var(--color-error)]/20 rounded-lg">
            <p className="text-[var(--color-error)] text-sm">
              {t('dashboard:errors.failed_to_load_stats', 'Failed to load dashboard statistics. Please try again.')}
            </p>
          </div>
        ) : (
          <StatsGrid
            stats={criticalStats}
            columns={4}
            gap="lg"
            className="mb-6"
          />
        )}
      </div>

      {/* Dashboard Content - Main Sections */}
      <div className="space-y-6">
        {/* 1. Real-time Alerts */}
        <div data-tour="real-time-alerts">
          <RealTimeAlerts />
        </div>

        {/* 2. Sustainability Impact - NEW! */}
        <div data-tour="sustainability-widget">
          <SustainabilityWidget
            days={30}
            onViewDetails={() => navigate('/app/analytics/sustainability')}
            onExportReport={() => {
              // TODO: Implement export modal
              console.log('Export sustainability report');
            }}
          />
        </div>

        {/* 3. Pending PO Approvals - What purchase orders need approval? */}
        <div data-tour="pending-po-approvals">
          <PendingPOApprovals
            onApprovePO={handleApprovePO}
            onRejectPO={handleRejectPO}
            onViewDetails={handleViewPODetails}
            onViewAllPOs={handleViewAllPOs}
            maxPOs={5}
          />
        </div>

        {/* 4. Today's Production - What needs to be produced today? */}
        <div data-tour="today-production">
          <TodayProduction
            onStartBatch={handleStartBatch}
            onPauseBatch={handlePauseBatch}
            onViewDetails={handleViewDetails}
            onViewAllPlans={handleViewAllProduction}
            maxBatches={5}
          />
        </div>
      </div>

      {/* Purchase Order Details Modal */}
      {showPOModal && poDetails && (
        <EditViewModal
          isOpen={showPOModal}
          onClose={() => {
            setShowPOModal(false);
            setSelectedPOId(null);
          }}
          title={`Orden de Compra: ${poDetails.po_number}`}
          subtitle={`Proveedor: ${poDetails.supplier?.name || poDetails.supplier_name || 'N/A'}`}
          mode="view"
          sections={buildPODetailsSections(poDetails)}
          loading={isLoadingPO}
          statusIndicator={{
            color: poDetails.status === 'PENDING_APPROVAL' ? 'var(--color-warning)' :
                   poDetails.status === 'APPROVED' ? 'var(--color-success)' :
                   'var(--color-info)',
            text: poDetails.status === 'PENDING_APPROVAL' ? 'Pendiente de Aprobación' :
                  poDetails.status === 'APPROVED' ? 'Aprobado' :
                  poDetails.status || 'N/A',
            icon: ShoppingCart
          }}
          actions={
            poDetails.status === 'PENDING_APPROVAL' ? [
              {
                label: 'Aprobar',
                onClick: async () => {
                  try {
                    await approvePOMutation.mutateAsync({
                      tenantId: currentTenant?.id || '',
                      poId: poDetails.id,
                      notes: 'Aprobado desde el dashboard'
                    });
                    toast.success('Orden aprobada');
                    setShowPOModal(false);
                    setSelectedPOId(null);
                  } catch (error) {
                    console.error('Error approving PO:', error);
                    toast.error('Error al aprobar orden');
                  }
                },
                variant: 'primary' as const,
                icon: CheckCircle
              },
              {
                label: 'Rechazar',
                onClick: async () => {
                  try {
                    await rejectPOMutation.mutateAsync({
                      tenantId: currentTenant?.id || '',
                      poId: poDetails.id,
                      reason: 'Rechazado desde el dashboard'
                    });
                    toast.success('Orden rechazada');
                    setShowPOModal(false);
                    setSelectedPOId(null);
                  } catch (error) {
                    console.error('Error rejecting PO:', error);
                    toast.error('Error al rechazar orden');
                  }
                },
                variant: 'outline' as const,
                icon: X
              }
            ] : undefined
          }
        />
      )}

      {/* Production Batch Details Modal */}
      {showBatchModal && batchDetails && (
        <EditViewModal
          isOpen={showBatchModal}
          onClose={() => {
            setShowBatchModal(false);
            setSelectedBatchId(null);
          }}
          title={batchDetails.product_name}
          subtitle={`Lote #${batchDetails.batch_number}`}
          mode="view"
          sections={buildBatchDetailsSections(batchDetails)}
          loading={isLoadingBatch}
          statusIndicator={{
            color: batchDetails.status === 'PENDING' ? 'var(--color-warning)' :
                   batchDetails.status === 'IN_PROGRESS' ? 'var(--color-info)' :
                   batchDetails.status === 'COMPLETED' ? 'var(--color-success)' :
                   batchDetails.status === 'FAILED' ? 'var(--color-error)' :
                   'var(--color-info)',
            text: batchDetails.status === 'PENDING' ? 'Pendiente' :
                  batchDetails.status === 'IN_PROGRESS' ? 'En Progreso' :
                  batchDetails.status === 'COMPLETED' ? 'Completado' :
                  batchDetails.status === 'FAILED' ? 'Fallido' :
                  batchDetails.status === 'ON_HOLD' ? 'Pausado' :
                  batchDetails.status || 'N/A',
            icon: Factory
          }}
          actions={
            batchDetails.status === 'PENDING' ? [
              {
                label: 'Iniciar Lote',
                onClick: async () => {
                  try {
                    await updateBatchStatusMutation.mutateAsync({
                      tenantId: currentTenant?.id || '',
                      batchId: batchDetails.id,
                      statusUpdate: { status: ProductionStatusEnum.IN_PROGRESS }
                    });
                    toast.success('Lote iniciado');
                    setShowBatchModal(false);
                    setSelectedBatchId(null);
                  } catch (error) {
                    console.error('Error starting batch:', error);
                    toast.error('Error al iniciar lote');
                  }
                },
                variant: 'primary' as const,
                icon: CheckCircle
              }
            ] : batchDetails.status === 'IN_PROGRESS' ? [
              {
                label: 'Pausar Lote',
                onClick: async () => {
                  try {
                    await updateBatchStatusMutation.mutateAsync({
                      tenantId: currentTenant?.id || '',
                      batchId: batchDetails.id,
                      statusUpdate: { status: ProductionStatusEnum.ON_HOLD }
                    });
                    toast.success('Lote pausado');
                    setShowBatchModal(false);
                    setSelectedBatchId(null);
                  } catch (error) {
                    console.error('Error pausing batch:', error);
                    toast.error('Error al pausar lote');
                  }
                },
                variant: 'outline' as const,
                icon: X
              }
            ] : undefined
          }
        />
      )}
    </div>
  );
};

export default DashboardPage;