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

function TransportView({ flow, advanceFlow }) {
  const [stage, setStage] = useState("sms"); // sms | job | accepted | list
  const [job, setJob] = useState(LION_JOBS[0]);

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

  return (
    <div className="view-inner">
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <h2 className="page-title">Transport partner · Lion Crane</h2>
          <p className="page-sub">Mobile-only. SMS → tap → Accept. No app install, no password, no tab-hopping. Designed for the truck cab.</p>
        </div>
        <div className="row" style={{ gap: 6 }}>
          {["sms","job","accepted","list"].map(s => (
            <button key={s} className={`btn sm ${stage===s?"primary":""}`} onClick={() => setStage(s)}>
              {s === "sms" ? "1. SMS arrives" : s === "job" ? "2. Tap link" : s === "accepted" ? "3. Accepted" : "4. Open jobs"}
            </button>
          ))}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "start" }}>
        <div className="phone-stage">
          <IOSDevice width={340} height={720} dark>
            <div style={{ paddingTop: 64, height: "100%", background: "#000", color: "#fff", display: "flex", flexDirection: "column" }}>
              {stage === "sms" && <SmsScreen onTap={() => { setStage("job"); }} />}
              {stage === "job" && <JobScreen job={job} onAccept={() => { setStage("accepted"); if (flow?.id === "quote-to-delivery") advanceFlow(); }} onDecline={() => {}} />}
              {stage === "accepted" && <AcceptedScreen job={job} onSeeAll={() => setStage("list")} />}
              {stage === "list" && <JobsList onPick={j => { setJob(j); setStage("job"); }} />}
            </div>
          </IOSDevice>
        </div>

        <div className="col" style={{ gap: 12 }}>
          <div className="card" style={{ padding: 18 }}>
            <h3 style={{ margin: 0, fontSize: 14 }}>{
              stage === "sms" ? "1. SMS from a trusted number"
              : stage === "job" ? "2. Tap the link → straight to the job"
              : stage === "accepted" ? "3. Accepted → customer & leadership notified"
              : "4. Every open job in one place"
            }</h3>
            <p className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>
              {stage === "sms" && "The message is stamped with 'Sea Containers NZ · trusted sender'. The short link lands directly on the job — no password, no app install."}
              {stage === "job" && "Address, site contact, window, container number, release, depot — pre-filled from Cin7. Three big buttons. Everything else is one tap."}
              {stage === "accepted" && "The end customer gets an SMS. The sales order updates. The leadership TV board adds the job. No email-and-phone-tag."}
              {stage === "list" && "Once they've accepted one, drivers can tap through every open job for the week. Replaces 'Lynne sends an email to check you're still good for tomorrow'."}
            </p>
            <div className="mt-12 row" style={{ gap: 6 }}>
              <SrcChip src="Hub" /><SrcChip src="Cin7" /><SrcChip src="SMS" />
            </div>
          </div>

          <div className="card" style={{ padding: 18 }}>
            <h3 style={{ margin: 0, fontSize: 14 }}>Problem-child reminders</h3>
            <p className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>
              For unreliable partners (A Crane, Hiab Ops), the Hub sends a "24 hrs out — still good?" SMS the day before. A silent or no response auto-flags the job to customer services.
            </p>
          </div>

          <div className="card" style={{ padding: 18 }}>
            <h3 style={{ margin: 0, fontSize: 14 }}>Monthly export — one job per invoice</h3>
            <p className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>
              "Download my completed jobs as CSV" — release number and container number pre-populated so the operator can invoice Sea Containers the way we want.
            </p>
            <button className="btn mt-12"><Icon name="download" size={13} /> Download April CSV</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function SmsScreen({ onTap }) {
  return (
    <div style={{ padding: 16, background: "#000", color: "#fff", flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ textAlign: "center", color: "#888", fontSize: 11, marginTop: 8, letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>Text Message · Today 10:12</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: "85%" }}>
        <div style={{ fontWeight: 600, marginBottom: 4 }}>Hi Lion Crane,</div>
        <div>New delivery job — Rangitata Orchards, Thu 30 Apr morning. 20ft Std ex Christchurch depot.</div>
        <div style={{ marginTop: 8, color: "#5AC8FA", wordBreak: "break-all" }} onClick={onTap}>
          sea.co.nz/j/DJ-20418
        </div>
        <div style={{ fontSize: 11, color: "#8e8e93", marginTop: 8 }}>Accept/decline inside — no app or login needed.</div>
      </div>

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

      <div style={{ flex: 1 }} />
      <div style={{ fontSize: 10, color: "#555", textAlign: "center", paddingBottom: 10 }}>
        You only receive messages about deliveries assigned to you.
      </div>
    </div>
  );
}

function JobScreen({ job, onAccept, onDecline }) {
  return (
    <div style={{ background: "#fff", color: "#0E2A47", flex: 1, display: "flex", flexDirection: "column", overflow: "auto" }}>
      <div style={{ padding: "14px 18px", 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: 11, color: "rgba(255,255,255,0.6)", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 700 }}>Delivery job</div>
          <div style={{ fontWeight: 700, fontFamily: "var(--font-mono)" }}>{job.id}</div>
        </div>
        <span className="pill warn no-dot" style={{ marginLeft: "auto" }}>Action needed</span>
      </div>

      <div style={{ padding: "16px 18px" }}>
        <div style={{ fontSize: 11, color: "#6B7A8D", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 700 }}>Deliver to</div>
        <div style={{ fontSize: 17, fontWeight: 700, marginTop: 2, lineHeight: 1.25 }}>{job.customer}</div>
        <div style={{ fontSize: 14, color: "#33445A", marginTop: 4, lineHeight: 1.35 }}>{job.address}</div>

        <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <Spec label="Window" v={job.date.split(",")[0]} v2={job.date.split(",")[1]} />
          <Spec label="Site contact" v={job.siteContact.split(" · ")[0]} v2={job.siteContact.split(" · ")[1]} />
          <Spec label="Container" v={job.container} v2={job.type} mono />
          <Spec label="Release" v={job.release} v2={`ex ${job.depot}`} mono />
          <Spec label="Distance" v={job.distance} v2={`one way`} />
          <Spec label="Pay" v={job.pay} v2="net 14" />
        </div>
      </div>

      <div style={{ padding: "0 18px 18px", borderTop: "1px solid #EAEDF2", marginTop: 4 }}>
        <button onClick={onAccept} style={{
          marginTop: 16, width: "100%", height: 54, borderRadius: 14, background: "#1FA7E6", color: "#fff",
          border: 0, fontWeight: 700, fontSize: 17, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
        }}>
          <Icon name="check" size={18} /> Accept job
        </button>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 10 }}>
          <button style={{ height: 46, borderRadius: 12, border: "1px solid #D5DBE3", background: "#fff", color: "#0E2A47", fontWeight: 600 }}>Amend date</button>
          <button style={{ height: 46, borderRadius: 12, border: "1px solid #D5DBE3", background: "#fff", color: "#C5413A", fontWeight: 600 }}>Decline</button>
        </div>
      </div>
    </div>
  );
}

function Spec({ label, v, v2, mono }) {
  return (
    <div style={{ padding: "10px 12px", background: "#F4F6F9", borderRadius: 10 }}>
      <div style={{ fontSize: 10.5, color: "#6B7A8D", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 700 }}>{label}</div>
      <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2, fontFamily: mono ? "var(--font-mono)" : "inherit" }}>{v}</div>
      {v2 && <div style={{ fontSize: 11.5, color: "#6B7A8D", marginTop: 1 }}>{v2}</div>}
    </div>
  );
}

function AcceptedScreen({ job, onSeeAll }) {
  return (
    <div style={{ background: "#F4F6F9", color: "#0E2A47", flex: 1, display: "flex", flexDirection: "column", alignItems: "stretch", padding: 20 }}>
      <div style={{ margin: "24px auto 16px", width: 72, height: 72, borderRadius: 36, background: "#E6F4EC", color: "#2F9E6B", display: "grid", placeItems: "center" }} className="slide-in">
        <Icon name="check" size={36} />
      </div>
      <div style={{ textAlign: "center", fontSize: 19, fontWeight: 700 }}>You're on it.</div>
      <div style={{ textAlign: "center", fontSize: 13, color: "#33445A", marginTop: 4 }}>{job.customer} · {job.date}</div>

      <div style={{ marginTop: 18, padding: 14, background: "#fff", borderRadius: 12, border: "1px solid #EAEDF2" }}>
        <div style={{ fontSize: 11, color: "#6B7A8D", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 700 }}>We'll remind you</div>
        <div style={{ fontSize: 13, marginTop: 6 }}>
          • 4pm Wed: final address & site contact<br/>
          • 7am Thu: a tap-to-confirm you've set off<br/>
          • Post-drop: upload a delivery photo
        </div>
      </div>

      <button onClick={onSeeAll} style={{
        marginTop: 14, width: "100%", height: 48, borderRadius: 12, border: "1px solid #D5DBE3", background: "#fff",
        fontWeight: 700, fontSize: 14, color: "#0E2A47",
      }}>See all my open jobs</button>

      <div style={{ flex: 1 }} />
      <div style={{ fontSize: 11, color: "#6B7A8D", textAlign: "center", marginTop: 14 }}>
        The customer now has a delivery tracker too.
      </div>
    </div>
  );
}

function JobsList({ onPick }) {
  return (
    <div style={{ background: "#F4F6F9", color: "#0E2A47", flex: 1, overflow: "auto" }}>
      <div style={{ padding: "14px 18px 8px", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div style={{ fontSize: 22, fontWeight: 700 }}>My jobs</div>
        <div style={{ fontSize: 12, color: "#6B7A8D" }}>3 open</div>
      </div>
      <div style={{ padding: "0 14px 14px", display: "flex", flexDirection: "column", gap: 10 }}>
        {LION_JOBS.map(j => (
          <button key={j.id} onClick={() => onPick(j)} style={{
            width: "100%", textAlign: "left", padding: 14, borderRadius: 12, border: "1px solid #EAEDF2", background: "#fff",
            display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10,
          }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14 }}>{j.customer}</div>
              <div style={{ fontSize: 12, color: "#33445A", marginTop: 2 }}>{j.address.split(",").slice(0,2).join(",")}</div>
              <div style={{ fontSize: 12, color: "#6B7A8D", marginTop: 4, fontFamily: "var(--font-mono)" }}>{j.id} · {j.date}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              {j.status === "pending" ? <span className="pill warn no-dot">Action</span> : <span className="pill ok no-dot">Accepted</span>}
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 700, marginTop: 6 }}>{j.pay}</div>
            </div>
          </button>
        ))}
        <button style={{ marginTop: 6, height: 44, borderRadius: 10, border: "1px solid #D5DBE3", background: "#fff", fontWeight: 600 }}>
          Download April CSV
        </button>
      </div>
    </div>
  );
}

window.TransportView = TransportView;