/* AntragScreen — multi-step certification application form */

const AntragScreen = ({ onBack, onSubmit }) => {
  const [step, setStep] = React.useState(0);
  const [submitted, setSubmitted] = React.useState(false);
  const [data, setData] = React.useState({
    firma: "",
    inhaber: "",
    strasse: "",
    plz: "",
    ort: "",
    email: "",
    telefon: "",
    ustid: "",
    art: "bso-2011",
    geltungsbereich: "",
    mitarbeiter: "",
  });
  const set = (k, v) => setData(d => ({...d, [k]: v}));
  const az = React.useMemo(() => `DLG-${data.art.toUpperCase()}-2026-${Math.floor(Math.random()*9000+1000)}`, [data.art, submitted]);

  if (submitted) {
    return (
      <div className="dlg-antrag">
        <AntragStyles/>
        <div className="container--narrow" style={{padding:"64px 24px"}}>
          <Card padded={false} style={{padding:48,textAlign:"center"}}>
            <Eyebrow tone="gold">Antrag eingegangen</Eyebrow>
            <h1 style={{fontFamily:"var(--font-serif)",fontSize:36,fontWeight:700,color:"var(--dlg-navy-900)",margin:"16px 0 12px",letterSpacing:"-0.015em"}}>
              Vielen Dank für Ihren Antrag.
            </h1>
            <p style={{fontSize:16,color:"var(--fg-2)",margin:"0 0 28px",maxWidth:520,marginLeft:"auto",marginRight:"auto"}}>
              Wir haben Ihren Vorgang offiziell erfasst. Sie erhalten innerhalb von 5 Werktagen
              eine schriftliche Eingangs­bestätigung an <b>{data.email || "Ihre E-Mail-Adresse"}</b>.
            </p>
            <div style={{display:"inline-block",padding:"12px 20px",background:"var(--dlg-navy-050)",borderRadius:4,fontFamily:"var(--font-mono)",fontSize:14,color:"var(--dlg-navy-900)",marginBottom:28}}>
              Aktenzeichen: <b>{az}</b>
            </div>
            <div style={{display:"flex",gap:12,justifyContent:"center",flexWrap:"wrap"}}>
              <Button variant="primary" size="md" icon="arrowL" onClick={onBack}>Zurück zur Startseite</Button>
            </div>
          </Card>
        </div>
      </div>
    );
  }

  return (
    <div className="dlg-antrag" data-screen-label="Antrag">
      <AntragStyles/>
      <div className="container--narrow" style={{padding:"32px 24px"}}>
        <a className="dlg-antrag__back" href="#" onClick={(e)=>{e.preventDefault();onBack();}}>
          <Icon d={Icons.arrowL} size={14}/> Zurück zur Startseite
        </a>

        <header className="dlg-antrag__head">
          <Eyebrow tone="gold">Antrag auf Zertifizierung</Eyebrow>
          <h1>Antragsformular DLG-Z-2026</h1>
          <p>Bitte füllen Sie alle Pflichtfelder aus. Die Bearbeitungszeit beträgt ab Eingang ca. 5 Werktage.</p>
        </header>

        <div className="dlg-stepper">
          {["Betriebsdaten","Zertifizierungsart","Erklärungen","Abschluss"].map((label, i) => (
            <div key={i} className={`dlg-stepper__step${i===step?" is-active":""}${i<step?" is-done":""}`}>
              <div className="dlg-stepper__dot">{i<step ? <Icon d={Icons.check} size={12} stroke={3}/> : i+1}</div>
              <div className="dlg-stepper__l">{label}</div>
            </div>
          ))}
        </div>

        <Card padded={false} style={{padding:32}}>
          {step === 0 && (
            <div className="dlg-form-grid">
              <Field label="Firmenname / Inhaber:in" required>
                <input value={data.firma} onChange={e=>set("firma",e.target.value)} placeholder="z. B. Studio Beispiel GmbH"/>
              </Field>
              <Field label="Verantwortliche Person" required>
                <input value={data.inhaber} onChange={e=>set("inhaber",e.target.value)} placeholder="Vor- und Nachname"/>
              </Field>
              <Field label="Straße &amp; Hausnummer" required>
                <input value={data.strasse} onChange={e=>set("strasse",e.target.value)}/>
              </Field>
              <Field label="PLZ" required>
                <input value={data.plz} onChange={e=>set("plz",e.target.value)} inputMode="numeric"/>
              </Field>
              <Field label="Ort" required>
                <input value={data.ort} onChange={e=>set("ort",e.target.value)}/>
              </Field>
              <Field label="USt-IdNr." hint="Falls vorhanden.">
                <input value={data.ustid} onChange={e=>set("ustid",e.target.value)}/>
              </Field>
              <Field label="E-Mail" required>
                <input type="email" value={data.email} onChange={e=>set("email",e.target.value)}/>
              </Field>
              <Field label="Telefon">
                <input value={data.telefon} onChange={e=>set("telefon",e.target.value)}/>
              </Field>
            </div>
          )}
          {step === 1 && (
            <div className="dlg-form-grid">
              <Field label="Zertifizierungsart" required hint="Mehrfachwahl auf Antrag möglich.">
                <select value={data.art} onChange={e=>set("art",e.target.value)}>
                  <option value="bso-2011">BSO 2011 · Qualitätsbetrieb</option>
                  <option value="bso-2079">BSO 2079 · Deutsches Hygienesiegel</option>
                  <option value="iso">ISO-konforme Prozesszertifizierung</option>
                  <option value="azav">AZAV · Schulungsträger</option>
                </select>
              </Field>
              <Field label="Mitarbeiter:innen (Vollzeit-Äquivalente)">
                <input type="number" min="0" value={data.mitarbeiter} onChange={e=>set("mitarbeiter",e.target.value)}/>
              </Field>
              <div style={{gridColumn:"1/-1"}}>
                <Field label="Geltungsbereich (Tätigkeitsfelder)" required hint="Wird wortgetreu auf das Zertifikat übernommen.">
                  <textarea rows={3} value={data.geltungsbereich} onChange={e=>set("geltungsbereich",e.target.value)}
                            placeholder="z. B. Klassische Kosmetik, Fußpflege, apparative Anwendungen"/>
                </Field>
              </div>
              <div style={{gridColumn:"1/-1"}}>
                <Notice title="Gebühr">
                  Es fallen die in der <b>DLG-Gebühren­ordnung</b> ausgewiesenen Positionen an —
                  Antrags­gebühr <b>180,00 €</b>, Audit­tagessatz <b>850,00 €</b>, Zertifikat­ausstellung
                  und Reisekosten gesondert. Die genaue Kalkulation erhalten Sie nach formaler Prüfung
                  als verbindliches Angebot.
                </Notice>
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="dlg-form-grid">
              <div style={{gridColumn:"1/-1"}} className="dlg-checklist">
                {[
                  "Ich erkläre, die Grundsätze des Zulassungsverfahrens gelesen zu haben.",
                  "Ich bestätige meine persönliche Eignung und Zuverlässigkeit nach den Satzungs­bestimmungen.",
                  "Ich erkenne den Gerichtsstand Berlin als verbindlich an.",
                  "Ich bin damit einverstanden, dass das Audit unangekündigt erfolgen kann.",
                ].map((t, i) => (
                  <label key={i} className="dlg-chk">
                    <input type="checkbox" defaultChecked/>
                    <span>{t}</span>
                  </label>
                ))}
              </div>
              <div style={{gridColumn:"1/-1"}}>
                <Notice tone="warn" title="Hinweis · Wahrheitserklärung">
                  Falsche Angaben im Antrag berechtigen die DLG, das Zertifikat ohne Anspruch auf Rückerstattung
                  zurück­zuziehen.
                </Notice>
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="dlg-summary">
              <h3 style={{fontFamily:"var(--font-serif)",fontSize:22,margin:0,color:"var(--dlg-navy-900)"}}>Zusammenfassung</h3>
              <dl className="dlg-summary__dl">
                <div><dt>Antragsteller</dt><dd>{data.firma || "—"}</dd></div>
                <div><dt>Anschrift</dt><dd>{[data.strasse, [data.plz, data.ort].filter(Boolean).join(" ")].filter(Boolean).join(", ") || "—"}</dd></div>
                <div><dt>Verfahren</dt><dd>{data.art.toUpperCase()}</dd></div>
                <div><dt>Geltungsbereich</dt><dd>{data.geltungsbereich || "—"}</dd></div>
                <div><dt>Mitarbeiter</dt><dd>{data.mitarbeiter || "—"}</dd></div>
                <div><dt>Aktenzeichen (vorläufig)</dt><dd style={{fontFamily:"var(--font-mono)"}}>{az}</dd></div>
              </dl>
              <Notice tone="ok" title="Bereit zur Einreichung">
                Mit Klick auf „Antrag absenden" wird Ihr Vorgang offiziell erfasst.
                Sie erhalten innerhalb von 5 Werktagen eine Eingangsbestätigung an {data.email || "Ihre E-Mail-Adresse"}.
              </Notice>
            </div>
          )}

          <div className="dlg-antrag__footer">
            <Button variant="ghost" size="md" icon="arrowL"
                    onClick={() => step === 0 ? onBack() : setStep(step-1)}>
              {step === 0 ? "Abbrechen" : "Zurück"}
            </Button>
            {step < 3 && (
              <Button variant="primary" size="md" iconRight="arrowR" onClick={() => setStep(step+1)}>
                Weiter ({step+1} / 4)
              </Button>
            )}
            {step === 3 && (
              <Button variant="gold" size="md" icon="check" onClick={() => { setSubmitted(true); onSubmit && onSubmit(data); }}>
                Antrag absenden
              </Button>
            )}
          </div>
        </Card>
      </div>
    </div>
  );
};

const AntragStyles = () => (
  <style>{`
    .dlg-antrag { background: var(--dlg-navy-050); min-height: 100vh; padding-bottom: 64px; }
    .dlg-antrag__back { display: inline-flex; gap: 6px; align-items: center; color: var(--dlg-navy-700); font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 24px; }
    .dlg-antrag__back:hover { color: var(--dlg-navy-900); }
    .dlg-antrag__head { margin-bottom: 28px; }
    .dlg-antrag__head h1 { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: var(--dlg-navy-900); margin: 10px 0 6px; letter-spacing: -0.015em; }
    .dlg-antrag__head p { font-size: 15px; color: var(--fg-2); margin: 0; }

    .dlg-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; position: relative; }
    .dlg-stepper__step { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--border); background: #fff; }
    .dlg-stepper__step.is-active { border-color: var(--dlg-navy-700); }
    .dlg-stepper__step.is-done { background: var(--dlg-navy-050); }
    .dlg-stepper__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--dlg-ink-100); color: var(--fg-3); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); }
    .dlg-stepper__step.is-active .dlg-stepper__dot { background: var(--dlg-navy-700); color: #fff; }
    .dlg-stepper__step.is-done .dlg-stepper__dot { background: #2e7d4a; color: #fff; }
    .dlg-stepper__l { font-size: 13px; font-weight: 600; color: var(--dlg-navy-800); }

    .dlg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .dlg-checklist { display: grid; gap: 12px; }
    .dlg-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg); cursor: pointer; }
    .dlg-chk input { width: 18px; height: 18px; accent-color: var(--dlg-navy-700); margin-top: 1px; flex-shrink: 0; }

    .dlg-summary { display: grid; gap: 18px; }
    .dlg-summary__dl { display: grid; gap: 0; margin: 0; }
    .dlg-summary__dl > div { display: grid; grid-template-columns: 200px 1fr; padding: 10px 0; border-bottom: 1px dashed var(--border); }
    .dlg-summary__dl dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dlg-navy-700); margin: 0; }
    .dlg-summary__dl dd { margin: 0; font-size: 14px; color: var(--dlg-navy-900); }

    .dlg-antrag__footer { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
  `}</style>
);

Object.assign(window, { AntragScreen });