// track.jsx — track your order
const { useState: useStateT, useEffect: useEffectT, useMemo: useMemoT } = React;

// Build a tracking state for a given code (from bookings, seed history, or demo)
function resolveShipment(code, bookings) {
  const c = (code || "").trim().toUpperCase();
  const fromBooking = (bookings || []).find(b => b.tracking.toUpperCase() === c);
  if (fromBooking) return { kind: "transit", id: fromBooking.tracking, from: fromBooking.pickup.suburb, to: fromBooking.dropoff.suburb, vehicleId: fromBooking.vehicleId, serviceId: fromBooking.serviceId, driver: "A. Okafor", progress: 0.42, eta: fromBooking.time };
  const fromHist = window.FX.HISTORY.find(h => h.id.toUpperCase() === c);
  if (fromHist) return { kind: "delivered", id: fromHist.id, from: fromHist.from, to: fromHist.to, vehicleId: fromHist.vehicleId, serviceId: fromHist.serviceId, driver: "J. Davies", progress: 1, eta: fromHist.pod.signedAt, pod: fromHist.pod, date: fromHist.date };
  return null;
}
const DEMO = { kind: "transit", id: "FX-LIVE-4827", from: "Sydney CBD", to: "Manly", vehicleId: "halfvan", serviceId: "premium", driver: "M. Reyes", progress: 0.58, eta: "13:50", phone: "Sedan · NSW · CV-4827" };

function Track({ bookings, currency, initial, nav }) {
  const [code, setCode] = useStateT(initial && initial.tracking ? initial.tracking : "");
  const [active, setActive] = useStateT(null);
  const [err, setErr] = useStateT(false);

  useEffectT(() => { if (initial && initial.tracking) doTrack(initial.tracking); }, []);

  function doTrack(c) {
    const ship = resolveShipment(c, bookings) || (c.trim() ? null : null);
    if (!ship) { setErr(true); setActive(null); return; }
    setErr(false); setActive(ship);
  }

  return (
    <div className="fade-up">
      <PageHeader eyebrow="Track order" title="Track your delivery" sub="Enter a tracking number to see live driver location, ETA and delivery status." />

      <div style={{ display: "flex", gap: 10, marginBottom: 12, maxWidth: 560 }}>
        <div style={{ position: "relative", flex: 1 }}>
          <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--fg-mute)" }}><Icon name="navigation" size={16} /></span>
          <TextInput value={code} onChange={v => { setCode(v); setErr(false); }} placeholder="e.g. FX-7K2D-9043" mono style={{ paddingLeft: 40 }} />
        </div>
        <Button variant="primary" icon="search" onClick={() => doTrack(code)}>Track</Button>
      </div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 22, alignItems: "center" }}>
        <span style={{ fontSize: 12.5, color: "var(--fg-mute)" }}>Try:</span>
        {[DEMO.id, "FX-7K2D-9043", "FX-3M8P-1187"].map(t => (
          <button key={t} onClick={() => { setCode(t); doTrack(t === DEMO.id ? DEMO.id : t); }} style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--brand)", background: "var(--brand-soft)", border: "none", padding: "4px 10px", borderRadius: 999 }}>{t}</button>
        ))}
      </div>

      {err && (
        <Card pad={24} style={{ display: "flex", alignItems: "center", gap: 12, background: "var(--danger-soft)", borderColor: "transparent" }}>
          <Icon name="info" size={20} color="var(--danger)" />
          <div style={{ fontSize: 14, color: "var(--fg-strong)" }}>No shipment found for that tracking number. Check the code and try again.</div>
        </Card>
      )}

      {(() => {
        const ship = active || (code === DEMO.id ? DEMO : null);
        if (!ship) {
          // default: show the demo live shipment as a friendly starting point
          if (!err && !code) { return <TrackView ship={DEMO} currency={currency} nav={nav} />; }
          return null;
        }
        return <TrackView ship={ship} currency={currency} nav={nav} />;
      })()}
    </div>
  );
}

function TrackView({ ship, currency, nav }) {
  const v = window.FX.VEHICLES.find(x => x.id === ship.vehicleId);
  const s = window.FX.SERVICES.find(x => x.id === ship.serviceId);
  const delivered = ship.kind === "delivered";
  const steps = [
    { t: "Booking confirmed", d: "Order received & driver matched", done: true },
    { t: "Picked up", d: `Collected from ${ship.from}`, done: ship.progress >= 0.25 || delivered },
    { t: "In transit", d: "On the way to drop-off", done: ship.progress >= 0.5 || delivered, active: !delivered && ship.progress >= 0.25 && ship.progress < 0.85 },
    { t: "Out for delivery", d: `Approaching ${ship.to}`, done: ship.progress >= 0.85 || delivered, active: !delivered && ship.progress >= 0.85 },
    { t: "Delivered", d: delivered ? `Signed by recipient at ${ship.eta}` : "Awaiting completion", done: delivered },
  ];
  return (
    <div className="fade-up" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)", gap: 22, alignItems: "start" }}>
      {/* Live map card */}
      <div>
        <div style={{ position: "relative", borderRadius: "var(--r-2xl)", overflow: "hidden", background: "#0B2240", height: 420, border: "1px solid var(--border)" }}>
          <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.2 }}>
            <defs><pattern id="tg" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0 L0 0 0 40" fill="none" stroke="rgba(120,160,220,0.6)" strokeWidth="0.5" /></pattern></defs>
            <rect width="100%" height="100%" fill="url(#tg)" />
          </svg>
          <svg width="100%" height="100%" viewBox="0 0 600 420" preserveAspectRatio="none" style={{ position: "absolute", inset: 0 }}>
            <path d="M 70 360 C 180 320 240 250 320 220 C 410 186 470 130 540 70" stroke="rgba(255,255,255,0.25)" strokeWidth="4" fill="none" strokeDasharray="3 8" strokeLinecap="round" />
            <path id="route" d="M 70 360 C 180 320 240 250 320 220 C 410 186 470 130 540 70" stroke="var(--accent)" strokeWidth="4" fill="none" strokeLinecap="round" strokeDasharray="900" strokeDashoffset={900 - 900 * ship.progress} />
          </svg>
          {/* origin pin */}
          <Pin x="11.6%" y="85.7%" color="var(--brand)" label={ship.from} />
          {/* dest pin */}
          <Pin x="90%" y="16.6%" color="#fff" ring="var(--accent)" label={ship.to} dest />
          {/* driver */}
          {!delivered && <DriverPin progress={ship.progress} />}
          {/* ETA / driver float card */}
          <div style={{ position: "absolute", left: 18, bottom: 18, right: 18, display: "flex", gap: 12, justifyContent: "space-between", alignItems: "flex-end" }}>
            <div style={{ background: "#fff", borderRadius: 14, padding: "12px 16px", boxShadow: "var(--shadow-toast)", display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--brand)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 14 }}>{ship.driver.split(" ").map(p => p[0]).join("")}</span>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13.5, color: "var(--fg-strong)" }}>{ship.driver}</div>
                <div style={{ fontSize: 11.5, color: "var(--fg-mute)" }}>{v ? v.name : ""} · {ship.id}</div>
              </div>
            </div>
            {!delivered && (
              <div style={{ background: "var(--accent)", color: "#fff", borderRadius: 14, padding: "12px 16px", boxShadow: "var(--shadow-toast)", textAlign: "right" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "1px", opacity: 0.85 }}>EST. ARRIVAL</div>
                <div style={{ fontWeight: 800, fontSize: 20, marginTop: 2 }}>{ship.eta}</div>
              </div>
            )}
          </div>
          {delivered && <div style={{ position: "absolute", top: 18, left: 18 }}><Badge tone="success" style={{ background: "#fff" }}><StatusDot color="#22b86e" /> Delivered</Badge></div>}
        </div>
      </div>

      {/* Timeline + summary */}
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <Card pad={22}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, color: "var(--brand)" }}>{ship.id}</div>
              <div style={{ fontSize: 13, color: "var(--fg-mute)", marginTop: 3 }}>{ship.from} → {ship.to} · {s ? s.name : ""}</div>
            </div>
            <Badge tone={delivered ? "success" : "brand"}><StatusDot color={delivered ? "#22b86e" : "var(--brand)"} pulse={!delivered} /> {delivered ? "Delivered" : "In transit"}</Badge>
          </div>
          <div style={{ position: "relative" }}>
            {steps.map((st, i) => (
              <div key={i} style={{ display: "flex", gap: 14, paddingBottom: i < steps.length - 1 ? 20 : 0, position: "relative" }}>
                {i < steps.length - 1 && <span style={{ position: "absolute", left: 12, top: 24, bottom: 0, width: 2, background: st.done ? "var(--brand)" : "var(--border)" }} />}
                <span style={{ width: 25, height: 25, borderRadius: "50%", flex: "none", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center",
                  background: st.done ? "var(--brand)" : st.active ? "var(--accent)" : "var(--bg-mist-2)", color: st.done || st.active ? "#fff" : "var(--fg-mute)" }}>
                  {st.done ? <Icon name="check" size={14} /> : st.active ? <StatusDot color="#fff" pulse /> : <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--fg-faint)" }} />}
                </span>
                <div style={{ paddingTop: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14, color: st.done || st.active ? "var(--fg-strong)" : "var(--fg-mute)" }}>{st.t}</div>
                  <div style={{ fontSize: 12.5, color: "var(--fg-mute)", marginTop: 2 }}>{st.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
        {delivered && ship.pod && (
          <Card pad={20} hover onClick={() => nav("history")}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 10, background: "var(--success-soft)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name="shield-check" size={20} color="#108a52" /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14, color: "var(--fg-strong)" }}>Proof of delivery available</div>
                <div style={{ fontSize: 12.5, color: "var(--fg-mute)" }}>Signed by {ship.pod.recipient} · photo + signature</div>
              </div>
              <Icon name="chevron-right" size={17} color="var(--fg-faint)" />
            </div>
          </Card>
        )}
      </div>
    </div>
  );
}

function Pin({ x, y, color, ring, label, dest }) {
  return (
    <div style={{ position: "absolute", left: x, top: y, transform: "translate(-50%,-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 5 }}>
      <span style={{ width: 16, height: 16, borderRadius: "50%", background: color, border: `3px solid ${ring || "#fff"}`, boxShadow: "0 3px 8px rgba(0,0,0,0.4)" }} />
      <span style={{ fontSize: 11, fontWeight: 600, color: "#fff", background: "rgba(1,16,31,0.6)", padding: "2px 8px", borderRadius: 6, whiteSpace: "nowrap" }}>{label}</span>
    </div>
  );
}
function DriverPin({ progress }) {
  // approximate position along the bezier by sampling
  const pts = [[70,360],[180,300],[260,250],[330,215],[430,175],[540,70]];
  const idx = Math.min(pts.length - 2, Math.floor(progress * (pts.length - 1)));
  const f = progress * (pts.length - 1) - idx;
  const x = pts[idx][0] + (pts[idx+1][0] - pts[idx][0]) * f;
  const y = pts[idx][1] + (pts[idx+1][1] - pts[idx][1]) * f;
  return (
    <div style={{ position: "absolute", left: `${x/600*100}%`, top: `${y/420*100}%`, transform: "translate(-50%,-50%)" }}>
      <span style={{ width: 34, height: 34, borderRadius: "50%", background: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", boxShadow: "0 4px 12px rgba(0,0,0,0.4)", animation: "pulseDot 1.8s infinite" }}>
        <Icon name="truck" size={18} color="var(--brand)" />
      </span>
    </div>
  );
}

Object.assign(window, { Track });