import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
import { ConfirmAction } from "@/components/admin/confirm-action";
import { prisma } from "@/lib/prisma";
import { getTranslations } from "next-intl/server";

export const dynamic = "force-dynamic";

const PER_PAGE = 25;

export default async function AdminUsers({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; page?: string; form?: string }>;
}) {
  const sp = await searchParams;
  const t = await getTranslations("pages.admin.users");
  const q = (sp.q ?? "").trim();
  const page = Math.max(1, Number(sp.page ?? "1") || 1);
  const where = q ? { username: { contains: q } } : {};

  const users = await prisma.user
    .findMany({
      where,
      select: { id: true, username: true, rank: true, credits: true, online: true },
      orderBy: { id: "desc" },
      skip: (page - 1) * PER_PAGE,
      take: PER_PAGE,
    })
    .catch(() => []);
  const total = await prisma.user.count({ where }).catch(() => 0);
  const pages = Math.max(1, Math.ceil(total / PER_PAGE));

  const onlineOnPage = users.filter((u) => u.online === "1").length;

  return (
    <main>
      <h1>{t("title")}</h1>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        {q ? t("searchResults", { count: total, query: q }) : t("subtitle")}
      </p>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label={t("title")} value={total} icon="👥" />
        <StatusCard label={t("onThisPage")} value={users.length} icon="📄" />
        <StatusCard
          label={t("colOnline")}
          value={onlineOnPage}
          state={onlineOnPage > 0 ? "ok" : "neutral"}
          icon="🟢"
        />
      </div>

       <form
         className="admin-card mb-6"
         style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}
       >
         <input
           name="q"
           defaultValue={q}
           placeholder={t("searchPlaceholder")}
           style={{ flex: 1, minWidth: 200 }}
         />
         <button type="submit" className="btn btn-primary">
           {t("search")}
         </button>
       </form>

      <section className="mt-6">
        <h2>{t("title")} ({total})</h2>
        {users.length === 0 ? (
          <p className="muted">{t("noResults")}</p>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table className="w-full">
              <thead>
                <tr>
                  <th>{t("colId")}</th>
                  <th>{t("colUsername")}</th>
                  <th>{t("colRank")}</th>
                  <th>{t("detail.credits")}</th>
                  <th>{t("colOnline")}</th>
                  <th style={{ width: "200px" }}>{t("colActions")}</th>
                </tr>
              </thead>
              <tbody>
                {users.map((u) => (
                  <tr key={u.id}>
                    <td className="muted">{u.id}</td>
                    <td>
                      <Link href={`/admin/users/${u.id}`}>{u.username}</Link>
                    </td>
                    <td>{u.rank}</td>
                    <td>{u.credits}</td>
                    <td>
                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${u.online === "1" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
                        {u.online === "1" ? t("colOnline") : t("offline")}
                      </span>
                    </td>
                    <td>
                      <div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", justifyContent: "flex-start" }}>
                        <Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("edit")}</Link>
                        <ConfirmAction message={t("confirmSetRank", { username: u.username })} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("setRank")}</ConfirmAction>
                        <ConfirmAction message={t("confirmDisconnect", { username: u.username })} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("disconnect")}</ConfirmAction>
                        <ConfirmAction message={t("confirmAlert", { username: u.username })} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("alert")}</ConfirmAction>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>

      <p className="muted">
        {t("pagination", { page, pages, total })}
        {page < pages ? (
          <>
            {" · "}
            <Link href={`/admin/users?q=${encodeURIComponent(q)}&page=${page + 1}`}>{t("next")} →</Link>
          </>
        ) : null}
      </p>
    </main>
  );
}