"use client";

import React, { useEffect, useState } from "react";

import { apiFetch, type RatingHistoryItem } from "@/lib/api";
import { readToken } from "@/lib/auth";
import { useI18nText } from "@/lib/i18n";
import {
  ChevronDown,
  ChevronUp,
  RefreshCw,
  Save,
  Shield,
  Users,
} from "lucide-react";

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

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

type SubmissionRow = {
  id: number;
  problem_id: number;
  status: string;
  score: number;
  language: string;
  created_at: number;
};

type RedeemRow = {
  id: number;
  item_name: string;
  quantity: number;
  day_type: string;
  total_cost: number;
  created_at: number;
};

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

function DetailPanel({ userId, tx }: { userId: number; tx: (zh: string, en: string) => string }) {
  const [tab, setTab] = useState<"subs" | "rating" | "redeem">("subs");
  const [subs, setSubs] = useState<SubmissionRow[]>([]);
  const [ratingH, setRatingH] = useState<RatingHistoryItem[]>([]);
  const [redeems, setRedeems] = useState<RedeemRow[]>([]);
  const [loading, setLoading] = useState(false);

  const token = readToken() ?? "";

  useEffect(() => {
    setLoading(true);
    const loadTab = async () => {
      try {
        if (tab === "subs") {
          const d = await apiFetch<{ items: SubmissionRow[] }>(
            `/api/v1/submissions?user_id=${userId}&page=1&page_size=50`,
            undefined, token
          );
          setSubs(d.items ?? []);
        } else if (tab === "rating") {
          const d = await apiFetch<RatingHistoryItem[]>(
            `/api/v1/admin/users/${userId}/rating-history?limit=100`,
            undefined, token
          );
          setRatingH(Array.isArray(d) ? d : []);
        } else {
          const d = await apiFetch<RedeemRow[]>(
            `/api/v1/admin/redeem-records?user_id=${userId}&limit=100`,
            undefined, token
          );
          setRedeems(Array.isArray(d) ? d : []);
        }
      } catch { /* ignore */ }
      setLoading(false);
    };
    void loadTab();
  }, [tab, userId, token]);

  const tabCls = (t: string) =>
    `px-3 py-1 text-xs border ${tab === t ? "bg-zinc-900 text-white" : "bg-white text-zinc-700 hover:bg-zinc-100"}`;

  return (
    <div className="bg-zinc-50 border-t p-3 text-xs">
      <div className="flex gap-1 mb-2">
        <button className={tabCls("subs")} onClick={() => setTab("subs")}>
          {tx("提交记录", "Submissions")}
        </button>
        <button className={tabCls("rating")} onClick={() => setTab("rating")}>
          {tx("积分历史", "Rating History")}
        </button>
        <button className={tabCls("redeem")} onClick={() => setTab("redeem")}>
          {tx("兑换记录", "Redeem Records")}
        </button>
      </div>
      {loading && <p className="text-zinc-500">{tx("加载中...", "Loading...")}</p>}
      {!loading && tab === "subs" && (
        <div className="max-h-48 overflow-y-auto">
          <table className="min-w-full text-xs">
            <thead><tr className="text-left text-zinc-500">
              <th className="pr-2">ID</th><th className="pr-2">{tx("题目", "Problem")}</th>
              <th className="pr-2">{tx("状态", "Status")}</th><th className="pr-2">{tx("分数", "Score")}</th>
              <th>{tx("时间", "Time")}</th>
            </tr></thead>
            <tbody>
              {subs.map((s) => (
                <tr key={s.id} className="border-t border-zinc-200">
                  <td className="pr-2">{s.id}</td>
                  <td className="pr-2">P{s.problem_id}</td>
                  <td className={`pr-2 font-bold ${s.status === "AC" ? "text-emerald-600" : "text-red-600"}`}>{s.status}</td>
                  <td className="pr-2">{s.score}</td>
                  <td className="text-zinc-500">{fmtTs(s.created_at)}</td>
                </tr>
              ))}
              {subs.length === 0 && <tr><td colSpan={5} className="text-zinc-400 py-2">{tx("无记录", "No records")}</td></tr>}
            </tbody>
          </table>
        </div>
      )}
      {!loading && tab === "rating" && (
        <div className="max-h-48 overflow-y-auto space-y-1">
          {ratingH.map((item, i) => (
            <div key={i} className="flex justify-between border-b border-zinc-200 pb-1">
              <span>
                <span className={`font-bold ${item.change > 0 ? "text-emerald-600" : "text-red-600"}`}>
                  {item.change > 0 ? `+${item.change}` : item.change}
                </span>
                <span className="ml-2 text-zinc-600">{item.note}</span>
              </span>
              <span className="text-zinc-400">{fmtTs(item.created_at)}</span>
            </div>
          ))}
          {ratingH.length === 0 && <p className="text-zinc-400">{tx("无记录", "No records")}</p>}
        </div>
      )}
      {!loading && tab === "redeem" && (
        <div className="max-h-48 overflow-y-auto">
          <table className="min-w-full text-xs">
            <thead><tr className="text-left text-zinc-500">
              <th className="pr-2">{tx("物品", "Item")}</th><th className="pr-2">{tx("数量", "Qty")}</th>
              <th className="pr-2">{tx("花费", "Cost")}</th><th>{tx("时间", "Time")}</th>
            </tr></thead>
            <tbody>
              {redeems.map((r) => (
                <tr key={r.id} className="border-t border-zinc-200">
                  <td className="pr-2">{r.item_name}</td>
                  <td className="pr-2">{r.quantity}</td>
                  <td className="pr-2 text-red-600">-{r.total_cost}</td>
                  <td className="text-zinc-500">{fmtTs(r.created_at)}</td>
                </tr>
              ))}
              {redeems.length === 0 && <tr><td colSpan={4} className="text-zinc-400 py-2">{tx("无记录", "No records")}</td></tr>}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

export default function AdminUsersPage() {
  const { tx } = useI18nText();
  const [items, setItems] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [msg, setMsg] = useState("");
  const [expandedId, setExpandedId] = useState<number | null>(null);

  const load = async () => {
    setLoading(true);
    setError("");
    try {
      const token = readToken();
      if (!token) throw new Error(tx("请先登录管理员账号", "Please sign in with admin account first"));
      const data = await apiFetch<ListResp>("/api/v1/admin/users?page=1&page_size=200", undefined, token);
      setItems(data.items ?? []);
    } catch (e: unknown) {
      setError(String(e));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const updateRating = async (userId: number, rating: number) => {
    setMsg("");
    setError("");
    try {
      const token = readToken();
      if (!token) throw new Error(tx("请先登录管理员账号", "Please sign in with admin account first"));
      await apiFetch(
        `/api/v1/admin/users/${userId}/rating`,
        {
          method: "PATCH",
          body: JSON.stringify({ rating }),
        },
        token
      );
      setMsg(tx(`已更新用户 ${userId} Rating=${rating}`, `Updated user ${userId} rating=${rating}`));
      await load();
    } catch (e: unknown) {
      setError(String(e));
    }
  };

  return (
    <main className="mx-auto max-w-6xl px-3 py-6 max-[390px]:px-2 sm:px-4 md:px-6 md:py-8">
      <h1 className="text-xl font-semibold max-[390px]:text-lg sm:text-2xl flex items-center gap-2">
        <Users size={24} />
        {tx("管理员用户与积分", "Admin Users & Rating")}
      </h1>
      <p className="mt-2 text-sm text-zinc-600">
        {tx("默认管理员账号：", "Default admin account: ")}
        <code>admin</code> / <code>whoami139</code>
      </p>

      <div className="mt-4 flex flex-wrap gap-2">
        <button
          className="rounded bg-zinc-900 px-4 py-2 text-sm text-white disabled:opacity-50 flex items-center gap-2"
          onClick={() => void load()}
          disabled={loading}
        >
          <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
          {loading ? tx("刷新中...", "Refreshing...") : tx("刷新用户列表", "Refresh users")}
        </button>
      </div>

      {msg && <p className="mt-3 text-sm text-emerald-700">{msg}</p>}
      {error && <p className="mt-3 text-sm text-red-600">{error}</p>}

      <div className="mt-4 rounded-xl border bg-white">
        <div className="hidden overflow-x-auto md:block">
          <table className="min-w-full text-sm">
            <thead className="bg-zinc-100 text-left">
              <tr>
                <th className="px-3 py-2">ID</th>
                <th className="px-3 py-2">{tx("用户名", "Username")}</th>
                <th className="px-3 py-2 flex items-center gap-1">
                  <Shield size={14} />
                  Rating
                </th>
                <th className="px-3 py-2">{tx("提交", "Subs")}</th>
                <th className="px-3 py-2">AC</th>
                <th className="px-3 py-2">{tx("创建时间", "Created At")}</th>
                <th className="px-3 py-2">{tx("操作", "Action")}</th>
              </tr>
            </thead>
            <tbody>
              {items.map((user) => (
                <React.Fragment key={user.id}>
                <tr className="border-t">
                  <td className="px-3 py-2">{user.id}</td>
                  <td className="px-3 py-2">{user.username}</td>
                  <td className="px-3 py-2">
                    <input
                      className="w-24 rounded border px-2 py-1"
                      type="number"
                      min={0}
                      value={user.rating}
                      onChange={(e) => {
                        const value = Number(e.target.value);
                        setItems((prev) =>
                          prev.map((row) => (row.id === user.id ? { ...row, rating: value } : row))
                        );
                      }}
                    />
                  </td>
                  <td className="px-3 py-2">{user.total_submissions}</td>
                  <td className="px-3 py-2 text-emerald-700 font-bold">{user.total_ac}</td>
                  <td className="px-3 py-2 text-zinc-600">{fmtTs(user.created_at)}</td>
                  <td className="px-3 py-2 flex items-center gap-1">
                    <button
                      className="rounded border px-3 py-1 text-xs hover:bg-zinc-100 flex items-center gap-1"
                      onClick={() => void updateRating(user.id, Math.max(0, Number(user.rating) || 0))}
                    >
                      <Save size={12} />
                      {tx("保存", "Save")}
                    </button>
                    <button
                      className="rounded border px-2 py-1 text-xs hover:bg-zinc-100"
                      onClick={() => setExpandedId(expandedId === user.id ? null : user.id)}
                    >
                      {expandedId === user.id ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                    </button>
                  </td>
                </tr>
                {expandedId === user.id && (
                  <tr><td colSpan={7} className="p-0"><DetailPanel userId={user.id} tx={tx} /></td></tr>
                )}
                </React.Fragment>
              ))}
              {!loading && items.length === 0 && (
                <tr>
                  <td className="px-3 py-6 text-center text-zinc-500" colSpan={7}>
                    {tx("暂无用户数据", "No users found")}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        <div className="divide-y md:hidden">
          {items.map((user) => (
            <div key={user.id} className="space-y-2 p-3 text-sm">
              <p>
                #{user.id} · {user.username}
              </p>
              <p className="text-xs text-zinc-500">
                {tx("创建时间：", "Created: ")}
                {fmtTs(user.created_at)}
                {" | "}
                {tx("提交：", "Subs: ")}{user.total_submissions}
                {" | AC: "}{user.total_ac}
              </p>
              <div className="flex items-center gap-2">
                <span className="text-xs text-zinc-600">Rating</span>
                <input
                  className="w-24 rounded border px-2 py-1 text-xs"
                  type="number"
                  min={0}
                  value={user.rating}
                  onChange={(e) => {
                    const value = Number(e.target.value);
                    setItems((prev) =>
                      prev.map((row) => (row.id === user.id ? { ...row, rating: value } : row))
                    );
                  }}
                />
                <button
                  className="rounded border px-3 py-1 text-xs"
                  onClick={() => void updateRating(user.id, Math.max(0, Number(user.rating) || 0))}
                >
                  {tx("保存", "Save")}
                </button>
                <button
                  className="rounded border px-2 py-1 text-xs"
                  onClick={() => setExpandedId(expandedId === user.id ? null : user.id)}
                >
                  {expandedId === user.id ? tx("收起", "Hide") : tx("详情", "Detail")}
                </button>
              </div>
              {expandedId === user.id && <DetailPanel userId={user.id} tx={tx} />}
            </div>
          ))}
          {!loading && items.length === 0 && (
            <p className="px-3 py-6 text-center text-sm text-zinc-500">{tx("暂无用户数据", "No users found")}</p>
          )}
        </div>
      </div>
    </main>
  );
}