/* Powermieter — Screen 3: Vertragsabschluss */
const TARIF = { arbeitspreis: 28.9, grundpreis: 8.90, gv_arbeit: 36.5, gv_grund: 11.90, laufzeit: '12 Monate', kuendigung: '1 Monat', solar: 73 };

function eur(n) { return n.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }

function Screen3({ form, set, errors, onNext, onBack, device, model = 'mieterstrom', tweaks = {} }) {
  const mobile = device === 'mobile';
  const mdl = VERTRAGSMODELLE[model] || VERTRAGSMODELLE.mieterstrom;
  const [iban, setIban] = React.useState('');
  const [sepaOk, setSepaOk] = React.useState(false);
  const verbrauch = parseInt(String(form.verbrauch).replace(/\D/g, '')) || 2500;
  const jahrPM = verbrauch * TARIF.arbeitspreis / 100 + 12 * TARIF.grundpreis;
  const jahrGV = verbrauch * TARIF.gv_arbeit / 100 + 12 * TARIF.gv_grund;
  const ersparnis = Math.max(0, Math.round((jahrGV - jahrPM) / 5) * 5);
  const name = [form.vorname, form.nachname].filter(Boolean).join(' ') || 'Max Mustermann';
  const adr = [form.strasse + ' ' + form.hausnr, [form.plz, form.ort].filter(Boolean).join(' ')].filter(s => s.trim()).join(', ') || 'Musterstraße 12, 10115 Berlin';
  const lb = form.lieferbeginnTyp === 'fruehest' || !form.lieferbeginn ? 'Schnellstmöglich' : new Date(form.lieferbeginn).toLocaleDateString('de-DE');
  const [codeMode, setCodeMode] = React.useState('code');
  const [code, setCode] = React.useState(['', '', '', '', '', '']);
  const [sig, setSig] = React.useState('');
  const [signOpen, setSignOpen] = React.useState(false);
  const canSign = form.v_agb && form.v_widerruf && form.v_digital;
  const openSign = () => { if (canSign) setSignOpen(true); else onNext(); };

  const Tariff = (
    <div className="pm-tariff">
      <div className="pm-tariff-top">
        <div className="pm-tariff-name">Powermieter Lokalstrom</div>
        <div className="pm-tariff-price"><b className="tnum">{eur(TARIF.arbeitspreis).replace(',00','')}</b><span>ct/kWh · Arbeitspreis</span></div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14, position: 'relative', flexWrap: 'wrap' }}>
          <span className="chip" style={{ background: '#ffffff1a', color: '#EAF1F8', border: '1px solid #ffffff2a' }}><I.leaf size={13} /> {TARIF.solar}% Solar</span>
          <span className="chip" style={{ background: '#ffffff1a', color: '#EAF1F8', border: '1px solid #ffffff2a' }}><I.plug size={13} /> Reststrom inkl.</span>
        </div>
      </div>
      <div className="pm-tariff-rows">
        <div className="pm-trow"><span className="pm-trow-k"><I.wallet size={16} />Grundpreis</span><span className="pm-trow-v">{eur(TARIF.grundpreis)} € / Monat</span></div>
        <div className="pm-trow"><span className="pm-trow-k"><I.calendar size={16} />Vertragslaufzeit</span><span className="pm-trow-v">{TARIF.laufzeit}</span></div>
        <div className="pm-trow"><span className="pm-trow-k"><I.clock size={16} />Kündigungsfrist</span><span className="pm-trow-v">{TARIF.kuendigung}</span></div>
        <div className="pm-trow"><span className="pm-trow-k"><I.bolt size={16} />Lieferbeginn</span><span className="pm-trow-v">{lb}</span></div>
        <div className="pm-trow"><span className="pm-trow-k"><I.receipt size={16} />Abrechnung</span><span className="pm-trow-v">Monatlich</span></div>
      </div>
    </div>
  );

  const Savings = (
    <div className="pm-savings">
      <div>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--positive)', textTransform: 'uppercase', letterSpacing: '.05em' }}>Ihr Vorteil pro Jahr</div>
        <div style={{ fontSize: 12.5, color: 'var(--text-2)', marginTop: 4, lineHeight: 1.4 }}>Gegenüber dem Grundversorgungstarif bei {verbrauch.toLocaleString('de-DE')} kWh/Jahr.</div>
      </div>
      <div style={{ textAlign: 'right', flex: 'none' }}>
        <div className="pm-savings-big tnum">≈ {ersparnis} €</div>
        <div style={{ fontSize: 12, color: 'var(--text-3)' }}>{eur(jahrPM)} € statt {eur(jahrGV)} €</div>
      </div>
    </div>
  );

  return (
    <div className="pm-page">
      <div className="pm-page-inner rise">
        <header className="pm-pagehead" style={{ marginBottom: 22 }}>
          <h1 className="pm-pagehead-title">Ihr Vertrag im Überblick</h1>
          <p className="pm-pagehead-sub">Prüfen Sie alle Angaben in Ruhe. Es entstehen <strong>keine versteckten Kosten</strong>. Erst mit Ihrer Bestätigung wird der Vertrag wirksam.</p>
        </header>

        <div className="pm-prepared">
          <span className="pm-prepared-ic"><I.building size={20} /></span>
          <div>
            <div className="pm-prepared-t">Ihre Wohnung wurde für Powermieter vorbereitet</div>
            <div className="pm-prepared-s">Ihre Hausverwaltung hat <strong>{OBJEKT.name}</strong> für <strong>{mdl.label}</strong> ({mdl.legal}) freigegeben. Sie bestätigen nur noch Ihre Teilnahme — freiwillig und jederzeit kündbar.</div>
          </div>
          <span className={'chip chip-' + (mdl.tone === 'gray' ? '' : mdl.tone)}>{mdl.kurz}</span>
        </div>

        <div className="pm-cols">
          {/* MAIN */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {/* Mobile-only tariff + savings on top */}
            {mobile && <>{Tariff}{Savings}</>}

            {/* Review summary */}
            <div className="card card-pad">
              <div className="pm-card-head">
                <h3 className="pm-card-title"><I.user size={18} /> Ihre Daten</h3>
                <button className="pm-link pm-edit" onClick={onBack}>Bearbeiten</button>
              </div>
              <div className="pm-grid pm-grid-2" style={{ gap: 0, rowGap: 0 }}>
                <div className="pm-review">
                  <div className="pm-review-row"><span className="pm-review-k">Name</span><span className="pm-review-v">{name}</span></div>
                  <div className="pm-review-row"><span className="pm-review-k">E-Mail</span><span className="pm-review-v">{form.email || 'max@beispiel.de'}</span></div>
                  <div className="pm-review-row"><span className="pm-review-k">Adresse</span><span className="pm-review-v">{adr}</span></div>
                </div>
                <div className="pm-review">
                  <div className="pm-review-row"><span className="pm-review-k">Zählernummer</span><span className="pm-review-v">{form.zaehlerUnbekannt ? 'Wird ermittelt' : (form.zaehler || '1 ESY 0123 4567')}</span></div>
                  <div className="pm-review-row"><span className="pm-review-k">Jahresverbrauch</span><span className="pm-review-v">{verbrauch.toLocaleString('de-DE')} kWh</span></div>
                  <div className="pm-review-row"><span className="pm-review-k">Lieferbeginn</span><span className="pm-review-v">{lb}</span></div>
                </div>
              </div>
            </div>

            {/* Animated savings comparison */}
            <SavingsComparison gv={jahrGV} pm={jahrPM} ersparnis={ersparnis} verbrauch={verbrauch} />

            {/* Vorteilsbox */}
            <div className="card card-pad pm-vorteil">
              <h3 className="pm-card-title" style={{ marginBottom: 14 }}><I.leaf size={18} /> Ihr Vorteil mit Powermieter</h3>
              <ul className="pm-vorteil-list">
                <li><span className="pm-vorteil-ic"><I.sun2 size={16} /></span>Sie nutzen lokal erzeugten Solarstrom direkt aus Ihrem Gebäude.</li>
                <li><span className="pm-vorteil-ic"><I.receipt size={16} /></span>Sie erhalten eine transparente, digitale Abrechnung — monatlich nachvollziehbar.</li>
                <li><span className="pm-vorteil-ic"><I.shield size={16} /></span>Ihre Versorgung bleibt jederzeit gesichert, auch wenn die Sonne nicht scheint.</li>
                <li><span className="pm-vorteil-ic"><I.leaf size={16} /></span>Sie unterstützen die Energiewende direkt in Ihrem eigenen Haus.</li>
                <li><span className="pm-vorteil-ic"><I.chart size={16} /></span>Sie sehen Ihren Verbrauch und Solaranteil später jederzeit im Portal.</li>
              </ul>
            </div>

            {/* Legal accordion */}
            <div className="card card-pad" style={{ paddingTop: 6, paddingBottom: 6 }}>
              <div className="pm-card-head" style={{ padding: '16px 0 4px' }}>
                <h3 className="pm-card-title"><I.doc size={18} /> Vertragsdokumente</h3>
                <span className="chip"><I.download size={13} /> Alle als PDF</span>
              </div>
              {[
                ['Allgemeine Geschäftsbedingungen (AGB)', 'Die vollständigen AGB regeln Rechte und Pflichten beider Seiten. Sie können das Dokument jederzeit als PDF herunterladen und in Ruhe lesen.'],
                [model === 'ggv' ? 'Teilnahme- & Verteilvereinbarung (gGV)' : 'Stromliefervertrag', model === 'ggv' ? 'Regelt Ihre Teilnahme an der gemeinschaftlichen Gebäudeversorgung (§ 42b EnWG) und die Verteilung des lokal erzeugten Stroms — ohne separaten Liefervertrag.' : 'Hier sind Tarif, Laufzeit, Preise und Lieferbedingungen verbindlich festgehalten — genau so, wie oben in der Tarifkarte angezeigt.'],
                ['Preisblatt', `Arbeitspreis ${eur(TARIF.arbeitspreis).replace(',00','')} ct/kWh, Grundpreis ${eur(TARIF.grundpreis)} € pro Monat. Alle Preise inkl. Steuern und Abgaben. Keine zusätzlichen Gebühren.`],
                ['Widerrufsbelehrung', 'Sie können diesen Vertrag innerhalb von 14 Tagen ohne Angabe von Gründen in Textform widerrufen. Die Frist beginnt mit Vertragsabschluss.'],
                ['Datenschutzinformation', 'Wir verarbeiten Ihre Daten ausschließlich zur Vertragserfüllung. Keine Weitergabe an Dritte zu Werbezwecken.'],
              ].map(([q, a], i) => <AccordionItem key={i} q={q}>{a}</AccordionItem>)}
            </div>

            {/* Consent checkboxes */}
            <div className="card card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <h3 className="pm-card-title" style={{ marginBottom: 2 }}><I.shield size={18} /> Ihre Bestätigung</h3>
              <div className={'pm-consentbox' + (errors.v_agb ? ' pm-consentbox-err' : '')}>
                <Checkbox checked={form.v_agb} onChange={v => set('v_agb', v)}>Ich akzeptiere die <a href="#" className="pm-link">Vertragsbedingungen</a> und das <a href="#" className="pm-link">Preisblatt</a>.</Checkbox>
              </div>
              <div className={'pm-consentbox' + (errors.v_widerruf ? ' pm-consentbox-err' : '')}>
                <Checkbox checked={form.v_widerruf} onChange={v => set('v_widerruf', v)}>Ich habe die <a href="#" className="pm-link">Widerrufsbelehrung</a> gelesen und zur Kenntnis genommen.</Checkbox>
              </div>
              <div className={'pm-consentbox' + (errors.v_digital ? ' pm-consentbox-err' : '')}>
                <Checkbox checked={form.v_digital} onChange={v => set('v_digital', v)}>Ich stimme der digitalen Kommunikation und Vertragszustellung per E-Mail zu.</Checkbox>
              </div>
            </div>

            {/* SEPA mandate */}
            <div className="card card-pad">
              <div className="pm-card-head"><h3 className="pm-card-title"><I.wallet size={18} /> SEPA-Lastschriftmandat</h3>{sepaOk && <span className="chip chip-positive"><I.check size={12} /> erteilt</span>}</div>
              <p className="field-hint" style={{ marginBottom: 14 }}>Die monatliche Abrechnung wird bequem per SEPA-Lastschrift eingezogen. Sie können das Mandat jederzeit widerrufen.</p>
              <Field label="IBAN" htmlFor="s3-iban">
                <TextInput id="s3-iban" placeholder="DE00 0000 0000 0000 0000 00" value={iban} onChange={e => setIban(e.target.value)} style={{ fontFamily: 'var(--font-mono)' }} />
              </Field>
              <div style={{ marginTop: 12 }}>
                <Checkbox checked={sepaOk} onChange={setSepaOk}>Ich ermächtige Powermieter, Zahlungen per SEPA-Lastschrift einzuziehen, und weise mein Kreditinstitut an, die Lastschriften einzulösen.</Checkbox>
              </div>
            </div>

            {/* Digital abschließen — Aufruf des Signatur-Screens */}
            <div className="card card-pad pm-signcta">
              <span className="pm-signcta-ic"><I.signature size={22} /></span>
              <div className="pm-signcta-body">
                <h3 className="pm-signcta-h">Vertrag digital abschließen</h3>
                <p className="pm-signcta-s">Im nächsten Schritt unterzeichnen Sie {model === 'ggv' ? 'die Teilnahme- & Verteilvereinbarung' : 'Ihren Teilnahme- & Stromliefervertrag'} digital — per Unterschrift oder getipptem Namen. 14 Tage Widerrufsrecht inklusive.</p>
              </div>
            </div>

            {!mobile && (
              <div className="pm-formnav">
                <Button variant="ghost" icon={<I.arrowL />} onClick={onBack}>Zurück</Button>
                <Button size="lg" icon={<I.lock size={17} />} onClick={openSign}>Vertrag digital abschließen</Button>
              </div>
            )}
          </div>

          {/* RAIL */}
          {!mobile && (
            <aside className="pm-rail">
              {Tariff}
              {Savings}
              <Alert tone="positive"><strong>Versorgungssicherheit garantiert.</strong> Reicht der Solarstrom nicht aus, wird automatisch Reststrom ergänzt — ohne Unterbrechung.</Alert>
            </aside>
          )}
        </div>
      </div>

      {/* Mobile bottom CTA */}
      {mobile && (
        <div className="pm-bottomcta">
          <div className="pm-bottomcta-price"><small>Ihr Vorteil / Jahr</small><b style={{ color: 'var(--positive)' }}>≈ {ersparnis} €</b></div>
          <Button block icon={<I.lock size={17} />} onClick={openSign}>Vertrag abschließen</Button>
        </div>
      )}

      {signOpen && window.SigningScreen && (
        <SigningScreen form={form} model={model} onClose={() => setSignOpen(false)} onDone={() => { setSignOpen(false); onNext(); }} />
      )}
    </div>
  );
}

Object.assign(window, { Screen3 });