import { useState, useEffect } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { WorkflowVisualizer } from '@/components/workflow/WorkflowVisualizer';
import { ContextExplorer } from '@/components/workflow/ContextExplorer';
import { useWorkflowStore } from '@/stores/useWorkflowStore';
import { TaskStatus, schemas } from '@/api/schema.gen';
import { Loader2, CheckCircle2, AlertCircle, Clock, PanelLeftClose, PanelLeftOpen, TerminalSquare, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useAnalysisTemplates } from "@/hooks/useConfig"
import { RecentReportsDropdown } from '@/components/RecentReportsDropdown';
import { WorkflowStatus, ConnectionStatus, TaskState, TaskNode } from '@/types/workflow';
import { Progress } from "@/components/ui/progress"
import { cn, formatNodeName } from '@/lib/utils';

export function HistoricalReportPage() {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const symbol = searchParams.get('symbol');
  const market = searchParams.get('market');
  const templateId = searchParams.get('templateId');
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const [isWorkflowSticky, setIsWorkflowSticky] = useState(false);

  useEffect(() => {
      const handleScroll = () => {
          setIsWorkflowSticky(window.scrollY > 10);
      };
      window.addEventListener('scroll', handleScroll);
      return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  const { 
    initialize, 
    status, 
    mode,
    loadFromSnapshot,
    tasks,
    dag,
    activeTab,
    setActiveTab
  } = useWorkflowStore();

  const { data: templates } = useAnalysisTemplates();
  const templateName = templates && templateId ? templates[templateId]?.name : templateId;
  
  // Initialization Logic - Historical Mode Only
  useEffect(() => {
      if (!id) return;
      
      // Initialize store but don't set status to Connecting
      initialize(id);
      
      const loadSnapshot = async () => {
          try {
              const res = await fetch(`/api/v1/workflow/snapshot/${id}`);
              if (res.ok) {
                  const snapshot = await res.json();
                  
                  // Handle tagged enum wrapper (type/payload) if present
                  // The Backend serializes WorkflowEvent as { type: "...", payload: { ... } }
                  // But session data payload might be the raw JSONValue of that.
                  let rawPayload = snapshot.data_payload;
                  if (rawPayload && typeof rawPayload === 'object' && 'payload' in rawPayload && 'type' in rawPayload) {
                      rawPayload = rawPayload.payload;
                  }

                  loadFromSnapshot(rawPayload);

                  // Rehydrate content for completed analysis tasks
                  const payload = rawPayload;
                  if (payload.task_graph?.nodes) {
                      payload.task_graph.nodes.forEach(async (node: TaskNode) => {
                          const status = payload.tasks_status?.[node.id];
                          const outputCommit = payload.tasks_output?.[node.id];
                          
                          // We need the output path to know what file to fetch.
                          // It is stored in tasks_metadata by the Orchestrator.
                          // @ts-ignore
                          const metadata = payload.tasks_metadata?.[node.id];
                          const outputPath = metadata?.output_path;

                          if (status === schemas.TaskStatus.enum.Completed && outputCommit && outputPath) {
                              try {
                                  // Fetch the file content from the Context Inspector API
                                  const contentUrl = `/api/context/${id}/blob/${outputCommit}/${outputPath}`;
                                  const contentRes = await fetch(contentUrl);
                                  if (contentRes.ok) {
                                      const text = await contentRes.text();
                                      useWorkflowStore.getState().setTaskContent(node.id, text);
                                  }
                              } catch (err) {
                                  console.warn(`[Historical] Failed to load content for ${node.id}:`, err);
                              }
                          }
                      });
                  }
              } else {
                  console.error("Failed to load snapshot:", res.statusText);
              }
          } catch (e) {
              console.error("Snapshot load failed:", e);
          }
      };

      loadSnapshot();
      
      // No SSE connection here
      
  }, [id, initialize, loadFromSnapshot]);

    // Include ALL nodes in tabs to allow debugging context for DataFetch tasks
    const tabNodes = dag?.nodes || [];

  return (
    <div className="w-full px-6 py-4 space-y-4 min-h-[calc(100vh-4rem)] flex flex-col">
        {/* Header Area */}
        <div className="flex items-center justify-between shrink-0">
            <div className="space-y-1">
                <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
                    {symbol}
                    <Badge variant="outline" className="text-base font-normal">{market}</Badge>
                    <WorkflowStatusBadge status={status} mode={mode} />
                </h1>
                <div className="flex items-center gap-4 text-sm text-muted-foreground">
                    <span>Request ID: <span className="font-mono">{id}</span></span>
                    {templateName && <span>Template: <span className="font-medium">{templateName}</span></span>}
                </div>
            </div>
            <div className="flex gap-2">
                 <RecentReportsDropdown />
                 <Button size="sm" variant="outline">Export PDF</Button>
            </div>
        </div>

        {/* Main Content Grid */}
        <div className="flex gap-4 flex-1 items-start min-h-0">
            {/* Left Col: Visualizer */}
            <div className={cn(
                "flex flex-col gap-4 transition-all duration-300 ease-in-out sticky top-20 h-[calc(100vh-6rem)]",
                isSidebarCollapsed ? "w-[60px]" : "w-[33%] min-w-[350px]"
            )}>
                <Card className={cn(
                    "flex-1 flex flex-col min-h-0 py-0 gap-0 overflow-hidden transition-all duration-300",
                    isWorkflowSticky ? "shadow-lg border-primary/20" : "shadow-sm"
                )}>
                    <CardHeader 
                        className={cn(
                            "py-3 px-4 shrink-0 flex flex-row items-center space-y-0 transition-all duration-300 cursor-pointer hover:bg-muted/50", 
                            isSidebarCollapsed ? "h-full flex-col justify-start py-3 gap-4" : "h-[60px] justify-between"
                        )}
                        onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
                    >
                        {!isSidebarCollapsed ? (
                            <CardTitle className="text-sm font-medium truncate">Workflow Status</CardTitle>
                        ) : (
                            <div className="writing-vertical-lr transform rotate-180 text-sm font-medium whitespace-nowrap tracking-wide text-muted-foreground mt-2">
                                Workflow Status
                            </div>
                        )}
                        <Button 
                            variant="ghost" 
                            size="icon" 
                            className={cn("h-8 w-8 shrink-0", isSidebarCollapsed && "order-first")} 
                            onClick={(e) => {
                                e.stopPropagation(); // Prevent double toggle if button is clicked
                                setIsSidebarCollapsed(!isSidebarCollapsed);
                            }}
                        >
                            {isSidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
                        </Button>
                    </CardHeader>
                    <CardContent className={cn("p-0 flex-1 min-h-0 relative transition-opacity duration-200", isSidebarCollapsed ? "opacity-0 pointer-events-none" : "opacity-100")}>
                         <div className="absolute inset-0">
                            <WorkflowVisualizer />
                         </div>
                    </CardContent>
                </Card>
            </div>

            {/* Right Col: Detail Tabs */}
            <div className="flex-1 min-w-0 h-[calc(100vh-6rem)] flex flex-col">
                <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col flex-1 min-h-0">
                    <div className="w-full shrink-0">
                        <TabsList className="h-auto p-0 bg-transparent gap-1 flex-wrap justify-start w-full border-b">
                            <TabsTrigger 
                                value="overview" 
                                className="
                                    rounded-t-md rounded-b-none 
                                    border border-b-0 border-border/50 
                                    bg-muted/60 
                                    data-[state=active]:bg-background 
                                    data-[state=active]:border-border 
                                    data-[state=active]:border-b-background 
                                    data-[state=active]:mb-[-1px] 
                                    data-[state=active]:shadow-sm 
                                    data-[state=active]:z-10
                                    px-4 py-2.5
                                    text-muted-foreground
                                    data-[state=active]:text-foreground
                                    relative
                                "
                            >
                                Overview
                            </TabsTrigger>
                            {tabNodes.map((node: TaskNode) => (
                                <TabsTrigger 
                                    key={node.id} 
                                    value={node.id}
                                    className="
                                        rounded-t-md rounded-b-none 
                                        border border-b-0 border-border/50 
                                        bg-muted/60 
                                        data-[state=active]:bg-background 
                                        data-[state=active]:border-border 
                                        data-[state=active]:border-b-background 
                                        data-[state=active]:mb-[-1px] 
                                        data-[state=active]:shadow-sm 
                                        data-[state=active]:z-10
                                        px-4 py-2.5 gap-2
                                        text-muted-foreground
                                        data-[state=active]:text-foreground
                                        relative
                                    "
                                >
                                    {node.display_name || formatNodeName(node.name)}
                                    <TaskStatusIndicator status={tasks[node.id]?.status || schemas.TaskStatus.enum.Pending} />
                                </TabsTrigger>
                            ))}
                        </TabsList>
                    </div>
                    
                    {/* Content Area */}
                    <div className="mt-4 bg-background border rounded-md relative shadow-sm flex-1 min-h-0 overflow-hidden">
                        <TabsContent value="overview" className="m-0 p-6 h-full overflow-auto">
                            <OverviewTabContent 
                                status={status}
                                tasks={tasks}
                                totalTasks={dag?.nodes.length || 0}
                                completedTasks={Object.values(tasks).filter(t => t.status === schemas.TaskStatus.enum.Completed).length}
                            />
                        </TabsContent>

                        {tabNodes.map((node: TaskNode) => (
                            <TabsContent key={node.id} value={node.id} className="m-0 p-0 h-full">
                                <TaskDetailView task={tasks[node.id]} requestId={id} mode={mode} />
                            </TabsContent>
                        ))}
                    </div>
                </Tabs>
            </div>
        </div>
    </div>
  );
}


function OverviewTabContent({ status, tasks, totalTasks, completedTasks }: { 
    status: WorkflowStatus, 
    tasks: Record<string, TaskState>,
    totalTasks: number,
    completedTasks: number
}) {
    const progress = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
    
    // Find errors
    const failedTasks = Object.entries(tasks).filter(([_, t]) => t.status === schemas.TaskStatus.enum.Failed);

    return (
        <div className="max-w-3xl mx-auto space-y-8 py-6">
            {/* Hero Status */}
            <Card className="border-primary/10 shadow-md">
                <CardHeader className="text-center pb-2">
                    <div className="mx-auto mb-4 bg-muted rounded-full p-3 w-fit">
                        {status === schemas.TaskStatus.enum.Completed ? (
                            <CheckCircle2 className="h-8 w-8 text-green-600" />
                        ) : status === schemas.TaskStatus.enum.Failed ? (
                            <AlertCircle className="h-8 w-8 text-destructive" />
                        ) : (
                            <Loader2 className="h-8 w-8 text-blue-500 animate-spin" />
                        )}
                    </div>
                    <CardTitle className="text-2xl">
                        {status === schemas.TaskStatus.enum.Completed ? "Analysis Completed" : 
                         status === schemas.TaskStatus.enum.Failed ? "Analysis Failed" : 
                         "Analysis In Progress"}
                    </CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="space-y-2">
                        <div className="flex justify-between text-sm text-muted-foreground">
                            <span>Overall Progress</span>
                            <span>{Math.round(progress)}% ({completedTasks}/{totalTasks} tasks)</span>
                        </div>
                        <Progress value={progress} className="h-2" />
                    </div>

                    {/* Failed Tasks Warning */}
                    {failedTasks.length > 0 && (
                        <div className="bg-destructive/10 text-destructive rounded-md p-4 text-sm flex items-start gap-2">
                            <AlertCircle className="h-5 w-5 shrink-0 mt-0.5" />
                            <div className="space-y-1">
                                <p className="font-semibold">Some tasks failed:</p>
                                <ul className="list-disc list-inside">
                                    {failedTasks.map(([id, t]) => (
                                        <li key={id}>
                                            <span className="font-medium">{id}</span>: {t.message || "Unknown error"}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>

            {/* Stats Grid */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">Total Tasks</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{totalTasks}</div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">Completed</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold text-green-600">{completedTasks}</div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">Duration</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold flex items-center gap-2">
                            <Clock className="h-5 w-5 text-muted-foreground" />
                            <span>--:--</span>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}

function TaskDetailView({ task, requestId, mode: _mode }: { task?: TaskState, requestId?: string, mode: 'realtime' | 'historical' }) {
    const [isInspectorOpen, setIsInspectorOpen] = useState(false);
    
    // Only show context if we have commits
    const hasContext = task?.inputCommit || task?.outputCommit;

    return (
        <div className="relative h-full flex flex-col overflow-hidden">
            {/* Main Report View */}
            <div className="flex-1 overflow-auto p-8 bg-background">
                 <div className="w-full">
                    <div className="prose dark:prose-invert max-w-none prose-p:text-foreground prose-headings:text-foreground prose-li:text-foreground prose-strong:text-foreground prose-span:text-foreground prose-td:text-foreground prose-th:text-foreground">
                        {task?.content ? (
                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                {task.content || ''}
                            </ReactMarkdown>
                        ) : (
                            <div className="flex flex-col items-center justify-center h-[300px] text-muted-foreground space-y-4">
                                {task?.status === schemas.TaskStatus.enum.Pending && <p>Waiting to start...</p>}
                                {task?.status === schemas.TaskStatus.enum.Running && !task?.content && <Loader2 className="h-8 w-8 animate-spin" />}
                                {task?.status === schemas.TaskStatus.enum.Failed && (
                                    <div className="text-center space-y-2">
                                        <AlertCircle className="h-12 w-12 text-destructive mx-auto" />
                                        <p className="font-medium text-destructive">Task Failed</p>
                                        <p className="text-sm bg-destructive/10 p-2 rounded">{task.message}</p>
                                    </div>
                                )}
                            </div>
                        )}
                        {task?.status === schemas.TaskStatus.enum.Running && (
                            <span className="inline-block w-2 h-4 ml-1 bg-primary animate-pulse"/>
                        )}
                    </div>
                 </div>
            </div>
            
            {/* Inspector Toggle (Floating) */}
            <div className="absolute top-4 right-6 z-10">
                <Button variant="outline" size="sm" className="shadow-sm bg-background" onClick={() => setIsInspectorOpen(!isInspectorOpen)}>
                    <TerminalSquare className="h-4 w-4 mr-2" />
                    Inspector
                </Button>
            </div>

            {/* Inspector Panel (Overlaid on Content) */}
            <div className={cn(
                "absolute top-0 right-0 h-full w-full bg-background border-l shadow-2xl transition-transform duration-300 transform z-20 flex flex-col",
                isInspectorOpen ? "translate-x-0" : "translate-x-full"
            )}>
                <div className="flex items-center justify-between p-4 border-b shrink-0">
                    <h3 className="font-semibold flex items-center gap-2">
                        <TerminalSquare className="h-4 w-4" />
                        Task Inspector
                    </h3>
                    <Button variant="ghost" size="icon" onClick={() => setIsInspectorOpen(false)}>
                        <X className="h-4 w-4" />
                    </Button>
                </div>
                
                <div className="flex-1 flex flex-col min-h-0">
                    {hasContext && requestId && (task?.inputCommit || task?.outputCommit) ? (
                        <ContextExplorer 
                            reqId={requestId} 
                            commitHash={task.outputCommit || task.inputCommit!}
                            diffTargetHash={task.outputCommit ? task.inputCommit : undefined}
                            className="h-full p-4"
                        />
                    ) : (
                        <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
                            No context available
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

function WorkflowStatusBadge({ status, mode }: { status: WorkflowStatus, mode: 'realtime' | 'historical' }) {
    const content = (
        <div className="flex items-center gap-2">
            {status === schemas.TaskStatus.enum.Running && <Loader2 className="h-3 w-3 animate-spin" />}
            {status}
            {mode === 'historical' && (
                <span className="bg-muted-foreground/20 text-muted-foreground text-[10px] px-1.5 py-0.5 rounded uppercase tracking-wider font-semibold ml-1">
                    Historical
                </span>
            )}
        </div>
    );

    if (status === schemas.TaskStatus.enum.Running) {
        return <Badge variant="default" className="bg-blue-500 hover:bg-blue-600 border-transparent">{content}</Badge>;
    }
    if (status === schemas.TaskStatus.enum.Completed) {
        return <Badge variant="default" className="bg-green-600 hover:bg-green-600 border-transparent">{content}</Badge>;
    }
    if (status === schemas.TaskStatus.enum.Failed) {
        return <Badge variant="destructive">{content}</Badge>;
    }
    if (status === ConnectionStatus.Connecting) {
         return <Badge variant="secondary">CONNECTING...</Badge>;
    }

    return <Badge variant="outline">{content}</Badge>;
}

function TaskStatusIndicator({ status }: { status: TaskStatus }) {
    switch (status) {
        case schemas.TaskStatus.enum.Running: return <Loader2 className="h-3 w-3 animate-spin text-blue-500" />;
        case schemas.TaskStatus.enum.Completed: return <CheckCircle2 className="h-3 w-3 text-green-500" />;
        case schemas.TaskStatus.enum.Failed: return <div className="h-2 w-2 rounded-full bg-red-500" />;
        default: return null;
    }
}

