import { formatMs } from "@/lib/format";
import { EmptyState } from "@/components/ui/empty-state";
import { Timer } from "lucide-react";

const PHASES: Array<{ key: string; label: string; description: string }> = [
  { key: "dns_ms", label: "DNS", description: "Resolving the target hostname" },
  { key: "proxy_connect_ms", label: "Network connect", description: "Establishing the route through the selected network class" },
  { key: "tls_ms", label: "TLS", description: "TLS handshake with the origin" },
  { key: "origin_ms", label: "Origin", description: "Waiting for the origin server to respond and stream the body" },
  { key: "processing_ms", label: "Processing", description: "Format conversion, redaction and metering" },
];

function read(timing: Record<string, number>, key: string): number | null {
  const v = timing[key] ?? timing[key.replace(/_ms$/, "")];
  return typeof v === "number" && Number.isFinite(v) ? v : null;
}

/** Horizontal waterfall of request phases from the stored `timing` JSON. Server component. */
export function TimingWaterfall({ timing, totalMs }: { timing: Record<string, number> | null; totalMs: number | null }) {
  if (!timing || Object.keys(timing).length === 0) {
    return <EmptyState compact icon={Timer} title="No timing recorded" description="Timing breakdown is captured for completed requests when the project log level is metadata or higher." />;
  }
  const phases = PHASES.map((p) => ({ ...p, value: read(timing, p.key) })).filter((p) => p.value !== null) as Array<(typeof PHASES)[number] & { value: number }>;
  const total = read(timing, "total_ms") ?? totalMs ?? phases.reduce((a, p) => a + p.value, 0);
  const scale = Math.max(total, phases.reduce((a, p) => a + p.value, 0), 1);
  // Each phase starts where the previous one ended (cumulative offsets computed up front).
  const rows = phases.map((p, i) => ({ ...p, start: phases.slice(0, i).reduce((a, q) => a + q.value, 0) }));
  return (
    <div className="rounded-lg border border-border bg-bg-elevated">
      <ol className="divide-y divide-border">
        {rows.map((p) => {
          const left = (p.start / scale) * 100;
          const width = Math.max((p.value / scale) * 100, 0.5);
          return (
            <li key={p.key} className="grid grid-cols-[120px_1fr_72px] items-center gap-3 px-4 py-2.5 text-[13px] sm:grid-cols-[160px_1fr_88px]">
              <div className="min-w-0">
                <div className="font-medium">{p.label}</div>
                <div className="hidden truncate text-[11.5px] text-fg-subtle sm:block">{p.description}</div>
              </div>
              <div className="relative h-2.5 rounded-full bg-bg-muted" aria-hidden>
                <div className="absolute top-0 h-full rounded-full bg-accent" style={{ left: `${left}%`, width: `${width}%` }} />
              </div>
              <div className="text-right font-mono tabular">{formatMs(p.value)}</div>
            </li>
          );
        })}
      </ol>
      <div className="flex items-center justify-between border-t border-border bg-bg-subtle/60 px-4 py-2.5 text-[13px]">
        <span className="font-medium">Total</span>
        <span className="font-mono tabular font-semibold">{formatMs(total)}</span>
      </div>
    </div>
  );
}