import type { FacilityStatus } from "@dci/core";
import { Activity, Columns3, Map as MapIcon, Table2 } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { Suspense } from "react";
import { PipelineByYear } from "@/components/home/charts";
import { PipelineFunnel } from "@/components/home/pipeline-funnel";
import { AiMark, ConfidenceBadge, EstimateMark, PrecisionBadge, ScopeBadge, StatusBadge } from "@/components/ui/badge";
import { Page, PageHeader } from "@/components/ui/card";
import { BarList } from "@/components/ui/charts";
import { CountryFlag } from "@/components/ui/country-flag";
import { FilterChips, type Chip } from "@/components/ui/filter-chips";
import { Pagination } from "@/components/ui/pagination";
import { SegmentedControl } from "@/components/ui/segmented";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { fmtDate, fmtInt, fmtMw, fmtUsd, placeLine } from "@/lib/format";
import { fmtPartialDateSafe } from "@/lib/format-project";
import { STATUS_SHORT, isSiteScopeLabel } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import { spGet, spInt, type SearchParams } from "@/lib/sort";
import { ProjectFilters } from "../filters";
import { ProjectsMapView } from "../projects-map";
import { PROJECT_CLASS_OPTIONS, PROJECT_VIEWS, projectQueryString, type ProjectQuery, type ProjectView } from "../query";
import { ProjectsKanban, ProjectsTimeline, investmentCell } from "../views";

export const revalidate = 120;

export const metadata: Metadata = pageMetadata({
  title: "Data center projects & construction pipeline",
  description: "Announced, permitted, approved and under-construction data center projects worldwide — lifecycle stages, planned MW (published figures only), investment and expected opening. Table, map, timeline and kanban views.",
  path: routes.projects(),
});

const PER_PAGE = 50;
const SORTS = ["updated", "mw", "announced", "opening"] as const;

function parseQuery(sp: SearchParams): ProjectQuery {
  const q: ProjectQuery = {};
  const view = spGet(sp, "view");
  if (view && (PROJECT_VIEWS as readonly string[]).includes(view)) q.view = view as ProjectView;
  const s = spGet(sp, "status");
  if (s) q.status = s;
  const c = spGet(sp, "country");
  if (c) q.country = c.toUpperCase();
  const o = spGet(sp, "operator");
  if (o) q.operator = o;
  const mw = Number(spGet(sp, "min_mw"));
  if (Number.isFinite(mw) && mw > 0) q.min_mw = mw;
  const ai = spGet(sp, "ai");
  if (ai === "1" || ai === "true") q.ai = true;
  const cls = spGet(sp, "class");
  if (cls) q.project_class = cls;
  const ef = Number(spGet(sp, "expected_from"));
  if (Number.isFinite(ef) && ef > 1990) q.expected_from = ef;
  const et = Number(spGet(sp, "expected_to"));
  if (Number.isFinite(et) && et > 1990) q.expected_to = et;
  const text = spGet(sp, "q");
  if (text) q.q = text;
  const sort = spGet(sp, "sort");
  if (sort && (SORTS as readonly string[]).includes(sort)) q.sort = sort as ProjectQuery["sort"];
  const order = spGet(sp, "order");
  if (order === "asc" || order === "desc") q.order = order;
  q.page = spInt(sp, "page");
  return q;
}

export default async function ProjectsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const sp = await searchParams;
  const query = parseQuery(sp);
  const view: ProjectView = query.view ?? "table";
  const page = query.page ?? 1;
  const perPage = view === "table" ? PER_PAGE : 100;
  const [pipe, list, countriesRes] = await Promise.all([
    api.projectPipeline(),
    api.projects({ status: query.status, country: query.country, operator: query.operator, min_mw: query.min_mw, ai: query.ai, project_class: query.project_class, expected_from: query.expected_from, expected_to: query.expected_to, q: query.q, sort: query.sort ?? (view === "timeline" ? "opening" : "updated"), order: query.order ?? (view === "timeline" ? "asc" : undefined), page, per_page: perPage }),
    api.countries(),
  ]);
  const p = pipe.ok ? pipe.data : null;
  const countries = countriesRes.items.map((c) => ({ iso2: c.iso2, name: c.name }));
  const href = (patch: Partial<ProjectQuery>) => routes.projects(projectQueryString({ ...query, page: undefined, ...patch }));
  const sortHref = (key: (typeof SORTS)[number]) => {
    const active = (query.sort ?? "updated") === key;
    const next = active ? (query.order === "asc" ? "desc" : "asc") : key === "opening" || key === "announced" ? "asc" : "desc";
    return href({ sort: key, order: next });
  };
  const sortState = (key: (typeof SORTS)[number]) => ((query.sort ?? "updated") === key ? (query.order ?? (key === "opening" || key === "announced" ? "asc" : "desc")) : null);

  const byStatus: Partial<Record<FacilityStatus, number>> = {};
  for (const s of p?.byStatus ?? []) byStatus[s.status] = (byStatus[s.status] ?? 0) + s.count;
  const byYear = (p?.byYear ?? []).map((y) => ({ year: y.year, count: y.count, mw: y.mw }));

  const chips: Chip[] = [];
  for (const s of (query.status ?? "").split(",").filter(Boolean)) chips.push({ key: `status-${s}`, label: "Stage", value: STATUS_SHORT[s as FacilityStatus] ?? s, removeHref: href({ status: (query.status ?? "").split(",").filter((x) => x && x !== s).join(",") || undefined }) });
  if (query.country) chips.push({ key: "country", label: "Country", value: countries.find((c) => c.iso2 === query.country)?.name ?? query.country, removeHref: href({ country: undefined }) });
  if (query.operator) chips.push({ key: "operator", label: "Operator", value: query.operator, removeHref: href({ operator: undefined }) });
  if (query.min_mw) chips.push({ key: "min_mw", label: "Planned", value: `≥ ${fmtMw(query.min_mw)}`, removeHref: href({ min_mw: undefined }) });
  if (query.ai) chips.push({ key: "ai", label: "AI", value: "AI infrastructure", removeHref: href({ ai: undefined }) });
  for (const c of (query.project_class ?? "").split(",").filter(Boolean)) chips.push({ key: `class-${c}`, label: "Class", value: PROJECT_CLASS_OPTIONS.find((o) => o.v === c)?.label ?? c, removeHref: href({ project_class: (query.project_class ?? "").split(",").filter((x) => x && x !== c).join(",") || undefined }) });
  if (query.expected_from || query.expected_to) chips.push({ key: "expected", label: "Expected", value: `${query.expected_from ?? "…"}–${query.expected_to ?? "…"}`, removeHref: href({ expected_from: undefined, expected_to: undefined }) });
  if (query.q) chips.push({ key: "q", label: "Search", value: query.q, removeHref: href({ q: undefined }) });

  const views: Array<{ value: ProjectView; label: React.ReactNode; title: string }> = [
    { value: "table", label: <><Table2 className="size-3.5" strokeWidth={1.75} /> Table</>, title: "Sortable table" },
    { value: "map", label: <><MapIcon className="size-3.5" strokeWidth={1.75} /> Map</>, title: "Located projects on the map" },
    { value: "timeline", label: <><Activity className="size-3.5" strokeWidth={1.75} /> Timeline</>, title: "By expected opening year" },
    { value: "kanban", label: <><Columns3 className="size-3.5" strokeWidth={1.75} /> Kanban</>, title: "Columns by lifecycle stage" },
  ];

  return (
    <Page>
      <PageHeader
        eyebrow="Pipeline"
        title="Data center projects"
        description={p ? `${fmtInt(p.totals.projects)} projects tracked from rumour to opening. Planned MW are published, site-scoped figures (≈ never imputed); company-wide totals are kept as evidence, never summed.` : "Announced, permitted, approved and under-construction projects worldwide."}
        aside={<SegmentedControl label="View" value={view} options={views.map((v) => ({ value: v.value, label: v.label, title: v.title, href: href({ view: v.value === "table" ? undefined : v.value }) }))} />}
      />

      {!pipe.ok && <OfflineNotice detail={pipe.error} className="mb-3" />}

      {/* funnel */}
      <section aria-label="Construction pipeline funnel" className="border-y border-hair py-4">
        <PipelineFunnel data={{ byStatus: p?.byStatus ?? [], openedLast12m: null }} />
      </section>

      <div className="grid gap-6 py-6 md:grid-cols-3">
        <div>
          <div className="label-caps mb-2">Investment announced</div>
          <div className="figure text-[22px] font-medium text-ink">{p?.totals.investmentUsd ? fmtUsd(p.totals.investmentUsd) : "—"}</div>
          <p className="text-[11.5px] text-ink-3">{p?.totals.investmentUsd ? "where disclosed, site-scoped only" : "not disclosed"} · {p ? `${fmtInt(p.totals.ai)} AI projects` : ""}</p>
        </div>
        <div>
          <div className="label-caps mb-2">By expected year</div>
          {byYear.length ? <PipelineByYear data={byYear} /> : <EmptyState compact title="No dated pipeline yet" description="Projects with a published expected opening will chart here." />}
        </div>
        <div>
          <div className="label-caps mb-2">Top countries</div>
          {p?.byCountry.length ? (
            <BarList items={p.byCountry.slice(0, 8).map((c) => ({ label: <CountryFlag iso2={c.countryIso2} withName />, value: c.count, href: href({ country: c.countryIso2 }), secondary: c.mw !== null ? `≈ ${fmtMw(c.mw)}` : undefined }))} />
          ) : (
            <EmptyState compact title="No located projects yet" description="Country appears once a project is geolocated." />
          )}
        </div>
      </div>

      <div className="sticky top-12 z-[20] -mx-3 border-y border-hair bg-paper/95 px-3 py-2 backdrop-blur sm:top-14 sm:mx-0 sm:px-0">
        <Suspense>
          <ProjectFilters query={query} total={list.total} countries={countries} />
        </Suspense>
      </div>
      <FilterChips chips={chips} resetHref={routes.projects(view !== "table" ? `view=${view}` : undefined)} className="py-2" />

      <div className="pt-1">
        {list.items.length === 0 ? (
          <EmptyState compact title={chips.length ? "No projects match these filters" : "No projects tracked yet"} description={chips.length ? "Loosen a filter or clear them all." : "Announced and under-construction projects appear once ingested."} />
        ) : view === "map" ? (
          <ProjectsMapView items={list.items} total={list.total} projectStatus={query.status} />
        ) : view === "timeline" ? (
          <ProjectsTimeline items={list.items} />
        ) : view === "kanban" ? (
          <ProjectsKanban items={list.items} counts={byStatus} />
        ) : (
          <Table>
            <THead>
              <tr>
                <Th>Project</Th>
                <Th className="hidden sm:table-cell">Operator</Th>
                <Th>Location</Th>
                <Th>Stage</Th>
                <Th numeric sort={sortState("mw")} sortHref={sortHref("mw")}>
                  Planned MW
                </Th>
                <Th numeric className="hidden lg:table-cell">
                  Investment
                </Th>
                <Th className="hidden lg:table-cell" sort={sortState("announced")} sortHref={sortHref("announced")}>
                  Announced
                </Th>
                <Th sort={sortState("opening")} sortHref={sortHref("opening")}>
                  Expected
                </Th>
                <Th className="hidden lg:table-cell">Confidence</Th>
              </tr>
            </THead>
            <TBody>
              {list.items.map((pr) => {
                const site = pr.capacityScope == null || isSiteScopeLabel(pr.capacityScope);
                return (
                  <Tr key={pr.id}>
                    <Td primary>
                      <span className="inline-flex flex-wrap items-center gap-1.5">
                        <RowLink href={routes.project(pr.slug)}>{pr.name}</RowLink>
                        {pr.isAi && <AiMark evidence={pr.aiEvidence} />}
                      </span>
                      <div className="text-[11.5px] text-ink-3 sm:hidden">{pr.operator?.name ?? "Operator unknown"}</div>
                    </Td>
                    <Td label="Operator" className="hidden sm:table-cell">
                      {pr.operator ? (
                        <Link href={routes.operator(pr.operator.slug)} className="text-ink-2 hover:text-ink hover:underline">
                          {pr.operator.name}
                        </Link>
                      ) : (
                        <span className="text-ink-4">—</span>
                      )}
                    </Td>
                    <Td label="Location">
                      <span className="inline-flex max-w-[220px] items-center gap-1.5 text-ink-2">
                        <CountryFlag iso2={pr.countryIso2} size={12} />
                        <span className="truncate">{pr.metro ? <Link href={routes.market(pr.metro.slug)} className="hover:text-ink hover:underline">{pr.metro.name}</Link> : placeLine(pr)}</span>
                        {pr.geoPrecision && pr.geoPrecision !== "exact" && pr.geoPrecision !== "parcel" && <PrecisionBadge precision={pr.geoPrecision} size="xs" className="hidden md:inline-flex" />}
                      </span>
                    </Td>
                    <Td label="Stage">
                      <StatusBadge status={pr.status} short size="xs" />
                    </Td>
                    <Td label="Planned MW" numeric lead>
                      {pr.plannedMw === null ? (
                        <span className="text-ink-4">—</span>
                      ) : site ? (
                        <span>
                          <EstimateMark className="mr-0.5" />
                          {fmtMw(pr.plannedMw)}
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1 text-ink-4" title={`${fmtMw(pr.plannedMw)} is a ${pr.capacityScope}-level figure — not this site's`}>
                          — <ScopeBadge scope={pr.capacityScope} />
                        </span>
                      )}
                    </Td>
                    <Td label="Investment" numeric className="hidden lg:table-cell">
                      {investmentCell(pr) === "—" ? <span className="text-ink-4">—</span> : investmentCell(pr)}
                    </Td>
                    <Td label="Announced" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
                      {fmtDate(pr.announcedOn)}
                    </Td>
                    <Td label="Expected" className="figure text-[12px]">
                      {pr.expectedOpening ? fmtPartialDateSafe(pr.expectedOpening) : <span className="text-ink-4">TBD</span>}
                    </Td>
                    <Td label="Confidence" className="hidden lg:table-cell">
                      <ConfidenceBadge level={pr.confidence} size="xs" />
                    </Td>
                  </Tr>
                );
              })}
            </TBody>
          </Table>
        )}
      </div>
      <Pagination page={page} perPage={perPage} total={list.total} hrefFor={(pg) => routes.projects(projectQueryString({ ...query, page: pg }))} label="projects" className="mt-3" />
      <p className="mt-6 text-[11.5px] text-ink-4">
        Projects are reconciled from operator press releases, planning filings and news through a lifecycle state machine; status changes are versioned and appear in the{" "}
        <Link href={routes.live("type=project_announced,project_status_changed,construction_started")} className="underline decoration-hair-2 hover:text-ink">
          live feed
        </Link>
        . Locations are shown at the precision published (a city-level ring is never a site).
      </p>
    </Page>
  );
}