import type { ProjectDetail, ProjectStageDTO } from "@dci/core";
import { ExternalLink } from "lucide-react";
import { StatusDot } from "@/components/ui/status-dot";
import { cn } from "@/components/ui/cn";
import { fmtInt } from "@/lib/format";
import { fmtPartialDateSafe } from "@/lib/format-project";
import { STAGE_LABEL } from "@/lib/labels";

const MAIN: ProjectStageDTO["stage"][] = ["rumored", "proposed", "announced", "permitting", "approved", "under_construction", "partially_operational", "operational"];
const SIDE: ProjectStageDTO["stage"][] = ["delayed", "cancelled"];

/**
 * Lifecycle strip (§32): one cell per stage in funnel order — reached stages filled, the current one accented,
 * unreached ones hollow; dates and the evidence link (source that moved the project there) under each.
 * Delayed / cancelled are side branches shown only when reached.
 */
export function ProjectStages({ stages }: { stages: ProjectStageDTO[] }) {
  const by = new Map(stages.map((s) => [s.stage, s]));
  const main = MAIN.map((k) => by.get(k)).filter((s): s is ProjectStageDTO => !!s);
  const side = SIDE.map((k) => by.get(k)).filter((s): s is ProjectStageDTO => !!s && s.reached);
  if (!main.length) return <p className="text-[12.5px] text-ink-3">No lifecycle stage recorded.</p>;
  return (
    <div className="flex flex-col gap-3">
      <ol className="-mx-3 flex overflow-x-auto px-3 no-scrollbar sm:mx-0 sm:px-0" aria-label="Lifecycle stages">
        {main.map((s, i) => (
          <li key={s.stage} className={cn("relative min-w-[112px] flex-1 border-t-2 pr-2 pt-2", s.current ? "border-accent" : s.reached ? "border-ink" : "border-hair-2")}>
            <span aria-hidden className={cn("absolute -top-[5px] left-0 size-2 rounded-full ring-2 ring-paper", s.current ? "bg-accent" : s.reached ? "bg-ink" : "border border-hair-2 bg-paper")} />
            <div className={cn("text-[11.5px] font-medium uppercase tracking-[0.06em]", s.current ? "text-accent-ink" : s.reached ? "text-ink" : "text-ink-4")}>{STAGE_LABEL[s.stage]}</div>
            <div className="figure mt-0.5 text-[12px] text-ink-2">{s.date ? fmtPartialDateSafe(s.date) : s.reached ? <span className="text-ink-4">date not published</span> : <span className="text-ink-4">—</span>}</div>
            {s.reached && (s.url || s.sourceName) && (
              <div className="mt-0.5 truncate text-[11px] text-ink-3">
                {s.url ? (
                  <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex max-w-full items-center gap-1 hover:text-accent">
                    <span className="truncate">{s.sourceName ?? "evidence"}</span> <ExternalLink className="size-3 shrink-0" />
                  </a>
                ) : (
                  s.sourceName
                )}
              </div>
            )}
            {i === main.length - 1 && null}
          </li>
        ))}
      </ol>
      {side.length > 0 && (
        <ul className="flex flex-wrap gap-2">
          {side.map((s) => (
            <li key={s.stage} className="inline-flex items-center gap-1.5 rounded-xs border border-hair px-2 py-1 text-[12px]">
              <StatusDot status={s.stage} size={7} />
              <span className={cn("font-medium", s.current && "text-ink")}>{STAGE_LABEL[s.stage]}</span>
              <span className="figure text-ink-3">{s.date ? fmtPartialDateSafe(s.date) : "date not published"}</span>
              {s.url && (
                <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-ink-3 hover:text-accent">
                  {s.sourceName ?? "source"} <ExternalLink className="size-3" />
                </a>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

const VELOCITY: Array<{ key: keyof ProjectDetail["velocityDays"]; label: string }> = [
  { key: "announcedToPermitting", label: "Announced → permitting" },
  { key: "permittingToApproval", label: "Permitting → approval" },
  { key: "approvalToConstruction", label: "Approval → construction" },
  { key: "constructionToOpening", label: "Construction → opening" },
  { key: "announcedToConstruction", label: "Announced → construction" },
];

/** Days between reached stages; "—" when either date is unknown (never estimated). */
export function ProjectVelocity({ v }: { v: ProjectDetail["velocityDays"] }) {
  const any = VELOCITY.some((x) => v[x.key] !== null);
  return (
    <div>
      <div className="grid grid-cols-2 gap-x-3 gap-y-3 sm:grid-cols-5">
        {VELOCITY.map((x) => {
          const d = v[x.key];
          return (
            <div key={x.key} className="min-w-0">
              <div className={cn("figure text-[20px] font-medium leading-none tracking-[-0.02em]", d === null ? "text-ink-4" : "text-ink")}>
                {d === null ? "—" : fmtInt(d)}
                {d !== null && <span className="ml-1 text-[11px] font-medium text-ink-3">days</span>}
              </div>
              <div className="mt-1 text-[11px] leading-tight text-ink-3">{x.label}</div>
            </div>
          );
        })}
      </div>
      {!any && <p className="mt-2 text-[11.5px] text-ink-4">Velocity needs two dated stages; none of the stage transitions has published dates yet.</p>}
    </div>
  );
}