"use client";
import type { FetchTiming } from "@fetcha/core/client";
import { formatMs } from "@/lib/format";
import { cn } from "@/lib/utils";

const PHASES: Array<{ key: keyof FetchTiming; label: string; hint: string; color: string }> = [
  { key: "dns_ms", label: "DNS", hint: "Hostname resolution and SSRF validation", color: "bg-fg-subtle" },
  { key: "proxy_connect_ms", label: "Network connect", hint: "Connecting through the selected network class", color: "bg-info" },
  { key: "tls_ms", label: "TLS", hint: "TLS handshake with the target", color: "bg-accent" },
  { key: "origin_ms", label: "Origin", hint: "Time to receive the full response from the target", color: "bg-success" },
  { key: "processing_ms", label: "Processing", hint: "Decoding, format conversion and metadata", color: "bg-warning" },
];

/** Horizontal breakdown of the request timing phases. */
export function TimingBars({ timing, totalFallbackMs }: { timing: FetchTiming | undefined; totalFallbackMs: number }) {
  if (!timing) {
    return <p className="text-sm text-fg-muted">No timing breakdown was returned for this request. Total duration: <span className="font-mono tabular">{formatMs(totalFallbackMs)}</span>.</p>;
  }
  const sum = PHASES.reduce((a, p) => a + Math.max(0, timing[p.key] ?? 0), 0);
  const total = Math.max(timing.total_ms || 0, sum, 1);
  return (
    <div className="grid gap-4">
      <div className="flex h-3 w-full overflow-hidden rounded-sm bg-bg-muted" role="img" aria-label={`Timing breakdown, total ${formatMs(total)}`}>
        {PHASES.map((p) => {
          const v = Math.max(0, timing[p.key] ?? 0);
          if (v <= 0) return null;
          return <div key={p.key} className={cn("h-full", p.color)} style={{ width: `${(v / total) * 100}%` }} title={`${p.label}: ${formatMs(v)}`} />;
        })}
      </div>
      <dl className="grid gap-2">
        {PHASES.map((p) => {
          const v = Math.max(0, timing[p.key] ?? 0);
          const pct = total ? (v / total) * 100 : 0;
          return (
            <div key={p.key} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 sm:grid-cols-[9rem_minmax(0,1fr)_5.5rem]">
              <dt className="flex items-center gap-2 text-[13px]">
                <span className={cn("size-2 rounded-[2px]", p.color)} aria-hidden />
                <span className="font-medium">{p.label}</span>
                <span className="hidden text-fg-subtle sm:inline">· {p.hint}</span>
              </dt>
              <div className="hidden h-1.5 rounded-full bg-bg-muted sm:block" aria-hidden>
                <div className={cn("h-full rounded-full", p.color)} style={{ width: `${Math.min(100, pct)}%` }} />
              </div>
              <dd className="text-right font-mono text-[12.5px] tabular text-fg-muted">
                {formatMs(v)} <span className="text-fg-subtle">({pct.toFixed(0)}%)</span>
              </dd>
            </div>
          );
        })}
        <div className="mt-1 flex items-center justify-between border-t border-border pt-2 text-[13px]">
          <span className="font-medium">Total</span>
          <span className="font-mono tabular">{formatMs(timing.total_ms || total)}</span>
        </div>
      </dl>
    </div>
  );
}