import { FileText } from "lucide-react";
import { EmptyState } from "@/components/ui/empty-state";
import { SectionTitle } from "@/components/ui/page-header";

function HeaderList({ headers }: { headers: Record<string, string> }) {
  const entries = Object.entries(headers).sort(([a], [b]) => a.localeCompare(b));
  return (
    <div className="overflow-hidden rounded-lg border border-border">
      <dl className="divide-y divide-border text-[12.5px]">
        {entries.map(([k, v]) => (
          <div key={k} className="grid grid-cols-[minmax(120px,32%)_1fr] gap-3 px-3 py-2">
            <dt className="truncate font-mono text-fg-muted" title={k}>
              {k}
            </dt>
            <dd className="break-all font-mono">{v}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}

/** Stored (already redacted) request/response headers. Server component. */
export function HeadersTables({ request, response }: { request: Record<string, string> | null; response: Record<string, string> | null }) {
  const hasReq = request && Object.keys(request).length > 0;
  const hasRes = response && Object.keys(response).length > 0;
  if (!hasReq && !hasRes) {
    return <EmptyState compact icon={FileText} title="Headers not stored" description={<>Headers are kept only when the project log level is <code className="font-mono">headers</code> or <code className="font-mono">full</code>. Sensitive headers such as Authorization and Cookie are always redacted.</>} />;
  }
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <section>
        <SectionTitle right={<span className="text-[11.5px] text-fg-subtle">Authorization and Cookie redacted</span>}>Request headers</SectionTitle>
        {hasReq ? <HeaderList headers={request} /> : <p className="text-[13px] text-fg-muted">None stored.</p>}
      </section>
      <section>
        <SectionTitle>Response headers</SectionTitle>
        {hasRes ? <HeaderList headers={response} /> : <p className="text-[13px] text-fg-muted">None stored.</p>}
      </section>
    </div>
  );
}