'use client'

import { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { BarChart3, RefreshCcw } from 'lucide-react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { AdminUnauthorizedError, adminFetchJson } from '@/lib/admin-api'

interface Stats {
  date: string
  request_count: number
  input_tokens: number
  output_tokens: number
  cached_count: number
  error_count: number
  hourly: {
    hour: number
    request_count: number
    input_tokens: number
    output_tokens: number
    cached_count: number
    error_count: number
  }[]
}

interface Realtime {
  rpm: number
  tpm: number
}

export default function StatsPage() {
  const router = useRouter()
  const [providers, setProviders] = useState<{ id: number; name: string; model_id: string; is_default: boolean }[]>([])
  const [providerId, setProviderId] = useState<string>('')
  const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10))
  const [stats, setStats] = useState<Stats | null>(null)
  const [realtime, setRealtime] = useState<Realtime>({ rpm: 0, tpm: 0 })
  const [error, setError] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const totalTokens = useMemo(() => {
    if (!stats) return 0
    return stats.input_tokens + stats.output_tokens
  }, [stats])

  const cacheHitRate = useMemo(() => {
    if (!stats || stats.request_count <= 0) return 0
    return stats.cached_count / stats.request_count
  }, [stats])

  const errorRate = useMemo(() => {
    if (!stats || stats.request_count <= 0) return 0
    return stats.error_count / stats.request_count
  }, [stats])

  const maxHourlyRequest = useMemo(() => {
    if (!stats) return 0
    return Math.max(0, ...stats.hourly.map(h => h.request_count))
  }, [stats])

  const fetchProviders = async () => {
    setError('')
    try {
      const data = await adminFetchJson<{
        id: number
        name: string
        model_id: string
        is_default: boolean
      }[]>('/api/v1/admin/providers')
      setProviders(data)
      const defaultOne = data.find(p => p.is_default) || data[0] || null
      if (defaultOne) setProviderId(String(defaultOne.id))
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '加载 Provider 失败')
    }
  }

  const fetchRealtime = async () => {
    if (!providerId) return
    try {
      const data = await adminFetchJson<Realtime>(`/api/v1/admin/stats/realtime/${providerId}`)
      setRealtime(data)
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
    }
  }

  const fetchStats = async () => {
    if (!providerId) return
    setIsLoading(true)
    setError('')
    try {
      const data = await adminFetchJson<Stats>(`/api/v1/admin/stats/daily/${providerId}?date=${date}`)
      setStats(data)
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '加载统计失败')
    } finally {
      setIsLoading(false)
    }
  }

  useEffect(() => {
    fetchProviders()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    if (!providerId) return
    fetchStats()
    fetchRealtime()
    const interval = setInterval(fetchRealtime, 5000)
    return () => clearInterval(interval)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [providerId, date])

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">使用统计</h1>
          <p className="text-sm text-muted-foreground">
            实时 RPM/TPM + 指定日期的明细（按小时）
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={fetchStats} disabled={isLoading || !providerId}>
            <RefreshCcw className="mr-2 h-4 w-4" />
            刷新
          </Button>
          <Button asChild variant="secondary">
            <Link href="/admin/providers">
              <BarChart3 className="mr-2 h-4 w-4" />
              管理 Provider
            </Link>
          </Button>
        </div>
      </div>

      {error && (
        <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
          {error}
        </div>
      )}

      <Card className="border-muted bg-background/50 backdrop-blur-sm">
        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
          <div>
            <CardTitle>筛选</CardTitle>
            <CardDescription>选择 Provider 与日期</CardDescription>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full sm:w-[520px]">
            <Select value={providerId} onValueChange={setProviderId}>
              <SelectTrigger>
                <SelectValue placeholder="选择 Provider" />
              </SelectTrigger>
              <SelectContent>
                {providers.map(p => (
                  <SelectItem key={p.id} value={String(p.id)}>
                    {p.name} ({p.model_id}){p.is_default ? ' · 默认' : ''}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>RPM</CardDescription>
                <CardTitle className="text-3xl">{realtime.rpm}</CardTitle>
              </CardHeader>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>TPM</CardDescription>
                <CardTitle className="text-3xl">{realtime.tpm}</CardTitle>
              </CardHeader>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>缓存命中率</CardDescription>
                <CardTitle className="text-3xl">
                  {stats ? `${(cacheHitRate * 100).toFixed(1)}%` : '--'}
                </CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                {stats ? `${stats.cached_count} / ${stats.request_count}` : ''}
              </CardContent>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>错误率</CardDescription>
                <CardTitle className="text-3xl">
                  {stats ? `${(errorRate * 100).toFixed(1)}%` : '--'}
                </CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                {stats ? `${stats.error_count} / ${stats.request_count}` : ''}
              </CardContent>
            </Card>
          </div>

          {stats && (
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <Card className="border-muted">
                <CardHeader className="pb-2">
                  <CardDescription>总请求</CardDescription>
                  <CardTitle className="text-3xl">{stats.request_count}</CardTitle>
                </CardHeader>
              </Card>
              <Card className="border-muted">
                <CardHeader className="pb-2">
                  <CardDescription>总 Token</CardDescription>
                  <CardTitle className="text-3xl">{totalTokens}</CardTitle>
                </CardHeader>
              </Card>
              <Card className="border-muted">
                <CardHeader className="pb-2">
                  <CardDescription>输入 Token</CardDescription>
                  <CardTitle className="text-3xl">{stats.input_tokens}</CardTitle>
                </CardHeader>
              </Card>
              <Card className="border-muted">
                <CardHeader className="pb-2">
                  <CardDescription>输出 Token</CardDescription>
                  <CardTitle className="text-3xl">{stats.output_tokens}</CardTitle>
                </CardHeader>
              </Card>
            </div>
          )}
        </CardContent>
      </Card>

      <Card className="border-muted bg-background/50 backdrop-blur-sm">
        <CardHeader>
          <CardTitle>按小时趋势</CardTitle>
          <CardDescription>以请求数为主（0-23 点）</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {!stats ? (
            <div className="text-sm text-muted-foreground">暂无数据</div>
          ) : (
            <>
              <div className="flex items-end gap-1 h-28 overflow-x-auto rounded-md border bg-background p-3">
                {stats.hourly.map((h) => {
                  const pct = maxHourlyRequest ? h.request_count / maxHourlyRequest : 0
                  return (
                    <div key={h.hour} className="flex flex-col items-center gap-1 min-w-[18px]">
                      <div
                        className="w-3 rounded-sm bg-primary/70"
                        style={{ height: `${Math.max(2, Math.round(pct * 96))}px` }}
                        title={`${h.hour}:00  请求:${h.request_count}  缓存:${h.cached_count}  错误:${h.error_count}`}
                      />
                      <div className="text-[10px] text-muted-foreground">{h.hour}</div>
                    </div>
                  )
                })}
              </div>

              <div className="rounded-lg border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>小时</TableHead>
                      <TableHead>请求</TableHead>
                      <TableHead>Token</TableHead>
                      <TableHead>缓存</TableHead>
                      <TableHead>错误</TableHead>
                      <TableHead>状态</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {stats.hourly.map((h) => (
                      <TableRow key={h.hour}>
                        <TableCell className="font-mono text-xs">{String(h.hour).padStart(2, '0')}:00</TableCell>
                        <TableCell>{h.request_count}</TableCell>
                        <TableCell>{h.input_tokens + h.output_tokens}</TableCell>
                        <TableCell>{h.cached_count}</TableCell>
                        <TableCell>{h.error_count}</TableCell>
                        <TableCell>
                          {h.error_count > 0 ? (
                            <Badge variant="warning">注意</Badge>
                          ) : h.request_count > 0 ? (
                            <Badge variant="success">正常</Badge>
                          ) : (
                            <Badge variant="outline" className="text-muted-foreground">
                              空闲
                            </Badge>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  )
}