"use client";

import React from "react";
import { loadInvestigation } from "@/lib/storage/investigation-storage";
import ScenarioForm from "@/components/scenario-form";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function InvestigationPage({ params }) {
  const router = useRouter();
  const routeId = typeof params?.id === "string" ? params.id : "";
  const [existing, setExisting] = useState(null);
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    let active = true;
    setHydrated(false);
    if (!routeId) { setHydrated(true); return; }
    (async () => {
      try {
        const snapshot = await loadInvestigation(routeId);
        if (active) setExisting(snapshot);
      } finally {
        if (active) setHydrated(true);
      }
    })();
    return () => { active = false; };
  }, [routeId]);

  return (
    <main className="mx-auto max-w-[1600px] px-6 py-12">
      {/* Page-level navigation — owned by route, not ReasoningWorkspace */}
      <nav className="mb-4 flex gap-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>
      </nav>

      <h1 className="mb-2 text-3xl font-bold tracking-tight">Confidence Engine</h1>
      <p className="mb-8 text-sm text-gray-500">
        Experimental prototype: enter a scenario and send it to a local LLM for
        evidence-based structured reconstruction. This is a technical vertical
        slice — not a production system.
      </p>
      {!hydrated ? (
        <p className="text-sm text-gray-500">Loading investigation…</p>
      ) : existing ? (
        <ScenarioForm
          investigationId={routeId}
          existingSnapshot={existing}
          onNavigateToReport={() => router.push(`/investigations/${routeId}/report`)}
        />
      ) : (
        <ScenarioForm
          investigationId={routeId}
          onNavigateToReport={() => router.push(`/investigations/${routeId}/report`)}
        />
      )}
    </main>
  );
}