/* FormLayouts.jsx — SteppedForm (use shared blocks from ReportForm.jsx) */

function DangerNotes({ t }) {
  return (
    <div className="danger-notes">
      <div className="notice notice-danger">
        <Ico name="triangle-alert" size={17} /> <span><strong>{t.danger_note}</strong></span>
      </div>
      <div className="doc-note"><Ico name="info" size={14} /> <span>{t.doc_note}</span></div>
    </div>
  );
}

function SteppedForm(p) {
  const { t, lang } = p;
  const [step, setStep] = React.useState(0);
  const steps = [t.step_where, t.step_what, t.step_when, t.step_proof, t.step_send];

  function next() {
    if (step === 0 && !p.loc) { p.setErr(p.locErr || t.required_where); return; }
    if (step === 1 && !p.cats.length) { p.setErr(t.required_what); return; }
    p.setErr("");
    setStep((s) => Math.min(s + 1, steps.length - 1));
  }
  function back() { p.setErr(""); setStep((s) => Math.max(s - 1, 0)); }

  return (
    <div className="step-wrap">
      <div className="stepper">
        {steps.map((s, i) => (
          <React.Fragment key={i}>
            <button className={"step-node" + (i === step ? " active" : "") + (i < step ? " done" : "")}
              onClick={() => i < step && setStep(i)}>
              <span className="step-dot">{i < step ? <Ico name="check" size={13} /> : i + 1}</span>
              <span className="step-name">{s}</span>
            </button>
            {i < steps.length - 1 && <span className={"step-line" + (i < step ? " done" : "")}></span>}
          </React.Fragment>
        ))}
      </div>

      <div className="step-body" key={step}>
        {step === 0 && (
          <div className="anim-up">
            <SectionHead title={t.sec_where_title} help={t.sec_where_help} />
            <MapField loc={p.loc} setLoc={p.setLoc} locErr={p.locErr} setLocErr={p.setLocErr} t={t} tall />
          </div>
        )}
        {step === 1 && (
          <div className="anim-up">
            <SectionHead title={t.sec_what_title} help={t.sec_what_help} />
            <CategoryGrid selected={p.cats} toggle={p.toggleCat} lang={lang} />
          </div>
        )}
        {step === 2 && (
          <div className="anim-up step-stack">
            <div>
              <SectionHead title={t.sec_when_title} />
              <WhenField when={p.when} setWhen={p.setWhen} t={t} />
            </div>
            <div>
              <SectionHead title={t.sec_desc_title} help={t.sec_desc_help} />
              <textarea className="textarea" rows="5" placeholder={t.sec_desc_ph}
                value={p.desc} onChange={(e) => p.setDesc(e.target.value)}></textarea>
            </div>
          </div>
        )}
        {step === 3 && (
          <div className="anim-up">
            <SectionHead title={t.sec_proof_title} help={t.sec_proof_help} />
            <EvidenceField files={p.files} setFiles={p.setFiles} t={t} />
          </div>
        )}
        {step === 4 && (
          <div className="anim-up step-stack">
            <ReviewSummary p={p} t={t} lang={lang} />
            <div>
              <SectionHead title={t.sec_contact_title} help={t.sec_contact_help} />
              <ContactField contact={p.contact} setContact={p.setContact} t={t} />
            </div>
            <DangerNotes t={t} />
          </div>
        )}
      </div>

      {p.err && <div className="err-line step-err"><Ico name="circle-alert" size={15} /> {p.err}</div>}

      <div className="step-foot">
        <button className="btn btn-ghost" onClick={back} disabled={step === 0}>
          <Ico name="arrow-left" size={16} /> {t.back}
        </button>
        <div className="step-count">{step + 1} / {steps.length}</div>
        {step < steps.length - 1
          ? <button className="btn btn-dark" onClick={next}>{t.next} <Ico name="arrow-right" size={16} /></button>
          : <button className="btn btn-primary" onClick={p.submit} disabled={p.submitting}>
              <Ico name="send" size={16} /> {p.submitting ? t.submitting : t.submit}
            </button>}
      </div>
    </div>
  );
}

function ReviewSummary({ p, t, lang }) {
  return (
    <div className="review-card">
      <div className="review-row">
        <span className="review-k">{t.step_what}</span>
        <span className="review-v">
          {p.cats.length ? p.cats.map((id) => <span key={id} className="rev-tag">{catById(id)[lang]}</span>) : "—"}
        </span>
      </div>
      <div className="review-row">
        <span className="review-k">{t.step_where}</span>
        <span className="review-v">{p.loc ? `${p.loc.zone} · ${p.loc.lat.toFixed(4)}, ${p.loc.lng.toFixed(4)}` : "—"}</span>
      </div>
      <div className="review-row">
        <span className="review-k">{t.step_when}</span>
        <span className="review-v">{fmtWhen(p.when, lang)}</span>
      </div>
      <div className="review-row">
        <span className="review-k">{t.sec_desc_title}</span>
        <span className="review-v review-desc">{p.desc || "—"}</span>
      </div>
      <div className="review-row">
        <span className="review-k">{t.step_proof}</span>
        <span className="review-v">{p.files.length ? `${p.files.length} ${lang === "de" ? "Datei(en)" : "file(s)"}` : "—"}</span>
      </div>
    </div>
  );
}

window.SteppedForm = SteppedForm;