// Create-Anfrage modal — the 30-second flow.
const NewAnfrage = ({ open, onClose, onSubmit, bewohnerId }) => {
  const [step, setStep] = React.useState(0);
  const [bewohner, setBewohner] = React.useState(bewohnerId || "b1");
  const [typ, setTyp] = React.useState("Verlängerung");
  const [med, setMed] = React.useState("Metformin 500 mg");
  const [dosis, setDosis] = React.useState("1-0-1");
  const [dauer, setDauer] = React.useState("90 Tage");
  const [prio, setPrio] = React.useState("N");
  const [notiz, setNotiz] = React.useState("");

  React.useEffect(() => { if (open) { setStep(0); if (bewohnerId) setBewohner(bewohnerId); } }, [open, bewohnerId]);

  const bew = BEWOHNER.find(b => b.id === bewohner);
  const arzt = DOCTORS.find(d => d.id === bew?.arzt);

  if (!open) return null;
  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <Icon name="plus" size={14} />
          <h2>Neue Medikamentenanforderung</h2>
          <div style={{marginLeft: "auto", fontSize: 11, color: "var(--fg-subtle)", fontFamily: "var(--font-mono)"}}>
            {step === 0 ? "Schritt 1 / 3" : step === 1 ? "Schritt 2 / 3" : "Schritt 3 / 3"}
          </div>
          <button className="btn icon" onClick={onClose} aria-label="Schließen"><Icon name="x" size={13} /></button>
        </div>

        <div style={{padding: "10px 18px", borderBottom: "1px solid var(--border)"}}>
          <div className="stepper">
            <div className={`step ${step >= 0 ? "active" : ""} ${step > 0 ? "done" : ""}`}>
              <span className="num">{step > 0 ? "✓" : "1"}</span> Bewohner & Typ
            </div>
            <div className="line" />
            <div className={`step ${step >= 1 ? "active" : ""} ${step > 1 ? "done" : ""}`}>
              <span className="num">{step > 1 ? "✓" : "2"}</span> Medikation
            </div>
            <div className="line" />
            <div className={`step ${step === 2 ? "active" : ""}`}>
              <span className="num">3</span> Bestätigen
            </div>
          </div>
        </div>

        <div className="modal-body">
          {step === 0 && (
            <div className="col" style={{gap: 14}}>
              <div className="field">
                <label>Bewohner</label>
                <select className="select" value={bewohner} onChange={e => setBewohner(e.target.value)}>
                  {BEWOHNER.map(b => <option key={b.id} value={b.id}>{b.name} · {b.zimmer}</option>)}
                </select>
                {bew && (
                  <div style={{marginTop: 10, padding: 10, background: "var(--bg-sunken)", borderRadius: "var(--r-md)", border: "1px solid var(--border)", fontSize: 12}}>
                    <div style={{display: "flex", gap: 10, alignItems: "flex-start"}}>
                      <Avatar name={bew.name} size={32} />
                      <div style={{flex: 1}}>
                        <div style={{fontWeight: 600, fontSize: 13}}>{bew.name}</div>
                        <div style={{color: "var(--fg-muted)"}}>{bew.zimmer} · {bew.alter} J. · Pflegegrad {bew.pflegegrad} · Hausarzt: {arzt?.name}</div>
                        {bew.allergien.length > 0 && (
                          <div style={{marginTop: 6, display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center"}}>
                            <span style={{color: "var(--danger)", display: "inline-flex", alignItems: "center", gap: 4}}>
                              <Icon name="warning" size={11} /> Allergien:
                            </span>
                            {bew.allergien.map(a => <span key={a} className="badge-pill abgelehnt">{a}</span>)}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                )}
              </div>
              <div className="field">
                <label>Anforderungstyp</label>
                <div className="seg" style={{width: "fit-content"}}>
                  {["Neu", "Verlängerung", "Anpassung"].map(t => (
                    <button key={t} className={typ === t ? "active" : ""} onClick={() => setTyp(t)}>{t}</button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="col" style={{gap: 14}}>
              <div className="field">
                <label>Medikament</label>
                <div style={{position: "relative"}}>
                  <input className="input" value={med} onChange={e => setMed(e.target.value)} style={{width: "100%", paddingLeft: 30}} />
                  <Icon name="pill" size={13} style={{position: "absolute", left: 10, top: 10, color: "var(--fg-subtle)"}} />
                </div>
                <div style={{marginTop: 6, display: "flex", gap: 6, flexWrap: "wrap"}}>
                  {["Metformin 500 mg", "Ramipril 5 mg", "Apixaban 5 mg", "Pantoprazol 40 mg"].map(s => (
                    <button key={s} className="badge-pill" style={{cursor: "pointer"}} onClick={() => setMed(s)}>{s}</button>
                  ))}
                </div>
              </div>
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12}}>
                <div className="field">
                  <label>Dosis (morgens - mittags - abends)</label>
                  <input className="input mono" value={dosis} onChange={e => setDosis(e.target.value)} />
                </div>
                <div className="field">
                  <label>Dauer</label>
                  <input className="input" value={dauer} onChange={e => setDauer(e.target.value)} />
                </div>
                <div className="field">
                  <label>Priorität</label>
                  <div className="seg">
                    {[["N","Normal"], ["M","Mittel"], ["H","Hoch"]].map(([k, l]) => (
                      <button key={k} className={prio === k ? "active" : ""} onClick={() => setPrio(k)}>
                        <Prio level={k} /> <span style={{marginLeft: 4}}>{l}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>
              <div className="field">
                <label>Notiz an den Arzt (optional)</label>
                <textarea className="textarea" value={notiz} onChange={e => setNotiz(e.target.value)} placeholder="z. B. Bestand reicht noch 4 Tage." />
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="col" style={{gap: 10}}>
              <div style={{fontSize: 11, color: "var(--fg-subtle)", textTransform: "uppercase", letterSpacing: "0.08em"}}>Zusammenfassung</div>
              <div className="card" style={{borderRadius: "var(--r-md)"}}>
                <div className="card-body">
                  <dl className="kv">
                    <dt>Bewohner</dt><dd>{bew?.name} <span className="muted">· {bew?.zimmer}</span></dd>
                    <dt>Empfänger</dt><dd>{arzt?.name} <span className="muted">· {arzt?.spec}</span></dd>
                    <dt>Typ</dt><dd><TypBadge typ={typ} /></dd>
                    <dt>Medikament</dt><dd className="mono">{med}</dd>
                    <dt>Dosis</dt><dd className="mono">{dosis} · {dauer}</dd>
                    <dt>Priorität</dt><dd><Prio level={prio} /> {prio === "H" ? "Hoch" : prio === "M" ? "Mittel" : "Normal"}</dd>
                    {notiz && <><dt>Notiz</dt><dd>{notiz}</dd></>}
                  </dl>
                </div>
              </div>
              <div style={{display: "flex", gap: 8, alignItems: "center", padding: "8px 10px", background: "var(--accent-tint)", border: "1px solid var(--accent-border)", borderRadius: "var(--r-md)", fontSize: 12, color: "var(--accent)"}}>
                <Icon name="shield" size={14} />
                <span>Übermittlung verschlüsselt · DSGVO-konform · Audit-Log aktiv</span>
              </div>
            </div>
          )}
        </div>

        <div className="modal-foot">
          <span style={{fontSize: 11, color: "var(--fg-subtle)"}}>
            <Icon name="clock" size={11} /> Erstellt gerade von Maria Lehmann (Pflege)
          </span>
          <div className="spacer" />
          {step > 0 && <Btn onClick={() => setStep(step - 1)} icon="back">Zurück</Btn>}
          {step < 2 && <Btn variant="primary" onClick={() => setStep(step + 1)}>Weiter</Btn>}
          {step === 2 && (
            <Btn variant="primary" icon="check" kbd="⌘↵" onClick={() => {
              onSubmit({ bewohner, typ, med, dosis, dauer, prio, notiz });
              onClose();
            }}>An Arzt senden</Btn>
          )}
        </div>
      </div>
    </div>
  );
};

window.NewAnfrage = NewAnfrage;