/* New-case onboarding (Stap 1 · Case aanmaken / FR-02). window.NewCaseModal */

function NewCaseModal({ onClose, onComplete }) {
  const [step, setStep] = React.useState(0);
  const [adres, setAdres] = React.useState("");
  const [matched, setMatched] = React.useState(false);
  const [looking, setLooking] = React.useState(false);
  const [d, setD] = React.useState({
    projecttype: "Dakisolatie + warmtepompcollectief + zonnepanelen", eigenaar: "Jeroen Koster",
    beheerder: "beheer@singelhof-vve.nl", bestuur: "voorzitter@singelhof-vve.nl", verzoek: true,
  });
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));

  const lookup = () => {
    setLooking(true);
    setTimeout(() => { setLooking(false); setMatched(true); if (!adres) setAdres("Oude Singel 118, 2312 RE Leiden"); }, 950);
  };

  const steps = ["Locatie & identiteit", "Project & eigenaarschap", "Aanmaken"];
  const canNext = step === 0 ? matched : true;

  return (
    <div className="scrim" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="mhead">
          <div>
            <div className="mh-eyebrow">Nieuwe case · Stap {step + 1} van 3</div>
            <h2>{steps[step]}</h2>
          </div>
          <button className="mclose" onClick={onClose}><Icon name="xCircle" size={18} /></button>
        </div>

        <div className="mbody">
          {step === 0 && (
            <div>
              <p className="page-sub" style={{ margin: "0 0 16px" }}>Begin met het adres. In deze demo gebruikt de zoekactie deterministische referentiedata; live PDOK/KvK-verificatie wordt pas aangezet zodra de integraties bestaan.</p>
              <div className="flabel" style={{ marginBottom: 7 }}>Adres van de VvE<span className="rq">*</span></div>
              <div className="lookup">
                <input className="ti" placeholder="Straat, huisnummer(s), plaats" value={adres}
                       onChange={(e) => { setAdres(e.target.value); setMatched(false); }} />
                <button className="btn outline" onClick={lookup} disabled={looking}>
                  {looking ? <span className="spin"></span> : <Icon name="search" size={15} />}{looking ? "Zoeken…" : "Zoek"}
                </button>
              </div>

              {matched && (
                <div className="match-card">
                  <div className="mc-top"><Icon name="checkCircle" size={15} />Match gevonden · demo-referentie PDOK + KvK</div>
                  <div className="match-grid">
                    <div><div className="mg-k">VvE-naam</div><div className="mg-v">VvE Test Singelhof Leiden</div></div>
                    <div><div className="mg-k">KvK-nummer</div><div className="mg-v mono">93 18 74 21</div></div>
                    <div><div className="mg-k">Gemeente</div><div className="mg-v">Leiden</div></div>
                    <div><div className="mg-k">Provincie</div><div className="mg-v">Zuid-Holland</div></div>
                    <div><div className="mg-k">Appartementsrechten</div><div className="mg-v">18 <span className="muted tiny" style={{ fontWeight: 400 }}>· splitsingsakte</span></div></div>
                    <div><div className="mg-k">Status KvK</div><div className="mg-v">Actief</div></div>
                  </div>
                </div>
              )}
              {!matched && !looking && (
                <p className="tiny muted" style={{ marginTop: 14, display: "flex", gap: 7, alignItems: "center" }}>
                  <Icon name="shield" size={13} />Geen handmatige naam- of gemeente-invoer nodig in de demo — dit komt uit de referentieset.
                </p>
              )}
            </div>
          )}

          {step === 1 && (
            <div className="form">
              <FRow label="Projecttype" required hint="Globale scope; verfijning volgt in de intake.">
                <input className="ti" value={d.projecttype} onChange={(e) => set("projecttype", e.target.value)} />
              </FRow>
              <FRow label="Interne eigenaar" required hint="Verantwoordelijke adviseur voor dit dossier.">
                <div className="fselect"><Icon name="user" size={14} />
                  <select value={d.eigenaar} onChange={(e) => set("eigenaar", e.target.value)}>
                    <option>Jeroen Koster</option>
                  </select>
                </div>
              </FRow>
              <FRow label="Contactpersoon beheerder" hint="Ontvangt het documentverzoek.">
                <input className="ti" value={d.beheerder} onChange={(e) => set("beheerder", e.target.value)} />
              </FRow>
              <FRow label="Contactpersoon VvE-bestuur" hint="Voor ALV-stukken en besluitvorming.">
                <input className="ti" value={d.bestuur} onChange={(e) => set("bestuur", e.target.value)} />
              </FRow>
              <FRow label="Documentverzoek" hint="Stuur direct een veilige uploadlink na aanmaken.">
                <div className="rgroup">
                  <button className={"ropt" + (d.verzoek ? " on" : "")} onClick={() => set("verzoek", !d.verzoek)}>
                    <span className="rdot"></span>
                    <span><span className="rt">Ja — stuur uploadverzoek bij aanmaken</span><span className="rd">Beheerder & bestuur krijgen een link naar de dataroom-checklist</span></span>
                  </button>
                </div>
              </FRow>
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="banner ink" style={{ marginBottom: 18 }}>
                <Icon name="folder" size={19} style={{ flex: "0 0 auto", marginTop: 1, color: "var(--tge-emerald)" }} />
                <div><div className="bt">VvE Test Singelhof Leiden · Leiden</div>
                  <div className="bd">Bij aanmaken wordt het Warmtefonds dossier automatisch opgezet. Daarna ga je direct door naar de basisintake.</div></div>
              </div>
              <div className="initlist">
                {[
                  ["fileCheck", "Case-ID toegekend", "C-2026-099 · eigenaar Jeroen Koster"],
                  ["folder", "Dataroom geïnitialiseerd", "Warmtefonds checklist klaar — NWF1 route"],
                  ["inbox", "Takenlijst aangemaakt", "Intake afronden · documenten verzamelen · ALV voorbereiden"],
                  ["history", "Auditlog gestart", "Append-only logging vanaf nu actief"],
                  ...(d.verzoek ? [["upload", "Documentverzoek verstuurd", `Naar ${d.beheerder} en bestuur`]] : []),
                ].map(([ic, t, s]) => (
                  <div className="initrow" key={t}>
                    <div className="ir-ic"><Icon name={ic} size={16} /></div>
                    <div><div className="ir-t">{t}</div><div className="ir-s">{s}</div></div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <div className="mfoot">
          {step === 0 ? <span></span>
            : <button className="btn ghost" onClick={() => setStep(step - 1)}><Icon name="chevronRight" size={15} style={{ transform: "rotate(180deg)" }} />Vorige</button>}
          <div className="mdots">
            {steps.map((_, i) => <i key={i} className={i === step ? "on" : i < step ? "done" : ""}></i>)}
          </div>
          {step < 2
            ? <button className="btn primary" disabled={!canNext} onClick={() => setStep(step + 1)}>Volgende<Icon name="arrowRight" size={15} /></button>
            : <button className="btn primary" onClick={onComplete}>Case aanmaken & start intake<Icon name="arrowRight" size={15} /></button>}
        </div>
      </div>
    </div>
  );
}

window.NewCaseModal = NewCaseModal;