/* Powermieter — Vertrags-Wizard (Overlay, Hausverwaltung) */
const WZ_STEPS = [
  { n: 1, label: 'Modell',     icon: 'grid' },
  { n: 2, label: 'Parteien',   icon: 'users' },
  { n: 3, label: 'Tarif',      icon: 'wallet' },
  { n: 4, label: 'Dokumente',  icon: 'doc' },
  { n: 5, label: 'Signatur',   icon: 'signature' },
  { n: 6, label: 'Status',     icon: 'chart' },
];

function ContractWizard({ model, setModel, unit, onClose }) {
  const [step, setStep] = React.useState(unit ? 2 : 1);
  const [m, setM] = React.useState(model);
  const [gen, setGen] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const docs = unitDocs(unit || { status: 'entwurf', missing: [], docVer: 'v2.1' }, m);
  const title = unit ? `${unit.whg} · ${unit.name}` : 'Neuer Vertrag · Objektweit';

  const next = () => setStep(s => Math.min(6, s + 1));
  const back = () => setStep(s => Math.max(1, s - 1));

  return (
    <div className="pm-wz-scrim">
      <div className="pm-wz">
        <header className="pm-wz-top">
          <div>
            <div className="pm-wz-ey">Vertrags-Wizard</div>
            <h2 className="pm-wz-title">{title}</h2>
          </div>
          <button className="pm-iconbtn" onClick={onClose}><I.x size={18} /></button>
        </header>

        <div className="pm-wz-steps">
          {WZ_STEPS.map((s, i) => (
            <React.Fragment key={s.n}>
              <button className="pm-wz-step" data-state={s.n === step ? 'active' : s.n < step ? 'done' : 'todo'} onClick={() => s.n < step && setStep(s.n)}>
                <span className="pm-wz-step-dot">{s.n < step ? <I.check size={15} /> : (I[s.icon] || I.dot)({ size: 15 })}</span>
                <span className="pm-wz-step-l">{s.label}</span>
              </button>
              {i < WZ_STEPS.length - 1 && <span className="pm-wz-line" data-done={s.n < step ? 'true' : 'false'} />}
            </React.Fragment>
          ))}
        </div>

        <div className="pm-wz-body thin-scroll">
          {step === 1 && (
            <div className="pm-wz-pane">
              <h3 className="pm-wz-h">Vertragsmodell wählen</h3>
              <p className="pm-wz-p">Das Modell bestimmt automatisch die erzeugte Vertragsstrecke. Mieterstrom (§ 42a) und gGV (§ 42b) sind rechtlich getrennt.</p>
              <div className="pm-wz-models">
                {MODELL_ORDER.map(id => {
                  const v = VERTRAGSMODELLE[id];
                  return (
                    <button key={id} className="pm-wz-model" data-on={m === id ? 'true' : 'false'} onClick={() => setM(id)}>
                      <div className="pm-wz-model-top"><b>{v.label}</b><span className="chip">{v.legal}</span></div>
                      <p>{v.desc}</p>
                      <span className="pm-wz-model-check">{m === id ? <I.check size={16} /> : null}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="pm-wz-pane">
              <h3 className="pm-wz-h">Vertragsparteien prüfen</h3>
              <p className="pm-wz-p">Pflichtdaten auf Legal-Entity-Ebene — nicht auf Gebäude-Ebene.</p>
              <div className="pm-wz-grid">
                <div className="pm-wz-party">
                  <div className="pm-wz-party-h"><I.building size={16} /> Betreiber / Legal Entity</div>
                  {[['Name', LEGAL_ENTITY.name], ['Rechtsform', LEGAL_ENTITY.form], ['Steuernummer', LEGAL_ENTITY.steuernr], ['IBAN', LEGAL_ENTITY.iban], ['Ansprechpartner', LEGAL_ENTITY.ansprech], ['Rolle', LEGAL_ENTITY.rolle]].map(([k, v]) => (
                    <div className="pm-review-row" key={k}><span className="pm-review-k">{k}</span><span className="pm-review-v mono" style={{ fontFamily: k === 'IBAN' || k === 'Steuernummer' ? 'var(--font-mono)' : 'inherit' }}>{v}</span></div>
                  ))}
                </div>
                <div className="pm-wz-party">
                  <div className="pm-wz-party-h"><I.home size={16} /> Objekt & Teilnehmer</div>
                  {[['Objekt', `${OBJEKT.name}, ${OBJEKT.plz}`], ['Wohneinheiten', `${OBJEKT.we} · ${OBJEKT.aufgaenge} Aufgänge`], ['Zählpunkte', String(OBJEKT.zaehlpunkte)], ['Messkonzept', OBJEKT.messkonzept], ['Abrechnung', OBJEKT.abrechnung], ['Teilnehmer', unit ? `${unit.name} (${unit.whg})` : 'Alle bewohnten Einheiten']].map(([k, v]) => (
                    <div className="pm-review-row" key={k}><span className="pm-review-k">{k}</span><span className="pm-review-v">{v}</span></div>
                  ))}
                </div>
              </div>
              {unit && unit.missing && unit.missing.length > 0 && <Alert tone="warn"><strong>Noch offen:</strong> {unit.missing.join(', ')} — vor dem Versand zu ergänzen.</Alert>}
            </div>
          )}

          {step === 3 && (
            <div className="pm-wz-pane">
              <h3 className="pm-wz-h">Tarif auswählen</h3>
              <p className="pm-wz-p">Tarifversion wird beim Start eingefroren (<span className="mono">contract_tariff_versions</span>).</p>
              <div className="pm-wz-tariffs">
                {[
                  { n: 'Powermieter Lokalstrom', ap: '28,9', gp: '8,90', solar: '73%', on: true },
                  { n: 'Powermieter Lokalstrom Plus', ap: '27,5', gp: '11,90', solar: '90%', on: false },
                ].map(t => (
                  <div key={t.n} className="pm-wz-tariff" data-on={t.on ? 'true' : 'false'}>
                    <div className="pm-wz-tariff-h"><b>{t.n}</b>{t.on && <span className="chip chip-accent"><I.check size={12} /> gewählt</span>}</div>
                    <div className="pm-wz-tariff-price"><b className="tnum">{t.ap}</b> ct/kWh · GP {t.gp} €/Mon.</div>
                    <span className="chip"><I.leaf size={12} /> {t.solar} Solar</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="pm-wz-pane">
              <h3 className="pm-wz-h">Dokumente generieren</h3>
              <p className="pm-wz-p">Aus Templates werden versionierte PDF-/HTML-Dokumente erzeugt — je mit Template-ID, Objekt- & Einheitenbezug.</p>
              {!gen
                ? <Button icon={<I.refresh size={16} />} onClick={() => setGen(true)}>{docs.length} Dokumente jetzt erzeugen</Button>
                : <div className="pm-doclist">
                    {docs.map((d, i) => (
                      <div className="pm-docrow" key={i} style={{ animationDelay: (i * 0.06) + 's' }}>
                        <span className="pm-docrow-ic" data-tone="positive"><I.check size={15} /></span>
                        <div className="pm-docrow-main"><div className="pm-docrow-name">{d.name}</div><div className="pm-docrow-meta"><span className="mono">PM-{d.code}-{m.slice(0,3).toUpperCase()}</span> · v2.1 generiert</div></div>
                        <span className="pm-docstatus pm-docstatus-positive">Generiert</span>
                      </div>
                    ))}
                  </div>}
            </div>
          )}

          {step === 5 && (
            <div className="pm-wz-pane">
              <h3 className="pm-wz-h">Signatur versenden</h3>
              <p className="pm-wz-p">Versand per E-Mail-Link. MVP: digitale Zustimmung / einfacher Signatur-Flow. Später: eIDAS-Signatur.</p>
              <div className="pm-wz-send">
                <div className="pm-wz-send-ic">{sent ? <I.check size={28} /> : <I.send size={26} />}</div>
                <div style={{ flex: 1 }}>
                  <div className="pm-wz-send-t">{sent ? 'Unterlagen versendet' : 'Bereit zum Versand'}</div>
                  <div className="pm-wz-send-s">{sent ? `An ${unit ? unit.name : 'alle Teilnehmer'} versendet — Status wechselt auf „Versendet“.` : `Empfänger: ${unit ? unit.name : 'alle bewohnten Einheiten'}. Frist 14 Tage Widerruf inklusive.`}</div>
                </div>
                {!sent && <Button onClick={() => setSent(true)} icon={<I.send size={15} />}>Versenden</Button>}
              </div>
            </div>
          )}

          {step === 6 && (
            <div className="pm-wz-pane">
              <h3 className="pm-wz-h">Status verfolgen</h3>
              <p className="pm-wz-p">Jeder Vertrag durchläuft revisionssicher die Statuskette. Sichtbar im Cockpit & Audit-Log.</p>
              <div className="pm-wz-track">
                {['Entwurf', 'Daten geprüft', 'Versendet', 'Angesehen', 'Unterzeichnet', 'Gegengezeichnet', 'Aktiv'].map((s, i) => (
                  <div className="pm-wz-track-row" data-state={i <= 2 ? 'done' : i === 3 ? 'active' : 'todo'} key={s}>
                    <span className="pm-wz-track-dot">{i <= 2 ? <I.check size={13} /> : i + 1}</span>
                    <span>{s}</span>
                    {i === 3 && <span className="chip chip-accent" style={{ marginLeft: 'auto', padding: '3px 9px', fontSize: 11 }}>aktuell</span>}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <footer className="pm-wz-foot">
          <Button variant="ghost" icon={<I.arrowL />} onClick={step === 1 ? onClose : back}>{step === 1 ? 'Abbrechen' : 'Zurück'}</Button>
          <span className="pm-wz-foot-n">Schritt {step} / 6</span>
          {step < 6
            ? <Button iconRight={<I.arrowR />} onClick={() => { if (step === 1) setModel && setModel(m); next(); }}>Weiter</Button>
            : <Button icon={<I.check size={16} />} onClick={onClose}>Fertig</Button>}
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { ContractWizard });