src/components/ThinkingProcess.tsx

/**
 * Thinking Process Component
 * 
 * Displays the agent's reasoning path including:
 * - Step-by-step reasoning (Claude, o1 style)
 * - Tool execution visualization
 * - Re-ranking progress
 * - HyDE query expansion
 * - Knowledge base indicators
 */

"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Progress } from "@/components/ui/progress"
import { 
  ChevronDown, 
  ChevronRight,
  Brain,
  Check,
  Clock,
  Search,
  Lightbulb,
  AlertCircle,
  TrendingUp,
  Eye,
  Layers,
  Zap,
  Database,
  RefreshCw,
  Filter,
  Sparkles,
  FileText,
  Scale,
  Newspaper
} from "lucide-react"
import { cn } from "@/lib/utils"

// Enhanced Types
interface ToolExecution {
  name: string
  status: 'pending' | 'running' | 'completed' | 'error'
  input?: Record<string, unknown>
  output?: unknown
  duration_ms?: number
}

interface RetrievalStep {
  namespace: string
  docs_retrieved: number
  docs_after_rerank?: number
  used_hyde?: boolean
  query_expanded?: string
}

interface ThoughtStep {
  step: number
  action: string
  observation: string
  reasoning: string
  duration_ms?: number
  confidence?: number
  tool_executions?: ToolExecution[]
  retrieval?: RetrievalStep
}

interface ReasoningPath {
  query: string
  thoughts: ThoughtStep[]
  total_duration_ms: number
  final_conclusion: string
  knowledge_bases_used?: string[]
  used_reranking?: boolean
  used_hyde?: boolean
  model_used?: string
}

interface ThinkingProcessProps {
  reasoning: ReasoningPath | string
  className?: string
  defaultExpanded?: boolean
  showEnhancements?: boolean
}

export function ThinkingProcess({ 
  reasoning, 
  className, 
  defaultExpanded = false 
}: ThinkingProcessProps) {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
  const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set())

  // Handle string reasoning (new format)
  if (typeof reasoning === 'string') {
    return (
      <Card className={cn("border-2 border-primary/20", className)}>
        <CardHeader 
          className="cursor-pointer hover:bg-accent/50 transition-colors py-3"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Brain className="h-5 w-5 text-primary" />
              <CardTitle className="text-base">Thinking Process</CardTitle>
            </div>
            <div className="flex items-center gap-3">
              <Badge variant="secondary" className="font-mono text-xs">
                Analysis
              </Badge>
              {isExpanded ? (
                <ChevronDown className="h-5 w-5 text-muted-foreground" />
              ) : (
                <ChevronRight className="h-5 w-5 text-muted-foreground" />
              )}
            </div>
          </div>
        </CardHeader>

        {isExpanded && (
          <CardContent className="pt-0 pb-4">
            <ScrollArea className="max-h-[400px]">
              <div className="bg-muted/30 p-4 rounded-lg text-sm text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed">
                {reasoning}
              </div>
            </ScrollArea>
          </CardContent>
        )}
      </Card>
    )
  }

  // Handle structured reasoning (legacy/future format)
  const toggleStep = (step: number) => {
    const newExpanded = new Set(expandedSteps)
    if (newExpanded.has(step)) {
      newExpanded.delete(step)
    } else {
      newExpanded.add(step)
    }
    setExpandedSteps(newExpanded)
  }

  const toggleAll = () => {
    if (isExpanded) {
      setIsExpanded(false)
      setExpandedSteps(new Set())
    } else {
      setIsExpanded(true)
      setExpandedSteps(new Set(reasoning.thoughts.map(t => t.step)))
    }
  }

  return (
    <Card className={cn("border-2 border-primary/20", className)}>
      <CardHeader 
        className="cursor-pointer hover:bg-accent/50 transition-colors"
        onClick={toggleAll}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Brain className="h-5 w-5 text-primary" />
            <CardTitle className="text-lg">Thinking Process</CardTitle>
          </div>
          <div className="flex items-center gap-3">
            <Badge variant="secondary" className="font-mono">
              {reasoning.thoughts.length} steps
            </Badge>
            <Badge variant="outline" className="font-mono">
              {reasoning.total_duration_ms}ms
            </Badge>
            {isExpanded ? (
              <ChevronDown className="h-5 w-5 text-muted-foreground" />
            ) : (
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            )}
          </div>
        </div>
        <CardDescription className="mt-2">
          Step-by-step reasoning for: <span className="font-medium">{reasoning.query}</span>
        </CardDescription>
      </CardHeader>

      {isExpanded && (
        <CardContent className="pt-0">
          <ScrollArea className="max-h-[600px]">
            <div className="space-y-3 relative">
              {/* Timeline line */}
              <div className="absolute left-[17px] top-4 bottom-4 w-[2px] bg-border" />

              {reasoning.thoughts.map((thought, idx) => (
                <ThoughtStepCard
                  key={thought.step}
                  thought={thought}
                  isExpanded={expandedSteps.has(thought.step)}
                  onToggle={() => toggleStep(thought.step)}
                  isLast={idx === reasoning.thoughts.length - 1}
                />
              ))}

              {/* Final Conclusion */}
              <div className="ml-12 p-4 rounded-lg bg-primary/5 border-2 border-primary/20">
                <div className="flex items-center gap-2 mb-2">
                  <Check className="h-5 w-5 text-green-500" />
                  <h4 className="font-semibold">Conclusion</h4>
                </div>
                <p className="text-sm text-muted-foreground">{reasoning.final_conclusion}</p>
              </div>
            </div>
          </ScrollArea>
        </CardContent>
      )}
    </Card>
  )
}

// Individual Thought Step Card
function ThoughtStepCard({
  thought,
  isExpanded,
  onToggle,
  isLast
}: {
  thought: ThoughtStep
  isExpanded: boolean
  onToggle: () => void
  isLast: boolean
}) {
  const getActionIcon = (action: string) => {
    const actionLower = action.toLowerCase()
    if (actionLower.includes("search") || actionLower.includes("retriev")) {
      return <Search className="h-4 w-4" />
    }
    if (actionLower.includes("analyz") || actionLower.includes("check")) {
      return <Eye className="h-4 w-4" />
    }
    if (actionLower.includes("reason") || actionLower.includes("think")) {
      return <Lightbulb className="h-4 w-4" />
    }
    if (actionLower.includes("synthesiz") || actionLower.includes("combin")) {
      return <Layers className="h-4 w-4" />
    }
    return <TrendingUp className="h-4 w-4" />
  }

  return (
    <div className="relative">
      {/* Step number bubble */}
      <div className="absolute left-0 top-3 w-[34px] h-[34px] rounded-full bg-primary flex items-center justify-center text-white font-bold text-sm z-10">
        {thought.step}
      </div>

      {/* Step card */}
      <div className="ml-12 relative">
        <div 
          className={cn(
            "border rounded-lg transition-all cursor-pointer",
            isExpanded ? "bg-accent/50 border-primary/30" : "bg-card hover:bg-accent/30"
          )}
          onClick={onToggle}
        >
          {/* Header */}
          <div className="p-3 flex items-center justify-between">
            <div className="flex items-center gap-2 flex-1">
              {getActionIcon(thought.action)}
              <span className="font-medium text-sm">{thought.action}</span>
            </div>
            <div className="flex items-center gap-2">
              {thought.duration_ms && (
                <Badge variant="outline" className="text-xs font-mono">
                  <Clock className="h-3 w-3 mr-1" />
                  {thought.duration_ms}ms
                </Badge>
              )}
              {thought.confidence !== undefined && (
                <Badge 
                  variant={thought.confidence >= 0.8 ? "default" : "secondary"}
                  className="text-xs font-mono"
                >
                  {(thought.confidence * 100).toFixed(0)}%
                </Badge>
              )}
              {isExpanded ? (
                <ChevronDown className="h-4 w-4 text-muted-foreground" />
              ) : (
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
              )}
            </div>
          </div>

          {/* Expanded content */}
          {isExpanded && (
            <div className="px-3 pb-3 space-y-3 border-t">
              {/* Observation */}
              <div className="pt-3">
                <div className="flex items-center gap-2 mb-1">
                  <Eye className="h-3.5 w-3.5 text-muted-foreground" />
                  <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                    Observation
                  </span>
                </div>
                <p className="text-sm ml-5">{thought.observation}</p>
              </div>

              {/* Reasoning */}
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <Lightbulb className="h-3.5 w-3.5 text-muted-foreground" />
                  <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                    Reasoning
                  </span>
                </div>
                <p className="text-sm ml-5 text-muted-foreground">{thought.reasoning}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

// Compact version for inline display
export function ThinkingProcessCompact({ 
  reasoning 
}: { 
  reasoning: ReasoningPath 
}) {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <div className="border-l-2 border-primary/20 pl-4 py-2">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors"
      >
        <Brain className="h-4 w-4" />
        <span>View thinking process ({reasoning.thoughts.length} steps)</span>
        {isExpanded ? (
          <ChevronDown className="h-4 w-4" />
        ) : (
          <ChevronRight className="h-4 w-4" />
        )}
      </button>

      {isExpanded && (
        <div className="mt-3 space-y-2">
          {reasoning.thoughts.map((thought) => (
            <div key={thought.step} className="text-sm">
              <span className="font-semibold">{thought.step}.</span> {thought.action}
              <p className="text-muted-foreground ml-4 text-xs">{thought.observation}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

// Loading skeleton
export function ThinkingProcessSkeleton() {
  return (
    <Card className="border-2 border-primary/20">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Brain className="h-5 w-5 text-primary animate-pulse" />
            <CardTitle className="text-lg">Thinking...</CardTitle>
          </div>
          <Badge variant="secondary" className="animate-pulse">
            Processing
          </Badge>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-primary/20 animate-pulse" />
              <div className="flex-1 h-12 bg-accent/50 rounded-lg animate-pulse" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

export default ThinkingProcess