110 lines
4.1 KiB
React
110 lines
4.1 KiB
React
"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>
|
|
);
|
|
}
|