import { BarChart3, BrainCircuit, Clock3, RefreshCcw, Search } from 'lucide-react'
import { startTransition, useCallback, useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { adminApi, ApiError } from '@/lib/api'
import type { AdminAnalyticsResponse } from '@/lib/types'

function StatCard({
  label,
  value,
  note,
  icon: Icon,
}: {
  label: string
  value: string
  note: string
  icon: typeof Search
}) {
  return (
    <Card className="bg-gradient-to-br from-card via-card to-background/70">
      <CardContent className="flex items-start justify-between pt-6">
        <div>
          <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">{label}</p>
          <div className="mt-3 text-3xl font-semibold tracking-tight">{value}</div>
          <p className="mt-2 text-sm leading-6 text-muted-foreground">{note}</p>
        </div>
        <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10 text-primary">
          <Icon className="h-5 w-5" />
        </div>
      </CardContent>
    </Card>
  )
}

function formatEventType(value: string) {
  return value === 'ai_question' ? 'AI 问答' : '站内搜索'
}

function formatSuccess(value: boolean | null) {
  if (value === null) {
    return '未记录'
  }

  return value ? '成功' : '失败'
}

export function AnalyticsPage() {
  const [data, setData] = useState<AdminAnalyticsResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

  const loadAnalytics = useCallback(async (showToast = false) => {
    try {
      if (showToast) {
        setRefreshing(true)
      }

      const next = await adminApi.analytics()
      startTransition(() => {
        setData(next)
      })

      if (showToast) {
        toast.success('数据分析已刷新。')
      }
    } catch (error) {
      if (error instanceof ApiError && error.status === 401) {
        return
      }
      toast.error(error instanceof ApiError ? error.message : '无法加载数据分析。')
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }, [])

  useEffect(() => {
    void loadAnalytics(false)
  }, [loadAnalytics])

  const maxDailyTotal = useMemo(() => {
    if (!data?.daily_activity.length) {
      return 1
    }

    return Math.max(
      ...data.daily_activity.map((item) => item.searches + item.ai_questions),
      1,
    )
  }, [data])

  if (loading || !data) {
    return (
      <div className="space-y-6">
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          {Array.from({ length: 4 }).map((_, index) => (
            <Skeleton key={index} className="h-44 rounded-3xl" />
          ))}
        </div>
        <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
          <Skeleton className="h-[520px] rounded-3xl" />
          <Skeleton className="h-[520px] rounded-3xl" />
        </div>
      </div>
    )
  }

  const statCards = [
    {
      label: '累计搜索',
      value: String(data.overview.total_searches),
      note: `近 7 天 ${data.overview.searches_last_7d} 次，平均命中 ${data.overview.avg_search_results_last_7d.toFixed(1)} 条`,
      icon: Search,
    },
    {
      label: '累计 AI 提问',
      value: String(data.overview.total_ai_questions),
      note: `近 7 天 ${data.overview.ai_questions_last_7d} 次`,
      icon: BrainCircuit,
    },
    {
      label: '24 小时活跃',
      value: String(data.overview.searches_last_24h + data.overview.ai_questions_last_24h),
      note: `搜索 ${data.overview.searches_last_24h} / AI ${data.overview.ai_questions_last_24h}`,
      icon: Clock3,
    },
    {
      label: '近 7 天去重词',
      value: String(
        data.overview.unique_search_terms_last_7d +
          data.overview.unique_ai_questions_last_7d,
      ),
      note: `搜索 ${data.overview.unique_search_terms_last_7d} / AI ${data.overview.unique_ai_questions_last_7d}`,
      icon: BarChart3,
    },
  ]

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
        <div className="space-y-3">
          <Badge variant="secondary">数据分析</Badge>
          <div>
            <h2 className="text-3xl font-semibold tracking-tight">前台搜索与 AI 问答洞察</h2>
            <p className="mt-2 max-w-3xl text-sm leading-7 text-muted-foreground">
              这里会记录用户真实提交过的站内搜索词和 AI 提问，方便你判断内容需求、热点问题和接入质量。
            </p>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-3">
          <Button variant="outline" asChild>
            <a href="http://localhost:4321/ask" target="_blank" rel="noreferrer">
              <BrainCircuit className="h-4 w-4" />
              打开问答页
            </a>
          </Button>
          <Button
            variant="secondary"
            onClick={() => void loadAnalytics(true)}
            disabled={refreshing}
          >
            <RefreshCcw className="h-4 w-4" />
            {refreshing ? '刷新中...' : '刷新'}
          </Button>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {statCards.map((item) => (
          <StatCard key={item.label} {...item} />
        ))}
      </div>

      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <div className="space-y-6">
          <Card>
            <CardHeader className="flex flex-row items-start justify-between gap-4">
              <div>
                <CardTitle>最近记录</CardTitle>
                <CardDescription>
                  最近一批真实发生的搜索和 AI 问答请求。
                </CardDescription>
              </div>
              <Badge variant="outline">{data.recent_events.length} 条</Badge>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>类型</TableHead>
                    <TableHead>内容</TableHead>
                    <TableHead>结果</TableHead>
                    <TableHead>时间</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.recent_events.map((event) => (
                    <TableRow key={event.id}>
                      <TableCell>
                        <div className="space-y-1">
                          <Badge variant={event.event_type === 'ai_question' ? 'secondary' : 'outline'}>
                            {formatEventType(event.event_type)}
                          </Badge>
                          {event.response_mode ? (
                            <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                              {event.response_mode}
                            </p>
                          ) : null}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1">
                          <p className="line-clamp-2 font-medium">{event.query}</p>
                          <p className="text-xs text-muted-foreground">
                            {event.provider ? `${event.provider}` : '未记录渠道'}
                            {event.chat_model ? ` / ${event.chat_model}` : ''}
                          </p>
                        </div>
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground">
                        <div>{formatSuccess(event.success)}</div>
                        <div className="mt-1">
                          {event.result_count !== null ? `${event.result_count} 条/源` : '无'}
                        </div>
                        {event.latency_ms !== null ? (
                          <div className="mt-1 text-xs uppercase tracking-[0.16em]">
                            {event.latency_ms} ms
                          </div>
                        ) : null}
                      </TableCell>
                      <TableCell className="text-muted-foreground">{event.created_at}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>

          <div className="grid gap-6 lg:grid-cols-2">
            <Card>
              <CardHeader className="flex flex-row items-start justify-between gap-4">
                <div>
                  <CardTitle>热门搜索词</CardTitle>
                  <CardDescription>
                    近 7 天最常被搜索的关键词。
                  </CardDescription>
                </div>
                <Badge variant="outline">{data.top_search_terms.length} 个</Badge>
              </CardHeader>
              <CardContent className="space-y-3">
                {data.top_search_terms.length ? (
                  data.top_search_terms.map((item) => (
                    <div
                      key={`${item.query}-${item.last_seen_at}`}
                      className="rounded-2xl border border-border/70 bg-background/70 p-4"
                    >
                      <div className="flex items-start justify-between gap-3">
                        <p className="font-medium">{item.query}</p>
                        <Badge variant="secondary">{item.count}</Badge>
                      </div>
                      <p className="mt-2 text-sm text-muted-foreground">
                        最近一次：{item.last_seen_at}
                      </p>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-muted-foreground">最近 7 天还没有站内搜索记录。</p>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="flex flex-row items-start justify-between gap-4">
                <div>
                  <CardTitle>热门 AI 问题</CardTitle>
                  <CardDescription>
                    近 7 天重复出现最多的提问。
                  </CardDescription>
                </div>
                <Badge variant="outline">{data.top_ai_questions.length} 个</Badge>
              </CardHeader>
              <CardContent className="space-y-3">
                {data.top_ai_questions.length ? (
                  data.top_ai_questions.map((item) => (
                    <div
                      key={`${item.query}-${item.last_seen_at}`}
                      className="rounded-2xl border border-border/70 bg-background/70 p-4"
                    >
                      <div className="flex items-start justify-between gap-3">
                        <p className="font-medium">{item.query}</p>
                        <Badge variant="secondary">{item.count}</Badge>
                      </div>
                      <p className="mt-2 text-sm text-muted-foreground">
                        最近一次：{item.last_seen_at}
                      </p>
                    </div>
                  ))
                ) : (
                  <p className="text-sm text-muted-foreground">最近 7 天还没有 AI 提问记录。</p>
                )}
              </CardContent>
            </Card>
          </div>
        </div>

        <div className="space-y-6 xl:sticky xl:top-28 xl:self-start">
          <Card>
            <CardHeader>
              <CardTitle>分析侧栏</CardTitle>
              <CardDescription>
                24 小时、7 天和模型渠道维度的快速摘要。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="rounded-2xl border border-border/70 bg-background/70 p-4">
                <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                  24 小时搜索
                </p>
                <p className="mt-3 text-3xl font-semibold">{data.overview.searches_last_24h}</p>
              </div>
              <div className="rounded-2xl border border-border/70 bg-background/70 p-4">
                <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                  24 小时 AI 提问
                </p>
                <p className="mt-3 text-3xl font-semibold">{data.overview.ai_questions_last_24h}</p>
              </div>
              <div className="rounded-2xl border border-border/70 bg-background/70 p-4">
                <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                  AI 平均耗时
                </p>
                <p className="mt-3 text-3xl font-semibold">
                  {data.overview.avg_ai_latency_ms_last_7d !== null
                    ? `${Math.round(data.overview.avg_ai_latency_ms_last_7d)} ms`
                    : '暂无'}
                </p>
                <p className="mt-2 text-sm text-muted-foreground">统计范围：最近 7 天</p>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>模型渠道分布</CardTitle>
              <CardDescription>
                最近 7 天 AI 请求实际使用的 provider 厂商。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {data.providers_last_7d.length ? (
                data.providers_last_7d.map((item) => (
                  <div
                    key={item.provider}
                    className="flex items-center justify-between rounded-2xl border border-border/70 bg-background/70 px-4 py-3"
                  >
                    <span className="font-medium">{item.provider}</span>
                    <Badge variant="outline">{item.count}</Badge>
                  </div>
                ))
              ) : (
                <p className="text-sm text-muted-foreground">最近 7 天还没有 AI 渠道数据。</p>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>7 天走势</CardTitle>
              <CardDescription>
                搜索与 AI 问答的日维度活动量。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {data.daily_activity.map((item) => {
                const total = item.searches + item.ai_questions
                const width = `${Math.max((total / maxDailyTotal) * 100, total > 0 ? 12 : 0)}%`

                return (
                  <div key={item.date} className="space-y-2">
                    <div className="flex items-center justify-between gap-3 text-sm">
                      <span className="font-medium">{item.date}</span>
                      <span className="text-muted-foreground">
                        搜索 {item.searches} / AI {item.ai_questions}
                      </span>
                    </div>
                    <div className="h-2 overflow-hidden rounded-full bg-secondary">
                      <div
                        className="h-full rounded-full bg-primary transition-[width] duration-300"
                        style={{ width }}
                      />
                    </div>
                  </div>
                )
              })}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}