/* ============================================================
   ADORN — Order tracking page
   Demo state is derived from the order number so any code
   shows a believable, stable timeline.
   ============================================================ */

function TrackOrderPage({ route, onNav }) {
  const prefill = (route.params && route.params.order) || "";
  const [orderNo, setOrderNo] = useState(prefill);
  const [email, setEmail] = useState("");
  const [result, setResult] = useState(null);

  useEffect(() => {
    if (prefill) { setOrderNo(prefill); setResult(makeResult(prefill)); }
  }, [prefill]);

  const STAGES = [
    { key: "confirmed", t: "Order confirmed", s: "Payment received — we've started on your order" },
    { key: "packed", t: "Gift-wrapped & packed", s: "Checked by hand and wrapped in the studio" },
    { key: "transit", t: "In transit", s: "With our courier, tracked door-to-door" },
    { key: "out", t: "Out for delivery", s: "On the last leg to you" },
    { key: "delivered", t: "Delivered", s: "Signed, sealed, worn" },
  ];

  function makeResult(no) {
    const clean = no.trim().toUpperCase();
    let h = 0; for (let i = 0; i < clean.length; i++) h = (h * 31 + clean.charCodeAt(i)) % 997;
    const stage = 1 + (h % 4); // 1..4 → always at least "packed"
    const days = 1 + (h % 5);
    const dest = ["Lekki, Lagos", "Ikeja, Lagos", "Abuja", "Port Harcourt", "London, UK"][h % 5];
    const items = [RB.PRODUCTS[h % RB.PRODUCTS.length], RB.PRODUCTS[(h * 7 + 3) % RB.PRODUCTS.length]].slice(0, 1 + (h % 2));
    return { no: clean, stage, days, dest, items };
  }

  const submit = (e) => {
    e.preventDefault();
    if (!orderNo.trim()) return;
    setResult(makeResult(orderNo));
  };

  return (
    <div className="fade-page page-shell">
      <div className="wrap">
        <div className="center" style={{ marginBottom: 40 }}>
          <h1 className="serif page-h" style={{ margin: 0 }}>Where's my order?</h1>
        </div>

        <form className="track-form" onSubmit={submit}>
          <div className="field" style={{ flex: 1 }}>
            <label>Order number</label>
            <input className="input" placeholder="AD-12345" value={orderNo} onChange={(e) => setOrderNo(e.target.value)} />
          </div>
          <div className="field" style={{ flex: 1.4 }}>
            <label>Email <span style={{ color: "var(--ink-faint)" }}>(optional)</span></label>
            <input className="input" type="email" placeholder="you@email.com" value={email} onChange={(e) => setEmail(e.target.value)} />
          </div>
          <Btn type="submit" arrow={false} className="track-btn">Track order</Btn>
        </form>

        {result && (
          <div className="track-result fade-page">
            <div className="track-meta">
              <div>
                <span className="mono track-no">#{result.no}</span>
                <span className={"order-status " + (result.stage >= 4 ? "ok" : "warn")} style={{ marginLeft: 12 }}>{STAGES[result.stage].t}</span>
              </div>
              <div className="track-eta">
                <span>Delivering to <strong>{result.dest}</strong></span>
                <span>{result.stage >= 4 ? "Delivered" : "Estimated in " + result.days + (result.days === 1 ? " day" : " days")}</span>
              </div>
            </div>

            <ol className="track-line">
              {STAGES.map((st, i) => (
                <li key={st.key} className={"track-step" + (i < result.stage ? " done" : "") + (i === result.stage ? " now" : "")}>
                  <span className="track-dot">{i < result.stage ? <Icon name="check" size={12} /> : null}</span>
                  <div className="track-step-body">
                    <strong>{st.t}</strong>
                    <span>{st.s}</span>
                  </div>
                </li>
              ))}
            </ol>

            <div className="track-items">
              <span className="eyebrow muted" style={{ marginBottom: 14, display: "block" }}>In this order</span>
              {result.items.map((p) => (
                <button key={p.id} className="track-item" onClick={() => onNav("product", { id: p.id })}>
                  <Ph label={p.label} ratio="square" style={{ width: 56, height: 56 }} />
                  <div><span className="serif" style={{ fontSize: 17 }}>{p.name}</span><span className="mono" style={{ fontSize: 11, color: "var(--ink-faint)", display: "block", marginTop: 2 }}>{p.sub || p.cat}</span></div>
                  <Icon name="chevron" size={16} style={{ marginLeft: "auto", color: "var(--ink-faint)" }} />
                </button>
              ))}
            </div>

            <p className="track-help">Something look off? <button className="opt-link" onClick={() => onNav("contact", {})}>Contact us</button> with your order number and we'll chase it down.</p>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { TrackOrderPage });