import Link from "next/link";
import { fmtAgo } from "@/lib/format";
import type { ProjectSummary } from "@/lib/project-types";

// ---------------------------------------------------------------------------
// One card per project, whatever kind it is.
//
// This file contains no kind ids and no per-kind branches, and that is the
// design working rather than an omission: a kind's summariser already rendered
// its own facts ("19 clips · 4m46s · 17 sources", "3/4 cuts · 2 variants") and
// its own flags. The grid lays out strings. Adding a kind changes nothing here.
// ---------------------------------------------------------------------------

export default function ProjectGrid({
  projects,
  counts,
}: {
  projects: ProjectSummary[];
  counts?: Map<string, { blocking: number; open: number }>;
}) {
  if (projects.length === 0) {
    return (
      <p className="text-[12px] text-[var(--color-dim)]">Nothing matches that filter.</p>
    );
  }

  return (
    <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
      {projects.map((p) => {
        const c = counts?.get(p.id);
        // An unroutable or shadowed project keeps its card and its link -- the
        // link just goes to the escape hatch instead of to an address that
        // renders something else.
        const href = p.routing === "ok" ? `/browse/${p.id}` : `/browse/at?path=${encodeURIComponent(p.id)}`;
        return (
          <li key={p.id}>
            <Link
              href={href}
              data-project={p.id}
              data-kind={p.kind}
              data-template={p.template}
              data-state={p.state}
              data-routing={p.routing}
              className="block overflow-hidden rounded border border-[var(--color-line)] bg-[var(--color-panel)] transition-colors hover:border-[var(--color-sel)]"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={`/api/browse/poster?project=${encodeURIComponent(p.id)}&w=640`}
                alt=""
                width={640}
                height={360}
                className="aspect-video w-full bg-[var(--color-panel-2)] object-cover"
              />
              <div
                className="space-y-1.5 p-3"
                {...Object.fromEntries(
                  Object.entries(p.attrs ?? {}).map(([k, v]) => [`data-${k}`, v]),
                )}
              >
                <div className="flex items-baseline gap-2">
                  <span className="rounded border border-[var(--color-line)] px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-[var(--color-dim)]">
                    {p.badge}
                  </span>
                  <span className="truncate text-[13px] font-medium text-[var(--color-text)]">
                    {p.title}
                  </span>
                </div>
                {p.subtitle && (
                  <div className="truncate text-[11px] text-[var(--color-dim)]">{p.subtitle}</div>
                )}
                <div className="num flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--color-dim)]">
                  {p.facts.map((f) => (
                    <span key={f}>{f}</span>
                  ))}
                  <span className="ml-auto">{fmtAgo(p.newestMtimeMs)}</span>
                </div>
                <div className="flex flex-wrap items-center gap-2 text-[11px]">
                  <span className="micro" data-project-state={p.state}>
                    {p.state}
                  </span>
                  {c && c.blocking > 0 && (
                    <span className="text-[var(--color-bad)]" data-blocking={c.blocking}>
                      {c.blocking} blocking
                    </span>
                  )}
                  {c && c.open > 0 && (
                    <span className="text-[var(--color-dirty)]" data-open={c.open}>
                      {c.open} open
                    </span>
                  )}
                </div>
                {p.flags.length > 0 && (
                  <div className="text-[11px] text-[var(--color-bad)]" data-flags={p.flags.join(",")}>
                    {p.flags.join(" · ")}
                  </div>
                )}
              </div>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}