import {
  ArrowUpRight,
  BrainCircuit,
  Clock3,
  FolderTree,
  MessageSquareWarning,
  RefreshCcw,
  Rss,
  Sparkles,
  Star,
  Tags,
  Workflow,
} from "lucide-react";
import { startTransition, useCallback, useEffect, useState } from "react";
import { Link } from "react-router-dom";
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 { formatDateTime } from "@/lib/admin-format";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { adminApi, ApiError } from "@/lib/api";
import { buildFrontendUrl } from "@/lib/frontend-url";
import {
  formatCommentScope,
  formatPostStatus,
  formatFriendLinkStatus,
  formatPostType,
  formatPostVisibility,
  formatReviewStatus,
  formatReviewType,
} from "@/lib/admin-format";
import type {
  AdminAnalyticsResponse,
  AdminDashboardResponse,
  WorkerOverview,
} from "@/lib/types";

function StatCard({
  label,
  value,
  note,
  icon: Icon,
}: {
  label: string;
  value: number;
  note: string;
  icon: typeof Rss;
}) {
  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 formatAiSourceLabel(value: string) {
  switch (value) {
    case "chatgpt-search":
      return "ChatGPT Search";
    case "perplexity":
      return "Perplexity";
    case "copilot-bing":
      return "Copilot / Bing";
    case "gemini":
      return "Gemini";
    case "claude":
      return "Claude";
    case "google":
      return "Google";
    case "duckduckgo":
      return "DuckDuckGo";
    case "kagi":
      return "Kagi";
    case "direct":
      return "Direct";
    default:
      return value;
  }
}

export function DashboardPage() {
  const [data, setData] = useState<AdminDashboardResponse | null>(null);
  const [workerOverview, setWorkerOverview] = useState<WorkerOverview | null>(
    null,
  );
  const [analytics, setAnalytics] = useState<AdminAnalyticsResponse | null>(
    null,
  );
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

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

      const [next, nextWorkerOverview, nextAnalytics] = await Promise.all([
        adminApi.dashboard(),
        adminApi.getWorkersOverview(),
        adminApi.analytics(),
      ]);
      startTransition(() => {
        setData(next);
        setWorkerOverview(nextWorkerOverview);
        setAnalytics(nextAnalytics);
      });

      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 loadDashboard(false);
  }, [loadDashboard]);

  if (loading || !data || !workerOverview || !analytics) {
    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.25fr_0.95fr]">
          <Skeleton className="h-[420px] rounded-3xl" />
          <Skeleton className="h-[420px] rounded-3xl" />
        </div>
      </div>
    );
  }

  const statCards = [
    {
      label: "文章总数",
      value: data.stats.total_posts,
      note: `内容库中共有 ${data.stats.total_comments} 条评论`,
      icon: Rss,
    },
    {
      label: "待审核评论",
      value: data.stats.pending_comments,
      note: "等待审核处理",
      icon: MessageSquareWarning,
    },
    {
      label: "发布待办",
      value:
        data.stats.draft_posts +
        data.stats.scheduled_posts +
        data.stats.offline_posts +
        data.stats.expired_posts,
      note: `草稿 ${data.stats.draft_posts} / 定时 ${data.stats.scheduled_posts} / 下线 ${data.stats.offline_posts + data.stats.expired_posts}`,
      icon: Clock3,
    },
    {
      label: "分类数量",
      value: data.stats.total_categories,
      note: `当前共有 ${data.stats.total_tags} 个标签`,
      icon: FolderTree,
    },
    {
      label: "AI 分块",
      value: data.stats.ai_chunks,
      note: data.stats.ai_enabled ? "知识库已启用" : "AI 功能当前关闭",
      icon: BrainCircuit,
    },
    {
      label: "Worker 活动",
      value: workerOverview.active_jobs,
      note: `失败 ${workerOverview.failed} / 运行 ${workerOverview.running}`,
      icon: Workflow,
    },
  ];
  const aiTrafficShare =
    analytics.content_overview.page_views_last_7d > 0
      ? (analytics.ai_discovery_page_views_last_7d /
          analytics.content_overview.page_views_last_7d) *
        100
      : 0;
  const topAiSource = analytics.ai_referrers_last_7d[0];
  const totalAiSourceBuckets = analytics.ai_referrers_last_7d.length;

  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">运营总览</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={buildFrontendUrl("/ask")} target="_blank" rel="noreferrer">
              <ArrowUpRight className="h-4 w-4" />
              打开 AI 问答
            </a>
          </Button>
          <Button
            variant="secondary"
            onClick={() => void loadDashboard(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.25fr_0.95fr]">
        <Card>
          <CardHeader className="flex flex-row items-start justify-between gap-4">
            <div>
              <CardTitle>最近文章</CardTitle>
              <CardDescription>最近同步到前台的文章内容。</CardDescription>
            </div>
            <Badge variant="outline">{data.recent_posts.length} 条</Badge>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>标题</TableHead>
                  <TableHead>类型</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>分类</TableHead>
                  <TableHead>创建时间</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.recent_posts.map((post) => (
                  <TableRow key={post.id}>
                    <TableCell>
                      <div className="space-y-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="font-medium">{post.title}</span>
                          {post.pinned ? (
                            <Badge variant="success">置顶</Badge>
                          ) : null}
                        </div>
                        <p className="font-mono text-xs text-muted-foreground">
                          {post.slug}
                        </p>
                      </div>
                    </TableCell>
                    <TableCell className="uppercase text-muted-foreground">
                      {formatPostType(post.post_type)}
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-2">
                        <Badge variant="outline">
                          {formatPostStatus(post.status)}
                        </Badge>
                        <Badge variant="secondary">
                          {formatPostVisibility(post.visibility)}
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>{post.category}</TableCell>
                    <TableCell className="text-muted-foreground">
                      {post.created_at}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>站点状态</CardTitle>
            <CardDescription>快速查看前台站点与 AI 索引状态。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="rounded-2xl border border-border/70 bg-background/70 p-4">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <p className="text-sm font-medium">{data.site.site_name}</p>
                  <p className="mt-1 text-sm text-muted-foreground">
                    {data.site.site_url}
                  </p>
                </div>
                <Badge variant={data.site.ai_enabled ? "success" : "warning"}>
                  {data.site.ai_enabled ? "AI 已开启" : "AI 已关闭"}
                </Badge>
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <div className="rounded-2xl border border-border/70 bg-background/70 p-4">
                <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                  评测
                </p>
                <div className="mt-3 flex items-end gap-2">
                  <span className="text-3xl font-semibold">
                    {data.stats.total_reviews}
                  </span>
                  <Star className="mb-1 h-4 w-4 text-amber-500" />
                </div>
              </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">
                  友链
                </p>
                <div className="mt-3 flex items-end gap-2">
                  <span className="text-3xl font-semibold">
                    {data.stats.total_links}
                  </span>
                  <Tags className="mb-1 h-4 w-4 text-primary" />
                </div>
              </div>
            </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">
                发布队列
              </p>
              <div className="mt-3 grid gap-3 sm:grid-cols-2">
                <div>
                  <p className="text-2xl font-semibold">
                    {data.stats.draft_posts}
                  </p>
                  <p className="text-xs text-muted-foreground">草稿</p>
                </div>
                <div>
                  <p className="text-2xl font-semibold">
                    {data.stats.scheduled_posts}
                  </p>
                  <p className="text-xs text-muted-foreground">定时发布</p>
                </div>
                <div>
                  <p className="text-2xl font-semibold">
                    {data.stats.offline_posts}
                  </p>
                  <p className="text-xs text-muted-foreground">手动下线</p>
                </div>
                <div>
                  <p className="text-2xl font-semibold">
                    {data.stats.expired_posts}
                  </p>
                  <p className="text-xs text-muted-foreground">自动过期</p>
                </div>
              </div>
              <div className="mt-4 flex flex-wrap gap-2 text-xs text-muted-foreground">
                <Badge variant="outline">私有 {data.stats.private_posts}</Badge>
                <Badge variant="outline">
                  不公开 {data.stats.unlisted_posts}
                </Badge>
              </div>
            </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-sm leading-6 text-muted-foreground">
                {data.site.ai_last_indexed_at
                  ? formatDateTime(data.site.ai_last_indexed_at)
                  : "站点还没有建立过索引。"}
              </p>
            </div>

            <div className="rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/8 via-background/90 to-background/70 p-4">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                    GEO / AI 来源概览
                  </p>
                  <p className="mt-3 text-3xl font-semibold">
                    {analytics.ai_discovery_page_views_last_7d}
                  </p>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
                    最近 7 天来自 ChatGPT
                    Search、Perplexity、Copilot/Bing、Gemini、Claude
                    的页面访问。
                  </p>
                </div>
                <div className="flex h-11 w-11 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10 text-primary">
                  <Sparkles className="h-5 w-5" />
                </div>
              </div>

              <div className="mt-4 grid gap-3 sm:grid-cols-3">
                <div className="rounded-2xl border border-border/70 bg-background/80 px-4 py-3">
                  <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                    访问占比
                  </div>
                  <div className="mt-2 text-2xl font-semibold">
                    {Math.round(aiTrafficShare)}%
                  </div>
                  <div className="mt-1 text-xs text-muted-foreground">
                    基于近 7 天全部 page_view
                  </div>
                </div>
                <div className="rounded-2xl border border-border/70 bg-background/80 px-4 py-3">
                  <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                    最高来源
                  </div>
                  <div className="mt-2 text-base font-semibold">
                    {topAiSource
                      ? formatAiSourceLabel(topAiSource.referrer)
                      : "暂无"}
                  </div>
                  <div className="mt-1 text-xs text-muted-foreground">
                    {topAiSource
                      ? `${topAiSource.count} 次访问`
                      : "等待来源数据"}
                  </div>
                </div>
                <div className="rounded-2xl border border-border/70 bg-background/80 px-4 py-3">
                  <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                    已识别来源
                  </div>
                  <div className="mt-2 text-2xl font-semibold">
                    {totalAiSourceBuckets}
                  </div>
                  <div className="mt-1 text-xs text-muted-foreground">
                    当前已聚合的 AI 搜索渠道
                  </div>
                </div>
              </div>

              {analytics.ai_referrers_last_7d.length ? (
                <div className="mt-4 space-y-3">
                  {analytics.ai_referrers_last_7d.slice(0, 4).map((item) => {
                    const width = `${Math.max(
                      (item.count /
                        Math.max(
                          analytics.ai_discovery_page_views_last_7d,
                          1,
                        )) *
                        100,
                      8,
                    )}%`;

                    return (
                      <div key={item.referrer} className="space-y-1.5">
                        <div className="flex items-center justify-between gap-3 text-sm">
                          <span className="font-medium">
                            {formatAiSourceLabel(item.referrer)}
                          </span>
                          <span className="text-muted-foreground">
                            {item.count}
                          </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>
                    );
                  })}
                </div>
              ) : (
                <p className="mt-4 text-sm text-muted-foreground">
                  最近 7 天还没有识别到 AI 搜索来源流量。
                </p>
              )}
            </div>

            <div className="rounded-2xl border border-border/70 bg-background/70 p-4">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                    Worker 健康
                  </p>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">
                    当前排队 {workerOverview.queued}、运行{" "}
                    {workerOverview.running}、失败 {workerOverview.failed}。
                  </p>
                </div>
                <Button variant="outline" size="sm" asChild>
                  <Link
                    to={
                      workerOverview.failed > 0
                        ? "/workers?status=failed"
                        : "/workers"
                    }
                    data-testid="dashboard-worker-open"
                  >
                    查看队列
                  </Link>
                </Button>
              </div>

              <div className="mt-4 grid gap-3 sm:grid-cols-3">
                <Link
                  to="/workers?status=queued"
                  data-testid="dashboard-worker-card-queued"
                  className="rounded-2xl border border-border/70 px-4 py-3 text-sm transition hover:border-primary/30 hover:bg-primary/5"
                >
                  <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                    Queued
                  </div>
                  <div className="mt-2 text-2xl font-semibold text-foreground">
                    {workerOverview.queued}
                  </div>
                </Link>
                <Link
                  to="/workers?status=running"
                  data-testid="dashboard-worker-card-running"
                  className="rounded-2xl border border-border/70 px-4 py-3 text-sm transition hover:border-primary/30 hover:bg-primary/5"
                >
                  <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                    Running
                  </div>
                  <div className="mt-2 text-2xl font-semibold text-foreground">
                    {workerOverview.running}
                  </div>
                </Link>
                <Link
                  to="/workers?status=failed"
                  data-testid="dashboard-worker-card-failed"
                  className="rounded-2xl border border-border/70 px-4 py-3 text-sm transition hover:border-primary/30 hover:bg-primary/5"
                >
                  <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                    Failed
                  </div>
                  <div className="mt-2 text-2xl font-semibold text-foreground">
                    {workerOverview.failed}
                  </div>
                </Link>
              </div>

              {workerOverview.worker_stats.length ? (
                <div className="mt-4 space-y-2">
                  {workerOverview.worker_stats.slice(0, 3).map((item) => (
                    <Link
                      key={item.worker_name}
                      to={`/workers?worker=${encodeURIComponent(item.worker_name)}`}
                      className="flex items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3 text-sm transition hover:border-primary/30 hover:bg-primary/5"
                    >
                      <div>
                        <div className="font-medium text-foreground">
                          {item.label}
                        </div>
                        <div className="mt-1 text-xs text-muted-foreground">
                          {item.worker_name}
                        </div>
                      </div>
                      <div className="text-right text-xs text-muted-foreground">
                        <div>
                          Q {item.queued} · R {item.running}
                        </div>
                        <div>ERR {item.failed}</div>
                      </div>
                    </Link>
                  ))}
                </div>
              ) : null}
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <Card>
          <CardHeader className="flex flex-row items-start justify-between gap-4">
            <div>
              <CardTitle>待审核评论</CardTitle>
              <CardDescription>在当前管理端直接查看审核队列。</CardDescription>
            </div>
            <Badge variant="warning">
              {data.pending_comments.length} 条待处理
            </Badge>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>作者</TableHead>
                  <TableHead>范围</TableHead>
                  <TableHead>文章</TableHead>
                  <TableHead>创建时间</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.pending_comments.map((comment) => (
                  <TableRow key={comment.id}>
                    <TableCell>
                      <div className="space-y-1">
                        <div className="font-medium">{comment.author}</div>
                        <p className="line-clamp-2 text-sm text-muted-foreground">
                          {comment.excerpt}
                        </p>
                      </div>
                    </TableCell>
                    <TableCell className="uppercase text-muted-foreground">
                      {formatCommentScope(comment.scope)}
                    </TableCell>
                    <TableCell className="font-mono text-xs text-muted-foreground">
                      {comment.post_slug}
                    </TableCell>
                    <TableCell className="text-muted-foreground">
                      {comment.created_at}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        <div className="space-y-6">
          <Card>
            <CardHeader className="flex flex-row items-start justify-between gap-4">
              <div>
                <CardTitle>待审核友链</CardTitle>
                <CardDescription>等待审核和互链确认的申请。</CardDescription>
              </div>
              <Badge variant="warning">
                {data.pending_friend_links.length} 条待处理
              </Badge>
            </CardHeader>
            <CardContent className="space-y-3">
              {data.pending_friend_links.map((link) => (
                <div
                  key={link.id}
                  className="rounded-2xl border border-border/70 bg-background/70 p-4"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <p className="font-medium">{link.site_name}</p>
                      <p className="mt-1 truncate text-sm text-muted-foreground">
                        {link.site_url}
                      </p>
                    </div>
                    <Badge variant="outline">{link.category}</Badge>
                  </div>
                  <p className="mt-2 text-sm text-muted-foreground">
                    状态：{formatFriendLinkStatus(link.status)}
                  </p>
                  <p className="mt-3 text-xs uppercase tracking-[0.18em] text-muted-foreground">
                    {link.created_at}
                  </p>
                </div>
              ))}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>最近评测</CardTitle>
              <CardDescription>最近同步到前台评测页的内容。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {data.recent_reviews.map((review) => (
                <div
                  key={review.id}
                  className="flex items-center justify-between gap-4 rounded-2xl border border-border/70 bg-background/70 px-4 py-3"
                >
                  <div className="min-w-0">
                    <p className="font-medium">{review.title}</p>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {formatReviewType(review.review_type)} ·{" "}
                      {formatReviewStatus(review.status)}
                    </p>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-semibold">
                      {review.rating}/5
                    </div>
                    <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                      {review.review_date}
                    </p>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
