'use client'

import { useEffect, useState, useCallback } from 'react'
import { Loader2, Zap } from 'lucide-react'
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  BarChart,
  Bar,
  Legend,
} from 'recharts'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { api } from '@/lib/api-client'
import { ApiRequestError } from '@/lib/api-client'
import { formatNumber } from '@/lib/utils'
import type { UsageRecord, UsageByModel } from '@/lib/types'

export default function UsagePage() {
  const [days, setDays] = useState(7)
  const [dailyData, setDailyData] = useState<UsageRecord[]>([])
  const [modelData, setModelData] = useState<UsageByModel[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  const fetchData = useCallback(async () => {
    setLoading(true)
    setError('')
    try {
      const [dailyRes, modelRes] = await Promise.allSettled([
        api.usage.daily({ days }),
        api.usage.byModel({ days }),
      ])
      if (dailyRes.status === 'fulfilled') setDailyData(dailyRes.value)
      else throw new Error('Failed to fetch daily usage')
      if (modelRes.status === 'fulfilled') setModelData(modelRes.value)
    } catch (err) {
      if (err instanceof ApiRequestError) setError(err.body.message)
      else setError('加载数据失败')
    } finally {
      setLoading(false)
    }
  }, [days])

  useEffect(() => {
    fetchData()
  }, [fetchData])

  const lineChartData = dailyData.map((r) => ({
    day: r.day.slice(5),
    Input: r.input_tokens,
    Output: r.output_tokens,
  }))

  const barChartData = modelData.map((r) => ({
    model: r.model_id,
    请求量: r.count,
    Input: r.input_tokens,
    Output: r.output_tokens,
  }))

  const totalInput = dailyData.reduce((s, r) => s + r.input_tokens, 0)
  const totalOutput = dailyData.reduce((s, r) => s + r.output_tokens, 0)
  const totalRequests = dailyData.reduce((s, r) => s + r.count, 0)

  if (loading) {
    return (
      <div className="flex h-[60vh] items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <p className="text-sm text-muted-foreground">加载中...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="flex h-[60vh] items-center justify-center">
        <div className="text-center">
          <p className="text-destructive">{error}</p>
          <button onClick={() => fetchData()} className="mt-4 text-sm text-primary hover:underline cursor-pointer">
            重新加载
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 时间范围 */}
      <div className="flex items-center gap-3">
        <span className="text-sm text-muted-foreground">时间范围:</span>
        <Select value={String(days)} onValueChange={(v) => setDays(Number(v))}>
          <SelectTrigger className="w-[140px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="7">最近 7 天</SelectItem>
            <SelectItem value="30">最近 30 天</SelectItem>
            <SelectItem value="90">最近 90 天</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 汇总统计 */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <Card>
          <CardContent className="p-6">
            <p className="text-sm text-muted-foreground">总请求数</p>
            <p className="mt-1 text-2xl font-bold text-foreground">
              {formatNumber(totalRequests)}
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <p className="text-sm text-muted-foreground">Input Tokens</p>
            <p className="mt-1 text-2xl font-bold text-blue-400">
              {formatNumber(totalInput)}
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <p className="text-sm text-muted-foreground">Output Tokens</p>
            <p className="mt-1 text-2xl font-bold text-orange-400">
              {formatNumber(totalOutput)}
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Token 用量趋势 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Zap className="h-4 w-4 text-primary" />
            Token 用量趋势
          </CardTitle>
        </CardHeader>
        <CardContent>
          {lineChartData.length > 0 ? (
            <ResponsiveContainer width="100%" height={320}>
              <LineChart data={lineChartData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
                <XAxis
                  dataKey="day"
                  tick={{ fontSize: 12, fill: '#94A3B8' }}
                  axisLine={{ stroke: '#1E293B' }}
                />
                <YAxis
                  tick={{ fontSize: 12, fill: '#94A3B8' }}
                  axisLine={{ stroke: '#1E293B' }}
                />
                <Tooltip
                  contentStyle={{
                    backgroundColor: '#0F172A',
                    border: '1px solid #1E293B',
                    borderRadius: '8px',
                    color: '#F8FAFC',
                    fontSize: '12px',
                  }}
                />
                <Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
                <Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
                <Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
              </LineChart>
            </ResponsiveContainer>
          ) : (
            <div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
              暂无数据
            </div>
          )}
        </CardContent>
      </Card>

      {/* 按模型分布 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">按模型分布</CardTitle>
        </CardHeader>
        <CardContent>
          {barChartData.length > 0 ? (
            <ResponsiveContainer width="100%" height={320}>
              <BarChart data={barChartData} layout="vertical">
                <CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
                <XAxis
                  type="number"
                  tick={{ fontSize: 12, fill: '#94A3B8' }}
                  axisLine={{ stroke: '#1E293B' }}
                />
                <YAxis
                  type="category"
                  dataKey="model"
                  tick={{ fontSize: 12, fill: '#94A3B8' }}
                  axisLine={{ stroke: '#1E293B' }}
                  width={120}
                />
                <Tooltip
                  contentStyle={{
                    backgroundColor: '#0F172A',
                    border: '1px solid #1E293B',
                    borderRadius: '8px',
                    color: '#F8FAFC',
                    fontSize: '12px',
                  }}
                />
                <Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
                <Bar dataKey="Input" fill="#3B82F6" radius={[0, 2, 2, 0]} />
                <Bar dataKey="Output" fill="#F97316" radius={[0, 2, 2, 0]} />
              </BarChart>
            </ResponsiveContainer>
          ) : (
            <div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
              暂无数据
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}