"use client";

import React from "react";
import { listInvestigations, restartInvestigation } from "@/lib/storage/investigation-storage";
import Link from "next/link";
import { useRouter } from "next/navigation";

function Portfolio() {
  const router = useRouter();
  const [summaries, setSummaries] = React.useState([]);
  const [showRestartConfirm, setShowRestartConfirm] = React.useState(false);

  React.useEffect(() => {
    setSummaries(listInvestigations());
  }, []);

  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>

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

          {summaries.map((summary) => (
            <div key={summary.id} 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">
                {summary.scenario || "Untitled investigation"}
              </p>

              <div className="mt-4 flex items-start gap-3 text-sm">
                {summary.reportExists ? (
                  <div className="flex flex-col gap-1">
                    <Link
                      href={`/investigations/${summary.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>

                    {summary.reportGeneratedFromRevision === summary.investigationRevision ? (
                      <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/${summary.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(summary.id)}
                  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 === summary.id && (
                  <div
                    role="dialog"
                    aria-modal="true"
                    aria-labelledby={`restart-title-${summary.id}`}
                    className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
                    onClick={() => setShowRestartConfirm(null)}
                  >
                    <div
                      className="w-[420px] rounded-xl border border-gray-200 bg-white p-6 shadow-lg"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <h2 id={`restart-title-${summary.id}`} 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(null)}
                          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(null);
                            try { restartInvestigation(summary.id); } catch (_) { /* storage must not crash caller */ }
                            setSummaries(listInvestigations());
                          }}
                          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 investigations */}
      {summaries.length === 0 && (
        <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>
      )}

      <button
        onClick={(e) => {
          e.preventDefault();
          const id = crypto.randomUUID();
          router.push(`/investigations/${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
      </button>
    </main>
  );
}

export default Portfolio;