/* global React, Icon, Pill, SrcChip, CUSTOMER_DELIVERY, IOSDevice */
const { useState, useEffect } = React;

function CustomerView({ flow, advanceFlow }) {
  const [stage, setStage] = useState("pre"); // pre | sms | tracker | delivered
  const c = CUSTOMER_DELIVERY;

  useEffect(() => {
    if (flow?.id === "quote-to-delivery" && flow.step >= 5) setStage("sms");
  }, [flow?.step]);

  return (
    <div className="view-inner">
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <h2 className="page-title">End customer · delivery tracker</h2>
          <p className="page-sub">Mobile. Fisher &amp; Paykel-style tracking — no more calling Sea Containers to chase.</p>
        </div>
        <div className="row" style={{ gap: 6 }}>
          <button className={`btn sm ${stage==="sms"?"primary":""}`} onClick={() => setStage("sms")}>1. Confirmation SMS</button>
          <button className={`btn sm ${stage==="tracker"?"primary":""}`} onClick={() => setStage("tracker")}>2. Live tracker</button>
          <button className={`btn sm ${stage==="delivered"?"primary":""}`} onClick={() => setStage("delivered")}>3. Delivered</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "start" }}>
        <div className="phone-stage">
          <IOSDevice width={340} height={720} dark={stage === "sms"}>
            {stage === "sms" && <CustSms c={c} onTap={() => { setStage("tracker"); if (flow?.id === "quote-to-delivery") advanceFlow(); }} />}
            {stage === "tracker" && <CustTracker c={c} progress={3} />}
            {stage === "delivered" && <CustTracker c={c} progress={5} />}
          </IOSDevice>
        </div>

        <div className="col" style={{ gap: 12 }}>
          <div className="card" style={{ padding: 18 }}>
            <h3 style={{ margin: 0, fontSize: 14 }}>The reassurance moment</h3>
            <p className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>
              The SMS clearly says "Sea Containers NZ · trusted sender" and is scoped to this delivery. The customer only ever receives messages about their container.
            </p>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <h3 style={{ margin: 0, fontSize: 14 }}>Live progress, 5 steps</h3>
            <ol style={{ fontSize: 12.5, color: "var(--ink-700)", paddingLeft: 18, margin: "8px 0 0" }}>
              <li>Ordered</li>
              <li>Container allocated (Cin7 SKU)</li>
              <li>Transport booked</li>
              <li>In transit (driver tap-to-start)</li>
              <li>Delivered with photo (driver upload)</li>
            </ol>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <h3 style={{ margin: 0, fontSize: 14 }}>One-tap reschedule &amp; contact</h3>
            <p className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>
              If the customer needs to reschedule, they tap — CS gets an alert, driver gets an SMS, sales order updates. If they want to call the driver, they tap — the number is masked so the driver's mobile stays private.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function CustSms({ c, onTap }) {
  return (
    <div style={{ paddingTop: 60, height: "100%", background: "#000", color: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: 16 }}>
        <div style={{ textAlign: "center", color: "#888", fontSize: 11, marginTop: 8, letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>Text Message · Today 10:14</div>
        <div style={{ textAlign: "center", fontSize: 11, color: "#8e8e93", marginTop: 4 }}>Sea Containers NZ · <span style={{ color: "#3FD69A" }}>✓ trusted sender</span></div>

        <div style={{ marginTop: 18, background: "#1c1c1e", borderRadius: 18, padding: 12, fontSize: 15, lineHeight: 1.4, alignSelf: "flex-start", maxWidth: "88%" }}>
          <div>Hi {c.contact.split(" ")[0]}, your 40ft High Cube is scheduled for <b>Fri 1 May, afternoon</b>. Transport: {c.transport}.</div>
          <div style={{ marginTop: 6, color: "#5AC8FA" }} onClick={onTap}>sea.co.nz/t/SO-44218</div>
          <div style={{ fontSize: 11, color: "#8e8e93", marginTop: 8 }}>Track, reschedule, or contact transport — no login.</div>
        </div>

        <button onClick={onTap} className="slide-in" style={{
          marginTop: 14, background: "#1FA7E6", color: "#fff", border: 0,
          padding: "10px 16px", borderRadius: 999, fontWeight: 700, fontSize: 13,
          display: "inline-flex", alignItems: "center", gap: 6,
        }}>Open tracker <Icon name="arrow" size={13} /></button>
      </div>
    </div>
  );
}

function CustTracker({ c, progress }) {
  const steps = ["Ordered", "Container allocated", "Transport booked", "In transit", "Delivered"];
  return (
    <div style={{ paddingTop: 60, height: "100%", background: "#F4F6F9", color: "#0E2A47", overflow: "auto" }}>
      {/* Brand strip */}
      <div style={{ padding: "12px 18px 10px", background: "#0E2A47", color: "#fff", display: "flex", alignItems: "center", gap: 10 }}>
        <img src="assets/logo-mark.png" alt="" style={{ width: 28, height: 28, background: "#fff", borderRadius: 5, padding: 2 }} />
        <div>
          <div style={{ fontSize: 10.5, color: "rgba(255,255,255,0.6)", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 700 }}>Your delivery</div>
          <div style={{ fontWeight: 700, fontSize: 14 }}>{c.customer}</div>
        </div>
      </div>

      <div style={{ padding: 16 }}>
        <div style={{ fontSize: 11, color: "#6B7A8D", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 700 }}>Scheduled</div>
        <div style={{ fontSize: 19, fontWeight: 700, marginTop: 2 }}>{c.date}</div>
        <div style={{ fontSize: 13, color: "#33445A", marginTop: 2 }}>{c.address}</div>

        {/* Progress */}
        <div style={{ marginTop: 18, background: "#fff", border: "1px solid #EAEDF2", borderRadius: 12, padding: 14 }}>
          {steps.map((s, i) => {
            const done = i < progress;
            const now = i === progress - 1;
            return (
              <div key={s} style={{ display: "grid", gridTemplateColumns: "24px 1fr", gap: 10, padding: "6px 0", position: "relative" }}>
                <div style={{ position: "relative" }}>
                  <div style={{
                    width: 18, height: 18, borderRadius: 9,
                    background: done ? "#1FA7E6" : "#EAEDF2",
                    color: "#fff", display: "grid", placeItems: "center",
                    border: now ? "3px solid #E8F5FC" : "none",
                    boxShadow: now ? "0 0 0 2px #1FA7E6" : "none",
                  }}>
                    {done && i !== progress - 1 && <Icon name="check" size={11} />}
                  </div>
                  {i < steps.length - 1 && (
                    <div style={{ position: "absolute", top: 18, left: 8, bottom: -6, width: 2, background: i < progress - 1 ? "#1FA7E6" : "#EAEDF2" }} />
                  )}
                </div>
                <div style={{ paddingBottom: 6 }}>
                  <div style={{ fontSize: 13.5, fontWeight: done ? 700 : 500, color: done ? "#0E2A47" : "#6B7A8D" }}>{s}</div>
                  {i === 0 && <div style={{ fontSize: 11.5, color: "#6B7A8D" }}>22 Apr · SO-44218</div>}
                  {i === 1 && <div style={{ fontSize: 11.5, color: "#6B7A8D" }}>{c.container} · {c.containerType}</div>}
                  {i === 2 && <div style={{ fontSize: 11.5, color: "#6B7A8D" }}>{c.transport}</div>}
                  {i === 3 && progress >= 4 && <div style={{ fontSize: 11.5, color: "#6B7A8D" }}>En route · 38 min away</div>}
                  {i === 4 && progress >= 5 && (
                    <div style={{ marginTop: 6, borderRadius: 8, overflow: "hidden", height: 100, background: "repeating-linear-gradient(45deg, #EAEDF2 0 10px, #D5DBE3 10px 20px)", display: "grid", placeItems: "center", color: "#6B7A8D", fontSize: 11 }}>
                      [ driver photo on delivery ]
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* Actions */}
        {progress < 5 && (
          <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <button style={{ height: 46, borderRadius: 12, border: "1px solid #D5DBE3", background: "#fff", fontWeight: 600, color: "#0E2A47" }}>Reschedule</button>
            <button style={{ height: 46, borderRadius: 12, background: "#1FA7E6", border: 0, fontWeight: 700, color: "#fff" }}>Call {c.transport.split(" ")[0]}</button>
          </div>
        )}

        <div style={{ marginTop: 14, fontSize: 11.5, color: "#6B7A8D", textAlign: "center" }}>
          You'll only receive messages about this delivery.
        </div>
      </div>
    </div>
  );
}

window.CustomerView = CustomerView;