src/components/AgentMonitoring.tsx

/**
 * Agent Monitoring Component
 * 
 * Standalone component for monitoring agent performance
 *
 */

"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import ThinkingProcess from "@/components/ThinkingProcess"
import { 
  Activity, 
  AlertTriangle, 
  BarChart3, 
  Brain, 
  CheckCircle, 
  Clock, 
  RefreshCw,
  Search,
  TrendingUp,
  Users,
  XCircle,
  Zap,
  Flag
} from "lucide-react"
import { cn } from "@/lib/utils"

// Types (same as before)
interface ThoughtStep {
  step: number
  action: string
  observation: string
  reasoning: string
  duration_ms?: number
  confidence?: number
}

interface ReasoningPath {
  query: string
  thoughts: ThoughtStep[]
  total_duration_ms: number
  final_conclusion: string
}

interface QueryLog {
  id: string
  timestamp: string
  query: string
  persona: "wanjiku" | "wakili" | "mwanahabari"
  intent: "news" | "law" | "hybrid" | "general"
  confidence: number
  response_time_ms: number
  evidence_count: number
  reasoning_steps: number
  human_review_required: boolean
  agent_path: string[]
  quality_issues: string[]
  reasoning_path?: ReasoningPath | string
  user_feedback?: "positive" | "negative" | null
}

interface AgentMetrics {
  total_queries: number
  avg_confidence: number
  avg_response_time_ms: number
  human_review_rate: number
  persona_distribution: {
    wanjiku: number
    wakili: number
    mwanahabari: number
  }
  intent_distribution: {
    news: number
    law: number
    hybrid: number
    general: number
  }
  confidence_buckets: {
    low: number
    medium: number
    high: number
  }
}

interface ReviewQueueItem extends QueryLog {
  review_reason: string
  priority: "low" | "medium" | "high"
}

export function AgentMonitoring() {
  const [metrics, setMetrics] = useState<AgentMetrics | null>(null)
  const [queryLogs, setQueryLogs] = useState<QueryLog[]>([])
  const [reviewQueue, setReviewQueue] = useState<ReviewQueueItem[]>([])
  const [selectedLog, setSelectedLog] = useState<QueryLog | null>(null)
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterPersona, setFilterPersona] = useState<string>("all")
  const [filterConfidence, setFilterConfidence] = useState<string>("all")

  // Fetch functions
  const fetchMetrics = async () => {
    try {
      const response = await fetch("/api/admin/agent-metrics?days=30")
      if (!response.ok) {
        console.error("Failed to fetch metrics:", response.statusText)
        setMetrics(null)
        return
      }
      const data = await response.json()
      setMetrics(data)
    } catch (error) {
      console.error("Error fetching metrics:", error)
      setMetrics(null)
    }
  }

  const fetchQueryLogs = async () => {
    setLoading(true)
    try {
      const response = await fetch("/api/admin/query-logs?limit=100&offset=0")
      if (!response.ok) {
        console.error("Failed to fetch query logs:", response.statusText)
        setQueryLogs([])
        return
      }
      const data = await response.json()
      setQueryLogs(data.logs || [])
    } catch (error) {
      console.error("Error fetching query logs:", error)
      setQueryLogs([])
    } finally {
      setLoading(false)
    }
  }

  const fetchReviewQueue = async () => {
    try {
      const response = await fetch("/api/admin/review-queue")
      if (!response.ok) {
        console.error("Failed to fetch review queue:", response.statusText)
        setReviewQueue([])
        return
      }
      const data = await response.json()
      setReviewQueue(data.queue || [])
    } catch (error) {
      console.error("Error fetching review queue:", error)
      setReviewQueue([])
    }
  }

  const handleReviewApprove = async (logId: string) => {
    try {
      const response = await fetch(`/api/admin/review-queue/${logId}/approve`, { method: "POST" })
      if (!response.ok) {
        throw new Error(`Failed to approve: ${response.statusText}`)
      }
      setReviewQueue(reviewQueue.filter(item => item.id !== logId))
      // Refresh metrics to reflect the approval
      fetchMetrics()
    } catch (error) {
      console.error("Error approving review:", error)
      alert("Failed to approve query. Please try again.")
    }
  }

  const handleReviewReject = async (logId: string, feedback: string) => {
    try {
      const response = await fetch(`/api/admin/review-queue/${logId}/reject`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ feedback })
      })
      if (!response.ok) {
        throw new Error(`Failed to reject: ${response.statusText}`)
      }
      setReviewQueue(reviewQueue.filter(item => item.id !== logId))
      // Refresh metrics to reflect the rejection
      fetchMetrics()
    } catch (error) {
      console.error("Error rejecting review:", error)
      alert("Failed to reject query. Please try again.")
    }
  }

  const handleRetrain = async () => {
    try {
      await fetch("/api/admin/retrain", { method: "POST" })
      alert("Retraining initiated. Check back in a few hours.")
    } catch (error) {
      console.error("Error initiating retrain:", error)
    }
  }

  // Fetch data on mount and set up polling for real-time updates
  useEffect(() => {
    fetchMetrics()
    fetchQueryLogs()
    fetchReviewQueue()
    
    // Auto-refresh every 30 seconds for real-time monitoring
    const interval = setInterval(() => {
      fetchMetrics()
      fetchQueryLogs()
      fetchReviewQueue()
    }, 30000)
    
    return () => clearInterval(interval)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // Filter logs
  const filteredLogs = queryLogs.filter(log => {
    if (searchQuery && !log.query.toLowerCase().includes(searchQuery.toLowerCase())) {
      return false
    }
    if (filterPersona !== "all" && log.persona !== filterPersona) {
      return false
    }
    if (filterConfidence === "low" && log.confidence >= 0.6) {
      return false
    }
    if (filterConfidence === "medium" && (log.confidence < 0.6 || log.confidence >= 0.8)) {
      return false
    }
    if (filterConfidence === "high" && log.confidence < 0.8) {
      return false
    }
    return true
  })

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">Agent Monitoring</h1>
          <p className="text-muted-foreground">Monitor and manage AmaniQ agent performance</p>
        </div>
        <div className="flex gap-2">
          <Button onClick={fetchMetrics} variant="outline">
            <RefreshCw className="mr-2 h-4 w-4" />
            Refresh
          </Button>
          <Button onClick={handleRetrain}>
            <Brain className="mr-2 h-4 w-4" />
            Retrain Model
          </Button>
        </div>
      </div>

      {/* Metrics Overview */}
      {metrics && <MetricsOverview metrics={metrics} />}

      {/* Main Tabs */}
      <Tabs defaultValue="logs" className="space-y-4">
        <TabsList>
          <TabsTrigger value="logs">
            <Activity className="mr-2 h-4 w-4" />
            Query Logs
          </TabsTrigger>
          <TabsTrigger value="review">
            <Flag className="mr-2 h-4 w-4" />
            Review Queue ({reviewQueue.length})
          </TabsTrigger>
          <TabsTrigger value="analytics">
            <BarChart3 className="mr-2 h-4 w-4" />
            Analytics
          </TabsTrigger>
          <TabsTrigger value="training">
            <Brain className="mr-2 h-4 w-4" />
            Training
          </TabsTrigger>
        </TabsList>

        <TabsContent value="logs">
          <QueryLogsView 
            logs={filteredLogs}
            selectedLog={selectedLog}
            onSelectLog={setSelectedLog}
            searchQuery={searchQuery}
            onSearchChange={setSearchQuery}
            filterPersona={filterPersona}
            onFilterPersonaChange={setFilterPersona}
            filterConfidence={filterConfidence}
            onFilterConfidenceChange={setFilterConfidence}
            loading={loading}
          />
        </TabsContent>

        <TabsContent value="review">
          <ReviewQueueView 
            queue={reviewQueue}
            onApprove={handleReviewApprove}
            onReject={handleReviewReject}
          />
        </TabsContent>

        <TabsContent value="analytics">
          <AnalyticsView metrics={metrics} logs={queryLogs} />
        </TabsContent>

        <TabsContent value="training">
          <TrainingView onRetrain={handleRetrain} />
        </TabsContent>
      </Tabs>
    </div>
  )
}

// Helper components with proper TypeScript types

interface MetricsOverviewProps {
  metrics: AgentMetrics | null
}

function MetricsOverview({ metrics }: MetricsOverviewProps) {
  // Return placeholder if metrics not loaded
  if (!metrics) {
    return (
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {[1, 2, 3, 4].map((i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Loading...</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">--</div>
            </CardContent>
          </Card>
        ))}
      </div>
    )
  }

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Queries</CardTitle>
          <Activity className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{(metrics.total_queries ?? 0).toLocaleString()}</div>
          <p className="text-xs text-muted-foreground">Last 30 days</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Avg Confidence</CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{((metrics.avg_confidence ?? 0) * 100).toFixed(1)}%</div>
          <div className="flex gap-1 mt-2">
            <Badge variant={(metrics.avg_confidence ?? 0) >= 0.8 ? "default" : "secondary"} className="text-xs">
              {(metrics.avg_confidence ?? 0) >= 0.8 ? "High" : (metrics.avg_confidence ?? 0) >= 0.6 ? "Medium" : "Low"}
            </Badge>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Avg Response Time</CardTitle>
          <Zap className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{(metrics.avg_response_time_ms ?? 0).toFixed(0)}ms</div>
          <p className="text-xs text-muted-foreground">
            {(metrics.avg_response_time_ms ?? 0) < 1000 ? "Excellent" : (metrics.avg_response_time_ms ?? 0) < 2000 ? "Good" : "Slow"}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Human Review Rate</CardTitle>
          <Users className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{((metrics.human_review_rate ?? 0) * 100).toFixed(1)}%</div>
          <p className="text-xs text-muted-foreground">
            {(metrics.human_review_rate ?? 0) < 0.1 ? "Low" : (metrics.human_review_rate ?? 0) < 0.3 ? "Moderate" : "High"}
          </p>
        </CardContent>
      </Card>
    </div>
  )
}

interface QueryLogsViewProps {
  logs: QueryLog[]
  selectedLog: QueryLog | null
  onSelectLog: (log: QueryLog | null) => void
  searchQuery: string
  onSearchChange: (query: string) => void
  filterPersona: string
  onFilterPersonaChange: (persona: string) => void
  filterConfidence: string
  onFilterConfidenceChange: (confidence: string) => void
  loading: boolean
}

function QueryLogsView({ 
  logs, 
  selectedLog, 
  onSelectLog,
  searchQuery,
  onSearchChange,
  filterPersona,
  onFilterPersonaChange,
  filterConfidence,
  onFilterConfidenceChange,
  loading
}: QueryLogsViewProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Query History</CardTitle>
          <CardDescription>Recent agent queries</CardDescription>
          
          <div className="space-y-2 pt-4">
            <div className="relative">
              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search..."
                value={searchQuery}
                onChange={(e) => onSearchChange(e.target.value)}
                className="pl-8"
              />
            </div>
            <div className="flex gap-2">
              <Select value={filterPersona} onValueChange={onFilterPersonaChange}>
                <SelectTrigger className="w-[140px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Personas</SelectItem>
                  <SelectItem value="wanjiku">Wanjiku</SelectItem>
                  <SelectItem value="wakili">Wakili</SelectItem>
                  <SelectItem value="mwanahabari">Mwanahabari</SelectItem>
                </SelectContent>
              </Select>
              
              <Select value={filterConfidence} onValueChange={onFilterConfidenceChange}>
                <SelectTrigger className="w-[140px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Confidence</SelectItem>
                  <SelectItem value="low">Low</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="high">High</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-[600px]">
            {loading ? (
              <div className="flex items-center justify-center h-40">
                <RefreshCw className="h-6 w-6 animate-spin" />
              </div>
            ) : (
              <div className="space-y-2">
                {logs.map((log: QueryLog) => (
                  <div
                    key={log.id}
                    onClick={() => onSelectLog(log)}
                    className={cn(
                      "p-3 rounded-lg border cursor-pointer hover:bg-accent",
                      selectedLog?.id === log.id && "bg-accent border-primary"
                    )}
                  >
                    <div className="flex justify-between mb-2">
                      <div className="flex gap-2">
                        <Badge variant={log.persona === "wakili" ? "default" : "secondary"}>
                          {log.persona}
                        </Badge>
                        <Badge variant="outline">{log.intent}</Badge>
                      </div>
                      <span className="text-xs text-muted-foreground">
                        {new Date(log.timestamp).toLocaleTimeString()}
                      </span>
                    </div>
                    
                    <p className="text-sm font-medium line-clamp-2 mb-2">{log.query}</p>
                    
                    <div className="flex justify-between text-xs text-muted-foreground">
                      <div className="flex gap-3">
                        <span className="flex items-center gap-1">
                          <TrendingUp className="h-3 w-3" />
                          {(log.confidence * 100).toFixed(0)}%
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {log.response_time_ms}ms
                        </span>
                      </div>
                      {log.human_review_required && (
                        <Flag className="h-3 w-3 text-orange-500" />
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </ScrollArea>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Query Details</CardTitle>
        </CardHeader>
        <CardContent>
          {selectedLog ? (
            <ScrollArea className="h-[600px]">
              <div className="space-y-4">
                {/* Show ThinkingProcess if available */}
                {selectedLog.reasoning_path && (
                  <ThinkingProcess reasoning={selectedLog.reasoning_path} defaultExpanded />
                )}
                
                <div>
                  <Label className="text-xs font-semibold">Query</Label>
                  <p className="text-sm mt-1">{selectedLog.query}</p>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label className="text-xs font-semibold">Persona</Label>
                    <p className="text-sm mt-1">
                      <Badge>{selectedLog.persona}</Badge>
                    </p>
                  </div>
                  <div>
                    <Label className="text-xs font-semibold">Confidence</Label>
                    <p className="text-sm mt-1">
                      <Badge variant={
                        selectedLog.confidence >= 0.8 ? "default" :
                        selectedLog.confidence >= 0.6 ? "secondary" : "destructive"
                      }>
                        {(selectedLog.confidence * 100).toFixed(1)}%
                      </Badge>
                    </p>
                  </div>
                </div>

                <div>
                  <Label className="text-xs font-semibold">Agent Path</Label>
                  <div className="mt-2 flex flex-wrap gap-1">
                    {selectedLog.agent_path.map((node: string, idx: number) => (
                      <span key={idx}>
                        <Badge variant="outline" className="text-xs">{node}</Badge>
                        {idx < selectedLog.agent_path.length - 1 && " → "}
                      </span>
                    ))}
                  </div>
                </div>

                {selectedLog.quality_issues?.length > 0 && (
                  <div>
                    <Label className="text-xs font-semibold">Quality Issues</Label>
                    <ul className="mt-2 space-y-1">
                      {selectedLog.quality_issues.map((issue: string, idx: number) => (
                        <li key={idx} className="text-sm text-orange-600 flex items-start gap-2">
                          <AlertTriangle className="h-4 w-4 mt-0.5" />
                          {issue}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </ScrollArea>
          ) : (
            <div className="flex items-center justify-center h-40 text-muted-foreground">
              Select a query to view details
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

interface ReviewQueueViewProps {
  queue: ReviewQueueItem[]
  onApprove: (logId: string) => void
  onReject: (logId: string, feedback: string) => void
}

function ReviewQueueView({ queue, onApprove, onReject }: ReviewQueueViewProps) {
  const [selectedItem, setSelectedItem] = useState<ReviewQueueItem | null>(null)
  const [rejectFeedback, setRejectFeedback] = useState("")

  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Pending Review ({queue.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-[600px]">
            {queue.length === 0 ? (
              <div className="text-center text-muted-foreground py-8">
                <CheckCircle className="h-12 w-12 mx-auto mb-2 text-green-500" />
                <p>All caught up!</p>
              </div>
            ) : (
              <div className="space-y-2">
                {queue.map((item: ReviewQueueItem) => (
                  <div
                    key={item.id}
                    onClick={() => setSelectedItem(item)}
                    className={cn(
                      "p-3 rounded-lg border cursor-pointer hover:bg-accent",
                      selectedItem?.id === item.id && "bg-accent border-primary"
                    )}
                  >
                    <Badge variant={
                      item.priority === "high" ? "destructive" :
                      item.priority === "medium" ? "default" : "secondary"
                    }>
                      {item.priority} priority
                    </Badge>
                    <p className="text-sm font-medium mt-2">{item.query}</p>
                    <p className="text-xs text-muted-foreground mt-1">{item.review_reason}</p>
                  </div>
                ))}
              </div>
            )}
          </ScrollArea>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Review Details</CardTitle>
        </CardHeader>
        <CardContent>
          {selectedItem ? (
            <div className="space-y-4">
              <div>
                <Label>Feedback</Label>
                <Textarea
                  value={rejectFeedback}
                  onChange={(e) => setRejectFeedback(e.target.value)}
                  placeholder="Explain what needs improvement..."
                  rows={4}
                />
              </div>
              <div className="flex gap-2">
                <Button
                  onClick={() => {
                    onApprove(selectedItem.id)
                    setSelectedItem(null)
                  }}
                  className="flex-1"
                >
                  <CheckCircle className="mr-2 h-4 w-4" />
                  Approve
                </Button>
                <Button
                  onClick={() => {
                    if (rejectFeedback.trim()) {
                      onReject(selectedItem.id, rejectFeedback)
                      setSelectedItem(null)
                      setRejectFeedback("")
                    }
                  }}
                  variant="destructive"
                  className="flex-1"
                >
                  <XCircle className="mr-2 h-4 w-4" />
                  Reject
                </Button>
              </div>
            </div>
          ) : (
            <div className="flex items-center justify-center h-40 text-muted-foreground">
              Select an item to review
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

interface AnalyticsViewProps {
  metrics: AgentMetrics | null
  logs?: QueryLog[]
}

function AnalyticsView({ metrics }: AnalyticsViewProps) {
  if (!metrics) return <div>Loading...</div>

  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Persona Distribution</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {Object.entries(metrics.persona_distribution).map(([persona, count]: [string, number]) => {
              const percentage = (count / metrics.total_queries) * 100
              return (
                <div key={persona}>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="capitalize">{persona}</span>
                    <span>{count} ({percentage.toFixed(1)}%)</span>
                  </div>
                  <div className="w-full bg-secondary rounded-full h-2">
                    <div 
                      className="bg-primary rounded-full h-2"
                      style={{ width: `${percentage}%` }}
                    />
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Confidence Distribution</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {Object.entries(metrics.confidence_buckets).map(([bucket, count]: [string, number]) => {
              const percentage = (count / metrics.total_queries) * 100
              return (
                <div key={bucket}>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="capitalize">{bucket}</span>
                    <span>{count} ({percentage.toFixed(1)}%)</span>
                  </div>
                  <div className="w-full bg-secondary rounded-full h-2">
                    <div 
                      className={cn(
                        "rounded-full h-2",
                        bucket === "low" && "bg-red-500",
                        bucket === "medium" && "bg-yellow-500",
                        bucket === "high" && "bg-green-500"
                      )}
                      style={{ width: `${percentage}%` }}
                    />
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

interface TrainingViewProps {
  onRetrain: () => void
}

function TrainingView({ onRetrain }: TrainingViewProps) {
  const [trainingData, setTrainingData] = useState("")

  return (
    <Card>
      <CardHeader>
        <CardTitle>Model Retraining</CardTitle>
        <CardDescription>Upload training data and initiate retraining</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label>Training Data (JSONL)</Label>
          <Textarea
            value={trainingData}
            onChange={(e) => setTrainingData(e.target.value)}
            placeholder='{"query": "...", "response": "..."}'
            rows={10}
            className="font-mono text-xs"
          />
        </div>
        <Button onClick={onRetrain}>
          <Brain className="mr-2 h-4 w-4" />
          Start Retraining
        </Button>
      </CardContent>
    </Card>
  )
}

export default AgentMonitoring