import { useEffect, useMemo, useState } from "react";
import { useAuth } from "@/_core/hooks/useAuth";
import { trpc } from "@/lib/trpc";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { formatDateTimeShanghai } from "@/lib/time";
import { toast } from "sonner";
import { Activity, Database, RefreshCw, Settings2, Shield, Sparkles, Users } from "lucide-react";

export default function AdminConsole() {
  const { user } = useAuth();
  const utils = trpc.useUtils();
  const usersQuery = trpc.admin.users.useQuery({ limit: 100 }, { enabled: user?.role === "admin" });
  const tasksQuery = trpc.admin.tasks.useQuery({ limit: 100 }, { enabled: user?.role === "admin" });
  const liveSessionsQuery = trpc.admin.liveSessions.useQuery({ limit: 50 }, { enabled: user?.role === "admin" });
  const settingsQuery = trpc.admin.settings.useQuery(undefined, { enabled: user?.role === "admin" });
  const auditQuery = trpc.admin.auditLogs.useQuery({ limit: 100 }, { enabled: user?.role === "admin" });

  const [settingsDrafts, setSettingsDrafts] = useState<Record<string, string>>({});

  const refreshAllMutation = trpc.admin.refreshAllNtrp.useMutation({
    onSuccess: () => {
      toast.success("已提交全量 NTRP 刷新任务");
      utils.admin.tasks.invalidate();
    },
    onError: (error) => toast.error(`提交失败: ${error.message}`),
  });
  const refreshUserMutation = trpc.admin.refreshUserNtrp.useMutation({
    onSuccess: () => {
      toast.success("已提交用户 NTRP 刷新任务");
      utils.admin.tasks.invalidate();
    },
    onError: (error) => toast.error(`提交失败: ${error.message}`),
  });
  const refreshUserNowMutation = trpc.admin.refreshUserNtrpNow.useMutation({
    onSuccess: () => {
      toast.success("用户 NTRP 已即时刷新");
      utils.admin.users.invalidate();
      utils.admin.auditLogs.invalidate();
    },
    onError: (error) => toast.error(`即时刷新失败: ${error.message}`),
  });
  const updateSettingMutation = trpc.admin.updateSetting.useMutation({
    onSuccess: () => {
      toast.success("设置已更新");
      utils.admin.settings.invalidate();
      utils.admin.auditLogs.invalidate();
    },
    onError: (error) => toast.error(`设置更新失败: ${error.message}`),
  });

  useEffect(() => {
    const drafts: Record<string, string> = {};
    (settingsQuery.data || []).forEach((item: any) => {
      drafts[item.settingKey] = JSON.stringify(item.value ?? null);
    });
    setSettingsDrafts(drafts);
  }, [settingsQuery.data]);

  const totals = useMemo(() => ({
    users: (usersQuery.data || []).length,
    tasks: (tasksQuery.data || []).length,
    sessions: (liveSessionsQuery.data || []).length,
  }), [liveSessionsQuery.data, tasksQuery.data, usersQuery.data]);

  if (user?.role !== "admin") {
    return (
      <Alert>
        <Shield className="h-4 w-4" />
        <AlertTitle>需要管理员权限</AlertTitle>
        <AlertDescription>当前账号没有管理系统访问权限。</AlertDescription>
      </Alert>
    );
  }

  return (
    <div className="space-y-6">
      <section className="rounded-[28px] border border-border/60 bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.12),_transparent_30%),linear-gradient(180deg,rgba(255,255,255,1),rgba(248,250,252,0.96))] p-5 shadow-sm md:p-6">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">管理系统</h1>
            <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
              这里集中查看用户、后台任务、实时分析记录、全局设置和审计日志。H1 管理员可以提交和执行用户级评分刷新。
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button onClick={() => refreshAllMutation.mutate()} disabled={refreshAllMutation.isPending} className="gap-2">
              <RefreshCw className="h-4 w-4" />
              刷新全部 NTRP
            </Button>
          </div>
        </div>
      </section>

      <div className="grid gap-4 md:grid-cols-3">
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-5">
            <div className="flex items-center gap-3">
              <Users className="h-5 w-5 text-emerald-700" />
              <div>
                <div className="text-sm text-muted-foreground">用户数</div>
                <div className="mt-1 text-xl font-semibold">{totals.users}</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-5">
            <div className="flex items-center gap-3">
              <Activity className="h-5 w-5 text-sky-700" />
              <div>
                <div className="text-sm text-muted-foreground">后台任务</div>
                <div className="mt-1 text-xl font-semibold">{totals.tasks}</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-0 shadow-sm">
          <CardContent className="pt-5">
            <div className="flex items-center gap-3">
              <Sparkles className="h-5 w-5 text-orange-700" />
              <div>
                <div className="text-sm text-muted-foreground">实时分析会话</div>
                <div className="mt-1 text-xl font-semibold">{totals.sessions}</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="users" className="space-y-4">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="users">用户</TabsTrigger>
          <TabsTrigger value="tasks">任务</TabsTrigger>
          <TabsTrigger value="sessions">会话</TabsTrigger>
          <TabsTrigger value="settings">设置</TabsTrigger>
          <TabsTrigger value="audit">审计</TabsTrigger>
        </TabsList>

        <TabsContent value="users">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base">用户列表</CardTitle>
              <CardDescription>支持排队刷新和即时刷新单个用户的 NTRP。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {(usersQuery.data || []).map((item: any) => (
                <div key={item.id} className="rounded-2xl border border-border/60 bg-muted/20 p-4">
                  <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{item.name}</span>
                        <Badge variant="outline">{item.role}</Badge>
                        <Badge variant="outline">NTRP {Number(item.ntrpRating || 1.5).toFixed(1)}</Badge>
                      </div>
                      <div className="mt-2 text-sm text-muted-foreground">
                        训练 {item.totalSessions || 0} 次 · {item.totalMinutes || 0} 分钟 · 连练 {item.currentStreak || 0} 天
                      </div>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      <Button variant="outline" size="sm" onClick={() => refreshUserMutation.mutate({ userId: item.id })}>
                        排队刷新
                      </Button>
                      <Button size="sm" onClick={() => refreshUserNowMutation.mutate({ userId: item.id })}>
                        立即刷新
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="tasks">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base">后台任务</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {(tasksQuery.data || []).map((task: any) => (
                <div key={task.id} className="rounded-2xl border border-border/60 bg-muted/20 p-4">
                  <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{task.title}</span>
                        <Badge variant="outline">{task.type}</Badge>
                        <Badge variant={task.status === "failed" ? "destructive" : task.status === "succeeded" ? "secondary" : "outline"}>
                          {task.status}
                        </Badge>
                      </div>
                      <div className="mt-2 text-sm text-muted-foreground">
                        {task.userName || task.userId} · {formatDateTimeShanghai(task.createdAt)}
                      </div>
                    </div>
                    <div className="min-w-[180px]">
                      <div className="mb-2 flex items-center justify-between text-xs text-muted-foreground">
                        <span>{task.message || "无描述"}</span>
                        <span>{task.progress || 0}%</span>
                      </div>
                      <div className="h-2 rounded-full bg-muted">
                        <div className="h-full rounded-full bg-emerald-500" style={{ width: `${task.progress || 0}%` }} />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="sessions">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base">实时分析会话</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {(liveSessionsQuery.data || []).map((session: any) => (
                <div key={session.id} className="rounded-2xl border border-border/60 bg-muted/20 p-4">
                  <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{session.title}</span>
                        <Badge variant="outline">{session.userName || session.userId}</Badge>
                        <Badge variant="outline">{session.sessionMode}</Badge>
                      </div>
                      <div className="mt-2 text-sm text-muted-foreground">
                        主动作 {session.dominantAction || "unknown"} · 有效片段 {session.effectiveSegments || 0}/{session.totalSegments || 0}
                      </div>
                    </div>
                    <div className="text-sm text-muted-foreground">
                      {Math.round(session.overallScore || 0)} 分 · {Math.round((session.durationMs || 0) / 1000)} 秒
                    </div>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="settings">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="flex items-center gap-2 text-base">
                <Settings2 className="h-4 w-4 text-primary" />
                全局设置
              </CardTitle>
              <CardDescription>设置值以 JSON 形式保存，适合阈值、开关和结构化配置。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {(settingsQuery.data || []).map((setting: any) => (
                <div key={setting.settingKey} className="rounded-2xl border border-border/60 bg-muted/20 p-4">
                  <div className="flex flex-col gap-3 lg:flex-row lg:items-end">
                    <div className="min-w-0 flex-1">
                      <div className="font-medium">{setting.label}</div>
                      <div className="mt-1 text-sm text-muted-foreground">{setting.description}</div>
                      <Input
                        value={settingsDrafts[setting.settingKey] || ""}
                        onChange={(event) => setSettingsDrafts((current) => ({ ...current, [setting.settingKey]: event.target.value }))}
                        className="mt-3 h-11 rounded-2xl"
                      />
                    </div>
                    <Button
                      className="gap-2"
                      onClick={() => {
                        try {
                          const parsed = JSON.parse(settingsDrafts[setting.settingKey] || "null");
                          updateSettingMutation.mutate({ settingKey: setting.settingKey, value: parsed });
                        } catch {
                          toast.error("设置值必须是合法 JSON");
                        }
                      }}
                    >
                      <Database className="h-4 w-4" />
                      保存
                    </Button>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="audit">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base">审计日志</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {(auditQuery.data || []).map((item: any) => (
                <div key={item.id} className="rounded-2xl border border-border/60 bg-muted/20 p-4">
                  <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{item.actionType}</span>
                        <Badge variant="outline">{item.entityType}</Badge>
                        {item.targetUserId ? <Badge variant="outline">目标用户 {item.targetUserId}</Badge> : null}
                      </div>
                      <div className="mt-2 text-sm text-muted-foreground">
                        管理员 {item.adminName || item.adminUserId} · {formatDateTimeShanghai(item.createdAt)}
                      </div>
                    </div>
                    {item.entityId ? <div className="text-sm text-muted-foreground">实体 {item.entityId}</div> : null}
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}