import Link from "next/link";
import { consultations } from "@/data/consultations";
import QuickAsk from "@/components/QuickAsk";
import StageBar from "@/components/StageBar";
import StanowiskoBox from "@/components/StanowiskoBox";
import MvpNotice from "@/components/MvpNotice";
import PublicQuotes from "@/components/PublicQuotes";
import FindingsBox from "@/components/FindingsBox";

export default async function ConsultationDetail({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const c = consultations.find((x) => x.id === id);

  if (!c) {
    return (
      <>
        <h1 className="text-2xl font-bold">Nie znaleziono konsultacji</h1>
        <p className="mt-4">
          <Link className="underline" href="/konsultacje">
            Wróć do listy
          </Link>
        </p>
      </>
    );
  }

  return (
    <>
      <p className="text-sm text-gray-500 mb-3">
        <Link className="underline" href="/konsultacje">
          ← Konsultacje
        </Link>
      </p>

      <h1 className="text-3xl font-bold mb-2">{c.title}</h1>
      <p className="text-lg text-gray-700 mb-6">{c.summary}</p>

      <StageBar stage={c.stage} />

      <div className="mt-6 rounded-2xl border p-5">
        <p className="font-semibold mb-2">Jak to działa?</p>
        <ul className="list-disc pl-5 text-gray-700 space-y-2">
          <li>Dodajesz krótką opinię (wkrótce).</li>
          <li>Nie ma mocy decyzyjnej – to konsultacja, nie głosowanie.</li>
          <li>Podsumowanie publikujemy w formie wniosków.</li>
        </ul>

        {c.closesAt && (
          <p className="mt-4 text-sm text-gray-500">
            Termin: {c.closesAt}
          </p>
        )}
      </div>

      <StanowiskoBox consultationId={c.id} />

      <PublicQuotes consultationId={c.id} />

      <FindingsBox c={c} />

      <QuickAsk contextTitle={c.title} contextSummary={c.summary} />

      <div className="mt-8">
        <MvpNotice />
      </div>
    </>
  );
}