// src/components/admin/orgs-table.tsx — God-Mode tenant list (client).
// Search box + sort control drive the URL searchParams; the server page
// re-queries. Each row links to the org detail page.
"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 type { ListOrgsResult } from "@/lib/admin/org-queries";

function fmtDate(d: Date | string | null): string {
  return d ? new Date(d).toLocaleDateString() : "—";
}

/** Billing-status badge — green active, amber trialing, red expired. */
export function BillingStatusBadge({
  status,
  plan,
}: {
  status: "active" | "trialing" | "expired";
  plan?: string | null;
}) {
  const t = useTranslations("SuperAdmin");
  const variant =
    status === "active"
      ? "default"
      : status === "trialing"
        ? "secondary"
        : "destructive";
  const label =
    status === "active"
      ? t("orgStatusActive")
      : status === "trialing"
        ? t("orgStatusTrialing")
        : t("orgStatusExpired");
  return (
    <Badge variant={variant}>
      {label}
      {plan ? ` · ${plan}` : ""}
    </Badge>
  );
}

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

  const { orgs, total, limit, offset, sortBy } = 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);
    }
    startTransition(() => router.push(`${pathname}?${next.toString()}`));
  }

  function submitSearch(e: React.FormEvent) {
    e.preventDefault();
    go({ q: search.trim() || null, offset: null });
  }

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

      <div className="flex flex-wrap items-center gap-2">
        <form onSubmit={submitSearch} className="flex flex-1 gap-2">
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder={t("orgsSearchPlaceholder")}
            className="max-w-xs"
          />
          <Button type="submit" variant="secondary" disabled={pending}>
            {t("orgsSearch")}
          </Button>
        </form>
        <Select value={sortBy} onValueChange={(v) => go({ sort: v })}>
          <SelectTrigger className="w-44">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value="created">{t("orgsSortCreated")}</SelectItem>
            <SelectItem value="members">{t("orgsSortMembers")}</SelectItem>
            <SelectItem value="name">{t("orgsSortName")}</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>{t("orgsColName")}</TableHead>
              <TableHead>{t("orgsColSlug")}</TableHead>
              <TableHead className="text-right">
                {t("orgsColMembers")}
              </TableHead>
              <TableHead>{t("orgsColBilling")}</TableHead>
              <TableHead>{t("orgsColTrialEnd")}</TableHead>
              <TableHead>{t("orgsColCreated")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {orgs.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={6}
                  className="text-center text-muted-foreground"
                >
                  {t("orgsEmpty")}
                </TableCell>
              </TableRow>
            ) : (
              orgs.map((org) => (
                <TableRow key={org.id}>
                  <TableCell>
                    <Link
                      href={`/admin/orgs/${org.id}`}
                      className="font-medium hover:underline"
                    >
                      {org.name}
                    </Link>
                  </TableCell>
                  <TableCell className="text-muted-foreground">
                    {org.slug}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {org.memberCount}
                  </TableCell>
                  <TableCell>
                    <BillingStatusBadge status={org.status} plan={org.plan} />
                  </TableCell>
                  <TableCell className="text-muted-foreground text-sm">
                    {fmtDate(org.trialEndsAt)}
                  </TableCell>
                  <TableCell className="text-muted-foreground text-sm">
                    {fmtDate(org.createdAt)}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

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