Untitled

"use client"

import { useEffect, useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Overview } from "@/components/statistics/overview"
import { DailySorting } from "@/components/statistics/daily-sorting"
import { HourlyActivity } from "@/components/statistics/hourly-activity"
import { FillRates } from "@/components/statistics/fill-rates"
import { ModelUsage } from "@/components/statistics/model-usage"
import { ClassificationTimes } from "@/components/statistics/classification-times"
import { EfficiencyStats } from "@/components/statistics/efficiency-stats"
import { Activity, Brain, ChartBar, Gauge, LineChart, Recycle, Timer } from "lucide-react"

export default function StatisticsPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('/api/stats')
      .then(res => res.json())
      .then(data => {
        setData(data)
        setIsLoading(false)
      })
      .catch(error => {
        console.error('Error fetching stats:', error)
        setIsLoading(false)
      })
  }, [])

  if (isLoading) {
    return <div className="flex items-center justify-center h-screen">Loading...</div>
  }

  return (
    <div className="flex-1 space-y-4 p-8 pt-6">
      <div className="flex items-center justify-between space-y-2">
        <h2 className="text-3xl font-bold tracking-tight">Statistics</h2>
      </div>

      {/* Quick Stats Cards */}
      <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 Items</CardTitle>
            <Recycle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{data?.summary?.total_sorts || 0}</div>
            <p className="text-xs text-muted-foreground">
              +{data?.summary?.today_sorts || 0} today
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Average Accuracy</CardTitle>
            <Brain className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {Math.round((data?.summary?.accuracy || 0) * 100)}%
            </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">API Usage</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {Math.round((data?.summary?.model_usage_total?.api /
                (data?.summary?.model_usage_total?.api +
                  data?.summary?.model_usage_total?.local)) * 100)}%
            </div>
            <p className="text-xs text-muted-foreground">Of total classifications</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Response Time</CardTitle>
            <Timer className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {data?.summary?.avg_classification_time_ms || 0}ms
            </div>
            <p className="text-xs text-muted-foreground">Average classification speed</p>
          </CardContent>
        </Card>
      </div>

      {/* Main Content Tabs */}
      <Tabs defaultValue="overview" className="space-y-4">
        <TabsList>
          <TabsTrigger value="overview" className="gap-2">
            <LineChart className="h-4 w-4" />
            Overview
          </TabsTrigger>
          <TabsTrigger value="sorting" className="gap-2">
            <ChartBar className="h-4 w-4" />
            Sorting
          </TabsTrigger>
          <TabsTrigger value="bins" className="gap-2">
            <Recycle className="h-4 w-4" />
            Bins
          </TabsTrigger>
          <TabsTrigger value="performance" className="gap-2">
            <Activity className="h-4 w-4" />
            Performance
          </TabsTrigger>
          <TabsTrigger value="efficiency" className="gap-2">
            <Gauge className="h-4 w-4" />
            Efficiency
          </TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-4">
          <Overview data={data} />
        </TabsContent>

        <TabsContent value="sorting" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <DailySorting data={data} />
            <HourlyActivity data={data} />
          </div>
        </TabsContent>

        <TabsContent value="bins" className="space-y-4">
          <FillRates data={data} />
        </TabsContent>

        <TabsContent value="performance" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <ModelUsage data={data} />
            <ClassificationTimes data={data} />
          </div>
        </TabsContent>

        <TabsContent value="efficiency" className="space-y-4">
          <EfficiencyStats data={data} />
        </TabsContent>
      </Tabs>
    </div>
  )
}