import type { ProjectSummary } from "@dci/core";
import Link from "next/link";
import { EstimateMark, StatusBadge } from "@/components/ui/badge";
import { CountryFlag } from "@/components/ui/country-flag";
import { EmptyState } from "@/components/ui/states";
import { fmtMw, fmtPartialDateSafe, fmtUsd, placeLine } from "@/lib/format-project";
import { routes } from "@/lib/routes";

/** ProjectSummary rows: name · operator · location · MW · status · expected. */
export function ProjectList({ items, emptyTitle = "No projects yet", emptyDescription = "Announced and under-construction projects will appear once ingested." }: { items: ProjectSummary[]; emptyTitle?: string; emptyDescription?: string }) {
  if (!items.length) return <EmptyState title={emptyTitle} description={emptyDescription} compact />;
  return (
    <ul className="divide-y divide-hair">
      {items.map((p) => (
        <li key={p.id} className="relative grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 py-2.5">
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
              {/* stretched link: the whole row opens the project; the operator link sits above via z-index */}
              <Link href={routes.project(p.slug)} className="truncate text-[13.5px] font-medium text-ink hover:text-accent hover:underline after:absolute after:inset-0 after:content-['']">
                {p.name}
              </Link>
              <StatusBadge status={p.status} short size="xs" />
            </div>
            <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-[12px] text-ink-3">
              {p.operator ? (
                <Link href={routes.operator(p.operator.slug)} className="relative z-[1] inline-flex min-h-6 items-center text-ink-2 hover:text-ink">
                  {p.operator.name}
                </Link>
              ) : (
                <span>Operator unknown</span>
              )}
              <span aria-hidden>·</span>
              <CountryFlag iso2={p.countryIso2} size={12} />
              <span className="truncate">{placeLine(p)}</span>
              {p.investmentUsd !== null && (
                <>
                  <span aria-hidden>·</span>
                  <span className="figure">{fmtUsd(p.investmentUsd)}</span>
                </>
              )}
            </div>
          </div>
          <div className="flex flex-col items-end text-right">
            <span className="figure text-[14px] font-medium text-ink">
              {p.plannedMw === null ? <span className="text-ink-4">—</span> : (
                <>
                  <EstimateMark className="mr-0.5 text-[11px]" />
                  {fmtMw(p.plannedMw)}
                </>
              )}
            </span>
            <span className="figure text-[11px] text-ink-3" title="Expected opening">
              {p.expectedOpening ? fmtPartialDateSafe(p.expectedOpening) : "TBD"}
            </span>
          </div>
        </li>
      ))}
    </ul>
  );
}