import { useState, useEffect, useRef } from "react";
import { apiFetch } from '@/utils/api';
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Loader2, X, RefreshCw, AlertTriangle, RefreshCcw, Hourglass } from "lucide-react";
import config from "../../config";
import { toast } from "sonner";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";


interface HistoryRecord {
  id: number;
  start_time: string;
  end_time: string | null;
  duration_minutes?: number;
  status: "running" | "completed" | "failed" | "cancelled";
  error_message: string | null;
  additional_info?: Record<string, any>;
}

interface ImportHistoryRecord extends HistoryRecord {
  records_added: number;
  records_updated: number;
  records_deleted?: number;
  records_skipped?: number;
  is_incremental?: boolean;
  total_processed?: number;
  additional_info?: {
    step_timings?: Record<string, number>;
    details?: {
      categories?: { recordsAdded: number; recordsUpdated: number; skippedCategories?: number };
      products?: { totalProcessed: number; needsUpdate: number; skippedUnchanged?: number };
      orders?: { totalProcessed: number; totalSkipped: number; missingProducts: number };
      purchaseOrders?: { recordsAdded: number; recordsUpdated: number; recordsDeleted: number; skippedProducts: number };
    };
    [key: string]: any;
  };
}

interface CalculateHistoryRecord extends HistoryRecord {
  total_products?: number;
  total_orders?: number;
  total_purchase_orders?: number;
  processed_products?: number;
  processed_orders?: number;
  processed_purchase_orders?: number;
  duration_minutes?: number;
  duration_seconds?: number;
  additional_info?: {
    type?: string;
    steps?: string[];
    completed_steps?: Array<{
      name: string;
      duration: number;
      status: string;
      rowsAffected?: number;
    }>;
    step_timings?: Record<string, number>;
    step_row_counts?: Record<string, number>;
    [key: string]: any;
  };
}

interface ModuleStatus {
  module_name: string;
  last_calculation_timestamp: string;
}

interface TableStatus {
  table_name: string;
  last_sync_timestamp: string;
}

interface TableCount {
  table_name: string;
  count: number | null;
  error?: string;
}

interface GroupedTableCounts {
  core: TableCount[];
  metrics: TableCount[];
  config: TableCount[];
}

// TableSkeleton component for consistent loading states
interface TableSkeletonProps {
  rows?: number;
  columns?: number;
  useAccordion?: boolean;
}

const TableSkeleton = ({ rows = 5, useAccordion = false }: TableSkeletonProps) => {
  return (
    <>
      {Array.from({ length: rows }).map((_, rowIndex) => (
        <TableRow key={rowIndex} className="hover:bg-transparent">
          <TableCell className="w-full p-0">
            {useAccordion ? (
              <div className="px-4 py-2 cursor-default">
                <div className="flex justify-between items-center w-full pr-4">
                  <div className="w-[50px]">
                    <Skeleton className="h-4 w-full" />
                  </div>
                  <div className="w-[170px]">
                    <Skeleton className="h-4 w-full" />
                  </div>
                  <div className="w-[140px]">
                    <Skeleton className="h-4 w-full" />
                  </div>
                  <div className="w-[80px]">
                    <Skeleton className="h-4 w-full" />
                  </div>
                </div>
              </div>
            ) : (
              <div className="flex justify-between px-4 py-2">
                <Skeleton className="h-4 w-[180px]" />
                <Skeleton className="h-4 w-[100px]" />
              </div>
            )}
          </TableCell>
        </TableRow>
      ))}
    </>
  );
};

// Empty state skeleton that maintains consistent sizing
const EmptyStateSkeleton = ({ message = "No data available" }: { message?: string }) => {
  return (
    <TableRow>
      <TableCell className="text-center py-12">
        <div className="flex flex-col items-center justify-center min-h-[180px]">
          <p className="text-sm text-muted-foreground">{message}</p>
        </div>
      </TableCell>
    </TableRow>
  );
};

// Create a component for the empty state of status cards
const StatusEmptyState = ({ message }: { message: React.ReactNode }) => (
  <div className="flex flex-col items-center justify-center py-6 min-h-[150px]">
    <p className="text-sm text-muted-foreground text-center">{message}</p>
  </div>
);

export function DataManagement() {
  const [isUpdating, setIsUpdating] = useState(false);
  const [isResetting, setIsResetting] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [hasError, setHasError] = useState(false);
  const [importHistory, setImportHistory] = useState<ImportHistoryRecord[]>([]);
  const [calculateHistory, setCalculateHistory] = useState<CalculateHistoryRecord[]>([]);
  const [moduleStatus, setModuleStatus] = useState<ModuleStatus[]>([]);
  const [tableStatus, setTableStatus] = useState<TableStatus[]>([]);
  const [scriptOutput, setScriptOutput] = useState<string[]>([]);
  const [eventSource, setEventSource] = useState<EventSource | null>(null);
  const [tableCounts, setTableCounts] = useState<GroupedTableCounts | null>(null);

  // Add useRef for scroll handling
  const terminalRef = useRef<HTMLDivElement>(null);

  // Check if there's an active script running on component mount
  const checkActiveProcess = async () => {
    try {
      console.log("Checking for active processes...");
      const response = await apiFetch(`${config.apiUrl}/csv/status`, {
        credentials: "include",
      });

      console.log("Status check response:", response.status, response.statusText);

      if (!response.ok) {
        throw new Error(`Failed to check active process status: ${response.status} ${response.statusText}`);
      }

      const data = await response.json();
      console.log("Active process check response:", data);
      
      if (data.active && data.progress) {
        console.log("Active process detected:", data.progress);
        
        // Determine if it's a reset or update based on the progress data
        const isReset = 
          data.progress.operation?.includes("reset") || 
          data.progress.operation?.includes("Reset") ||
          data.progress.type === "reset";
        
        // Set the appropriate state
        if (isReset) {
          console.log("Reconnecting to reset process...");
          setIsResetting(true);
          // Connect to reset SSE endpoint
          connectToEventSource("reset");
        } else {
          console.log("Reconnecting to update process...");
          setIsUpdating(true);
          // Connect to update SSE endpoint
          connectToEventSource("update");
        }
        
        // If we have progress data, initialize the output
        if (data.progress) {
          setScriptOutput([JSON.stringify(data.progress)]);
        }
      } else {
        console.log("No active processes detected");
      }
    } catch (error) {
      console.error("Error checking for active processes:", error);
      // Don't toast error for status check since this happens on every load
      // The main data fetch will handle showing errors to the user
    }
  };
  
  // Function to connect to the appropriate SSE endpoint
  const connectToEventSource = (type: "update" | "reset") => {
    if (eventSource) {
      eventSource.close();
    }
    
    // The correct URL structure is /api/csv/{type}/progress
    const sseUrl = `${config.apiUrl}/csv/${type}/progress`;
    console.log(`Connecting to event source: ${sseUrl}`);
    
    // Create the event source with the correct URL pattern
    const source = new EventSource(
      sseUrl, 
      { withCredentials: true }
    );
    
    source.onopen = () => {
      console.log(`SSE connection opened for ${type} progress`);
      // Add a message indicating reconnection, but don't clear existing output
      setScriptOutput(prev => [...prev, `[Connected to ${type} progress stream]`]);
    };
    
    source.onmessage = (event) => {
      console.log(`SSE message received:`, event.data);
      setScriptOutput((prev) => [...prev, event.data]);
      
      try {
        const data = JSON.parse(event.data);
        // Handle completion events
        if (data.status === 'complete' || data.status === 'error' || data.status === 'cancelled') {
          if (data.operation === 'Full update complete' || 
              data.operation === 'Full reset complete' || 
              data.status === 'error' || 
              data.status === 'cancelled') {
            source.close();
            setEventSource(null);
            setIsUpdating(false);
            setIsResetting(false);
            fetchHistory(); // Refresh at end
            
            if (data.status === 'complete') {
              toast.success(`${type === 'update' ? 'Update' : 'Reset'} completed successfully`);
            } else if (data.status === 'error') {
              toast.error(`${type === 'update' ? 'Update' : 'Reset'} failed: ${data.error || 'Unknown error'}`);
            } else {
              toast.warning(`${type === 'update' ? 'Update' : 'Reset'} cancelled`);
            }
          }
        }
        
        // Also check progress objects that might be nested
        if (data.progress && (data.progress.status === 'complete' || data.progress.status === 'error' || data.progress.status === 'cancelled')) {
          if (data.progress.operation === 'Full update complete' || 
              data.progress.operation === 'Full reset complete' || 
              data.progress.status === 'error' || 
              data.progress.status === 'cancelled') {
            source.close();
            setEventSource(null);
            setIsUpdating(false);
            setIsResetting(false);
            fetchHistory(); // Refresh at end
            
            if (data.progress.status === 'complete') {
              toast.success(`${type === 'update' ? 'Update' : 'Reset'} completed successfully`);
            } else if (data.progress.status === 'error') {
              toast.error(`${type === 'update' ? 'Update' : 'Reset'} failed: ${data.progress.error || 'Unknown error'}`);
            } else {
              toast.warning(`${type === 'update' ? 'Update' : 'Reset'} cancelled`);
            }
          }
        }
      } catch (error) {
        // Not JSON, just continue
      }
    };
    
    source.onerror = (error) => {
      console.error(`SSE connection error for ${type}:`, error);
      
      // Attempt to reconnect with exponential backoff
      if (source.readyState === EventSource.CLOSED) {
        source.close();
        setEventSource(null);
        
        // Only attempt to reconnect if we're still updating/resetting
        if ((type === "update" && isUpdating) || (type === "reset" && isResetting)) {
          console.log("Connection closed, will attempt to reconnect...");
          setTimeout(() => connectToEventSource(type), 3000);
        }
      }
    };
    
    setEventSource(source);
  };

  // Helper to format date
  const formatDate = (date: string) => {
    return new Date(date).toLocaleString();
  };

  // Helper to format duration with seconds
  const formatDurationWithSeconds = (minutes: number, isRunning: boolean = false, startTime?: string) => {
    if (isRunning && startTime) {
      const elapsedMinutes = (new Date().getTime() - new Date(startTime).getTime()) / (1000 * 60);
      const hours = Math.floor(elapsedMinutes / 60);
      const remainingMinutes = Math.floor(elapsedMinutes % 60);
      const seconds = Math.round((elapsedMinutes % 1) * 60);
      
      const parts = [];
      if (hours > 0) parts.push(`${hours}h`);
      if (remainingMinutes > 0) parts.push(`${remainingMinutes}m`);
      if (seconds > 0) parts.push(`${seconds}s`);

      return (
        <span className="flex items-center gap-1">
          {parts.join(" ")}
          <Hourglass className="h-3 w-3 animate-pulse" />
        </span>
      );
    }

    if (minutes < 1 / 60) return "Less than a second";

    const hours = Math.floor(minutes / 60);
    const remainingMinutes = Math.floor(minutes % 60);
    const seconds = Math.round((minutes % 1) * 60);
    
    const parts = [];
    if (hours > 0) parts.push(`${hours}h`);
    if (remainingMinutes > 0) parts.push(`${remainingMinutes}m`);
    if (seconds > 0) parts.push(`${seconds}s`);

    return parts.join(" ");
  };

  // Helper to format status time
  const formatStatusTime = (timestamp: string) => {
    const date = new Date(timestamp);
    const now = new Date();
    const diffMinutes = Math.floor(
      (now.getTime() - date.getTime()) / (1000 * 60)
    );

    if (diffMinutes < 60) {
      return `${diffMinutes}m ago`;
    } else if (diffMinutes < 1440) {
      const hours = Math.floor(diffMinutes / 60);
      return `${hours}h ago`;
    } else {
      const days = Math.floor(diffMinutes / 1440);
      return `${days}d ago`;
    }
  };

  // Helper to format JSON data
  const formatJsonData = (data: Record<string, any>) => {
    if (!data) return null;

    // Special handling for completed_steps
    if (data.completed_steps && Array.isArray(data.completed_steps)) {
      return (
        <div className="space-y-2 mt-2">
          <div className="text-sm font-semibold text-gray-700">Completed Steps:</div>
          <div className="space-y-1 bg-gray-50 p-2 rounded">
            {data.completed_steps.map((step: any, idx: number) => (
              <div key={idx} className="flex justify-between text-sm">
                <span className="font-medium">{step.name}</span>
                <div className="flex gap-4 text-gray-600">
                  <span>{step.duration}s</span>
                  {step.rowsAffected !== undefined && (
                    <span>{formatNumber(step.rowsAffected)} rows</span>
                  )}
                  <span className={step.status === 'completed' ? 'text-green-600' : 'text-red-600'}>
                    {step.status}
                  </span>
                </div>
              </div>
            ))}
          </div>
          {/* Show other data if present */}
          {Object.keys(data).filter(k => k !== 'completed_steps').length > 0 && (
            <div className="mt-2">
              {formatJsonDataSimple(Object.fromEntries(
                Object.entries(data).filter(([k]) => k !== 'completed_steps')
              ))}
            </div>
          )}
        </div>
      );
    }

    // Special handling for import details
    if (data.details) {
      return (
        <div className="space-y-2 mt-2">
          <div className="text-sm font-semibold text-gray-700">Import Details:</div>
          <div className="space-y-2 bg-gray-50 p-2 rounded">
            {Object.entries(data.details).map(([table, stats]: [string, any]) => (
              <div key={table} className="border-b last:border-0 pb-2 last:pb-0">
                <div className="font-medium text-sm capitalize mb-1">{table}:</div>
                <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
                  {Object.entries(stats).map(([key, value]) => (
                    <div key={key} className="flex justify-between">
                      <span className="text-gray-600">{key}:</span>
                      <span className="font-mono">{typeof value === 'number' ? formatNumber(value) : String(value)}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          {/* Show step timings if present */}
          {data.step_timings && (
            <div className="mt-2">
              <div className="text-sm font-semibold text-gray-700">Step Timings:</div>
              <div className="space-y-1 bg-gray-50 p-2 rounded text-sm">
                {Object.entries(data.step_timings).map(([step, duration]) => (
                  <div key={step} className="flex justify-between">
                    <span className="text-gray-600">{step}:</span>
                    <span className="font-mono">{String(duration)}s</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      );
    }

    // Default simple format
    return formatJsonDataSimple(data);
  };

  const formatJsonDataSimple = (data: Record<string, any>) => {
    // Find the longest key length
    const maxKeyLength = Object.keys(data).reduce(
      (max, key) => Math.max(max, key.length),
      0
    );

    return (
      <div className="space-y-1 mt-2 bg-gray-50 p-2 rounded text-sm font-mono">
        {Object.entries(data).map(([key, value]) => (
          <div key={key} className="flex">
            <span
              className="text-gray-600 font-bold shrink-0"
              style={{ width: `${maxKeyLength + 2}ch` }}
            >
              {key}:
            </span>
            <span className="break-all">
              {typeof value === "object"
                ? JSON.stringify(value)
                : value?.toString()}
            </span>
          </div>
        ))}
      </div>
    );
  };

  const handleFullUpdate = async () => {
    setIsUpdating(true);
    setScriptOutput([]);
    fetchHistory(); // Refresh at start

    try {
      console.log("Starting full update...");
      // Connect to the update SSE endpoint
      connectToEventSource("update");

      const response = await apiFetch(`${config.apiUrl}/csv/full-update`, {
        method: "POST",
        credentials: "include",
      });
      
      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || "Failed to start update");
      }

      console.log("Full update request successful");
    } catch (error) {
      console.error("Error starting full update:", error);
      if (error instanceof Error) {
        toast.error(`Update failed: ${error.message}`);
      }
      setIsUpdating(false);
      if (eventSource) {
        eventSource.close();
        setEventSource(null);
      }
    }
  };

  const handleFullReset = async () => {
    setIsResetting(true);
    setScriptOutput([]);
    fetchHistory(); // Refresh at start

    try {
      console.log("Starting full reset...");
      // Connect to the reset SSE endpoint
      connectToEventSource("reset");

      const response = await apiFetch(`${config.apiUrl}/csv/full-reset`, {
        method: "POST",
        credentials: "include",
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || "Failed to start reset");
      }

      console.log("Full reset request successful");
    } catch (error) {
      console.error("Error starting full reset:", error);
      if (error instanceof Error) {
        toast.error(`Reset failed: ${error.message}`);
      }
      setIsResetting(false);
      if (eventSource) {
        eventSource.close();
        setEventSource(null);
      }
    }
  };

  const handleCancel = async () => {
    try {
      // Determine which operation is running
      const type = isUpdating ? "update" : "reset";

      const response = await apiFetch(`${config.apiUrl}/csv/cancel?type=${type}`, {
        method: "POST",
        credentials: "include",
      });
      
      if (!response.ok) {
        throw new Error("Failed to cancel operation");
      }

      // Close the event source
      if (eventSource) {
        eventSource.close();
        setEventSource(null);
      }

      // Reset states
      setIsUpdating(false);
      setIsResetting(false);

      toast.info("Operation cancelled");
      
      // Refresh history data
      fetchHistory();
    } catch (error) {
      toast.error(
        `Failed to cancel operation: ${
          error instanceof Error ? error.message : "Unknown error"
        }`
      );
    }
  };

  const fetchHistory = async () => {
    let shouldSetLoading = !importHistory.length || !calculateHistory.length;
    try {
      if (shouldSetLoading) setIsLoading(true);
      setHasError(false);

      console.log("Fetching history data...");

      const [importRes, calcRes, moduleRes, tableRes, tableCountsRes] = await Promise.all([
        apiFetch(`${config.apiUrl}/csv/history/import`, { credentials: 'include' }),
        apiFetch(`${config.apiUrl}/csv/history/calculate`, { credentials: 'include' }),
        apiFetch(`${config.apiUrl}/csv/status/modules`, { credentials: 'include' }),
        apiFetch(`${config.apiUrl}/csv/status/tables`, { credentials: 'include' }),
        apiFetch(`${config.apiUrl}/csv/status/table-counts`, { credentials: 'include' }),
      ]);

      console.log("Fetch responses:", {
        import: importRes.status,
        calc: calcRes.status,
        modules: moduleRes.status,
        tables: tableRes.status,
        tableCounts: tableCountsRes.status
      });

      if (!importRes.ok || !calcRes.ok || !moduleRes.ok || !tableRes.ok || !tableCountsRes.ok) {
        const failed = [];
        if (!importRes.ok) failed.push(`import (${importRes.status})`);
        if (!calcRes.ok) failed.push(`calculate (${calcRes.status})`);
        if (!moduleRes.ok) failed.push(`modules (${moduleRes.status})`);
        if (!tableRes.ok) failed.push(`tables (${tableRes.status})`);
        if (!tableCountsRes.ok) failed.push(`table-counts (${tableCountsRes.status})`);
        throw new Error(`Failed requests: ${failed.join(', ')}`);
      }

      const [importData, calcData, moduleData, tableData, tableCountsData] = await Promise.all([
        importRes.json(),
        calcRes.json(),
        moduleRes.json(),
        tableRes.json(),
        tableCountsRes.json(),
      ]);

      console.log("Successfully fetched data:", {
        importCount: importData?.length || 0,
        calcCount: calcData?.length || 0,
        moduleCount: moduleData?.length || 0,
        tableCount: tableData?.length || 0,
        tableCountsAvailable: !!tableCountsData
      });

      // Process import history to add duration_minutes if it doesn't exist
      const processedImportData = (importData || []).map((record: ImportHistoryRecord) => {
        if (!record.duration_minutes && record.start_time && record.end_time) {
          const start = new Date(record.start_time).getTime();
          const end = new Date(record.end_time).getTime();
          record.duration_minutes = (end - start) / (1000 * 60);
        }
        return record;
      });

      // Process calculate history to add duration_minutes if it doesn't exist
      const processedCalcData = (calcData || []).map((record: CalculateHistoryRecord) => {
        if (!record.duration_minutes && record.start_time && record.end_time) {
          const start = new Date(record.start_time).getTime();
          const end = new Date(record.end_time).getTime();
          record.duration_minutes = (end - start) / (1000 * 60);
        }
        return record;
      });

      setImportHistory(processedImportData);
      setCalculateHistory(processedCalcData);
      setModuleStatus(moduleData || []);
      setTableStatus(tableData || []);
      setTableCounts(tableCountsData);
      setHasError(false);
    } catch (error) {
      console.error("Error fetching data:", error);
      setHasError(true);
      toast.error(`Failed to load data: ${error instanceof Error ? error.message : "Unknown error"}`);
      // Set empty arrays instead of leaving them unchanged to trigger the UI to show empty states
      setImportHistory([]);
      setCalculateHistory([]);
      setModuleStatus([]);
      setTableStatus([]);
      setTableCounts(null);
    } finally {
      if (shouldSetLoading) setIsLoading(false);
    }
  };





  const refreshAllData = async () => {
    setIsLoading(true);
    try {
      await fetchHistory();
      toast.success("All data refreshed");
    } catch (error) {
      toast.error("Failed to refresh data");
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    // Set up async function to run process checks and initial data load
    const initComponent = async () => {
      try {
        console.log("Initializing DataManagement component...");
        setIsLoading(true);
        
        // First check for any active operations
        await checkActiveProcess();
        
        // Then fetch data (but only if we're not already in an active operation)
        if (!isUpdating && !isResetting) {
          await fetchHistory();
        }
        
        console.log("Component initialization complete");
      } catch (error) {
        console.error("Error during component initialization:", error);
        // Ensure we fetch data even if checkActiveProcess fails
        await fetchHistory();
      } finally {
        setIsLoading(false);
      }
    };
    
    // Run the initialization
    initComponent();
    
    // Set up periodic refresh every minute
    const refreshInterval = setInterval(fetchHistory, 60000);
    
    // Clean up interval and event sources on component unmount
    return () => {
      console.log("Cleaning up DataManagement component...");
      clearInterval(refreshInterval);
      
      // Close any open event sources
      if (eventSource) {
        console.log("Closing event source on unmount");
        eventSource.close();
      }
    };
  }, []);

  // Add a dedicated useEffect for direct SSE monitoring that doesn't rely on server status
  useEffect(() => {
    // Listen for SSE messages directly, even if the server reports no active processes
    const setupDirectSSEMonitoring = () => {
      console.log("Setting up direct SSE monitoring...");
      
      // Try both update and reset endpoints
      const setupListenerForType = (type: "update" | "reset") => {
        const sseUrl = `${config.apiUrl}/csv/${type}/progress`;
        console.log(`Setting up SSE listener for ${type} at ${sseUrl}`);
        
        try {
          const source = new EventSource(sseUrl, { withCredentials: true });
          
          source.onopen = () => {
            console.log(`Direct SSE connection opened for ${type}`);
          };
          
          source.onmessage = (event) => {
            console.log(`Direct SSE message from ${type}:`, event.data);
            
            try {
              const data = JSON.parse(event.data);
              
              // If we get a real progress message, update our state accordingly
              if (data.progress && data.progress.status === 'running') {
                console.log(`Detected running ${type} process from direct SSE`);
                
                // Update the appropriate state flag
                if (type === 'update') {
                  setIsUpdating(true);
                  setIsResetting(false);
                } else {
                  setIsUpdating(false);
                  setIsResetting(true);
                }
                
                // Add the message to our output
                setScriptOutput(prev => {
                  // Add as first message if no messages, otherwise append
                  if (prev.length === 0) {
                    return [`[Connected to running ${type} process]`, event.data];
                  } else {
                    return [...prev, event.data];
                  }
                });
              }
              
              // Handle completion events
              if (data.status === 'complete' || data.status === 'error' || data.status === 'cancelled' ||
                  (data.progress && (data.progress.status === 'complete' || data.progress.status === 'error' || data.progress.status === 'cancelled'))) {
                console.log(`Process ${type} completed or failed`);
                source.close();
                setIsUpdating(false);
                setIsResetting(false);
                fetchHistory();
              }
            } catch (err) {
              // Not JSON or invalid, just continue
            }
          };
          
          source.onerror = (error) => {
            console.log(`Direct SSE error for ${type}:`, error);
            source.close();
          };
          
          // Return the source for cleanup
          return source;
        } catch (err) {
          console.error(`Error setting up direct SSE for ${type}:`, err);
          return null;
        }
      };
      
      // Set up listeners for both types
      const updateSource = setupListenerForType('update');
      const resetSource = setupListenerForType('reset');
      
      // Return cleanup function
      return () => {
        console.log("Cleaning up direct SSE monitoring");
        if (updateSource) updateSource.close();
        if (resetSource) resetSource.close();
      };
    };
    
    // Set up monitoring
    const cleanup = setupDirectSSEMonitoring();
    
    // Cleanup on unmount
    return cleanup;
  }, []);

  // Add useEffect to handle auto-scrolling
  useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
    }
  }, [scriptOutput]);

  // Replace renderTerminal with new version - simple direct output display
  const renderTerminal = () => {
    if (!isUpdating && !isResetting && scriptOutput.length === 0) {
      return null;
    }

    return (
      <Card className="col-span-2">
        <CardHeader>
          <CardTitle>Script Output</CardTitle>
          <CardDescription>
            {isUpdating
              ? "Running full update..."
              : isResetting
              ? "Running full reset..."
              : "Process output"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div
            ref={terminalRef}
            className="h-[400px] w-full rounded-md border bg-muted p-4 overflow-auto"
          >
            <pre className="font-mono text-sm text-muted-foreground whitespace-pre-wrap">
              {scriptOutput.join("\n")}
            </pre>
          </div>
        </CardContent>
      </Card>
    );
  };

  // Add formatNumber helper
  const formatNumber = (num: number | null) => {
    if (num === null) return 'N/A';
    return new Intl.NumberFormat().format(num);
  };

  // Update renderTableCountsSection to show new metrics tables
  const renderTableCountsSection = () => {
    const renderTableCountsSkeleton = () => (
      <div>
        {Array.from({ length: 11 }).map((_, i) => (
          <div key={i} className="flex justify-between text-sm items-center py-2 border-b last:border-0">
            <Skeleton className="h-4 w-[120px]" />
            <Skeleton className="h-4 w-[60px]" />
          </div>
        ))}
      </div>
    );
    
    const renderTableGroup = (_title: string, tables: TableCount[]) => (
      <div className="mt-0 border-t first:border-t-0 first:mt-0">
        <div>
          {tables.map((table) => (
            <div
              key={table.table_name}
              className="flex justify-between text-sm items-center py-2 border-b last:border-0"
            >
              <span className="font-medium">{table.table_name}</span>
              {table.error ? (
                <span className="text-red-600 text-sm">{table.error}</span>
              ) : (
                <span className="text-sm text-gray-600">{formatNumber(table.count)}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    );

    return (
      <Card className="md:col-start-2 md:row-span-2 h-[580px]">
        <CardHeader className="pb-3">
          <CardTitle>Table Record Counts</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading && !tableCounts ? (
            <div className="px-2">
              {renderTableCountsSkeleton()}
            </div>
          ) : !tableCounts ? (
            <StatusEmptyState
              message={hasError
                ? "Failed to load table data. Please try refreshing."
                : "No table data available yet. Run a full update or reset."
              }
            />
          ) : (
            <div>
              <div className="bg-sky-50/50 rounded-t-md px-2">{renderTableGroup('Core Tables', tableCounts?.core || [])}</div>
              <div className="bg-green-50/50 px-2">{renderTableGroup('Metrics Tables', tableCounts?.metrics || [])}</div>
              <div className="bg-amber-50/50 rounded-b-md px-2">{renderTableGroup('Config Tables', tableCounts?.config || [])}</div>
            </div>
          )}
        </CardContent>
      </Card>
    );
  };

  return (
    <div className="space-y-8 max-w-4xl">
      <div className="grid gap-4 md:grid-cols-2">
        {/* Full Update Card */}
        <Card className="relative">
          <CardHeader className="pb-12">
            <CardTitle>Full Update</CardTitle>
            <CardDescription>
              Import latest data and recalculate all metrics
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-2">
              <Button 
                className="absolute bottom-4 right-[50%] translate-x-[50%] w-3/4"
                onClick={handleFullUpdate}
                disabled={isUpdating || isResetting}
              >
                {isUpdating ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Updating...
                  </>
                ) : (
                  <>
                    <RefreshCw className="mr-2 h-4 w-4" />
                    Run Full Update
                  </>
                )}
              </Button>

              {isUpdating && (
                <Button variant="destructive" onClick={handleCancel} className="absolute top-4 right-4">
                  <X className="h-4 w-4" />
                </Button>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Full Reset Card */}
        <Card className="relative">
          <CardHeader className="pb-12">
            <CardTitle>Full Reset</CardTitle>
            <CardDescription>
              Reset database, reimport all data, and recalculate metrics
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-2">
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button 
                    variant="destructive"
                    className="absolute bottom-4 right-[50%] translate-x-[50%] w-3/4"
                    disabled={isUpdating || isResetting}
                  >
                    {isResetting ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Resetting...
                      </>
                    ) : (
                      <>
                        <AlertTriangle className="mr-2 h-4 w-4" />
                        Full Reset
                      </>
                    )}
                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>
                      Are you absolutely sure?
                    </AlertDialogTitle>
                    <AlertDialogDescription>
                      This will completely reset the database, delete all data,
                      and reimport everything from scratch. This action cannot
                      be undone.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction onClick={handleFullReset}>
                      Continue
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>

              {isResetting && (
                <Button variant="destructive" onClick={handleCancel} className="absolute top-4 right-4">
                  <X className="h-4 w-4" />
                </Button>
              )}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Terminal Output - Always show if there are operations running */}
      {renderTerminal()}

      {/* History Section */}
      <div className="space-y-4">
        <div className="flex justify-between items-center">
          <h2 className="text-2xl font-bold">History & Status</h2>
          <Button
            variant="ghost"
            size="icon"
            onClick={refreshAllData}
            className="h-8 w-8"
            disabled={isLoading}
          >
            {isLoading ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <RefreshCcw className="h-4 w-4" />
            )}
          </Button>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          {/* Table Status */}
          <div className="space-y-4 flex flex-col h-[580px]">
            <Card className="flex-1">
              <CardHeader className="pb-3">
                <CardTitle>Last Import Times</CardTitle>
              </CardHeader>
              <CardContent className="h-auto">
                <div className="">
                  {isLoading && !tableStatus.length ? (
                    <div>
                      {Array.from({ length: 4 }).map((_, i) => (
                        <div key={i} className="flex justify-between text-sm items-center py-2 border-b last:border-0">
                          <Skeleton className="h-4 w-[120px]" />
                          <Skeleton className="h-4 w-[60px]" />
                        </div>
                      ))}
                    </div>
                  ) : tableStatus.length > 0 ? (
                    tableStatus.map((table) => (
                      <div
                        key={table.table_name}
                        className="flex justify-between text-sm items-center py-2 border-b last:border-0"
                      >
                        <span className="font-medium">{table.table_name}</span>
                        <span className="text-sm text-gray-600">
                          {formatStatusTime(table.last_sync_timestamp)}
                        </span>
                      </div>
                    ))
                  ) : (
                    <StatusEmptyState 
                      message={hasError 
                        ? "Failed to load data. Please try refreshing."
                        : (
                          <>No imports have been performed yet.<br/>Run a full update or reset to import data.</>
                        )
                      } 
                    />
                  )}
                </div>
              </CardContent>
            </Card>
            
            {/* Module Status */}
            <Card className="flex-1">
              <CardHeader className="pb-3">
                <CardTitle>Last Calculation Times</CardTitle>
              </CardHeader>
              <CardContent className="h-auto">
                <div className="">
                  {isLoading && !moduleStatus.length ? (
                    <div>
                      {Array.from({ length: 3 }).map((_, i) => (
                        <div key={i} className="flex justify-between text-sm items-center py-2 border-b last:border-0">
                          <Skeleton className="h-4 w-[120px]" />
                          <Skeleton className="h-4 w-[60px]" />
                        </div>
                      ))}
                    </div>
                  ) : moduleStatus.length > 0 ? (
                    moduleStatus.map((module) => (
                      <div
                        key={module.module_name}
                        className="flex justify-between text-sm items-center py-2 border-b last:border-0"
                      >
                        <span className="font-medium">{module.module_name}</span>
                        <span className="text-sm text-gray-600">
                          {formatStatusTime(module.last_calculation_timestamp)}
                        </span>
                      </div>
                    ))
                  ) : (
                    <StatusEmptyState 
                      message={hasError 
                        ? "Failed to load data. Please try refreshing."
                        : (
                          <>No metrics have been calculated yet.<br/>Run a full update or reset to calculate metrics.</>
                        )
                      } 
                    />
                  )}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Add Table Counts section here */}
          {renderTableCountsSection()}
        </div>
        
        {/* Recent Import History */}
        <Card className="!mt-0">
          <CardHeader className="pb-3">
            <CardTitle>Recent Imports</CardTitle>
          </CardHeader>
          <CardContent className="px-4 mb-4 max-h-[300px] overflow-y-auto">
            <Table>
              <TableBody>
                {isLoading && !importHistory.length ? (
                  <TableSkeleton rows={10} columns={4} useAccordion={true} />
                ) : importHistory.length > 0 ? (
                  importHistory.slice(0, 20).map((record) => (
                    <TableRow key={record.id} className="hover:bg-transparent">
                      <TableCell className="w-full p-0">
                        <Accordion type="single" collapsible>
                          <AccordionItem
                            value={`import-${record.id}`}
                            className="border-0"
                          >
                            <AccordionTrigger className="px-4 py-2">
                              <div className="flex justify-between items-center w-full pr-4">
                                <div className="w-[50px]">
                                  <span className="font-medium">
                                    #{record.id}
                                  </span>
                                </div>
                                <div className="w-[170px]">
                                  <span className="text-sm text-gray-600">
                                    {formatDate(record.start_time)}
                                  </span>
                                </div>
                                <div className="w-[140px]">
                                  <span className="text-sm">
                                    {formatDurationWithSeconds(
                                      record.duration_minutes || 0,
                                      record.status === "running",
                                      record.start_time
                                    )}
                                  </span>
                                </div>
                                <div className="w-[80px]">
                                  <span
                                    className={`${
                                      record.status === "completed"
                                        ? "text-green-600"
                                        : record.status === "failed"
                                        ? "text-red-600"
                                        : record.status === "cancelled"
                                        ? "text-yellow-600"
                                        : "text-blue-600"
                                    }`}
                                  >
                                    {record.status}
                                  </span>
                                </div>
                              </div>
                            </AccordionTrigger>
                            <AccordionContent className="px-4 pb-2">
                              <div className="space-y-2 pt-2">
                                <div className="flex justify-between text-sm">
                                  <span className="text-gray-600">End Time:</span>
                                  <span>
                                    {record.end_time
                                      ? formatDate(record.end_time)
                                      : "N/A"}
                                  </span>
                                </div>
                                <div className="grid grid-cols-2 gap-2 text-sm">
                                  <div className="flex justify-between">
                                    <span className="text-gray-600">Added:</span>
                                    <span className="text-green-600 font-medium">{formatNumber(record.records_added)}</span>
                                  </div>
                                  <div className="flex justify-between">
                                    <span className="text-gray-600">Updated:</span>
                                    <span className="text-blue-600 font-medium">{formatNumber(record.records_updated)}</span>
                                  </div>
                                  {record.records_deleted !== undefined && (
                                    <div className="flex justify-between">
                                      <span className="text-gray-600">Deleted:</span>
                                      <span className="text-red-600 font-medium">{formatNumber(record.records_deleted)}</span>
                                    </div>
                                  )}
                                  {record.records_skipped !== undefined && (
                                    <div className="flex justify-between">
                                      <span className="text-gray-600">Skipped:</span>
                                      <span className="text-yellow-600 font-medium">{formatNumber(record.records_skipped)}</span>
                                    </div>
                                  )}
                                  {record.total_processed !== undefined && (
                                    <div className="flex justify-between col-span-2">
                                      <span className="text-gray-600">Total Processed:</span>
                                      <span className="font-medium">{formatNumber(record.total_processed)}</span>
                                    </div>
                                  )}
                                </div>
                                {record.error_message && (
                                  <div className="text-sm text-red-600 mt-2">
                                    {record.error_message}
                                  </div>
                                )}
                                {record.additional_info &&
                                  formatJsonData(record.additional_info)}
                              </div>
                            </AccordionContent>
                          </AccordionItem>
                        </Accordion>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <EmptyStateSkeleton 
                    message={hasError 
                      ? "Failed to load import history. Please try refreshing." 
                      : "No import history available"
                    } 
                  />
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        {/* Recent Calculate History */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle>Recent Calculations</CardTitle>
          </CardHeader>
          <CardContent className="px-4 mb-4 max-h-[300px] overflow-y-auto">
            <Table>
              <TableBody>
                {isLoading && !calculateHistory.length ? (
                  <TableSkeleton rows={9} columns={4} useAccordion={true} />
                ) : calculateHistory.length > 0 ? (
                  calculateHistory.slice(0, 20).map((record) => (
                    <TableRow key={record.id} className="hover:bg-transparent">
                      <TableCell className="w-full p-0">
                        <Accordion type="single" collapsible>
                          <AccordionItem
                            value={`calc-${record.id}`}
                            className="border-0"
                          >
                            <AccordionTrigger className="px-4 py-2">
                              <div className="flex justify-between items-center w-full pr-4">
                                <div className="w-[50px]">
                                  <span className="font-medium">
                                    #{record.id}
                                  </span>
                                </div>
                                <div className="w-[170px]">
                                  <span className="text-sm text-gray-600">
                                    {formatDate(record.start_time)}
                                  </span>
                                </div>
                                <div className="w-[140px]">
                                  <span className="text-sm">
                                    {formatDurationWithSeconds(
                                      record.duration_minutes || 0,
                                      record.status === "running",
                                      record.start_time
                                    )}
                                  </span>
                                </div>
                                <div className="w-[80px]">
                                  <span
                                    className={`${
                                      record.status === "completed"
                                        ? "text-green-600"
                                        : record.status === "failed"
                                        ? "text-red-600"
                                        : record.status === "cancelled"
                                        ? "text-yellow-600"
                                        : "text-blue-600"
                                    }`}
                                  >
                                    {record.status}
                                  </span>
                                </div>
                              </div>
                            </AccordionTrigger>
                            <AccordionContent className="px-4 pb-2">
                              <div className="space-y-2 pt-2">
                                <div className="flex justify-between text-sm">
                                  <span className="text-gray-600">End Time:</span>
                                  <span>
                                    {record.end_time
                                      ? formatDate(record.end_time)
                                      : "N/A"}
                                  </span>
                                </div>
                                <div className="flex justify-between text-sm">
                                  <span className="text-gray-600">Products:</span>
                                  <span>{record.processed_products} of {record.total_products}</span>
                                </div>
                                <div className="flex justify-between text-sm">
                                  <span className="text-gray-600">Orders:</span>
                                  <span>{record.processed_orders} of {record.total_orders}</span>
                                </div>
                                <div className="flex justify-between text-sm">
                                  <span className="text-gray-600">Purchase Orders:</span>
                                  <span>{record.processed_purchase_orders} of {record.total_purchase_orders}</span>
                                </div>
                                {record.error_message && (
                                  <div className="text-sm text-red-600 mt-2">
                                    {record.error_message}
                                  </div>
                                )}
                                {record.additional_info &&
                                  formatJsonData(record.additional_info)}
                              </div>
                            </AccordionContent>
                          </AccordionItem>
                        </Accordion>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <EmptyStateSkeleton 
                    message={hasError 
                      ? "Failed to load calculation history. Please try refreshing." 
                      : "No calculation history available"
                    } 
                  />
                )}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  );
} 
