"use client";
import * as React from "react";
import Link from "next/link";
import { CheckCircle2, XCircle, CircleStop, ChevronRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Tooltip } from "@/components/ui/tooltip";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { providerName } from "@/lib/client/providers";
import { formatUsd, formatTokens, formatMs, formatRelative, cn } from "@/lib/utils";
import { formatDateTime } from "@/lib/client/humanize";
import type { RecentRecord } from "./types";

function StatusBadge({ r }: { r: RecentRecord }) {
  if (r.status === "ok")
    return (
      <Badge variant="success">
        <CheckCircle2 /> ok
      </Badge>
    );
  if (r.status === "stopped")
    return (
      <Badge>
        <CircleStop /> stopped
      </Badge>
    );
  return (
    <Tooltip content={r.errorCode ?? undefined}>
      <Badge variant="danger">
        <XCircle /> {r.errorCode?.toLowerCase().replace(/_/g, " ") ?? "error"}
      </Badge>
    </Tooltip>
  );
}

/** Phone: stacked rows (tap → conversation). Desktop (md+): table. */
export function RecentActivity({ rows, modelLabel, className }: { rows: RecentRecord[]; modelLabel: (key: string) => string; className?: string }) {
  return (
    <section className={cn("panel overflow-hidden", className)} aria-label="Recent requests">
      <header className="flex items-center justify-between px-4 py-3">
        <h3 className="text-[13px] font-semibold tracking-tight">Recent requests</h3>
        <span className="text-[11px] text-fg-subtle">Last {rows.length}</span>
      </header>
      {rows.length === 0 ? (
        <p className="px-4 pb-6 text-center text-xs text-fg-subtle">No requests in this period.</p>
      ) : (
        <>
          {/* Phone rows */}
          <ul className="divide-y divide-hairline md:hidden">
            {rows.map((r) => {
              const inner = (
                <>
                  <ProviderIcon provider={r.provider} size={16} className="mt-0.5" />
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center justify-between gap-2">
                      <p className="truncate text-[14px] font-medium">{modelLabel(r.modelKey)}</p>
                      <span className="shrink-0 font-mono text-[13px] tabular-nums">{formatUsd(r.costUsd, { precise: true })}</span>
                    </div>
                    <p className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-[12px] text-fg-muted">
                      <span>{formatRelative(r.createdAt)}</span>
                      <span aria-hidden>·</span>
                      <span className="capitalize">{r.kind}</span>
                      <span aria-hidden>·</span>
                      <span className="font-mono tabular-nums">
                        {formatTokens(r.inputTokens)}/{formatTokens(r.outputTokens)}
                      </span>
                      {r.latencyMs ? (
                        <>
                          <span aria-hidden>·</span>
                          <span className="font-mono tabular-nums">{formatMs(r.latencyMs)}</span>
                        </>
                      ) : null}
                    </p>
                    <div className="mt-1.5 flex items-center justify-between gap-2">
                      <StatusBadge r={r} />
                      {r.conversationTitle ? <span className="truncate text-[11px] text-fg-subtle">{r.conversationTitle}</span> : null}
                    </div>
                  </div>
                  {r.conversationId ? <ChevronRight className="mt-3 size-4 shrink-0 text-fg-subtle" /> : null}
                </>
              );
              const cls = "flex min-h-[64px] items-start gap-3 px-4 py-3 active:bg-bg-muted/60";
              return (
                <li key={r.id}>
                  {r.conversationId && r.kind !== "arena" ? (
                    <Link href={`/app/chat/${r.conversationId}`} className={cls}>
                      {inner}
                    </Link>
                  ) : (
                    <div className={cls}>{inner}</div>
                  )}
                </li>
              );
            })}
          </ul>

          {/* Desktop table */}
          <div className="hidden overflow-x-auto md:block">
            <table className="w-full text-[13px]">
              <thead>
                <tr className="border-y border-border bg-bg-subtle/60 text-left text-[11px] font-medium uppercase tracking-wide text-fg-subtle">
                  <th className="px-4 py-2">Time</th>
                  <th className="px-3 py-2">Model</th>
                  <th className="px-3 py-2">Conversation</th>
                  <th className="px-3 py-2">Kind</th>
                  <th className="px-3 py-2 text-right">Tokens in / out</th>
                  <th className="px-3 py-2 text-right">Est. cost</th>
                  <th className="px-3 py-2 text-right">TTFT</th>
                  <th className="px-3 py-2 text-right">Latency</th>
                  <th className="px-4 py-2 text-right">Status</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => (
                  <tr key={r.id} className="border-b border-hairline last:border-b-0 hover:bg-bg-subtle/50">
                    <td className="whitespace-nowrap px-4 py-2 text-fg-muted">
                      <Tooltip content={formatDateTime(r.createdAt, { year: "numeric", second: "2-digit" })}>
                        <span>{formatRelative(r.createdAt)}</span>
                      </Tooltip>
                    </td>
                    <td className="px-3 py-2">
                      <span className="flex items-center gap-1.5">
                        <ProviderIcon provider={r.provider} size={13} />
                        <span className="truncate font-medium">{modelLabel(r.modelKey)}</span>
                        <span className="hidden text-[11px] text-fg-subtle xl:inline">{providerName(r.provider)}</span>
                      </span>
                    </td>
                    <td className="max-w-[220px] truncate px-3 py-2 text-fg-muted">
                      {r.conversationId && r.kind !== "arena" ? (
                        <Link href={`/app/chat/${r.conversationId}`} className="hover:text-fg hover:underline">
                          {r.conversationTitle ?? "Open"}
                        </Link>
                      ) : (
                        <span className="text-fg-subtle">{r.kind === "arena" ? "Arena" : "—"}</span>
                      )}
                    </td>
                    <td className="px-3 py-2 capitalize text-fg-muted">{r.kind}</td>
                    <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">
                      {formatTokens(r.inputTokens)} / {formatTokens(r.outputTokens)}
                    </td>
                    <td className="px-3 py-2 text-right font-mono tabular-nums">{formatUsd(r.costUsd, { precise: true })}</td>
                    <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">{formatMs(r.ttftMs)}</td>
                    <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">{formatMs(r.latencyMs)}</td>
                    <td className="px-4 py-2 text-right">
                      <StatusBadge r={r} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </section>
  );
}