import { Route } from "lucide-react";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import { formatBytes, formatMs } from "@/lib/format";
import type { RequestAttemptView } from "@/lib/queries/dashboard";
import { HttpCode } from "./requests-table";

function outcomeStatus(outcome: string): string {
  if (outcome === "success") return "success";
  if (outcome === "blocked") return "blocked";
  if (outcome === "timeout") return "pending";
  return "failed";
}

/**
 * Vertical timeline of routing attempts. `provider` is only present when the organization has
 * provider visibility enabled; it is then labelled as debug output.
 */
export function AttemptsTimeline({ attempts, providerVisibility }: { attempts: RequestAttemptView[]; providerVisibility: boolean }) {
  if (!attempts.length) {
    return <EmptyState compact icon={Route} title="No attempts recorded" description="Attempts appear once the router has tried at least one route for this request." />;
  }
  return (
    <ol className="relative ml-3 border-l border-border">
      {attempts.map((a) => (
        <li key={a.id} className="relative pb-5 pl-6 last:pb-0">
          <span aria-hidden className={`absolute -left-[5px] top-1.5 size-2.5 rounded-full border-2 border-bg-elevated ${a.outcome === "success" ? "bg-success" : a.outcome === "blocked" ? "bg-danger" : "bg-warning"}`} />
          <div className="flex flex-wrap items-center gap-2 text-[13px]">
            <span className="font-mono text-[12px] text-fg-subtle">#{a.attemptNo}</span>
            <StatusBadge status={outcomeStatus(a.outcome)} />
            <span className="text-fg-muted">
              via <span className="text-fg">{a.network === "isp" ? "ISP" : a.network}</span>
              {a.country ? <span className="font-mono"> · {a.country}</span> : null}
            </span>
            {providerVisibility && a.provider ? (
              <Badge variant="outline" className="font-mono">
                <span className="text-fg-subtle">debug</span> {a.provider}
              </Badge>
            ) : null}
            <span className="ml-auto font-mono tabular text-fg-muted">{formatMs(a.durationMs)}</span>
          </div>
          <dl className="mt-1.5 grid grid-cols-2 gap-x-6 gap-y-1 text-[12.5px] sm:grid-cols-4">
            <div>
              <dt className="text-fg-subtle">Outcome</dt>
              <dd className="font-medium">{a.outcome.replace(/_/g, " ")}</dd>
            </div>
            <div>
              <dt className="text-fg-subtle">HTTP</dt>
              <dd>
                <HttpCode code={a.httpStatus} />
              </dd>
            </div>
            <div>
              <dt className="text-fg-subtle">Bytes</dt>
              <dd className="font-mono tabular">{formatBytes(a.bytesIn + a.bytesOut)}</dd>
            </div>
            <div>
              <dt className="text-fg-subtle">Routing score</dt>
              <dd className="font-mono tabular">{a.routingScore === null ? "—" : a.routingScore.toFixed(2)}</dd>
            </div>
            {a.errorCode ? (
              <div className="col-span-2">
                <dt className="text-fg-subtle">Error</dt>
                <dd className="font-mono text-danger">{a.errorCode}</dd>
              </div>
            ) : null}
            {a.blockReason ? (
              <div className="col-span-2">
                <dt className="text-fg-subtle">Block reason</dt>
                <dd>{a.blockReason}</dd>
              </div>
            ) : null}
          </dl>
        </li>
      ))}
    </ol>
  );
}