import Link from "next/link";
import type { StateRow } from "@/lib/dashboard";
import Panel from "./Panel";

// One row per kind, the six states as proportional segments.
//
// ONE meaningful colour. `stale` is the only state that is a judgement -- a
// deliverable older than what describes it -- so it wears --color-dirty, and
// every other state is a step on a neutral ramp. A strip that coloured "built"
// green would be handing a verdict hue to a fact.
const FILL: Record<string, string> = {
  draft: "var(--color-panel-2)",
  windows: "var(--color-line)",
  fetched: "color-mix(in srgb, var(--color-dim) 45%, transparent)",
  built: "color-mix(in srgb, var(--color-text) 55%, transparent)",
  shipped: "var(--color-text)",
  stale: "var(--color-dirty)",
};

export default function StateStrip({ rows, note }: { rows: StateRow[]; note: string }) {
  return (
    <Panel title="projects" testid="projects" more={{ href: "/browse", label: "browse →" }}>
      <p className="micro mb-1.5" data-projects-note="">
        {note}
      </p>
      <div className="space-y-1.5">
        {rows.map((r) => (
          <div key={r.kind} data-state-row={r.kind} className="flex items-center gap-2 text-[11px]">
            <Link href={`/browse?kind=${encodeURIComponent(r.kind)}`} className="w-24 truncate text-[var(--color-dim)] hover:text-[var(--color-text)]">
              {r.label}
            </Link>
            <span className="num w-6 text-right text-[var(--color-text)]">{r.total}</span>
            <div className="flex h-3 flex-1 overflow-hidden rounded-sm border border-[var(--color-line)]">
              {r.segments
                .filter((s) => s.n > 0)
                .map((s) => (
                  <Link
                    key={s.state}
                    href={s.href}
                    title={`${s.n} ${s.state}`}
                    data-state-seg={s.state}
                    data-n={s.n}
                    style={{ flexGrow: s.n, background: FILL[s.state] }}
                    className="block min-w-[3px] hover:opacity-80"
                  />
                ))}
            </div>
            <span className="num w-40 truncate text-[10px] text-[var(--color-dim)]">
              {r.segments.filter((s) => s.n > 0).map((s) => `${s.n} ${s.state}`).join(" · ")}
            </span>
          </div>
        ))}
      </div>
    </Panel>
  );
}