/* Powermieter — Screen 2: Registrierung (Stammdaten) */
function Screen2({ form, set, errors, onNext, onBack, device }) {
  const [meterUnknown, setMeterUnknown] = React.useState(form.zaehlerUnbekannt || false);
  const [upName, setUpName] = React.useState(null);
  const [meterHelp, setMeterHelp] = React.useState(false);

  return (
    <div className="pm-page">
      <div className="pm-page-inner rise">
        <div className="pm-cols">
          {/* MAIN FORM */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <header className="pm-pagehead">
              <h1 className="pm-pagehead-title">Ihre Angaben</h1>
              <p className="pm-pagehead-sub">Wir benötigen einige Angaben, um Ihren Stromvertrag korrekt vorzubereiten. Es wird noch <strong>kein Vertrag</strong> abgeschlossen.</p>
            </header>

            <Alert tone="info">
              <strong>Warum diese Daten?</strong> Mit Wohnungs- und Zählerdaten ordnen wir Sie dem richtigen Gebäudeanschluss zu und bereiten ein passendes Angebot vor. Pflichtfelder sind mit <span style={{ color: 'var(--accent)', fontWeight: 700 }}>*</span> markiert.
            </Alert>

            {/* A — Persönliche Daten */}
            <div className="card card-pad">
              <FormSection step="A" title="Persönliche Daten" desc="So erreichen wir Sie und stellen Ihren Vertrag aus.">
                <div className="pm-grid pm-grid-2">
                  <Field label="Vorname" required error={errors.vorname}><TextInput value={form.vorname} error={errors.vorname} onChange={e => set('vorname', e.target.value)} placeholder="Max" /></Field>
                  <Field label="Nachname" required error={errors.nachname}><TextInput value={form.nachname} error={errors.nachname} onChange={e => set('nachname', e.target.value)} placeholder="Mustermann" /></Field>
                  <Field label="Geburtsdatum" optional><TextInput type="date" value={form.geburt} onChange={e => set('geburt', e.target.value)} /></Field>
                  <Field label="Telefon" optional><TextInput type="tel" value={form.telefon} onChange={e => set('telefon', e.target.value)} placeholder="+49 …" /></Field>
                  <Field label="E-Mail" required error={errors.email}><div className="col-span-2"><TextInput type="email" value={form.email} error={errors.email} onChange={e => set('email', e.target.value)} placeholder="max@beispiel.de" /></div></Field>
                </div>
              </FormSection>
            </div>

            {/* B — Wohnungsdaten */}
            <div className="card card-pad">
              <FormSection step="B" title="Wohnungsdaten" desc="Damit wir Ihre Wohnung im Gebäude eindeutig zuordnen können.">
                <div className="pm-grid pm-grid-3">
                  <div className="col-span-2"><Field label="Straße" required error={errors.strasse}><TextInput value={form.strasse} error={errors.strasse} onChange={e => set('strasse', e.target.value)} placeholder="Musterstraße" /></Field></div>
                  <Field label="Hausnummer" required error={errors.hausnr}><TextInput value={form.hausnr} error={errors.hausnr} onChange={e => set('hausnr', e.target.value)} placeholder="12" /></Field>
                  <Field label="PLZ" required error={errors.plz}><TextInput value={form.plz} error={errors.plz} onChange={e => set('plz', e.target.value)} placeholder="10115" inputMode="numeric" /></Field>
                  <div className="col-span-2"><Field label="Ort" required error={errors.ort}><TextInput value={form.ort} error={errors.ort} onChange={e => set('ort', e.target.value)} placeholder="Berlin" /></Field></div>
                  <Field label="Gebäudeteil / Aufgang" optional><TextInput value={form.aufgang} onChange={e => set('aufgang', e.target.value)} placeholder="Haus B" /></Field>
                  <Field label="Etage" optional><TextInput value={form.etage} onChange={e => set('etage', e.target.value)} placeholder="2. OG" /></Field>
                  <Field label="Wohnungsnummer" optional><TextInput value={form.whgnr} onChange={e => set('whgnr', e.target.value)} placeholder="W04" /></Field>
                  <div className="col-span-3"><Field label="Name am Klingelschild" optional hint="Hilft uns bei der Zuordnung, falls Ihr Name abweicht."><TextInput value={form.klingel} onChange={e => set('klingel', e.target.value)} placeholder="Mustermann" /></Field></div>
                </div>
              </FormSection>
            </div>

            {/* C — Aktueller Stromanschluss */}
            <div className="card card-pad">
              <FormSection step="C" title="Aktueller Stromanschluss" desc="Für einen reibungslosen Wechsel ohne Versorgungslücke.">
                <div className="pm-grid pm-grid-2">
                  <Field label="Aktueller Stromanbieter" optional><TextInput value={form.anbieter} onChange={e => set('anbieter', e.target.value)} placeholder="z. B. Stadtwerke" /></Field>
                  <Field label="Kundennummer" optional><TextInput value={form.kundennr} onChange={e => set('kundennr', e.target.value)} placeholder="Bei Ihrem Anbieter" /></Field>
                  <Field label="Zählernummer" required={!meterUnknown} error={errors.zaehler}
                    tip="Die Zählernummer steht direkt auf Ihrem Stromzähler, meist als Nummer unter einem Strichcode.">
                    <TextInput value={form.zaehler} error={errors.zaehler} disabled={meterUnknown}
                      onChange={e => set('zaehler', e.target.value)} placeholder="1 ESY 0123 4567" />
                    <button type="button" className="pm-fieldhelp" onClick={() => setMeterHelp(true)}><I.help size={14} /> Wo finde ich meine Zählernummer?</button>
                  </Field>
                  <Field label="Jahresverbrauch" optional affix="kWh"
                    tip="Steht auf Ihrer letzten Stromrechnung. Schätzwert genügt — eine 2-Personen-Wohnung liegt oft bei ca. 2.500 kWh.">
                    <TextInput affix="kWh" inputMode="numeric" value={form.verbrauch} onChange={e => set('verbrauch', e.target.value)} placeholder="2.500" />
                  </Field>
                </div>

                <label className="pm-inline-toggle" data-on={meterUnknown ? 'true' : 'false'}>
                  <input type="checkbox" checked={meterUnknown} onChange={e => { setMeterUnknown(e.target.checked); set('zaehlerUnbekannt', e.target.checked); }} style={{ position: 'absolute', opacity: 0 }} />
                  <span className="pm-inline-toggle-box"><I.check sw={3} /></span>
                  Ich kenne meine Zählernummer nicht — wir klären das gemeinsam später.
                </label>

                <Field label="Gewünschter Lieferbeginn" required error={errors.lieferbeginn} hint="Frühestmöglich oder zu einem Wunschtermin — wir richten uns nach Kündigungsfristen.">
                  <div className="pm-grid pm-grid-2">
                    <Select value={form.lieferbeginnTyp} onChange={e => set('lieferbeginnTyp', e.target.value)}>
                      <option value="fruehest">Schnellstmöglich</option>
                      <option value="termin">Zum Wunschtermin</option>
                      <option value="einzug">Ab Einzugsdatum</option>
                    </Select>
                    <TextInput type="date" value={form.lieferbeginn} error={errors.lieferbeginn} onChange={e => set('lieferbeginn', e.target.value)} disabled={form.lieferbeginnTyp === 'fruehest'} />
                  </div>
                </Field>

                {/* Upload */}
                <Field label="Foto vom Zähler oder Stromrechnung" optional hint="Beschleunigt die Prüfung. JPG, PNG oder PDF — max. 10 MB.">
                  <label className={'pm-upload' + (upName ? ' pm-upload-done' : '')}>
                    <input type="file" accept="image/*,application/pdf" style={{ display: 'none' }} onChange={e => setUpName(e.target.files?.[0]?.name || 'Datei hochgeladen')} />
                    <span className="pm-upload-ic">{upName ? <I.check /> : <I.camera />}</span>
                    {upName
                      ? <><div className="pm-upload-title" style={{ color: 'var(--positive)' }}>{upName}</div><div className="pm-upload-sub">Tippen zum Ersetzen</div></>
                      : <><div className="pm-upload-title">Datei auswählen oder hierher ziehen</div><div className="pm-upload-sub">Zählerstand & Zählernummer sollten lesbar sein</div></>}
                  </label>
                </Field>
              </FormSection>
            </div>

            {/* D — Zustimmung */}
            <div className="card card-pad">
              <FormSection step="D" title="Datenschutz & Einwilligung">
                <Checkbox checked={form.dsgvo} onChange={v => set('dsgvo', v)}>
                  Ich habe den <a href="#" className="pm-link">Datenschutzhinweis</a> gelesen und stimme der Verarbeitung meiner Daten zur Vertragsvorbereitung zu.
                </Checkbox>
                {errors.dsgvo && <span className="field-err"><I.alert size={14} />{errors.dsgvo}</span>}
                <Checkbox checked={form.digital} onChange={v => set('digital', v)}>
                  Ich bin mit der <strong>digitalen Kommunikation</strong> (E-Mail, Portal) einverstanden.
                </Checkbox>
                <Alert tone="info"><I.info size={18} /> Mit dem Absenden wird <strong>noch kein Vertrag</strong> abgeschlossen. Wir erfassen lediglich Ihre Daten, um Ihnen ein konkretes Angebot vorzubereiten.</Alert>
              </FormSection>
            </div>

            <div className="pm-formnav">
              <Button variant="ghost" icon={<I.arrowL />} onClick={onBack}>Zurück</Button>
              <Button size="lg" iconRight={<I.arrowR />} onClick={onNext}>Daten prüfen & weiter</Button>
            </div>
          </div>

          {/* RAIL */}
          {device !== 'mobile' && (
            <aside className="pm-rail">
              <div className="card card-pad">
                <div className="pm-rail-title"><I.shield size={18} /> Sicher & nachvollziehbar</div>
                <ul className="pm-rail-list">
                  <li><I.check size={16} /> Verschlüsselte Übertragung</li>
                  <li><I.check size={16} /> Keine Weitergabe an Dritte</li>
                  <li><I.check size={16} /> Jederzeit widerrufbar</li>
                </ul>
                <hr className="hr" style={{ margin: '16px 0' }} />
                <div className="pm-rail-q"><I.help size={17} /><div><strong>Frage zu einem Feld?</strong><br />Die <I.help size={13} style={{ display: 'inline', verticalAlign: '-2px', color: 'var(--accent)' }} />-Symbole erklären jedes Feld. Oder schreiben Sie an <a href="#" className="pm-link">hilfe@powermieter.de</a>.</div></div>
              </div>
              <div className="card card-pad pm-rail-save">
                <I.clock size={18} />
                <div><strong>Sie können pausieren.</strong><br />Ihre Eingaben werden gespeichert. Über den Link in Ihrer E-Mail setzen Sie jederzeit fort.</div>
              </div>
            </aside>
          )}
        </div>
      </div>
      {meterHelp && <MeterNumberHelpModal onClose={() => setMeterHelp(false)} />}
    </div>
  );
}

Object.assign(window, { Screen2 });