"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import { apiFetch } from "@/lib/api";
import { readToken } from "@/lib/auth";
import { useI18nText } from "@/lib/i18n";
import { Activity, AlertCircle, List, Play, RefreshCw, Server, Trash2, Zap } from "lucide-react";

type BackendLogItem = {
  id: number;
  problem_id: number;
  problem_title: string;
  status: string;
  progress: number;
  message: string;
  created_by: number;
  max_solutions: number;
  created_at: number;
  started_at: number | null;
  finished_at: number | null;
  updated_at: number;
  runner_pending: boolean;
};

type QueueJobItem = {
  id: number;
  problem_id: number;
  problem_title: string;
  status: string;
  progress: number;
  message: string;
  updated_at: number;
  started_at?: number | null;
};

type BackendLogsResp = {
  items: BackendLogItem[];
  running_jobs: QueueJobItem[];
  queued_jobs: QueueJobItem[];
  running_problem_ids: number[];
  queued_problem_ids: number[];
  running_count: number;
  queued_count_preview: number;
  pending_jobs: number;
  missing_problems: number;
  limit: number;
  running_limit: number;
  queued_limit: number;
};

type TriggerMissingResp = {
  started: boolean;
  missing_total: number;
  candidate_count: number;
  queued_count: number;
  pending_jobs: number;
  limit: number;
  max_solutions: number;
};

type AdminUser = {
  id: number;
  username: string;
  rating: number;
  created_at: number;
};

type AdminUsersResp = {
  items: AdminUser[];
  total_count: number;
  page: number;
  page_size: number;
};

function fmtTs(v: number | null | undefined): string {
  if (!v) return "-";
  return new Date(v * 1000).toLocaleString();
}

export default function BackendLogsPage() {
  const { tx } = useI18nText();
  const [token, setToken] = useState("");
  const [checkingAdmin, setCheckingAdmin] = useState(true);
  const [isAdmin, setIsAdmin] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [limit, setLimit] = useState(100);
  const [pendingJobs, setPendingJobs] = useState(0);
  const [missingProblems, setMissingProblems] = useState(0);
  const [items, setItems] = useState<BackendLogItem[]>([]);
  const [runningJobs, setRunningJobs] = useState<QueueJobItem[]>([]);
  const [queuedJobs, setQueuedJobs] = useState<QueueJobItem[]>([]);
  const [runningIds, setRunningIds] = useState<number[]>([]);
  const [queuedIds, setQueuedIds] = useState<number[]>([]);
  const [triggerLoading, setTriggerLoading] = useState(false);
  const [triggerMsg, setTriggerMsg] = useState("");
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [deleteUserId, setDeleteUserId] = useState<number | null>(null);
  const [userMsg, setUserMsg] = useState("");

  const refresh = async () => {
    if (!isAdmin || !token) return;
    setLoading(true);
    setError("");
    try {
      const [data, usersData] = await Promise.all([
        apiFetch<BackendLogsResp>(
          `/api/v1/backend/logs?limit=${limit}&running_limit=20&queued_limit=100`,
          {},
          token
        ),
        apiFetch<AdminUsersResp>("/api/v1/admin/users?page=1&page_size=200", {}, token),
      ]);

      setPendingJobs(data.pending_jobs ?? 0);
      setMissingProblems(data.missing_problems ?? 0);
      setItems(data.items ?? []);
      setRunningJobs(data.running_jobs ?? []);
      setQueuedJobs(data.queued_jobs ?? []);
      setRunningIds(data.running_problem_ids ?? []);
      setQueuedIds(data.queued_problem_ids ?? []);
      setUsers(usersData.items ?? []);
    } catch (e: unknown) {
      setError(String(e));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    let canceled = false;
    const checkAdmin = async () => {
      setCheckingAdmin(true);
      const tk = readToken();
      if (!canceled) setToken(tk);
      if (!tk) {
        if (!canceled) {
          setIsAdmin(false);
          setError(tx("请先登录管理员账号", "Please sign in with admin account first"));
          setCheckingAdmin(false);
        }
        return;
      }
      try {
        const me = await apiFetch<{ username?: string }>("/api/v1/me", {}, tk);
        const allowed = (me?.username ?? "") === "admin";
        if (!canceled) {
          setIsAdmin(allowed);
          if (!allowed) {
            setError(tx("仅管理员可查看后台日志", "Backend logs are visible to admin only"));
          } else {
            setError("");
          }
        }
      } catch (e: unknown) {
        if (!canceled) {
          setIsAdmin(false);
          setError(String(e));
        }
      } finally {
        if (!canceled) setCheckingAdmin(false);
      }
    };
    void checkAdmin();
    return () => {
      canceled = true;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!isAdmin || !token) return;
    void refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAdmin, token, limit]);

  const triggerMissingSolutions = async () => {
    if (!isAdmin || !token) {
      setError(tx("请先登录管理员账号", "Please sign in with admin account first"));
      return;
    }
    setTriggerLoading(true);
    setTriggerMsg("");
    setError("");
    try {
      const data = await apiFetch<TriggerMissingResp>(
        "/api/v1/backend/solutions/generate-missing",
        {
          method: "POST",
          body: JSON.stringify({ limit: 50000, max_solutions: 3 }),
        },
        token
      );
      setPendingJobs(data.pending_jobs ?? 0);
      setTriggerMsg(
        tx(
          `已触发异步任务：候选 ${data.candidate_count} 题，入队 ${data.queued_count} 题（当前待处理 ${data.pending_jobs}）。`,
          `Async trigger submitted: candidate ${data.candidate_count}, queued ${data.queued_count} (pending ${data.pending_jobs}).`
        )
      );
      await refresh();
    } catch (e: unknown) {
      setError(String(e));
    } finally {
      setTriggerLoading(false);
    }
  };

  const deleteUser = async (user: AdminUser) => {
    if (!isAdmin || !token) return;
    if (user.username === "admin") {
      setError(tx("保留管理员账号不可删除", "Reserved admin account cannot be deleted"));
      return;
    }
    const ok = window.confirm(
      tx(
        `确认删除用户 ${user.username}(#${user.id})？该用户提交记录、错题本、草稿、积分记录会被级联删除。`,
        `Delete user ${user.username}(#${user.id})? Submissions, wrong-book, drafts, and points records will be removed by cascade.`
      )
    );
    if (!ok) return;

    setDeleteUserId(user.id);
    setError("");
    setUserMsg("");
    try {
      await apiFetch(
        `/api/v1/admin/users/${user.id}`,
        {
          method: "DELETE",
        },
        token
      );
      setUserMsg(
        tx(
          `已删除用户 ${user.username}(#${user.id})`,
          `Deleted user ${user.username}(#${user.id}).`
        )
      );
      await refresh();
    } catch (e: unknown) {
      setError(String(e));
    } finally {
      setDeleteUserId(null);
    }
  };

  useEffect(() => {
    if (!isAdmin || !token) return;
    const timer = setInterval(() => {
      void refresh();
    }, 5000);
    return () => clearInterval(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAdmin, token, limit]);

  if (checkingAdmin) {
    return (
      <main className="mx-auto max-w-7xl px-3 py-8 text-sm text-zinc-600">
        {tx("正在校验管理员权限...", "Checking admin access...")}
      </main>
    );
  }

  if (!isAdmin) {
    return (
      <main className="mx-auto max-w-5xl px-3 py-8">
        <h1 className="text-xl font-semibold">{tx("后台日志（题解异步队列）", "Backend Logs (Async Solution Queue)")}</h1>
        <p className="mt-3 text-sm text-red-600">
          {error || tx("仅管理员可查看此页面", "This page is available for admin only")}
        </p>
      </main>
    );
  }

  return (
    <main className="mx-auto max-w-7xl px-3 py-6 max-[390px]:px-2 sm:px-4 md:px-6 md:py-8">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-xl font-semibold max-[390px]:text-lg sm:text-2xl flex items-center gap-2">
          <Server size={24} />
          {tx("后台日志（题解异步队列）", "Backend Logs (Async Solution Queue)")}
        </h1>
        <div className="flex w-full flex-wrap items-center gap-2 text-sm sm:w-auto sm:justify-end">
          <span className={pendingJobs > 0 ? "text-emerald-700" : "text-zinc-600"}>
            {tx("待处理任务", "Pending jobs")} {pendingJobs}
          </span>
          <span className={missingProblems > 0 ? "text-amber-700" : "text-zinc-600"}>
            {tx("缺失答案题目", "Problems missing answers")} {missingProblems}
          </span>
          <button
            className="rounded border px-3 py-1 disabled:opacity-50 flex items-center gap-1"
            onClick={() => void triggerMissingSolutions()}
            disabled={triggerLoading}
          >
            <Zap size={14} />
            {triggerLoading ? tx("手动补全中...", "Triggering...") : tx("手动补全（可选）", "Manual fill (optional)")}
          </button>
          <select
            className="rounded border px-2 py-1"
            value={limit}
            onChange={(e) => setLimit(Number(e.target.value))}
          >
            <option value={50}>{tx("最近 50 条", "Latest 50")}</option>
            <option value={100}>{tx("最近 100 条", "Latest 100")}</option>
            <option value={200}>{tx("最近 200 条", "Latest 200")}</option>
          </select>
          <button className="rounded border px-3 py-1 sm:ml-auto flex items-center gap-1" onClick={() => void refresh()} disabled={loading}>
            <RefreshCw size={14} className={loading ? "animate-spin" : ""} />
            {tx("刷新", "Refresh")}
          </button>
        </div>
      </div>

      {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
      {triggerMsg && <p className="mt-3 text-sm text-emerald-700">{triggerMsg}</p>}
      {userMsg && <p className="mt-3 text-sm text-emerald-700">{userMsg}</p>}
      <p className="mt-3 text-xs text-zinc-500">
        {tx(
          "系统已自动单线程异步处理待队列任务，无需手工点击；上方按钮仅用于立即手动补全。",
          "System auto-processes queued jobs in single-thread async mode; the button above is only for manual trigger."
        )}
      </p>

      <section className="mt-4 rounded-xl border bg-white p-3">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h2 className="text-sm font-medium">{tx("用户管理（可删除）", "User Management (Delete Supported)")}</h2>
          <p className="text-xs text-zinc-600">
            {tx("总用户", "Total users")} {users.length}
          </p>
        </div>

        <div className="mt-3 divide-y md:hidden">
          {users.map((user) => (
            <article key={user.id} className="space-y-1 py-2 text-xs">
              <p className="font-medium">
                #{user.id} · {user.username}
              </p>
              <p className="text-zinc-600">
                Rating {user.rating} · {tx("创建", "Created")} {fmtTs(user.created_at)}
              </p>
              <button
                className="rounded border px-2 py-1 text-xs text-red-700 hover:bg-red-50 disabled:opacity-60"
                disabled={deleteUserId === user.id || user.username === "admin"}
                onClick={() => void deleteUser(user)}
              >
                {user.username === "admin"
                  ? tx("保留账号", "Reserved")
                  : deleteUserId === user.id
                    ? tx("删除中...", "Deleting...")
                    : tx("删除用户", "Delete User")}
              </button>
            </article>
          ))}
          {!loading && users.length === 0 && (
            <p className="py-4 text-center text-sm text-zinc-500">{tx("暂无用户数据", "No users found")}</p>
          )}
        </div>

        <div className="mt-2 hidden overflow-x-auto md:block">
          <table className="min-w-full text-xs">
            <thead className="bg-zinc-100 text-left">
              <tr>
                <th className="px-2 py-2">ID</th>
                <th className="px-2 py-2">{tx("用户名", "Username")}</th>
                <th className="px-2 py-2">Rating</th>
                <th className="px-2 py-2">{tx("创建时间", "Created At")}</th>
                <th className="px-2 py-2">{tx("操作", "Action")}</th>
              </tr>
            </thead>
            <tbody>
              {users.map((user) => (
                <tr key={user.id} className="border-t">
                  <td className="px-2 py-2">{user.id}</td>
                  <td className="px-2 py-2">{user.username}</td>
                  <td className="px-2 py-2">{user.rating}</td>
                  <td className="px-2 py-2 text-zinc-600">{fmtTs(user.created_at)}</td>
                  <td className="px-2 py-2">
                    <button
                      className="rounded border px-2 py-1 text-xs text-red-700 hover:bg-red-50 disabled:opacity-60"
                      disabled={deleteUserId === user.id || user.username === "admin"}
                      onClick={() => void deleteUser(user)}
                    >
                      {user.username === "admin"
                        ? tx("保留账号", "Reserved")
                        : deleteUserId === user.id
                          ? tx("删除中...", "Deleting...")
                          : tx("删除用户", "Delete User")}
                    </button>
                  </td>
                </tr>
              ))}
              {!loading && users.length === 0 && (
                <tr>
                  <td className="px-2 py-4 text-center text-zinc-500" colSpan={5}>
                    {tx("暂无用户数据", "No users found")}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>

      <section className="mt-4 grid gap-3 md:grid-cols-2">
        <article className="rounded-xl border bg-white p-3">
          <h2 className="text-sm font-medium flex items-center gap-2">
            <Activity size={16} className="text-emerald-600" />
            {tx("正在处理（Running）", "Running Jobs")}
          </h2>
          <p className="mt-1 text-xs text-zinc-600">
            {tx("当前题目 ID：", "Current problem IDs:")}
            {runningIds.length ? runningIds.join(", ") : tx("无", "None")}
          </p>
          <ul className="mt-2 space-y-2 text-xs">
            {runningJobs.map((job) => (
              <li key={job.id} className="rounded border border-zinc-200 p-2">
                <p>
                  {tx("任务", "Job")} #{job.id} · {tx("题目", "Problem")} #{job.problem_id} {job.problem_title || tx("(未命名题目)", "(Untitled)")}
                </p>
                <p className="text-zinc-600">
                  {tx("状态", "Status")} {job.status} · {tx("进度", "Progress")} {job.progress}% · {tx("开始", "Start")} {fmtTs(job.started_at ?? null)}
                </p>
                <p className="whitespace-pre-wrap break-words text-zinc-600">{job.message || "-"}</p>
              </li>
            ))}
            {!runningJobs.length && <li className="text-zinc-500">{tx("当前无运行中的任务", "No running jobs")}</li>}
          </ul>
        </article>

        <article className="rounded-xl border bg-white p-3">
          <h2 className="text-sm font-medium flex items-center gap-2">
            <List size={16} className="text-amber-600" />
            {tx("待处理队列（Queued）", "Queued Jobs")}
          </h2>
          <p className="mt-1 text-xs text-zinc-600">
            {tx("待处理题目 ID（预览）：", "Queued problem IDs (preview):")}
            {queuedIds.length ? queuedIds.join(", ") : tx("无", "None")}
          </p>
          <ul className="mt-2 max-h-56 space-y-2 overflow-auto text-xs">
            {queuedJobs.map((job) => (
              <li key={job.id} className="rounded border border-zinc-200 p-2">
                <p>
                  {tx("任务", "Job")} #{job.id} · {tx("题目", "Problem")} #{job.problem_id} {job.problem_title || tx("(未命名题目)", "(Untitled)")}
                </p>
                <p className="text-zinc-600">
                  {tx("状态", "Status")} {job.status} · {tx("进度", "Progress")} {job.progress}% · {tx("更新", "Updated")} {fmtTs(job.updated_at)}
                </p>
                <p className="whitespace-pre-wrap break-words text-zinc-600">{job.message || "-"}</p>
              </li>
            ))}
            {!queuedJobs.length && <li className="text-zinc-500">{tx("当前无待处理任务", "No queued jobs")}</li>}
          </ul>
        </article>
      </section>

      <section className="mt-4 rounded-xl border bg-white">
        <div className="divide-y md:hidden">
          {items.map((item) => (
            <article key={item.id} className="space-y-2 p-3 text-xs">
              <div className="flex items-center justify-between gap-2">
                <p className="font-medium">
                  {tx("任务", "Job")} #{item.id}
                </p>
                <span className={item.runner_pending ? "text-emerald-700" : "text-zinc-700"}>
                  {item.status} · {item.progress}%
                </span>
              </div>
              <Link className="text-blue-600 hover:underline" href={`/problems/${item.problem_id}`}>
                #{item.problem_id} {item.problem_title || tx("(未命名题目)", "(Untitled)")}
              </Link>
              <p className="whitespace-pre-wrap break-words text-zinc-600">{item.message || "-"}</p>
              <p className="text-zinc-500">
                {tx("创建", "Created")} {fmtTs(item.created_at)} · {tx("开始", "Start")} {fmtTs(item.started_at)} · {tx("结束", "End")} {fmtTs(item.finished_at)}
              </p>
            </article>
          ))}
          {!loading && items.length === 0 && (
            <p className="px-3 py-6 text-center text-sm text-zinc-500">{tx("暂无后台任务日志", "No backend logs yet")}</p>
          )}
        </div>

        <div className="hidden overflow-x-auto md:block">
          <table className="min-w-full text-xs">
            <thead className="bg-zinc-100 text-left">
              <tr>
                <th className="px-2 py-2">{tx("任务ID", "Job ID")}</th>
                <th className="px-2 py-2">{tx("题目", "Problem")}</th>
                <th className="px-2 py-2">{tx("状态", "Status")}</th>
                <th className="px-2 py-2">{tx("进度", "Progress")}</th>
                <th className="px-2 py-2">{tx("消息", "Message")}</th>
                <th className="px-2 py-2">{tx("时间", "Time")}</th>
              </tr>
            </thead>
            <tbody>
              {items.map((item) => (
                <tr key={item.id} className="border-t align-top">
                  <td className="px-2 py-2 font-medium">{item.id}</td>
                  <td className="max-w-[260px] px-2 py-2">
                    <Link className="text-blue-600 hover:underline" href={`/problems/${item.problem_id}`}>
                      #{item.problem_id} {item.problem_title || tx("(未命名题目)", "(Untitled)")}
                    </Link>
                  </td>
                  <td className="px-2 py-2">
                    <span className={item.runner_pending ? "text-emerald-700" : "text-zinc-700"}>
                      {item.status}
                    </span>
                  </td>
                  <td className="px-2 py-2">{item.progress}%</td>
                  <td className="max-w-[420px] px-2 py-2">
                    <div className="whitespace-pre-wrap break-words">{item.message || "-"}</div>
                  </td>
                  <td className="px-2 py-2 text-zinc-600">
                    {tx("创建", "Created")} {fmtTs(item.created_at)}
                    <br />
                    {tx("开始", "Start")} {fmtTs(item.started_at)}
                    <br />
                    {tx("结束", "End")} {fmtTs(item.finished_at)}
                  </td>
                </tr>
              ))}
              {!loading && items.length === 0 && (
                <tr>
                  <td className="px-2 py-6 text-center text-zinc-500" colSpan={6}>
                    {tx("暂无后台任务日志", "No backend logs yet")}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>
    </main>
  );
}