import Link from "next/link";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { StatusBadge } from "@/components/ui/badge";
import { CopyButton } from "@/components/ui/copy-button";
import { formatDate, formatNumber, timeAgo } from "@/lib/format";
import type { SessionRow } from "@/lib/queries/dashboard";
import { CloseSessionButton } from "./close-session-button";

function expiresIn(d: Date): string {
  const diff = d.getTime() - Date.now();
  if (diff <= 0) return "expired";
  const s = Math.round(diff / 1000);
  if (s < 60) return `in ${s}s`;
  const m = Math.round(s / 60);
  if (m < 60) return `in ${m}m`;
  return `in ${Math.round(m / 60)}h`;
}

export function SessionsTable({ rows }: { rows: SessionRow[] }) {
  return (
    <Table>
      <TableHeader>
        <TableRow className="hover:bg-transparent">
          <TableHead>Session</TableHead>
          <TableHead>Label</TableHead>
          <TableHead>Project</TableHead>
          <TableHead>Created</TableHead>
          <TableHead>Last used</TableHead>
          <TableHead>Country</TableHead>
          <TableHead>Network</TableHead>
          <TableHead className="text-right">Requests</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Expires</TableHead>
          <TableHead className="text-right"> </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.length === 0 ? (
          <TableEmpty colSpan={11}>No sessions yet.</TableEmpty>
        ) : (
          rows.map((s) => (
            <TableRow key={s.id}>
              <TableCell>
                <span className="inline-flex items-center gap-1">
                  <code className="font-mono text-[12.5px]">{s.id}</code>
                  <CopyButton value={s.id} className="size-6" />
                </span>
              </TableCell>
              <TableCell className="max-w-[160px] truncate text-fg-muted" title={s.label ?? undefined}>
                {s.label ?? <span className="text-fg-subtle">—</span>}
              </TableCell>
              <TableCell className="text-fg-muted">{s.projectName}</TableCell>
              <TableCell className="whitespace-nowrap text-fg-muted" title={formatDate(s.createdAt, { timeStyle: "medium" })}>
                {timeAgo(s.createdAt)}
              </TableCell>
              <TableCell className="whitespace-nowrap text-fg-muted" title={s.lastUsedAt ? formatDate(s.lastUsedAt, { timeStyle: "medium" }) : undefined}>
                {s.lastUsedAt ? timeAgo(s.lastUsedAt) : <span className="text-fg-subtle">never</span>}
              </TableCell>
              <TableCell className="font-mono tabular text-fg-muted">{[s.country, s.region, s.city].filter(Boolean).join(" · ") || "any"}</TableCell>
              <TableCell className="text-fg-muted">{s.network === "isp" ? "ISP" : s.network}</TableCell>
              <TableCell className="text-right font-mono tabular">
                {s.requestCount > 0 ? (
                  <Link href={`/dashboard/requests?range=30d`} className="underline-offset-4 hover:underline">
                    {formatNumber(s.requestCount)}
                  </Link>
                ) : (
                  "0"
                )}
              </TableCell>
              <TableCell>
                <StatusBadge status={s.status} />
              </TableCell>
              <TableCell className="whitespace-nowrap font-mono tabular text-fg-muted" title={formatDate(s.expiresAt, { timeStyle: "medium" })}>
                {s.status === "active" ? expiresIn(s.expiresAt) : formatDate(s.expiresAt, { dateStyle: "short", timeStyle: "short" })}
              </TableCell>
              <TableCell className="text-right">{s.status === "active" ? <CloseSessionButton id={s.id} /> : null}</TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  );
}