"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);
  const [showRestartConfirm, setShowRestartConfirm] = React.useState(false);

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

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

  const reportIsCurrent =
    hasReport &&
    existing.investigationReport.generatedFromRevision ===
      (existing.investigationRevision ?? 0);

  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 items-start gap-3 text-sm">
              {hasReport ? (
                <div className="flex flex-col gap-1">
                  <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>

                  {reportIsCurrent ? (
                    <span className="text-[11px] font-semibold tracking-wider uppercase text-teal-700/70">
                      Current
                    </span>
                  ) : (
                    <span className="text-[11px] font-semibold tracking-wider uppercase text-gray-500">
                      Update available
                    </span>
                  )}
                </div>
              ) : null}

              <Link
                href={`/investigations/${INVESTIGATION_ID}`}
                className="self-start 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={() => setShowRestartConfirm(true)}
                className="self-start 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>

              {showRestartConfirm && (
                <div
                  role="dialog"
                  aria-modal="true"
                  aria-labelledby="restart-title"
                  className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
                  onClick={() => setShowRestartConfirm(false)}
                >
                  <div
                    className="w-[420px] rounded-xl border border-gray-200 bg-white p-6 shadow-lg"
                    onClick={(e) => e.stopPropagation()}
                  >
                    <h2 id="restart-title" className="mb-3 text-lg font-semibold">
                      Restart this investigation?
                    </h2>
                    <p className="mb-5 text-sm text-gray-600">
                      Your current investigation, findings, clarified questions, and report will be lost. Are you sure you want to continue?
                    </p>
                    <div className="flex justify-end gap-3">
                      <button
                        onClick={() => setShowRestartConfirm(false)}
                        className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition"
                      >
                        Cancel
                      </button>
                      <button
                        onClick={() => {
                          setShowRestartConfirm(false);
                          try { clearInvestigation(); } catch (_) { /* storage must not crash caller */ }
                          setExisting(null);
                        }}
                        className="rounded-lg border border-red-400 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50 transition"
                      >
                        Restart investigation
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </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;