"use client";

import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useState, useTransition } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  banUserAction,
  impersonateUserAction,
  type ListUsersResult,
  setUserRoleAction,
  unbanUserAction,
} from "@/lib/admin/actions";

export function AdminUsersTable({
  result,
  query,
}: {
  result: ListUsersResult;
  query: string;
}) {
  const t = useTranslations("Admin");
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [search, setSearch] = useState(query);
  const [pending, startTransition] = useTransition();

  const { users, total, limit, offset, role, status } = result;
  const hasPrev = offset > 0;
  const hasNext = offset + limit < total;

  function go(params: Record<string, string | null>) {
    const next = new URLSearchParams(searchParams.toString());
    for (const [k, v] of Object.entries(params)) {
      if (v === null || v === "") next.delete(k);
      else next.set(k, v);
    }
    // Stay on the current surface (works at both /admin/users and the legacy
    // /support/users redirect target).
    startTransition(() => router.push(`${pathname}?${next.toString()}`));
  }

  function submitSearch(e: React.FormEvent) {
    e.preventDefault();
    // New search resets pagination to the first page.
    go({ q: search.trim() || null, offset: null });
  }

  // Server actions re-assert super-admin; refresh the RSC tree on success.
  function run(action: () => Promise<void>) {
    startTransition(async () => {
      await action();
      router.refresh();
    });
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="font-semibold text-xl">{t("usersTitle")}</h1>
        <p className="text-muted-foreground text-sm">{t("usersSubtitle")}</p>
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <form onSubmit={submitSearch} className="flex gap-2">
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder={t("searchPlaceholder")}
            className="max-w-sm"
          />
          <Button type="submit" variant="outline" disabled={pending}>
            {t("search")}
          </Button>
        </form>

        <Select
          value={role}
          onValueChange={(v) =>
            go({ role: v === "all" ? null : v, offset: null })
          }
        >
          <SelectTrigger className="w-40" aria-label={t("filterRole")}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value="all">{t("filterRoleAll")}</SelectItem>
            <SelectItem value="admin">{t("roleAdmin")}</SelectItem>
            <SelectItem value="staff">{t("roleStaff")}</SelectItem>
            <SelectItem value="user">{t("roleUser")}</SelectItem>
          </SelectContent>
        </Select>

        <Select
          value={status}
          onValueChange={(v) =>
            go({ status: v === "all" ? null : v, offset: null })
          }
        >
          <SelectTrigger className="w-40" aria-label={t("filterStatus")}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value="all">{t("filterStatusAll")}</SelectItem>
            <SelectItem value="active">{t("statusActive")}</SelectItem>
            <SelectItem value="banned">{t("statusBanned")}</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>{t("columnUser")}</TableHead>
              <TableHead>{t("columnRole")}</TableHead>
              <TableHead>{t("columnStatus")}</TableHead>
              <TableHead className="text-right">{t("columnActions")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={4}
                  className="py-12 text-center text-muted-foreground text-sm"
                >
                  {t("noUsers")}
                </TableCell>
              </TableRow>
            ) : (
              users.map((u) => {
                const isAdmin = u.role === "admin";
                const isStaff = u.role === "staff";
                return (
                  <TableRow key={u.id}>
                    <TableCell>
                      <Link
                        href={`/admin/users/${u.id}`}
                        className="font-medium hover:underline"
                      >
                        {u.name}
                      </Link>
                      <div className="text-muted-foreground text-xs">
                        {u.email}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant={
                          isAdmin
                            ? "default"
                            : isStaff
                              ? "outline"
                              : "secondary"
                        }
                      >
                        {isAdmin
                          ? t("roleAdmin")
                          : isStaff
                            ? t("roleStaff")
                            : t("roleUser")}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      {u.banned ? (
                        <Badge variant="destructive">{t("statusBanned")}</Badge>
                      ) : (
                        <span className="text-muted-foreground text-xs">
                          {t("statusActive")}
                        </span>
                      )}
                    </TableCell>
                    <TableCell className="space-x-2 text-right">
                      <Button asChild size="sm" variant="ghost">
                        <Link href={`/admin/users/${u.id}`}>{t("manage")}</Link>
                      </Button>
                      {/* Impersonate: never offered for admins/super-admins
                          (the server action refuses them too). The action
                          redirects into the app AS the target, so no refresh. */}
                      {isAdmin ? null : (
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={pending}
                          onClick={() =>
                            startTransition(() => impersonateUserAction(u.id))
                          }
                        >
                          {t("impersonate")}
                        </Button>
                      )}
                      <Button
                        size="sm"
                        variant="outline"
                        disabled={pending}
                        onClick={() =>
                          run(() =>
                            setUserRoleAction(u.id, isAdmin ? "user" : "admin"),
                          )
                        }
                      >
                        {isAdmin ? t("makeUser") : t("makeAdmin")}
                      </Button>
                      {u.banned ? (
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={pending}
                          onClick={() => run(() => unbanUserAction(u.id))}
                        >
                          {t("unban")}
                        </Button>
                      ) : (
                        <Button
                          size="sm"
                          variant="destructive"
                          disabled={pending}
                          onClick={() => {
                            const reason =
                              window.prompt(t("banReasonPrompt")) ?? undefined;
                            run(() =>
                              banUserAction(
                                u.id,
                                reason ? { reason } : undefined,
                              ),
                            );
                          }}
                        >
                          {t("ban")}
                        </Button>
                      )}
                    </TableCell>
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>
      </div>

      <div className="flex items-center justify-between">
        <span className="text-muted-foreground text-xs">
          {t("total", { count: total })}
        </span>
        <div className="space-x-2">
          <Button
            size="sm"
            variant="outline"
            disabled={pending || !hasPrev}
            onClick={() => go({ offset: String(Math.max(0, offset - limit)) })}
          >
            {t("prev")}
          </Button>
          <Button
            size="sm"
            variant="outline"
            disabled={pending || !hasNext}
            onClick={() => go({ offset: String(offset + limit) })}
          >
            {t("next")}
          </Button>
        </div>
      </div>
    </div>
  );
}