"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { fetchWithAuth } from "@/lib/api/client";
import type { AdminStatsData, AdminUser, AdminUserListResponse, AdminActionResponse } from "@/lib/api/admin";
import { useApi } from "@/lib/hooks/use-api";
import { LoadingState, ErrorState } from "@/components/ui/api-states";
import { clsx } from "clsx";
import {
  Users,
  Search,
  Quote,
  Percent,
  Loader2,
  AlertTriangle,
  CheckCircle,
  Ban,
  UserCheck,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";

const PLAN_OPTIONS = [
  { value: "free", label: "免费版" },
  { value: "starter", label: "入门版" },
  { value: "pro", label: "专业版" },
  { value: "business", label: "企业版" },
];

const LIMIT = 10;

export default function AdminPage() {
  const [skip, setSkip] = useState(0);
  const [search, setSearch] = useState("");
  const [mutationError, setMutationError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState<"toggle" | "plan">("toggle");
  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
  const [selectedPlan, setSelectedPlan] = useState("");
  const [actionLoading, setActionLoading] = useState(false);

  const { data: stats, isLoading: loadingStats, error: statsError } =
    useApi<AdminStatsData>("/api/v1/admin/stats");

  const usersUrl = `/api/v1/admin/users?skip=${skip}&limit=${LIMIT}${search ? `&search=${encodeURIComponent(search)}` : ""}`;
  const { data: usersData, isLoading: loadingUsers, error: usersError, refresh: refreshUsers } =
    useApi<AdminUserListResponse>(usersUrl);

  const users: AdminUser[] = usersData?.items ?? [];
  const totalUsers = usersData?.total ?? 0;
  const error = mutationError || statsError?.message || usersError?.message || null;

  function openToggleDialog(user: AdminUser) {
    setSelectedUser(user);
    setDialogType("toggle");
    setDialogOpen(true);
  }

  function openPlanDialog(user: AdminUser) {
    setSelectedUser(user);
    setSelectedPlan(user.plan);
    setDialogType("plan");
    setDialogOpen(true);
  }

  async function handleConfirm() {
    if (!selectedUser) return;
    setActionLoading(true);
    setSuccess(null);
    setMutationError(null);
    try {
      if (dialogType === "toggle") {
        const res = await fetchWithAuth(
          `/api/v1/admin/users/${selectedUser.id}/toggle-active`,
          { method: "POST" }
        ) as AdminActionResponse;
        setSuccess(res.message || "操作成功");
      } else {
        const res = await fetchWithAuth(
          `/api/v1/admin/users/${selectedUser.id}/update-plan`,
          { method: "PUT", body: JSON.stringify({ plan: selectedPlan }) }
        ) as AdminActionResponse;
        setSuccess(res.message || "套餐更新成功");
      }
      refreshUsers();
      setDialogOpen(false);
      setTimeout(() => setSuccess(null), 3000);
    } catch (err) {
      setMutationError(err instanceof Error ? err.message : "操作失败");
      setDialogOpen(false);
    } finally {
      setActionLoading(false);
    }
  }

  const totalPages = Math.ceil(totalUsers / LIMIT);
  const currentPage = Math.floor(skip / LIMIT) + 1;

  const statCards = [
    {
      title: "总用户数",
      value: stats?.total_users ?? 0,
      icon: Users,
      color: "text-blue-600",
      bg: "bg-blue-50",
    },
    {
      title: "总查询数",
      value: stats?.total_queries ?? 0,
      icon: Search,
      color: "text-emerald-600",
      bg: "bg-emerald-50",
    },
    {
      title: "总引用次数",
      value: stats?.total_citations ?? 0,
      icon: Quote,
      color: "text-violet-600",
      bg: "bg-violet-50",
    },
    {
      title: "引用率",
      value: stats ? `${stats.citation_rate}%` : "0%",
      icon: Percent,
      color: "text-amber-600",
      bg: "bg-amber-50",
    },
  ];

  function formatDate(dateStr: string) {
    if (!dateStr) return "-";
    const d = new Date(dateStr);
    return d.toLocaleDateString("zh-CN");
  }

  if (loadingStats && !stats) {
    return (
      <div className="space-y-6">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">管理后台</h2>
          <p className="text-muted-foreground">系统统计与用户管理</p>
        </div>
        <LoadingState rows={4} grid cols={4} rowHeight="h-24" />
        <LoadingState rows={5} rowHeight="h-14" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold tracking-tight">管理后台</h2>
        <p className="text-muted-foreground">系统统计与用户管理</p>
      </div>

      {error && (
        <div className="flex items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {success && (
        <div className="flex items-center gap-2 rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
          <CheckCircle className="h-4 w-4 shrink-0" />
          <span>{success}</span>
        </div>
      )}

      {/* Stats Cards */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {statCards.map((card) => (
          <Card key={card.title}>
            <CardContent className="flex items-center gap-4 p-6">
              <div className={clsx("flex h-12 w-12 items-center justify-center rounded-lg", card.bg)}>
                <card.icon className={clsx("h-6 w-6", card.color)} />
              </div>
              <div>
                <p className="text-sm text-muted-foreground">{card.title}</p>
                <p className="text-2xl font-bold">
                  {loadingStats ? <Loader2 className="h-5 w-5 animate-spin" /> : card.value}
                </p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* User Management */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">用户管理</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-2">
            <Input
              placeholder="搜索邮箱或用户名"
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
                setSkip(0);
              }}
              className="max-w-sm"
            />
            <Button variant="outline" onClick={() => { setSearch(""); setSkip(0); }}>
              重置
            </Button>
          </div>

          {usersError ? (
            <ErrorState error={usersError} onRetry={refreshUsers} />
          ) : (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>邮箱</TableHead>
                    <TableHead>用户名</TableHead>
                    <TableHead>套餐</TableHead>
                    <TableHead>查询数</TableHead>
                    <TableHead>邮箱验证</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>注册日期</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {loadingUsers ? (
                    <TableRow>
                      <TableCell colSpan={8} className="py-8 text-center text-muted-foreground">
                        <Loader2 className="mx-auto h-5 w-5 animate-spin" />
                      </TableCell>
                    </TableRow>
                  ) : users.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={8} className="py-8 text-center text-muted-foreground">
                        暂无用户数据
                      </TableCell>
                    </TableRow>
                  ) : (
                    users.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell className="font-medium">{user.email}</TableCell>
                        <TableCell>{user.name || "-"}</TableCell>
                        <TableCell>
                          <Badge variant="secondary">{user.plan}</Badge>
                        </TableCell>
                        <TableCell>{user.query_count}</TableCell>
                        <TableCell>
                          {user.email_verified ? (
                            <span className="inline-flex items-center gap-1 text-xs text-emerald-600">
                              <CheckCircle className="h-3 w-3" /> 已验证
                            </span>
                          ) : (
                            <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                              <Ban className="h-3 w-3" /> 未验证
                            </span>
                          )}
                        </TableCell>
                        <TableCell>
                          {user.is_active ? (
                            <Badge variant="default" className="bg-emerald-500 hover:bg-emerald-600">
                              正常
                            </Badge>
                          ) : (
                            <Badge variant="destructive">禁用</Badge>
                          )}
                        </TableCell>
                        <TableCell className="text-muted-foreground">{formatDate(user.created_at)}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-2">
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => openToggleDialog(user)}
                            >
                              {user.is_active ? <Ban className="h-3 w-3 mr-1" /> : <UserCheck className="h-3 w-3 mr-1" />}
                              {user.is_active ? "禁用" : "启用"}
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => openPlanDialog(user)}
                            >
                              修改套餐
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex items-center justify-end gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setSkip((p) => Math.max(0, p - LIMIT))}
                disabled={skip === 0}
              >
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <span className="text-sm text-muted-foreground">
                第 {currentPage} / {totalPages} 页 (共 {totalUsers} 条)
              </span>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setSkip((p) => p + LIMIT)}
                disabled={skip + LIMIT >= totalUsers}
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {dialogType === "toggle"
                ? selectedUser?.is_active
                  ? "禁用用户"
                  : "启用用户"
                : "修改套餐"}
            </DialogTitle>
            <DialogDescription>
              {dialogType === "toggle"
                ? `确认${selectedUser?.is_active ? "禁用" : "启用"}用户 ${selectedUser?.email}？`
                : `请选择用户 ${selectedUser?.email} 的新套餐`}
            </DialogDescription>
          </DialogHeader>
          {dialogType === "plan" && (
            <div className="py-2">
              <Select value={selectedPlan} onValueChange={setSelectedPlan}>
                <SelectTrigger>
                  <SelectValue placeholder="选择套餐" />
                </SelectTrigger>
                <SelectContent>
                  {PLAN_OPTIONS.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={actionLoading}>
              取消
            </Button>
            <Button onClick={handleConfirm} disabled={actionLoading}>
              {actionLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              确认
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}