// label.jsx — printable shipping label + booking confirmation screen
const { useState: useStateLbl } = React;

/* The wordmark — official logo assets: classic on light, white variant on dark */
function Wordmark({ size = 22, onDark = false }) {
  return <img src={onDark ? "assets/fedex-logo-white.png" : "assets/fedex-logo.png"} alt="FedEx" style={{ height: size, width: "auto", display: "block" }} />;
}

function ShippingLabel({ booking, currency = "AUD" }) {
  const b = booking;
  const v = window.FX.VEHICLES.find(x => x.id === b.vehicleId);
  const s = window.FX.SERVICES.find(x => x.id === b.serviceId);
  const cell = { padding: "12px 16px" };
  const labelTxt = { fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "1px", textTransform: "uppercase", color: "#8a8499", marginBottom: 4 };
  const addr = (a) => (
    <div>
      <div style={{ fontWeight: 700, fontSize: 15, color: "#16121f" }}>{a.name || a.contact}</div>
      {a.company && a.company !== a.name && <div style={{ fontSize: 12.5, color: "#4a4e64" }}>{a.company}</div>}
      <div style={{ fontSize: 12.5, color: "#4a4e64", marginTop: 2 }}>{a.unit ? a.unit + ", " : ""}{a.line}</div>
      <div style={{ fontSize: 12.5, color: "#4a4e64" }}>{a.suburb} NSW {a.postcode}</div>
      <div style={{ fontSize: 12, color: "#8a8499", marginTop: 5 }}>{a.contact} · {a.phone}</div>
      {a.email && <div style={{ fontSize: 11.5, color: "#8a8499", marginTop: 1 }}>{a.email}</div>}
      {a.instructions && <div style={{ fontSize: 11.5, color: "#4a4e64", marginTop: 6, fontStyle: "italic", borderLeft: "2px solid #FF6600", paddingLeft: 7 }}>{a.instructions}</div>}
    </div>
  );
  return (
    <div className="print-area" style={{ background: "#fff", border: "1px solid #d8d3e0", borderRadius: 12, overflow: "hidden", width: "100%", maxWidth: 560, fontFamily: "var(--font-sans)" }}>
      {/* header */}
      <div style={{ background: "var(--brand)", color: "#fff", padding: "16px 18px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Wordmark size={26} onDark />
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "1.4px", opacity: 0.8 }}>SAME-DAY DELIVERY</div>
          <div style={{ fontWeight: 700, fontSize: 16, marginTop: 2 }}>{s ? s.name : ""}{v ? " " + v.name : ""}</div>
        </div>
      </div>
      {/* service band */}
      <div style={{ background: "var(--accent)", color: "#fff", padding: "8px 18px", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.5px" }}>
        <span>{s ? s.eta : ""}</span>
        <span>{window.FX.fmtDate(b.date)} · {b.time}</span>
      </div>
      {/* from / to */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid #eee" }}>
        <div style={{ ...cell, borderRight: "1px dashed #ddd" }}>
          <div style={labelTxt}>From · Pickup</div>
          {addr(b.pickup)}
        </div>
        <div style={cell}>
          <div style={labelTxt}>To · Deliver</div>
          {addr(b.dropoff)}
        </div>
      </div>
      {/* via (intermediate stops) */}
      {b.stops && b.stops.length > 2 && (
        <div style={{ padding: "8px 16px", borderBottom: "1px solid #eee", background: "#FBFAF7" }}>
          <span style={{ ...labelTxt, marginBottom: 0, display: "inline" }}>Via </span>
          <span style={{ fontSize: 12.5, color: "#16121f", fontWeight: 500 }}>{b.stops.slice(1, -1).map(st => st.suburb).join(" → ")}</span>
        </div>
      )}
      {/* account + references */}
      {(b.account || b.ref1 || b.ref2) && (
        <div style={{ display: "flex", gap: 0, borderBottom: "1px solid #eee" }}>
          {b.account && <div style={{ padding: "10px 16px", flex: 1, borderRight: "1px solid #f0f0f0" }}>
            <div style={labelTxt}>Account</div>
            <div style={{ fontWeight: 600, fontSize: 13, color: "#16121f" }}>{b.account.name} <span style={{ fontFamily: "var(--font-mono)", color: "#8a8499", fontWeight: 400 }}>· {b.account.number}</span></div>
          </div>}
          {(b.ref1 || b.ref2) && <div style={{ padding: "10px 16px", flex: 1 }}>
            <div style={labelTxt}>Reference</div>
            <div style={{ fontWeight: 600, fontSize: 13, color: "#16121f", fontFamily: "var(--font-mono)" }}>{[b.ref1, b.ref2].filter(Boolean).join(" · ") || "—"}</div>
          </div>}
        </div>
      )}
      {/* meta row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", borderBottom: "1px solid #eee" }}>
        {[
          { l: "Service", v: (s && v) ? window.FX.serviceCode(s.id, v.id) : "" },
          { l: "Max weight", v: v ? v.weight.replace("< ", "< ") : "" },
          { l: "Distance", v: b.km + " km" },
          { l: "Return", v: b.isReturn ? "Yes" : "No" },
        ].map((m, i) => (
          <div key={i} style={{ padding: "10px 16px", borderRight: i < 3 ? "1px solid #f0f0f0" : "none" }}>
            <div style={labelTxt}>{m.l}</div>
            <div style={{ fontWeight: 600, fontSize: 13.5, color: "#16121f" }}>{m.v}</div>
          </div>
        ))}
      </div>
      {/* barcode + tracking */}
      <div style={{ padding: "16px 18px", display: "flex", gap: 18, alignItems: "center" }}>
        <div style={{ flex: 1 }}>
          <div style={labelTxt}>Tracking number</div>
          <div style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 18, letterSpacing: "1px", color: "#16121f", marginBottom: 8 }}>{b.tracking}</div>
          <Barcode value={b.tracking} height={52} />
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "3px", textAlign: "center", color: "#8a8499", marginTop: 4 }}>{b.tracking.replace(/-/g, "  ")}</div>
        </div>
        <div style={{ textAlign: "center" }}>
          <QRCode value={b.tracking} size={92} />
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "1px", color: "#8a8499", marginTop: 5 }}>SCAN TO TRACK</div>
        </div>
      </div>
      {/* routing footer */}
      <div style={{ background: "#16121f", color: "#fff", padding: "10px 18px", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "1px" }}>
        <span>RTE {b.pickup.suburb.slice(0,3).toUpperCase()} → {b.dropoff.suburb.slice(0,3).toUpperCase()}</span>
        <span style={{ fontWeight: 600 }}>{(s && v) ? window.FX.serviceCode(s.id, v.id) : ""}</span>
      </div>
    </div>
  );
}

/* Confirmation screen */
function Confirmation({ booking, currency, onNewBooking, onTrack, onHistory }) {
  function printLabel() {
    window.print();
  }
  function downloadLabel() {
    // render an offline-friendly HTML blob of the label
    const win = window.open("", "_blank");
    if (!win) { window.print(); return; }
    const node = document.getElementById("label-print-root");
    win.document.write(`<!doctype html><html><head><title>${booking.tracking}</title>
      <style>body{margin:0;font-family:Roboto,Arial,sans-serif;background:#f3f1ee;padding:24px;display:flex;justify-content:center;}</style></head>
      <body>${node ? node.innerHTML : ""}</body></html>`);
    win.document.close();
    setTimeout(() => win.print(), 300);
  }
  return (
    <div className="fade-up" style={{ maxWidth: 980, margin: "0 auto" }}>
      <div style={{ textAlign: "center", marginBottom: 28 }}>
        <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--success-soft)", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }}>
          <Icon name="check-circle" size={34} color="#108a52" stroke={2} />
        </div>
        <Eyebrow color="#108a52">Booking confirmed</Eyebrow>
        <h1 style={{ margin: "10px 0 6px", fontSize: 30, fontWeight: 700, letterSpacing: "-0.8px", color: "var(--fg-strong)" }}>Your same-day delivery is booked</h1>
        <p style={{ margin: 0, fontSize: 15, color: "var(--fg-mute)" }}>
          Tracking number <span className="mono" style={{ color: "var(--brand)", fontWeight: 600 }}>{booking.tracking}</span> · A driver will be assigned shortly.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 300px", gap: 24, alignItems: "start" }}>
        <div id="label-print-root" style={{ display: "flex", justifyContent: "center" }}>
          <ShippingLabel booking={booking} currency={currency} />
        </div>
        <div className="no-print" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Card pad={20}>
            <div style={{ fontSize: 13, color: "var(--fg-mute)", marginBottom: 4 }}>Total charged</div>
            <div style={{ fontSize: 34, fontWeight: 900, letterSpacing: "-1px", color: "var(--fg-strong)" }}>{window.FX.money(booking.total, currency)}</div>
            <div style={{ fontSize: 12, color: "var(--fg-mute)", marginTop: 2 }}>incl. GST · {booking.isReturn ? "return trip included" : "one-way"}</div>
            <div style={{ height: 1, background: "var(--border)", margin: "16px 0" }} />
            <Button variant="primary" full icon="printer" onClick={printLabel} style={{ marginBottom: 10 }}>Print label</Button>
            <Button variant="secondary" full icon="download" onClick={downloadLabel}>Download label (PDF)</Button>
          </Card>
          <Card pad={20}>
            <div style={{ fontWeight: 600, fontSize: 14, color: "var(--fg-strong)", marginBottom: 12 }}>What's next</div>
            {[
              { i: "navigation", t: "Track in real time", a: onTrack },
              { i: "history", t: "View in delivery history", a: onHistory },
              { i: "plus", t: "Book another delivery", a: onNewBooking },
            ].map((r, idx) => (
              <button key={idx} onClick={r.a} style={{ display: "flex", alignItems: "center", gap: 11, width: "100%", textAlign: "left", background: "transparent", border: "none", padding: "9px 0", borderTop: idx ? "1px solid var(--border)" : "none", color: "var(--fg-body)" }}>
                <Icon name={r.i} size={17} color="var(--brand)" />
                <span style={{ fontSize: 14, flex: 1 }}>{r.t}</span>
                <Icon name="chevron-right" size={15} color="var(--fg-faint)" />
              </button>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ShippingLabel, Confirmation, Wordmark });