import Link from "next/link";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { formatBytes, formatDate, formatMs, formatUsd, timeAgo } from "@/lib/format";
import type { RequestListRow } from "@/lib/queries/dashboard";
import { cn } from "@/lib/utils";

export function NetworkLabel({ network, requested }: { network: string | null; requested?: string }) {
  if (!network) return <span className="text-fg-subtle">—</span>;
  return (
    <span className="inline-flex items-center gap-1">
      <span>{network === "isp" ? "ISP" : network}</span>
      {requested && requested !== "auto" && requested !== network ? (
        <span className="text-[11px] text-fg-subtle" title={`Requested ${requested}`}>
          (asked {requested})
        </span>
      ) : null}
    </span>
  );
}

export function HttpCode({ code }: { code: number | null }) {
  if (code === null) return <span className="text-fg-subtle">—</span>;
  const tone = code < 300 ? "text-success" : code < 400 ? "text-info" : code < 500 ? "text-warning" : "text-danger";
  return <span className={cn("font-mono tabular", tone)}>{code}</span>;
}

/** Request log table. `compact` hides secondary columns (used on the Overview). */
export function RequestsTable({ rows, compact, emptyMessage = "No requests match these filters." }: { rows: RequestListRow[]; compact?: boolean; emptyMessage?: React.ReactNode }) {
  const cols = compact ? 7 : 11;
  return (
    <Table>
      <TableHeader>
        <TableRow className="hover:bg-transparent">
          <TableHead>Request</TableHead>
          <TableHead>Time</TableHead>
          <TableHead>Domain</TableHead>
          <TableHead>Status</TableHead>
          <TableHead className="text-right">HTTP</TableHead>
          {!compact ? <TableHead>Network</TableHead> : null}
          {!compact ? <TableHead>Country</TableHead> : null}
          <TableHead className="text-right">Latency</TableHead>
          {!compact ? <TableHead className="text-right">Attempts</TableHead> : null}
          {!compact ? <TableHead className="text-right">Bandwidth</TableHead> : null}
          <TableHead className="text-right">Cost</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.length === 0 ? (
          <TableEmpty colSpan={cols}>{emptyMessage}</TableEmpty>
        ) : (
          rows.map((r) => (
            <TableRow key={r.id}>
              <TableCell>
                <Link href={`/dashboard/requests/${r.id}`} className="font-mono text-[12.5px] text-accent underline-offset-4 hover:underline" prefetch={false}>
                  {r.id}
                </Link>
                {r.source !== "api" ? (
                  <Badge variant="outline" className="ml-2 align-middle text-[10.5px]">
                    {r.source}
                  </Badge>
                ) : null}
              </TableCell>
              <TableCell className="whitespace-nowrap text-fg-muted" title={formatDate(r.createdAt, { timeStyle: "medium" })}>
                {timeAgo(r.createdAt)}
              </TableCell>
              <TableCell className="max-w-[220px] truncate" title={r.url}>
                {r.domain}
              </TableCell>
              <TableCell>
                <StatusBadge status={r.status} />
              </TableCell>
              <TableCell className="text-right">
                <HttpCode code={r.httpStatus} />
              </TableCell>
              {!compact ? (
                <TableCell className="text-fg-muted">
                  <NetworkLabel network={r.network} requested={r.requestedNetwork} />
                </TableCell>
              ) : null}
              {!compact ? <TableCell className="font-mono tabular text-fg-muted">{r.country ?? "—"}</TableCell> : null}
              <TableCell className="text-right font-mono tabular">{formatMs(r.latencyMs)}</TableCell>
              {!compact ? <TableCell className="text-right font-mono tabular">{r.attempts || "—"}</TableCell> : null}
              {!compact ? <TableCell className="text-right font-mono tabular text-fg-muted">{formatBytes(r.bytesIn + r.bytesOut)}</TableCell> : null}
              <TableCell className="text-right font-mono tabular">{formatUsd(r.priceUsd, true)}</TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  );
}