import Link from "next/link";
import type { ProjectSummary } from "@/lib/project-types";
import { SOURCES_STALE_DAYS } from "@/lib/dashboard";
import CheckSourcesButton from "./CheckSourcesButton";
import Panel from "./Panel";

// The long-form problem, on the front door: which projects have sources nobody
// has checked, checked too long ago, or known to be dead. All of it read from
// each project's summary attributes -- never probed here.
export default function SourcesPanel({
  never,
  old,
  bad,
}: {
  never: ProjectSummary[];
  old: ProjectSummary[];
  bad: ProjectSummary[];
}) {
  const List = ({ items, attr }: { items: ProjectSummary[]; attr: string }) => (
    <ul className="space-y-0.5" data-sources-list={attr}>
      {items.map((p) => (
        <li key={p.id} data-source-project={p.id} className="flex flex-wrap gap-2 text-[11px]">
          <Link href={`/browse/${p.id}`} className="font-mono text-[var(--color-sel)] hover:underline">
            {p.id}
          </Link>
          <span className="text-[var(--color-dim)]">
            {[
              p.attrs?.["sources-dead"] ? `${p.attrs["sources-dead"]} dead` : "",
              p.attrs?.["sources-missing"] ? `${p.attrs["sources-missing"]} no cues` : "",
              p.attrs?.["cue-gaps"] ? `${p.attrs["cue-gaps"]} cue gap${p.attrs["cue-gaps"] === "1" ? "" : "s"}` : "",
            ]
              .filter(Boolean)
              .join(" · ")}
          </span>
        </li>
      ))}
    </ul>
  );
  const recheck = [...never, ...old].map((p) => p.id);
  return (
    <Panel title="sources" testid="sources">
      <div className="mb-1.5 flex flex-wrap items-baseline gap-3 text-[11px]" data-sources-counts={`${never.length}/${old.length}/${bad.length}`}>
        <span className="text-[var(--color-dim)]">
          <b className="num text-[var(--color-text)]">{never.length}</b> never checked
        </span>
        <span className="text-[var(--color-dim)]">
          <b className="num text-[var(--color-text)]">{old.length}</b> older than {SOURCES_STALE_DAYS} d
        </span>
        <span className="text-[var(--color-dim)]">
          <b className={`num ${bad.length ? "text-[var(--color-bad)]" : "text-[var(--color-text)]"}`}>{bad.length}</b>{" "}
          with dead or missing sources
        </span>
        <span className="ml-auto">
          <CheckSourcesButton projects={recheck} />
        </span>
      </div>
      {bad.length > 0 && <List items={bad} attr="bad" />}
      {never.length > 0 && (
        <>
          <div className="micro mt-1.5">never checked</div>
          <List items={never} attr="never" />
        </>
      )}
      {old.length > 0 && (
        <>
          <div className="micro mt-1.5">older than {SOURCES_STALE_DAYS} d</div>
          <List items={old} attr="old" />
        </>
      )}
      {!never.length && !old.length && !bad.length && (
        <p className="text-[12px] text-[var(--color-dim)]">every source was checked recently and is reachable</p>
      )}
    </Panel>
  );
}