"use client";

import React, { useEffect, useState } from "react";
import { loadInvestigation } from "@/lib/storage/investigation-storage";
import Link from "next/link";

export default function ReportPage() {
  const [existing, setExisting] = useState(null);
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    setExisting(loadInvestigation());
    setHydrated(true);
  }, []);

  const report = existing?.investigationReport || null;
  const scenario = hydrated ? (existing?.scenario || "") : null;

  const paragraphs = (report?.understanding || "")
    .split("\n")
    .filter(Boolean);

  return (
    <main className="mx-auto max-w-[800px] px-6 py-16">
      <h1 className="mb-2 text-[15px] font-bold tracking-[.2em] uppercase text-teal-700/90">
        Investigation Report
      </h1>

      {/* Situation */}
      {scenario && (
        <div className="mt-8 rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
          <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-teal-700/70">
            Situation
          </h2>
          <p className="text-base leading-relaxed text-gray-800 whitespace-pre-wrap">
            {scenario}
          </p>
        </div>
      )}

      {/* What we understand */}
      {report ? (
        <>
          {paragraphs.length > 0 ? (
            paragraphs.map((p, i) => (
              <div key={i} className="mt-6 rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
                <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-teal-700/70">
                  What we understand
                </h2>
                <p className="text-base leading-relaxed text-gray-800">{p}</p>
              </div>
            ))
          ) : (
            <div className="mt-6 rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
              <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-teal-700/70">
                What we understand
              </h2>
              <p className="text-base leading-relaxed text-gray-800">{report.understanding || ""}</p>
            </div>
          )}

          {/* What remains plausible — conditional */}
          {report.hasPlausibleInterpretations && report.plausibleInterpretations ? (
            <div className="mt-6 rounded-xl border-[2.5px] border-blue-300/70 bg-gradient-to-b from-blue-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
              <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-blue-700/70">
                What remains plausible
              </h2>
              <p className="text-base leading-relaxed text-gray-800 italic">
                {report.plausibleInterpretations}
              </p>
            </div>
          ) : null}
        </>
      ) : (
        /* Skeleton / loading state when no persisted report exists */
        <>
          <div className="mt-8 rounded-xl border-[2.5px] border-gray-200 bg-gray-50/50 px-8 pt-6 pb-7">
            <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-gray-400">
              What we understand
            </h2>
            <p className="text-base leading-relaxed text-gray-300 animate-pulse">
              Report generation pending. A summary will appear here once the investigation reaches milestone.
            </p>
          </div>
        </>
      )}

      {/* Back to investigation */}
      <div className="mt-10">
        <Link
          href="/investigations/case-1"
          className="rounded-lg border border-teal-600 bg-white px-4 py-2 text-sm font-medium text-teal-700 hover:bg-teal-50 transition"
        >
          Back to investigation
        </Link>
      </div>

      {/* Back to portfolio */}
      <div className="mt-3">
        <Link
          href="/"
          className="rounded-lg border border-teal-600 bg-white px-4 py-2 text-sm font-medium text-teal-700 hover:bg-teal-50 transition"
        >
          Back to portfolio
        </Link>
      </div>
    </main>
  );
}