"use client";
import { useState } from "react";
import Link from "next/link";
import { modules, type Module } from "@/lib/modules";
import {
  ALGEMENE_SNELSTART,
  HANDELINGSREGIMES,
  vindHandleiding,
  type HandleidingInteractie,
} from "@/data/handleiding";

const RICHTING_LABEL: Record<HandleidingInteractie["richting"], string> = {
  naar: "→",
  van: "←",
  beide: "↔",
};

function moduleVanId(id: string): Module | undefined {
  return modules.find((m) => m.id === id);
}

function InteractieRegel({ interactie }: { interactie: HandleidingInteractie }) {
  const ander = moduleVanId(interactie.metModuleId);
  if (!ander) return null;
  return (
    <li className="flex items-start gap-2 text-sm text-slate-600">
      <span className="shrink-0 font-mono text-slate-400 mt-0.5" title={interactie.richting}>
        {RICHTING_LABEL[interactie.richting]}
      </span>
      <span>
        <Link href={`#${ander.id}`} className="font-medium text-brand-700 hover:underline">
          {ander.icoon} {ander.titel}
        </Link>
        {" — "}
        {interactie.omschrijving}
      </span>
    </li>
  );
}

function ModuleSectie({ module }: { module: Module }) {
  const handleiding = vindHandleiding(module.id);
  const [toonDetail, setToonDetail] = useState(false);
  if (!handleiding) return null;

  return (
    <section
      id={module.id}
      className="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4 scroll-mt-20"
    >
      <div className="flex items-start justify-between gap-3 flex-wrap">
        <div>
          <h2 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
            <span>{module.icoon}</span>
            {module.titel}
            {!module.beschikbaar && (
              <span className="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full font-normal">
                binnenkort
              </span>
            )}
          </h2>
          <p className="text-sm text-slate-500 mt-0.5">{handleiding.inEenZin}</p>
        </div>
        {module.beschikbaar && (
          <Link
            href={module.href}
            className="text-sm px-4 py-2 rounded-lg border border-brand-300 text-brand-700 hover:bg-brand-50 shrink-0"
          >
            Open module
          </Link>
        )}
      </div>

      <div>
        <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Snelstart</p>
        <ol className="list-decimal list-inside space-y-1 text-sm text-slate-700">
          {handleiding.snelstart.map((stap, i) => (
            <li key={i}>{stap}</li>
          ))}
        </ol>
      </div>

      <button
        onClick={() => setToonDetail((v) => !v)}
        className="text-sm px-3 py-1.5 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
      >
        {toonDetail ? "▴ Verberg detail" : "▾ Werking in detail, samenspel & tips"}
      </button>

      {toonDetail && (
        <div className="space-y-4 border-t border-slate-100 pt-4">
          <div>
            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
              Werking in detail
            </p>
            <div className="space-y-2">
              {handleiding.werking.map((alinea, i) => (
                <p key={i} className="text-sm text-slate-700 leading-relaxed">
                  {alinea}
                </p>
              ))}
            </div>
          </div>

          {handleiding.interacties.length > 0 && (
            <div>
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
                Samenspel met andere modules
              </p>
              <ul className="space-y-1.5">
                {handleiding.interacties.map((interactie, i) => (
                  <InteractieRegel key={i} interactie={interactie} />
                ))}
              </ul>
            </div>
          )}

          {handleiding.tips.length > 0 && (
            <div>
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Tips</p>
              <ul className="space-y-1.5">
                {handleiding.tips.map((tip, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm text-slate-700">
                    <span className="shrink-0">💡</span>
                    <span>{tip}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
    </section>
  );
}

export default function HandleidingPage() {
  // Vaste modulevolgorde uit lib/modules.ts; enkel modules mét handleiding
  // (de test bewaakt dat dat er allemaal zijn).
  const gedocumenteerd = modules.filter((m) => vindHandleiding(m.id));

  return (
    <div className="p-4 md:p-8 max-w-5xl mx-auto space-y-8">
      <header>
        <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">📖 Handleiding</h1>
        <p className="text-sm text-slate-500 mt-1 max-w-2xl">
          Snel aan de slag met Notary.AI, en per module: de snelstart, de werking in detail, het
          samenspel met de andere modules en de gebruikstips van het kantoor.
        </p>
      </header>

      <section className="bg-brand-50 border border-brand-200 rounded-xl p-5">
        <h2 className="text-base font-semibold text-slate-900 mb-2">🚀 Snel aan de slag</h2>
        <ol className="list-decimal list-inside space-y-1.5 text-sm text-slate-700">
          {ALGEMENE_SNELSTART.map((stap, i) => (
            <li key={i}>{stap}</li>
          ))}
        </ol>
      </section>

      <section className="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
        <h2 className="text-base font-semibold text-slate-900 mb-1">⚖️ De drie handelingsregimes</h2>
        <p className="text-xs text-slate-500 mb-3">
          Het vaste kader achter alle modules: wat de assistent vrij doet, wat validatie van de
          notaris vraagt en wat nooit geautomatiseerd wordt.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          {HANDELINGSREGIMES.map((regime) => (
            <div key={regime.titel} className="border border-slate-200 rounded-lg p-3">
              <p className="text-sm font-medium text-slate-800 mb-1">{regime.titel}</p>
              <p className="text-xs text-slate-600 leading-relaxed">{regime.omschrijving}</p>
            </div>
          ))}
        </div>
      </section>

      <nav className="flex flex-wrap gap-1.5" aria-label="Ga naar module">
        {gedocumenteerd.map((m) => (
          <a
            key={m.id}
            href={`#${m.id}`}
            className="text-xs px-2.5 py-1 rounded-full border border-slate-200 text-slate-600 hover:border-brand-300 hover:text-brand-700 bg-white"
          >
            {m.icoon} {m.titel}
          </a>
        ))}
      </nav>

      <div className="space-y-4">
        {gedocumenteerd.map((m) => (
          <ModuleSectie key={m.id} module={m} />
        ))}
      </div>

      <p className="text-xs text-slate-400">
        Onvolledig of verouderd? Registreer het als{" "}
        <Link href="/verbetervoorstellen" className="text-brand-700 hover:underline">
          verbetervoorstel
        </Link>
        {" "}— een AI-agent werkt de handleiding bij.
      </p>
    </div>
  );
}