'use client'

import { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Activity, BarChart3, Bot, 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { AdminUnauthorizedError, API_BASE, adminFetchJson } from '@/lib/admin-api'

interface Provider {
  id: number
  name: string
  model_id: string
  base_url: string | null
  is_active: boolean
  is_default: boolean
}

interface HourlyStat {
  hour: number
  request_count: number
  input_tokens: number
  output_tokens: number
  cached_count: number
  error_count: number
}

interface DailyStats {
  date: string
  request_count: number
  input_tokens: number
  output_tokens: number
  cached_count: number
  error_count: number
  hourly: HourlyStat[]
}

interface RealtimeStats {
  rpm: number
  tpm: number
}

function formatNumber(value: number) {
  return new Intl.NumberFormat('zh-CN').format(value)
}

function formatPercent(value: number) {
  return `${(value * 100).toFixed(1)}%`
}

export default function AdminPage() {
  const router = useRouter()
  const [providers, setProviders] = useState<Provider[]>([])
  const [providerId, setProviderId] = useState<string>('')
  const [daily, setDaily] = useState<DailyStats | null>(null)
  const [realtime, setRealtime] = useState<RealtimeStats>({ rpm: 0, tpm: 0 })
  const [healthOk, setHealthOk] = useState<boolean | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')

  const selectedProvider = useMemo(
    () => providers.find((p) => String(p.id) === providerId) || null,
    [providers, providerId]
  )

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

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

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

  const fetchProviders = async () => {
    setIsLoading(true)
    setError('')
    try {
      const data = await adminFetchJson<Provider[]>('/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 || '加载失败')
    } finally {
      setIsLoading(false)
    }
  }

  const fetchDaily = async (id: string) => {
    try {
      const data = await adminFetchJson<DailyStats>(`/api/v1/admin/stats/daily/${id}`)
      setDaily(data)
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '加载统计失败')
    }
  }

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

  const fetchHealth = async () => {
    try {
      const res = await fetch(`${API_BASE}/health`)
      setHealthOk(res.ok)
    } catch {
      setHealthOk(false)
    }
  }

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

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

  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">
            关键指标、Provider 状态与系统健康检查
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={() => fetchHealth()}>
            <Activity className="mr-2 h-4 w-4" />
            刷新健康
          </Button>
          <Button variant="outline" onClick={fetchProviders} disabled={isLoading}>
            <RefreshCcw className="mr-2 h-4 w-4" />
            刷新数据
          </Button>
          <Button asChild>
            <Link href="/admin/providers">
              <Bot className="mr-2 h-4 w-4" />
              管理配置
            </Link>
          </Button>
          <Button variant="secondary" asChild>
            <Link href="/admin/stats">
              <BarChart3 className="mr-2 h-4 w-4" />
              查看统计
            </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>当前 Provider</CardTitle>
            <CardDescription>选择一个 Provider 查看实时与今日指标</CardDescription>
          </div>
          <div className="w-full sm:w-[320px]">
            <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>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
            <span>API 健康：</span>
            {healthOk === null ? (
              <Badge variant="outline">未知</Badge>
            ) : healthOk ? (
              <Badge variant="success">OK</Badge>
            ) : (
              <Badge variant="destructive">异常</Badge>
            )}
            {selectedProvider && (
              <>
                <span className="ml-4">状态：</span>
                {selectedProvider.is_active ? (
                  <Badge variant="secondary">启用</Badge>
                ) : (
                  <Badge variant="outline" className="text-muted-foreground">
                    禁用
                  </Badge>
                )}
                {selectedProvider.is_default && <Badge variant="success">默认</Badge>}
              </>
            )}
          </div>

          <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">{formatNumber(realtime.rpm)}</CardTitle>
              </CardHeader>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>TPM（每分钟 Token）</CardDescription>
                <CardTitle className="text-3xl">{formatNumber(realtime.tpm)}</CardTitle>
              </CardHeader>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>今日请求</CardDescription>
                <CardTitle className="text-3xl">
                  {daily ? formatNumber(daily.request_count) : '--'}
                </CardTitle>
              </CardHeader>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>今日 Token</CardDescription>
                <CardTitle className="text-3xl">
                  {daily ? formatNumber(totalTokens) : '--'}
                </CardTitle>
              </CardHeader>
            </Card>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>缓存命中率</CardDescription>
                <CardTitle className="text-3xl">
                  {daily ? formatPercent(cacheHitRate) : '--'}
                </CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                命中 {daily ? formatNumber(daily.cached_count) : '--'} 次
              </CardContent>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>错误率</CardDescription>
                <CardTitle className="text-3xl">
                  {daily ? formatPercent(errorRate) : '--'}
                </CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                错误 {daily ? formatNumber(daily.error_count) : '--'} 次
              </CardContent>
            </Card>
            <Card className="border-muted">
              <CardHeader className="pb-2">
                <CardDescription>输入/输出 Token</CardDescription>
                <CardTitle className="text-3xl">
                  {daily ? formatNumber(daily.input_tokens) : '--'} / {daily ? formatNumber(daily.output_tokens) : '--'}
                </CardTitle>
              </CardHeader>
            </Card>
          </div>
        </CardContent>
      </Card>

      <Card className="border-muted bg-background/50 backdrop-blur-sm">
        <CardHeader>
          <CardTitle>Provider 列表</CardTitle>
          <CardDescription>快速查看默认与启用状态</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="rounded-lg border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>名称</TableHead>
                  <TableHead>模型</TableHead>
                  <TableHead>状态</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {providers.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={3} className="text-center text-muted-foreground">
                      暂无 Provider，请先去“AI 配置”添加。
                    </TableCell>
                  </TableRow>
                ) : (
                  providers.map((p) => (
                    <TableRow key={p.id}>
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-2">
                          {p.name}
                          {p.is_default && <Badge variant="success">默认</Badge>}
                        </div>
                      </TableCell>
                      <TableCell className="font-mono text-xs">{p.model_id}</TableCell>
                      <TableCell>
                        {p.is_active ? (
                          <Badge variant="secondary">启用</Badge>
                        ) : (
                          <Badge variant="outline" className="text-muted-foreground">
                            禁用
                          </Badge>
                        )}
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}