// ===== Track Order Page =====
const { useState: useTS } = React;

const STAGES = [
  { id: "placed", label: "Order placed", desc: "We've received your order and called to confirm" },
  { id: "prep", label: "Preparing", desc: "Picking from warehouse 01, packing & QC" },
  { id: "ship", label: "Shipped", desc: "In transit with our courier partner" },
  { id: "out", label: "Out for delivery", desc: "Your order is with the driver" },
  { id: "done", label: "Delivered", desc: "Enjoy your hardware!" },
];

const TrackPage = () => {
  const [code, setCode] = useTS("");
  const [phone, setPhone] = useTS("");
  const [result, setResult] = useTS(null);
  const [err, setErr] = useTS("");

  const lookup = (e) => {
    e.preventDefault();
    if (!/^APT-\d{6}$/i.test(code.trim())) { setErr("Order code looks like APT-123456"); return; }
    setErr("");
    // Demo: deterministic stage based on code hash
    const seed = [...code].reduce((s, c) => s + c.charCodeAt(0), 0);
    const stageIdx = seed % STAGES.length;
    setResult({
      code: code.toUpperCase(),
      stageIdx,
      placedAt: "20 May 2026, 14:32",
      eta: "Wed, 27 May 2026 between 10–18h",
      wilaya: "16 — Alger",
      courier: "Express",
      tracking: "YAL-" + (seed * 7919).toString(36).slice(-7).toUpperCase(),
    });
  };

  return (
    <PageWrapper>
      {() => (
        <main>
          <section className="shell page-hero">
            <div className="breadcrumb" style={{ paddingTop: 0 }}>
              <a href="index.html">Home</a>
              <Icon name="chevR" />
              <span>Track order</span>
            </div>
            <h1 className="page-title">Track your order</h1>
            <p className="page-sub" style={{ marginTop: 8 }}>
              Enter the code we sent you via SMS — looks like <code style={{ fontFamily: "JetBrains Mono", color: "var(--purple)" }}>APT-123456</code>.
            </p>
          </section>

          <section className="shell" style={{ marginBottom: 64 }}>
            <div className="track-grid">
              <form className="track-form" onSubmit={lookup}>
                <h3>Order lookup</h3>
                <label className="ck-field">
                  <span>Order code *</span>
                  <input
                    value={code}
                    onChange={(e) => setCode(e.target.value)}
                    placeholder="APT-123456"
                    style={{ fontFamily: "JetBrains Mono", letterSpacing: "0.04em" }}
                    className={err ? "err" : ""}
                  />
                  {err && <span className="ck-err">{err}</span>}
                </label>
                <label className="ck-field">
                  <span>Phone (last 4 digits, optional)</span>
                  <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="0230" inputMode="numeric" maxLength="4" />
                </label>
                <button className="btn btn-primary" type="submit" style={{ width: "100%", justifyContent: "center" }}>
                  <Icon name="search" /> Look up order
                </button>
                <div className="track-help">
                  <p><strong>Lost your code?</strong></p>
                  <p>It's in the confirmation SMS we sent right after you ordered. Can't find it? <a href="info.html?topic=contact">Contact support</a> with your phone number — we'll dig it out.</p>
                </div>
              </form>

              <div className="track-result">
                {!result ? (
                  <div className="track-empty">
                    <Icon name="truck" style={{ width: 64, height: 64, color: "var(--ink-mute)" }} />
                    <h3>No order loaded yet</h3>
                    <p>Enter your order code on the left to see where your hardware is.</p>
                    <p style={{ fontSize: 12, color: "var(--ink-mute)" }}>
                      Tip: try <button onClick={() => setCode("APT-456123")} className="link-btn">APT-456123</button> to see a sample.
                    </p>
                  </div>
                ) : (
                  <div className="track-card">
                    <div className="track-card-head">
                      <div>
                        <div className="track-code">{result.code}</div>
                        <div className="track-placed">Placed {result.placedAt}</div>
                      </div>
                      <span className="badge hot" style={{ background: "var(--purple)" }}>{STAGES[result.stageIdx].label}</span>
                    </div>

                    <div className="track-eta">
                      <Icon name="truck" />
                      <div>
                        <strong>Estimated delivery</strong>
                        <span>{result.eta}</span>
                      </div>
                    </div>

                    <div className="track-steps">
                      {STAGES.map((s, i) => (
                        <div key={s.id} className={`track-step ${i <= result.stageIdx ? "done" : ""} ${i === result.stageIdx ? "current" : ""}`}>
                          <div className="ts-dot">
                            {i < result.stageIdx ? <Icon name="check" /> : i === result.stageIdx ? <span className="pulse"></span> : null}
                          </div>
                          <div className="ts-line"></div>
                          <div className="ts-info">
                            <div className="ts-label">{s.label}</div>
                            <div className="ts-desc">{s.desc}</div>
                          </div>
                        </div>
                      ))}
                    </div>

                    <div className="track-meta">
                      <div><span>Wilaya</span><strong>{result.wilaya}</strong></div>
                      <div><span>Courier</span><strong>{result.courier}</strong></div>
                      <div><span>Tracking #</span><strong style={{ fontFamily: "JetBrains Mono" }}>{result.tracking}</strong></div>
                    </div>

                    <div className="track-actions">
                      <a className="btn btn-ghost" href="info.html?topic=contact"><Icon name="chat" /> Question about this order</a>
                      <button className="btn btn-ghost" onClick={() => setResult(null)}>Look up another</button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </section>

          <Footer />
        </main>
      )}
    </PageWrapper>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<TrackPage />);