"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 { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const INVESTIGATION_ID = "case-1";

export default function InvestigationPage() {
  const router = useRouter();
  const [existing, setExisting] = useState(null);

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

  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>
      {existing ? (
        <ScenarioForm
          existingSnapshot={existing}
          onNavigateToReport={() => router.push(`/investigations/${INVESTIGATION_ID}/report`)}
        />
      ) : (
        <ScenarioForm
          onNavigateToReport={() => router.push(`/investigations/${INVESTIGATION_ID}/report`)}
        />
      )}
    </main>
  );
}