"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { Search } from "lucide-react";
import { useAdminQuery } from "@/components/admin/use-query";
import type { UserListRow, UsersResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, DataTable, ErrorState, TableSkeleton, Pagination, DenseInput, DenseSelect, UserStatusPill, type Column } from "@/components/admin/primitives";
import { dateTime, int, sc } from "@/components/admin/format";
import { timeAgo } from "@/lib/utils";

const SORTS = [
  { value: "created", label: "Newest" },
  { value: "spins", label: "Most spins" },
  { value: "balance", label: "Highest balance" },
  { value: "level", label: "Highest level" },
] as const;
type Sort = (typeof SORTS)[number]["value"];

const LIMIT = 50;

const cols: Column<UserListRow>[] = [
  { key: "username", header: "Username", render: (r) => <span className="font-medium text-fg">{r.username}</span> },
  { key: "level", header: "Level", align: "right", render: (r) => r.level },
  { key: "balance", header: "Balance", align: "right", render: (r) => <span className="text-credit">{sc(r.balance)}</span> },
  { key: "spins", header: "Spins", align: "right", render: (r) => int(r.totalSpins) },
  { key: "wagered", header: "Wagered", align: "right", render: (r) => sc(r.wagered) },
  { key: "won", header: "Won", align: "right", render: (r) => sc(r.won) },
  { key: "status", header: "Status", render: (r) => <UserStatusPill status={r.status} /> },
  { key: "created", header: "Created", render: (r) => <span className="text-fg-3">{dateTime(r.createdAt)}</span> },
  { key: "lastLogin", header: "Last login", render: (r) => <span className="text-fg-3">{r.lastLoginAt ? timeAgo(r.lastLoginAt) : "never"}</span> },
];

function useDebounced<T>(value: T, delay = 300): T {
  const [v, setV] = React.useState(value);
  React.useEffect(() => {
    const t = setTimeout(() => setV(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);
  return v;
}

export default function AdminUsersPage() {
  const router = useRouter();
  const [q, setQ] = React.useState("");
  const [sort, setSort] = React.useState<Sort>("created");
  const [offset, setOffset] = React.useState(0);
  const dq = useDebounced(q.trim());

  const params = new URLSearchParams({ sort, limit: String(LIMIT), offset: String(offset) });
  if (dq) params.set("q", dq);
  const query = useAdminQuery<UsersResponse>(`/api/admin/users?${params.toString()}`);
  const data = query.data;

  return (
    <>
      <PageHeader title="Users" description="Search, inspect and moderate player accounts." actions={<RefreshButton onClick={() => void query.refresh()} loading={query.refreshing} />} />

      <div className="mb-3 flex flex-wrap items-center gap-2">
        <div className="relative w-full sm:w-72">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-fg-4" />
          <DenseInput
            className="pl-8"
            placeholder="Search username…"
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              setOffset(0);
            }}
            aria-label="Search users"
          />
        </div>
        <DenseSelect
          value={sort}
          onChange={(e) => {
            setSort(e.target.value as Sort);
            setOffset(0);
          }}
          aria-label="Sort users"
        >
          {SORTS.map((s) => (
            <option key={s.value} value={s.value}>
              {s.label}
            </option>
          ))}
        </DenseSelect>
        {data ? <span className="ml-auto text-[12px] text-fg-3 tabular">{int(data.total)} accounts</span> : null}
      </div>

      <Panel padded={false}>
        {query.error && !data ? (
          <div className="p-4">
            <ErrorState error={query.error} onRetry={() => void query.refresh()} />
          </div>
        ) : !data ? (
          <TableSkeleton rows={10} cols={9} />
        ) : (
          <>
            <DataTable columns={cols} rows={data.users} rowKey={(r) => r.id} dense stale={query.stale} onRowClick={(r) => router.push(`/admin/users/${r.id}`)} empty={dq ? `No users match "${dq}".` : "No registered users yet."} />
            <Pagination offset={offset} limit={LIMIT} total={data.total} onChange={setOffset} />
          </>
        )}
      </Panel>
    </>
  );
}