"use client";

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

const INVESTIGATION_ID = "case-1";

function Portfolio() {
  const [existing, setExisting] = React.useState(null);

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

  const hasReport = Boolean(
    existing?.investigationReport && existing.investigationReport.understanding
  );

  return (
    <main className="mx-auto max-w-[640px] px-6 py-16">
      <h1 className="mb-2 text-3xl font-bold tracking-tight">Confidence Engine</h1>
      <p className="mb-8 text-sm text-gray-500">
        Investigator&apos;s notebook — index of persisted investigations.
      </p>

      {/* Existing investigation */}
      {existing && (
        <section className="mb-10">
          <h2 className="mb-4 text-[13px] font-bold tracking-[.18em] uppercase text-teal-700/80">
            Investigations
          </h2>

          <div className="rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-6 shadow-sm">
            <p className="text-sm text-gray-700">
              {existing.scenario || "Untitled investigation"}
            </p>

            <div className="mt-4 flex gap-3 text-sm">
              {hasReport ? (
                <Link
                  href={`/investigations/${INVESTIGATION_ID}/report`}
                  className="rounded-lg border border-teal-600 bg-white px-4 py-2 font-medium text-teal-700 hover:bg-teal-50 transition"
                >
                  View report
                </Link>
              ) : null}

              <Link
                href={`/investigations/${INVESTIGATION_ID}`}
                className="rounded-lg border border-teal-600 bg-white px-4 py-2 font-medium text-teal-700 hover:bg-teal-50 transition"
              >
                Continue investigation
              </Link>

              <button
                onClick={() => {
                  try { clearInvestigation(); } catch (_) { /* storage must not crash caller */ }
                }}
                className="rounded-lg border border-red-400 bg-white px-4 py-2 font-medium text-red-700 hover:bg-red-50 transition"
              >
                Restart investigation
              </button>
            </div>
          </div>
        </section>
      )}

      {/* No existing investigation */}
      {!existing && (
        <section className="mb-10">
          <h2 className="mb-4 text-[13px] font-bold tracking-[.18em] uppercase text-teal-700/80">
            Investigations
          </h2>
          <p className="text-sm text-gray-500 italic">No investigations yet.</p>
        </section>
      )}

      <Link
        href={`/investigations/${INVESTIGATION_ID}`}
        className="rounded-lg border-[2.5px] border-dashed border-teal-400 px-6 py-3 text-sm font-medium text-teal-700 hover:bg-teal-50 transition"
      >
        + Create new investigation
      </Link>
    </main>
  );
}

export default Portfolio;