import Link from "next/link";
import { apiFetch } from "@/lib/api";
import type { Scenario, ScenarioSummary } from "@/types/api";
import CompareClient from "./_components/CompareClient";

async function getData(ids: string[]) {
  const summaries = await apiFetch<ScenarioSummary[]>("/api/scenarios").catch(() => []);

  let full: Scenario[] = [];
  if (ids.length >= 2) {
    const results = await Promise.allSettled(
      ids.map((id) => apiFetch<Scenario>(`/api/scenarios/${id}`))
    );
    full = results
      .filter((r): r is PromiseFulfilledResult<Scenario> => r.status === "fulfilled")
      .map((r) => r.value);
  }

  return { summaries, full };
}

export default async function ComparePage({
  searchParams,
}: {
  searchParams: Promise<{ ids?: string }>;
}) {
  const { ids: idsParam } = await searchParams;
  const ids = idsParam ? idsParam.split(",").filter(Boolean) : [];
  const { summaries, full } = await getData(ids);

  return (
    <div className="min-h-screen bg-stone-50">
      <div className="border-b border-stone-200 bg-white">
        <div className="mx-auto max-w-6xl px-6 py-6 lg:px-8">
          <div className="mb-1 flex items-center gap-2 text-sm text-stone-500">
            <Link href="/" className="hover:text-stone-700">ACI Platform</Link>
            <span>/</span>
            <Link href="/scenarios" className="hover:text-stone-700">Scenarios</Link>
            <span>/</span>
            <span className="text-stone-900 font-medium">Compare</span>
          </div>
          <div className="flex items-start justify-between gap-4">
            <div>
              <h1 className="text-2xl font-bold tracking-tight text-stone-900">
                Scenario Comparison
              </h1>
              <p className="mt-1 text-sm text-stone-500">
                Select 2–3 scenarios to compare outcomes side by side.
              </p>
            </div>
            <Link
              href="/scenarios/new"
              className="hidden rounded-lg bg-emerald-800 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-700 sm:block"
            >
              New Scenario →
            </Link>
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-6xl px-6 py-8 lg:px-8">
        <CompareClient
          summaries={summaries}
          initialFull={full}
          initialIds={ids}
        />
      </div>
    </div>
  );
}