/* Request-a-Quote drawer (multi-step) */

const { useState: useStateQ, useEffect: useEffectQ } = React;

function QuoteDrawer({ open, onClose, copy, locale }) {
  const [step, setStep] = useStateQ(1);
  const [service, setService] = useStateQ("trip-support");
  const [from, setFrom] = useStateQ("DXB");
  const [to, setTo] = useStateQ("LFPB");
  const [date, setDate] = useStateQ("");
  const [aircraft, setAircraft] = useStateQ("");
  const [reg, setReg] = useStateQ("");
  const [name, setName] = useStateQ("");
  const [company, setCompany] = useStateQ("");
  const [email, setEmail] = useStateQ("");
  const [phone, setPhone] = useStateQ("");
  const [notes, setNotes] = useStateQ("");
  const [submitted, setSubmitted] = useStateQ(false);

  useEffectQ(() => {
    if (!open) {
      // reset on close after a short delay so the user doesn't see it flicker
      const t = setTimeout(() => { setStep(1); setSubmitted(false); }, 400);
      return () => clearTimeout(t);
    }
  }, [open]);

  const next = () => setStep(s => Math.min(3, s + 1));
  const back = () => setStep(s => Math.max(1, s - 1));
  const submit = () => setSubmitted(true);

  return (
    <>
      <div className={cx("drawer-backdrop", open && "open")} onClick={onClose} />
      <aside className={cx("drawer", open && "open")} role="dialog" aria-modal="true" aria-label={copy.drawer.title}>
        <div className="drawer-head">
          <div>
            <h3>{submitted ? copy.drawer.success_h : copy.drawer.title}</h3>
            {!submitted && (
              <div className="sub">{copy.drawer.sub.replace("{n}", String(step))}</div>
            )}
          </div>
          <button className="drawer-close" onClick={onClose} aria-label="Close">✕</button>
        </div>

        <div className="drawer-body">
          {submitted ? (
            <div className="success-card">
              <div className="tick">✓</div>
              <h3>{copy.drawer.success_h}</h3>
              <p>{copy.drawer.success_p}</p>
              <div style={{ display: "flex", gap: 10, justifyContent: "center", marginTop: 26 }}>
                <button className="btn ghost" onClick={onClose}>{locale === "ar" ? "إغلاق" : "Close"}</button>
                <button className="btn primary" onClick={() => { setSubmitted(false); setStep(1); }}>
                  {copy.drawer.new}
                </button>
              </div>
              <div className="mono" style={{ marginTop: 30, fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)" }}>
                Ref · UAS-{String(Math.floor(Math.random() * 9000) + 1000)}
              </div>
            </div>
          ) : (
            <>
              <div className="drawer-steps">
                {[1, 2, 3].map(i => (
                  <div key={i} className={cx("step", i < step && "done", i === step && "active")} />
                ))}
              </div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>
                {String(step).padStart(2, "0")} — {copy.drawer.step_labels[step - 1]}
              </div>

              {step === 1 && (
                <>
                  <h4 className="display" style={{ fontSize: 22, fontWeight: 500, margin: "0 0 18px" }}>
                    {copy.drawer.service_q}
                  </h4>
                  <div className="service-pick">
                    {SERVICES.map((s, i) => (
                      <button
                        key={s.id}
                        className={cx(service === s.id && "active")}
                        onClick={() => setService(s.id)}
                      >
                        <span className="ix">{String(i + 1).padStart(2, "0")}</span>
                        <span className="nm">{locale === "ar" ? s.name_ar : s.name_en}</span>
                      </button>
                    ))}
                  </div>
                </>
              )}

              {step === 2 && (
                <>
                  <h4 className="display" style={{ fontSize: 22, fontWeight: 500, margin: "0 0 18px" }}>
                    {copy.drawer.mission_q}
                  </h4>
                  <div className="field-grid">
                    <div>
                      <label>{locale === "ar" ? "من (ICAO/IATA)" : "From (ICAO/IATA)"}</label>
                      <input value={from} onChange={e => setFrom(e.target.value)} placeholder="DXB / OMDB" />
                    </div>
                    <div>
                      <label>{locale === "ar" ? "إلى (ICAO/IATA)" : "To (ICAO/IATA)"}</label>
                      <input value={to} onChange={e => setTo(e.target.value)} placeholder="LFPB" />
                    </div>
                  </div>
                  <div className="field-grid">
                    <div>
                      <label>{locale === "ar" ? "تاريخ الرحلة" : "Departure date"}</label>
                      <input type="date" value={date} onChange={e => setDate(e.target.value)} />
                    </div>
                    <div>
                      <label>{locale === "ar" ? "نوع الطائرة" : "Aircraft type"}</label>
                      <input value={aircraft} onChange={e => setAircraft(e.target.value)} placeholder="G650ER / GLEX / FA8X" />
                    </div>
                  </div>
                  <div className="field-grid full">
                    <div>
                      <label>{locale === "ar" ? "تسجيل الذيل (اختياري)" : "Tail registration (optional)"}</label>
                      <input value={reg} onChange={e => setReg(e.target.value)} placeholder="A6-XXX" />
                    </div>
                  </div>
                  <div className="field-grid full">
                    <div>
                      <label>{locale === "ar" ? "ملاحظات للعمليات" : "Notes for ops"}</label>
                      <textarea value={notes} onChange={e => setNotes(e.target.value)}
                        placeholder={locale === "ar" ? "تصاريح، ساعات الفتح، تموين خاص…" : "Permits, slot windows, special catering…"} />
                    </div>
                  </div>
                </>
              )}

              {step === 3 && (
                <>
                  <h4 className="display" style={{ fontSize: 22, fontWeight: 500, margin: "0 0 18px" }}>
                    {copy.drawer.contact_q}
                  </h4>
                  <div className="field-grid">
                    <div>
                      <label>{locale === "ar" ? "الاسم" : "Name"}</label>
                      <input value={name} onChange={e => setName(e.target.value)} />
                    </div>
                    <div>
                      <label>{locale === "ar" ? "الشركة" : "Company"}</label>
                      <input value={company} onChange={e => setCompany(e.target.value)} />
                    </div>
                  </div>
                  <div className="field-grid">
                    <div>
                      <label>{locale === "ar" ? "البريد الإلكتروني" : "Email"}</label>
                      <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
                    </div>
                    <div>
                      <label>{locale === "ar" ? "هاتف" : "Phone"}</label>
                      <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+971" />
                    </div>
                  </div>
                  <div style={{ marginTop: 16, padding: 14, background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 4, fontSize: 13 }}>
                    <div className="eyebrow" style={{ marginBottom: 8 }}>{locale === "ar" ? "ملخص" : "Summary"}</div>
                    <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "6px 14px" }}>
                      <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>SERVICE</span>
                      <span style={{ fontSize: 13 }}>
                        {locale === "ar" ? SERVICES.find(s => s.id === service)?.name_ar : SERVICES.find(s => s.id === service)?.name_en}
                      </span>
                      <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>ROUTE</span>
                      <span className="mono" style={{ fontSize: 13 }}>{from} → {to}</span>
                      {date && (<><span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>DATE</span><span className="mono" style={{ fontSize: 13 }}>{date}</span></>)}
                      {aircraft && (<><span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>AC</span><span className="mono" style={{ fontSize: 13 }}>{aircraft}{reg ? ` · ${reg}` : ""}</span></>)}
                    </div>
                  </div>
                </>
              )}
            </>
          )}
        </div>

        {!submitted && (
          <div className="drawer-foot">
            <button className="btn ghost" onClick={back} disabled={step === 1}
              style={{ opacity: step === 1 ? 0.4 : 1 }}>
              {copy.drawer.back}
            </button>
            <span className="progress">{String(step).padStart(2, "0")} / 03</span>
            {step < 3
              ? <button className="btn primary" onClick={next}>{copy.drawer.next}<Arrow /></button>
              : <button className="btn primary" onClick={submit}>{copy.drawer.submit}<Arrow /></button>
            }
          </div>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { QuoteDrawer });