/* Intake wizard — adaptive, multi-step canonieke VvE-intake (Scherm 2 / Gate G2).
 * Exposes window.IntakeWizard.
 */

const WIZ_STEPS = [
  { key: "vve",     title: "VvE & locatie",       sub: "Identiteit",        icon: "building" },
  { key: "omvang",  title: "Omvang & eigenaren",  sub: "Splitsing",         icon: "user" },
  { key: "project", title: "Project & maatregelen", sub: "Scope",           icon: "layers" },
  { key: "financ",  title: "Financieel",          sub: "Kosten & dekking",  icon: "coins" },
  { key: "bevestig",title: "Bevestiging",         sub: "Gate G2",           icon: "checkCircle" },
];

const MAATREGELEN = ["Gevelisolatie", "Dakisolatie", "Vloerisolatie", "HR++ glas", "Hybride warmtepomp", "Zonnepanelen", "Ventilatie (WTW)"];

function Src({ label, kind = "manual", code }) {
  const icon = kind === "pdok" || kind === "verified" ? "checkCircle" : kind === "doc" ? "fileText" : kind === "kvk" ? "shield" : "user";
  return (
    <span className={"srctag " + kind}>
      <Icon name={icon} size={12} />{label}{code && <span className="mono">{code}</span>}
    </span>
  );
}

function FRow({ label, required, hint, children }) {
  return (
    <div className="frow">
      <div>
        <div className="flabel">{label}{required && <span className="rq">*</span>}</div>
        {hint && <div className="fhint">{hint}</div>}
      </div>
      <div className="fctl">{children}</div>
    </div>
  );
}

function IntakeWizard({ onGoto, c }) {
  const [step, setStep] = React.useState(0);
  const [d, setD] = React.useState({
    naam: "VvE Demo Parkzicht", kvk: "76 54 32 10",
    adres: "Parklaan 42, 3016 BC Rotterdam", gemeente: "Rotterdam",
    projecttype: "Dakisolatie + HR++ glas + zonnepanelen",
    units: 12, bewoners: 10, verhuurd: 0, commercieel: 2,
    bestuur: true, bank: true,
    maatregelen: ["Dakisolatie", "HR++ glas", "Zonnepanelen", "Ventilatie (WTW)"],
    timing: "6-12", offerte: true,
    kosten: "420.000", reserve: "40.000", mjop: true,
    financiering: "lening", subsidie: true,
    g2: false,
  });
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));
  const update = WIZ_STEPS[step];

  const verhuurPct = Math.round(((d.verhuurd + d.commercieel) / d.units) * 100);
  const staatssteun = verhuurPct > 10;
  const last = step === WIZ_STEPS.length - 1;

  const go = (i) => { setStep(i); window.__scrollTop && window.__scrollTop(); };

  return (
    <div className="wiz">
      {/* ── Left rail ── */}
      <div className="wnav">
        <div className="wtitle">Intake · 10 min tot routekaart</div>
        <div className="wbar"><i style={{ width: ((step) / (WIZ_STEPS.length - 1) * 100) + "%" }}></i></div>
        {WIZ_STEPS.map((s, i) => (
          <button key={s.key} className={"wstep" + (i === step ? " on" : "") + (i < step ? " done" : "")} onClick={() => go(i)}>
            <span className="wn">{i < step ? "✓" : i + 1}</span>
            <span className="wl">{s.title}<small>{s.sub}</small></span>
          </button>
        ))}
      </div>

      {/* ── Content ── */}
      <div>
        <div className="card">
          <div className="card-head">
            <h3><Icon name={update.icon} size={16} />{update.title}</h3>
            <span className="meta">Stap {step + 1} van {WIZ_STEPS.length}</span>
          </div>
          <div className="card-body">

            {update.key === "vve" && (
              <div className="form">
                <FRow label="VvE-naam" required hint="Officiele naam volgens aangeleverde of later te verifiëren KvK-bron.">
                  <input className="ti" value={d.naam} onChange={(e) => set("naam", e.target.value)} />
                  <Src label="demo-bron · KvK-uittreksel" kind="kvk" />
                </FRow>
                <FRow label="KvK-nummer" required>
                  <input className="ti short mono" value={d.kvk} onChange={(e) => set("kvk", e.target.value)} />
                  <Src label="demo-bron · KvK-uittreksel" kind="kvk" />
                </FRow>
                <FRow label="Adres" required hint="Demo gebruikt deterministische referentiedata; live PDOK-verificatie komt pas na echte integratie.">
                  <input className="ti" value={d.adres} onChange={(e) => set("adres", e.target.value)} />
                  <Src label="demo-bron · PDOK referentie" kind="pdok" />
                </FRow>
                <FRow label="Gemeente" required hint="Bepaalt welke lokale regelingen worden meegewogen.">
                  <div className="fselect">
                    <Icon name="mapPin" size={14} />
                    <select value={d.gemeente} onChange={(e) => set("gemeente", e.target.value)}>
                      {["Den Haag", "Rotterdam", "Amsterdam", "Utrecht"].map((g) => <option key={g}>{g}</option>)}
                    </select>
                  </div>
                  <Src label="demo-bron · provincie afgeleid" kind="pdok" />
                </FRow>
                <FRow label="Projecttype" required>
                  <input className="ti" value={d.projecttype} onChange={(e) => set("projecttype", e.target.value)} />
                  <Src label="Handmatig (adviseur)" kind="manual" />
                </FRow>
              </div>
            )}

            {update.key === "omvang" && (
              <div className="form">
                <FRow label="Appartementsrechten" required hint="Moet consistent zijn met splitsingsakte, ledenlijst en ALV-presentie.">
                  <input className="ti short mono" type="number" value={d.units} onChange={(e) => set("units", +e.target.value)} />
                  <Src label="Splitsingsakte 1968" kind="doc" />
                </FRow>
                <FRow label="Eigenaarsmix" required hint="Verhouding bewoners, verhuurd en commercieel. Activeert routevoorwaarden.">
                  <div className="row gap12 wrap">
                    {[["bewoners", "Zelfbewoond"], ["verhuurd", "Verhuurd"], ["commercieel", "Commercieel"]].map(([k, l]) => (
                      <div key={k}>
                        <div className="fhint" style={{ marginTop: 0, marginBottom: 5 }}>{l}</div>
                        <input className="ti mono" style={{ width: 90 }} type="number" value={d[k]} onChange={(e) => set(k, +e.target.value)} />
                      </div>
                    ))}
                  </div>
                  <Src label="Ledenlijst" kind="doc" />
                  {staatssteun && (
                    <div className="banner warn" style={{ marginTop: 12 }}>
                      <Icon name="alert" size={17} style={{ flex: "0 0 auto", marginTop: 1 }} />
                      <div><div className="bt">Verhuur/commercieel {verhuurPct}% — Warmtefonds review</div>
                        <div className="bd">Commerciële ruimte blijft onder de 50%-grens, maar beperkingen en eventuele de-minimis-impact worden als reviewpunt toegevoegd.</div></div>
                    </div>
                  )}
                </FRow>
                <FRow label="Actieve VvE" hint="Bestuur, bankrekening en jaarlijkse vergadering aanwezig?">
                  <div className="rgroup">
                    <button className={"ropt" + (d.bestuur ? " on" : "")} onClick={() => set("bestuur", !d.bestuur)}>
                      <span className="rdot"></span>
                      <span><span className="rt">Bestuur & bankrekening aanwezig</span><span className="rd">KvK-bestuurders en VvE-rekening bevestigd</span></span>
                    </button>
                  </div>
                  <Src label="demo-bron · KvK + bankafschrift" kind="doc" />
                </FRow>
              </div>
            )}

            {update.key === "project" && (
              <div className="form">
                <FRow label="Maatregelen" required hint="Bepalen welke subsidie- en leenroutes in aanmerking komen.">
                  <div className="mchips">
                    {MAATREGELEN.map((m) => {
                      const on = d.maatregelen.includes(m);
                      return (
                        <button key={m} className={"mchip" + (on ? " on" : "")}
                          onClick={() => set("maatregelen", on ? d.maatregelen.filter((x) => x !== m) : [...d.maatregelen, m])}>
                          <span className="mc-box">{on && <Icon name="check" size={11} />}</span>{m}
                        </button>
                      );
                    })}
                  </div>
                </FRow>
                <FRow label="Uitvoeringstiming" required hint="Subsidies vereisen vaak aanvraag vóór opdrachtverstrekking.">
                  <div className="fselect">
                    <Icon name="clock" size={14} />
                    <select value={d.timing} onChange={(e) => set("timing", e.target.value)}>
                      <option value="lt6">Binnen 6 maanden</option>
                      <option value="6-12">6 – 12 maanden</option>
                      <option value="gt12">Langer dan 12 maanden</option>
                    </select>
                  </div>
                </FRow>
                <FRow label="Offerte aanwezig" hint="Een offerte maakt automatische extractie van projectkosten mogelijk.">
                  <div className="rgroup">
                    <button className={"ropt" + (d.offerte ? " on" : "")} onClick={() => set("offerte", !d.offerte)}>
                      <span className="rdot"></span>
                      <span><span className="rt">Ja — offerte van uitvoerder beschikbaar</span><span className="rd">Projectkosten worden geëxtraheerd en gemarkeerd voor review</span></span>
                    </button>
                  </div>
                </FRow>
              </div>
            )}

            {update.key === "financ" && (
              <div className="form">
                <FRow label="Projectkosten (raming)" required hint="Indicatieve totale investering inclusief btw.">
                  <div className="ti-eur"><span>€</span><input className="ti" value={d.kosten} onChange={(e) => set("kosten", e.target.value)} /></div>
                  {d.offerte ? <Src label="Offerte · 66% confidence" kind="doc" /> : <Src label="Handmatig (adviseur)" kind="manual" />}
                </FRow>
                <FRow label="Reservefonds" required hint="Beschikbare eigen middelen beïnvloeden de leenbehoefte.">
                  <div className="ti-eur"><span>€</span><input className="ti" value={d.reserve} onChange={(e) => set("reserve", e.target.value)} /></div>
                  <Src label="Jaarrekening 2024" kind="doc" />
                </FRow>
                <FRow label="MJOP aanwezig" required hint="Een geldig meerjarenonderhoudsplan is voorwaarde voor de meeste leenroutes.">
                  <div className="rgroup">
                    <button className={"ropt" + (d.mjop ? " on" : "")} onClick={() => set("mjop", !d.mjop)}>
                      <span className="rdot"></span>
                      <span><span className="rt">Ja — MJOP 2026–2046 aanwezig</span><span className="rd">Vastgesteld 18 feb 2026</span></span>
                    </button>
                  </div>
                  <Src label="MJOP 2026–2046" kind="doc" />
                </FRow>
                <FRow label="Gewenste financieringsvorm" hint="Sturt de routekaart; blijft een objectieve kandidatenlijst.">
                  <div className="rgroup">
                    {[["lening", "Lening", "VvE-financiering via fonds of bank"], ["subsidie", "Subsidie", "Eerst subsidies maximaliseren"], ["mix", "Combinatie", "Subsidie + lening gestapeld"]].map(([k, t, dd]) => (
                      <button key={k} className={"ropt" + (d.financiering === k ? " on" : "")} onClick={() => set("financiering", k)}>
                        <span className="rdot"></span><span><span className="rt">{t}</span><span className="rd">{dd}</span></span>
                      </button>
                    ))}
                  </div>
                </FRow>
              </div>
            )}

            {update.key === "bevestig" && (
              <div>
                <div className="banner ink" style={{ marginBottom: 18 }}>
                  <Icon name="shield" size={19} style={{ flex: "0 0 auto", marginTop: 1, color: "var(--tge-emerald)" }} />
                  <div><div className="bt">Gate G2 · Intake-bevestiging</div>
                    <div className="bd">Jij bevestigt de canonieke kerngegevens. Daarna evalueert de route-engine de bronregels en genereert de routekaart — binnen 10 minuten.</div></div>
                </div>

                <div className="form" style={{ marginBottom: 6 }}>
                  {[
                    ["VvE", d.naam, "demo KvK", "kvk"], ["Adres", d.adres, "demo PDOK", "pdok"],
                    ["Gemeente", d.gemeente, "demo PDOK", "pdok"], ["Appartementsrechten", d.units + " eenheden", "Splitsingsakte", "doc"],
                    ["Eigenaarsmix", `${d.bewoners} bewoond · ${d.verhuurd} verhuurd · ${d.commercieel} commercieel`, "Ledenlijst", "doc"],
                    ["Maatregelen", d.maatregelen.join(", ") || "—", "Handmatig", "manual"],
                    ["Projectkosten", "€ " + d.kosten, d.offerte ? "Offerte" : "Handmatig", d.offerte ? "doc" : "manual"],
                  ].map(([k, v, src, kind]) => (
                    <div className="sumrow" key={k}>
                      <span className="sk">{k}</span>
                      <span className="sv">{v}<span className={"srctag " + kind} style={{ marginTop: 0 }}><Icon name={kind === "doc" ? "fileText" : kind === "manual" ? "user" : "checkCircle"} size={11} />{src}</span></span>
                    </div>
                  ))}
                </div>

                {staatssteun && (
                  <div className="banner warn" style={{ marginTop: 14 }}>
                    <Icon name="flag" size={17} style={{ flex: "0 0 auto", marginTop: 1 }} />
                    <div><div className="bt">1 reviewpunt wordt aangemaakt</div>
                      <div className="bd">Verhuur/commercieel {verhuurPct}% → commerciële ruimte en eventuele de-minimis-toets toegevoegd aan het review center.</div></div>
                  </div>
                )}

                <hr className="divider" style={{ margin: "18px 0" }} />
                <div className="check-line" onClick={() => set("g2", !d.g2)}>
                  <span className={"cb" + (d.g2 ? " on" : "")}>{d.g2 && <Icon name="check" size={14} />}</span>
                  <span style={{ fontSize: 13.5 }}>Ik bevestig dat VvE, adres, gemeente, appartementsrechten en projecttype kloppen <span className="muted">(Gate G2)</span></span>
                </div>
              </div>
            )}

          </div>
        </div>

        {/* ── Footer nav ── */}
        <div className="wfoot">
          <button className="btn ghost" disabled={step === 0} onClick={() => go(step - 1)}>
            <Icon name="chevronRight" size={15} style={{ transform: "rotate(180deg)" }} />Vorige
          </button>
          <span className="wstepno">{step + 1} / {WIZ_STEPS.length}</span>
          {last ? (
            <button className="btn primary" disabled={!d.g2} onClick={() => onGoto(1)}>
              Bevestig & genereer routekaart<Icon name="route" size={15} />
            </button>
          ) : (
            <button className="btn primary" onClick={() => go(step + 1)}>Volgende<Icon name="arrowRight" size={15} /></button>
          )}
        </div>
      </div>
    </div>
  );
}

window.IntakeWizard = IntakeWizard;