// Admin / Dispatcher view
const { useState: useStateAdmin, useMemo: useMemoAdmin } = React;

const ADMIN_PRICING = window.FOLFEM_DATA.pricing;
const ADMIN_COMPANY = window.FOLFEM_DATA.company;

const Sparkline = ({ data, color = "var(--accent)" }) => {
  const w = 120, h = 28;
  const max = Math.max(...data), min = Math.min(...data);
  const span = max - min || 1;
  const pts = data.map((v, i) => `${(i / (data.length - 1)) * w},${h - ((v - min) / span) * (h - 4) - 2}`).join(" ");
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <polyline points={`0,${h} ${pts} ${w},${h}`} fill={color} opacity="0.08" />
    </svg>
  );
};

const MapPlaceholder = ({ height = 240, label = "Live dispatch map", pins = [] }) => (
  <div className="map-placeholder" style={{ minHeight: height }}>
    <svg className="route-svg" viewBox="0 0 400 240" preserveAspectRatio="none">
      <path d="M40,180 C100,160 140,80 200,90 S320,160 360,60" fill="none" stroke="var(--accent)" strokeWidth="2" strokeDasharray="6 4" opacity="0.7" />
    </svg>
    {pins.map((p, i) => (
      <span key={i} className={"pin" + (p.kind === "dest" ? " dest" : "")} style={{ left: `${p.x}%`, top: `${p.y}%` }} />
    ))}
    <span className="map-label">map: {label}</span>
  </div>
);

const AdminDashboard = ({ jobs, drivers, messages, onOpenJob }) => {
  const counts = {
    total: jobs.length,
    inTransit: jobs.filter(j => ["Collected", "Export", "Transit"].includes(j.stage)).length,
    customs: jobs.filter(j => ["Arrived", "Customs"].includes(j.stage)).length,
    lastMile: jobs.filter(j => j.stage === "OutForDelivery").length,
    delivered: jobs.filter(j => j.stage === "Delivered").length,
  };
  const revenue = jobs.reduce((s, j) => s + j.price, 0);
  const recent = jobs.slice(0, 6);

  return (
    <>
      <div className="page-head">
        <div>
          <h1>Operations dashboard</h1>
          <div className="sub">UK → Nigeria · Tilbury / Heathrow exports · Lagos &amp; Abuja hubs</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn"><FFIcon name="download" size={14} />Export</button>
          <button className="btn btn-primary"><FFIcon name="plus" size={14} />New shipment</button>
        </div>
      </div>

      <div className="kpis">
        <div className="card kpi">
          <div className="k">Active shipments</div>
          <div className="v">{counts.total}</div>
          <div className="delta up"><FFIcon name="arrow" size={12} />+12% vs last week</div>
          <Sparkline data={[3, 4, 4, 5, 6, 5, 7, 6]} />
        </div>
        <div className="card kpi">
          <div className="k">In transit (air &amp; sea)</div>
          <div className="v">{counts.inTransit}</div>
          <div className="delta up">All on schedule</div>
          <Sparkline data={[2, 3, 3, 4, 4, 5, 4]} />
        </div>
        <div className="card kpi">
          <div className="k">At customs</div>
          <div className="v">{counts.customs}</div>
          <div className="delta">Awaiting clearance</div>
          <Sparkline data={[1, 2, 1, 3, 2, 2, 2]} color="var(--amber)" />
        </div>
        <div className="card kpi">
          <div className="k">Booked revenue</div>
          <div className="v">{formatGBP(revenue)}</div>
          <div className="delta">{counts.lastMile} out for last-mile</div>
          <Sparkline data={[1, 1, 2, 2, 3, 3, 4]} color="oklch(0.55 0.12 240)" />
        </div>
      </div>

      <div className="split">
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Active shipments</div>
              <div className="card-sub">Click any row to open details</div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn btn-ghost"><FFIcon name="filter" size={14} />Filter</button>
            </div>
          </div>
          <table className="jobs-table">
            <thead>
              <tr>
                <th>Shipment</th>
                <th>Route</th>
                <th>Stage</th>
                <th>Last-mile</th>
              </tr>
            </thead>
            <tbody>
              {recent.map(j => {
                const dr = j.driverId ? drivers.find(d => d.id === j.driverId) : null;
                return (
                  <tr key={j.id} className="selectable" onClick={() => onOpenJob(j.id)}>
                    <td>
                      <div className="jid">{j.id}</div>
                      <div style={{ marginTop: 4 }}><ModeBadge mode={j.mode} service={j.service} /></div>
                    </td>
                    <td>
                      <div className="route">{j.origin.name}<small>UK → {j.delivery.addr.split(",").slice(-1)[0].trim()}</small></div>
                    </td>
                    <td><StageChip stage={j.stage} /></td>
                    <td>
                      {dr ? (
                        <div className="driver">
                          <span className="avatar">{initials(dr.name)}</span>
                          <span style={{ fontSize: 12 }}>{dr.name.split(" ")[0]}</span>
                        </div>
                      ) : (
                        <span style={{ fontSize: 12, color: "var(--muted)" }}>—</span>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Live network</div>
                <div className="card-sub">UK exports · Nigeria hubs</div>
              </div>
              <button className="btn btn-ghost"><FFIcon name="cog" size={14} /></button>
            </div>
            <div style={{ padding: 14 }}>
              <MapPlaceholder height={200} label="UK → Nigeria corridor" pins={[
                { x: 18, y: 28 }, { x: 30, y: 32 }, { x: 78, y: 78, kind: "dest" }, { x: 70, y: 70, kind: "dest" },
              ]} />
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Activity</div>
                <div className="card-sub">System + notifications</div>
              </div>
            </div>
            <div className="log">
              {messages.slice(0, 4).map(m => (
                <div key={m.id} className="log-item">
                  <span className={"log-glyph " + m.channel}><FFIcon name={m.channel === "sms" ? "sms" : "mail"} size={14} /></span>
                  <div className="log-body">
                    <div className="log-head">
                      <span className="log-title">{m.subject}</span>
                      <span className="log-time">{m.t}</span>
                    </div>
                    <div className="log-text"><span className="to">→ {m.to}</span> · {m.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const STAGE_FILTERS = [
  { key: "All", label: "All", test: () => true },
  { key: "Transit", label: "In transit", test: j => ["Collected", "Export", "Transit"].includes(j.stage) },
  { key: "Customs", label: "At customs", test: j => ["Arrived", "Customs"].includes(j.stage) },
  { key: "OutForDelivery", label: "Last-mile", test: j => j.stage === "OutForDelivery" },
  { key: "Delivered", label: "Delivered", test: j => j.stage === "Delivered" },
];

const AdminJobs = ({ jobs, drivers, selectedId, setSelectedId, assignDriver, sendMessage }) => {
  const [filter, setFilter] = useStateAdmin("All");
  const fdef = STAGE_FILTERS.find(f => f.key === filter) || STAGE_FILTERS[0];
  const filtered = jobs.filter(fdef.test);
  const selected = selectedId ? jobs.find(j => j.id === selectedId) : null;
  const selectedDriver = selected && selected.driverId ? drivers.find(d => d.id === selected.driverId) : null;
  const canAssign = selected && ["Arrived", "Customs", "OutForDelivery"].includes(selected.stage);

  return (
    <>
      <div className="page-head">
        <div>
          <h1>Shipments</h1>
          <div className="sub">{jobs.length} shipments · click a row to view the journey &amp; assign last-mile drivers</div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {STAGE_FILTERS.map(s => (
          <button key={s.key} className={"btn" + (filter === s.key ? " btn-primary" : "")} style={{ padding: "6px 10px", fontSize: 12 }} onClick={() => setFilter(s.key)}>
            {s.label} <span style={{ opacity: 0.6, marginLeft: 4 }}>{jobs.filter(s.test).length}</span>
          </button>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: selected ? "minmax(0, 1fr) 380px" : "1fr", gap: 16 }}>
        <div className="card">
          <table className="jobs-table">
            <thead>
              <tr>
                <th>Shipment</th>
                <th>Client</th>
                <th>Route</th>
                <th>Service</th>
                <th>Stage</th>
                <th>Last-mile</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(j => {
                const dr = j.driverId ? drivers.find(d => d.id === j.driverId) : null;
                return (
                  <tr key={j.id} className={"selectable" + (selectedId === j.id ? " selected" : "")} onClick={() => setSelectedId(j.id)}>
                    <td>
                      <div className="jid">{j.id}</div>
                      <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>{formatGBP(j.price)}</div>
                    </td>
                    <td><div style={{ fontWeight: 600 }}>{j.client}</div></td>
                    <td>
                      <div className="route">
                        {j.origin.name} <span style={{ color: "var(--muted)" }}>→</span> {j.delivery.name}
                        <small>UK → {j.delivery.addr.split(",").slice(-1)[0].trim()} · ETA {j.eta}</small>
                      </div>
                    </td>
                    <td><ModeBadge mode={j.mode} service={j.service} /></td>
                    <td><StageChip stage={j.stage} /></td>
                    <td>
                      {dr ? (
                        <div className="driver">
                          <span className="avatar">{initials(dr.name)}</span>
                          <span style={{ fontSize: 12 }}>{dr.name.split(" ")[0]}</span>
                        </div>
                      ) : (
                        <span style={{ fontSize: 12, color: "var(--muted)" }}>—</span>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {selected && (
          <div className="card" style={{ alignSelf: "start" }}>
            <div className="card-head">
              <div>
                <div className="card-title">{selected.id}</div>
                <div className="card-sub">{selected.client}</div>
              </div>
              <button className="btn btn-ghost" onClick={() => setSelectedId(null)}>×</button>
            </div>

            <div className="drawer-section">
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                <ModeBadge mode={selected.mode} service={selected.service} size="lg" />
                <StageChip stage={selected.stage} />
              </div>
              <JourneyTracker stage={selected.stage} mode={selected.mode} />
              <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 10, display: "flex", alignItems: "center", gap: 6 }}>
                <FFIcon name={modeIcon(selected.mode)} size={13} />{selected.mode_carrier} · ETA {selected.eta}
              </div>
            </div>

            <div className="drawer-section">
              <h4>Route</h4>
              <div className="dm-route" style={{ marginTop: 4 }}>
                <div className="rail">
                  <span className="pin" />
                  <span className="line" />
                  <span className="pin mid" />
                  <span className="line" />
                  <span className="pin dest" />
                </div>
                <div className="stops">
                  <div className="stop">
                    <div className="l">🇬🇧 UK collection</div>
                    <div className="addr">{selected.origin.name}</div>
                    <div className="sub">{selected.origin.addr}</div>
                    <div className="sub mono">{selected.origin.contact} · {selected.origin.phone}</div>
                  </div>
                  <div className="stop">
                    <div className="l">Clearing hub</div>
                    <div className="addr">{selected.hub.name}</div>
                    <div className="sub">{selected.hub.addr}</div>
                  </div>
                  <div className="stop">
                    <div className="l">Recipient · {selected.delivery.time}</div>
                    <div className="addr">{selected.delivery.name}</div>
                    <div className="sub">{selected.delivery.addr}</div>
                    <div className="sub mono">{selected.delivery.phone}</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="drawer-section">
              <h4>Contents &amp; customs</h4>
              <div className="kv"><span className="k">Service</span><span className="v">{selected.service}</span></div>
              <div className="kv"><span className="k">Contents</span><span className="v">{selected.contents}</span></div>
              <div className="kv"><span className="k">Declared value</span><span className="v mono">{formatGBP(selected.declaredValue)}</span></div>
              <div className="kv"><span className="k">Freight charge</span><span className="v mono">{formatGBP(selected.price)}</span></div>
            </div>

            <div className="drawer-section">
              <h4>Last-mile assignment</h4>
              {!canAssign ? (
                <div style={{ fontSize: 12, color: "var(--muted)" }}>
                  Available once the shipment clears customs in {selected.delivery.addr.split(",").slice(-1)[0].trim()}.
                </div>
              ) : selectedDriver ? (
                <>
                  <div className="driver-row" style={{ padding: "10px 0", border: 0 }}>
                    <span className="avatar lg">{initials(selectedDriver.name)}</span>
                    <div className="meta">
                      <div className="nm">{selectedDriver.name}</div>
                      <div className="sub">{selectedDriver.city} · {selectedDriver.vehicle}</div>
                    </div>
                    <span className={"badge " + selectedDriver.status}>{selectedDriver.status}</span>
                  </div>
                  <button className="btn btn-danger btn-block" onClick={() => assignDriver(selected.id, null)}>
                    Reassign / unassign
                  </button>
                </>
              ) : (
                <div className="driver-picker" style={{ margin: "0 -18px -16px", borderTop: "1px solid var(--line)" }}>
                  {drivers.filter(d => d.region === "NG" && d.status !== "offline").slice(0, 5).map(d => (
                    <div key={d.id} className="driver-row" onClick={() => assignDriver(selected.id, d.id)}>
                      <span className="avatar lg">{initials(d.name)}</span>
                      <div className="meta">
                        <div className="nm">{d.name}</div>
                        <div className="sub">{d.city} · {d.vehicle} · ★ {d.rating}</div>
                      </div>
                      <span className={"badge " + d.status}>{d.status}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="drawer-section">
              <h4>Timeline</h4>
              <div className="timeline">
                {selected.events.map((e, i) => (
                  <div key={i} className={"timeline-row done"}>
                    <span className="timeline-bullet" />
                    {i < selected.events.length - 1 && <span className="timeline-line" />}
                    <div className="timeline-content">
                      <div className="timeline-name">{(STAGES.find(s => s.key === e.k) || {}).label || statusLabel(e.k)}</div>
                      <div className="timeline-meta">{e.t} · {e.text}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="drawer-section">
              <h4>OTP proof of delivery</h4>
              {selected.otp ? (
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div>
                    <div className="mono" style={{ fontSize: 22, fontWeight: 700, letterSpacing: "0.3em" }}>{selected.otp}</div>
                    <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>
                      Sent to {selected.delivery.phone}
                    </div>
                  </div>
                  <button className="btn" onClick={() => sendMessage({ channel: "sms", to: selected.delivery.phone, subject: "Delivery OTP", body: `Your Folfem delivery OTP for ${selected.id} is ${selected.otp}. Share only with the driver on arrival.`, jobId: selected.id })}>
                    <FFIcon name="sms" size={14} />Resend
                  </button>
                </div>
              ) : (
                <div style={{ fontSize: 12, color: "var(--muted)" }}>OTP will be generated when the driver marks "Out for delivery".</div>
              )}
            </div>
          </div>
        )}
      </div>
    </>
  );
};

const AdminDrivers = ({ drivers, jobs }) => {
  const groups = [
    { key: "NG", title: "Nigeria — last-mile", sub: "Deliver cleared shipments to the recipient's door" },
    { key: "UK", title: "United Kingdom — collection couriers", sub: "Collect from senders and run to the export hub" },
  ];
  return (
    <>
      <div className="page-head">
        <div>
          <h1>Fleet &amp; couriers</h1>
          <div className="sub">{drivers.filter(d => d.region === "NG").length} last-mile drivers in Nigeria · {drivers.filter(d => d.region === "UK").length} UK collection couriers</div>
        </div>
      </div>
      {groups.map(g => (
        <div key={g.key} style={{ marginBottom: 22 }}>
          <div style={{ marginBottom: 10 }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>{g.title}</div>
            <div style={{ fontSize: 12, color: "var(--muted)" }}>{g.sub}</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
            {drivers.filter(d => d.region === g.key).map(d => {
              const active = jobs.filter(j => j.driverId === d.id && j.stage !== "Delivered").length;
              const done = jobs.filter(j => j.driverId === d.id && j.stage === "Delivered").length;
              return (
                <div key={d.id} className="card card-pad">
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span className="avatar xl">{initials(d.name)}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 700, fontSize: 14 }}>{d.name}</div>
                      <div style={{ fontSize: 11, color: "var(--muted)" }}>{d.id} · {d.city}</div>
                    </div>
                    <span className={"badge " + d.status} style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase", padding: "3px 7px", borderRadius: 4, background: d.status === "available" ? "var(--accent-soft)" : d.status === "busy" ? "var(--amber-soft)" : "var(--bg-tint)", color: d.status === "available" ? "var(--accent-ink)" : d.status === "busy" ? "var(--amber-ink)" : "var(--muted)" }}>{d.status}</span>
                  </div>
                  <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--line)", display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 4 }}>
                    <div>
                      <div style={{ fontSize: 10, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 700 }}>Rating</div>
                      <div className="mono" style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>★ {d.rating}</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 700 }}>Active</div>
                      <div className="mono" style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>{active}</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 700 }}>Done</div>
                      <div className="mono" style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>{done}</div>
                    </div>
                  </div>
                  <div style={{ marginTop: 10, fontSize: 11, color: "var(--muted)" }}>{d.vehicle}</div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </>
  );
};

const AdminInbox = ({ messages, jobs }) => {
  const [selectedId, setSelectedId] = useStateAdmin(messages[0]?.id);
  const selected = messages.find(m => m.id === selectedId);
  const relatedJob = selected && jobs.find(j => j.id === selected.jobId);

  return (
    <>
      <div className="page-head">
        <div>
          <h1>Notifications inbox</h1>
          <div className="sub">Email &amp; SMS sent to UK senders and Nigeria recipients — sandbox only, no real send</div>
        </div>
        <span className="chip" style={{ background: "var(--amber-soft)", color: "var(--amber-ink)" }}>
          <span className="chip-dot" />Sandbox mode
        </span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) 1.4fr", gap: 16 }}>
        <div className="card" style={{ alignSelf: "start" }}>
          <div className="card-head"><div className="card-title">All messages</div></div>
          <div className="log">
            {messages.map(m => (
              <button key={m.id} className={"log-item"} style={{ width: "100%", textAlign: "left", border: 0, background: selectedId === m.id ? "var(--accent-soft)" : "transparent", cursor: "pointer", borderBottom: "1px solid var(--line)" }} onClick={() => setSelectedId(m.id)}>
                <span className={"log-glyph " + m.channel}><FFIcon name={m.channel === "sms" ? "sms" : "mail"} size={14} /></span>
                <div className="log-body">
                  <div className="log-head">
                    <span className="log-title">{m.subject}</span>
                    <span className="log-time">{m.t}</span>
                  </div>
                  <div className="log-text"><span className="to">→ {m.to}</span></div>
                  <div className="log-text" style={{ marginTop: 4, color: "var(--muted)" }}>{m.body.slice(0, 60)}…</div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {selected && (
          <div className="card" style={{ alignSelf: "start" }}>
            <div className="card-head">
              <div>
                <div className="card-title">{selected.subject}</div>
                <div className="card-sub">{selected.channel.toUpperCase()} · {selected.t} · {selected.jobId}</div>
              </div>
              <span className={"chip " + (selected.channel === "sms" ? "status-InTransit" : "status-Assigned")}>
                {selected.channel === "sms" ? "SMS" : "Email"}
              </span>
            </div>
            <div style={{ padding: 18 }}>
              <div className="kv"><span className="k">To</span><span className="v mono">{selected.to}</span></div>
              <div className="kv"><span className="k">From</span><span className="v mono">{selected.channel === "sms" ? "FOLFEM" : "noreply@folfem.co"}</span></div>
              <div className="kv"><span className="k">Job</span><span className="v">{selected.jobId}</span></div>
              <div style={{ marginTop: 16, padding: 16, background: "var(--bg-tint)", borderRadius: 8, fontSize: 13, lineHeight: 1.55, whiteSpace: "pre-wrap" }}>
                {selected.body}
              </div>
              {relatedJob && (
                <div style={{ marginTop: 16, fontSize: 12, color: "var(--muted)" }}>
                  Related to <strong style={{ color: "var(--ink)" }}>{relatedJob.id}</strong> · {relatedJob.origin.name} → {relatedJob.delivery.name}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </>
  );
};

const AdminPricing = () => {
  const P = ADMIN_PRICING;
  return (
    <>
      <div className="page-head">
        <div>
          <h1>Rate card &amp; services</h1>
          <div className="sub">Standard Folfem pricing (GBP) and the full UK ⇆ Nigeria service catalogue</div>
        </div>
        <button className="btn"><FFIcon name="download" size={14} />Export rate card</button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.3fr) minmax(0, 1fr)", gap: 16, alignItems: "start" }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Pricing</div>
              <div className="card-sub">All prices in GBP · customs duties quoted separately</div>
            </div>
          </div>
          <table className="jobs-table">
            <thead>
              <tr>
                <th>Service</th>
                <th>Pricing model</th>
                <th style={{ textAlign: "right" }}>Price</th>
              </tr>
            </thead>
            <tbody>
              {P.table.map((row, i) => (
                <tr key={i}>
                  <td><div style={{ fontWeight: 600 }}>{row.service}</div></td>
                  <td><span style={{ fontSize: 12, color: "var(--muted)" }}>{row.model}</span></td>
                  <td style={{ textAlign: "right" }}><span className="mono" style={{ fontWeight: 700 }}>{row.price}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="card card-pad">
            <div className="card-title" style={{ marginBottom: 4 }}>Quick reference</div>
            <div className="card-sub" style={{ marginBottom: 12 }}>The numbers that drive sender quotes</div>
            <div className="kv"><span className="k">Air freight</span><span className="v mono">£{P.rates.airPerKg.toFixed(2)}/kg</span></div>
            <div className="kv"><span className="k">Sea freight (LCL)</span><span className="v mono">£{P.rates.seaLclPerCuFt}/cu ft</span></div>
            <div className="kv"><span className="k">Service charge</span><span className="v mono">{formatGBP(P.rates.serviceFee)} / shipment</span></div>
            <div className="kv"><span className="k">UK collection</span><span className="v mono">£{P.collection.min}–£{P.collection.max}</span></div>
            <div className="kv"><span className="k">Lagos / Abuja delivery</span><span className="v mono">{formatGBP(P.delivery.lagosAbuja)}</span></div>
            <div className="kv"><span className="k">Interstate delivery</span><span className="v mono">{formatGBP(P.delivery.interstate)}</span></div>
            <div className="kv"><span className="k">Warehousing</span><span className="v mono">£{P.warehousingPerWeek.min}–£{P.warehousingPerWeek.max}/wk</span></div>
          </div>

          <div className="card card-pad">
            <div className="card-title" style={{ marginBottom: 10 }}>Contact</div>
            <div className="kv"><span className="k">Email</span><span className="v mono">{ADMIN_COMPANY.email}</span></div>
            <div className="kv"><span className="k">UK</span><span className="v mono">{ADMIN_COMPANY.phoneUK}</span></div>
            <div className="kv"><span className="k">Nigeria</span><span className="v mono">{ADMIN_COMPANY.phoneNG}</span></div>
            {ADMIN_COMPANY.offices.map((o, i) => (
              <div key={i} style={{ marginTop: 10, fontSize: 12 }}>
                <div style={{ fontWeight: 700 }}>{o.flag} {o.name}</div>
                <div style={{ color: "var(--muted)", lineHeight: 1.45 }}>{o.lines.join(", ")}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ marginTop: 20 }}>
        <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>Services offered</div>
        <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 12 }}>Air, sea &amp; land cargo for individuals and businesses</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 14 }}>
          {P.services.map((s, i) => (
            <div key={i} className="card card-pad">
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
                <span className="trust-ic" style={{ display: "grid", placeItems: "center" }}><FFIcon name={s.icon} size={16} /></span>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{s.title}</div>
              </div>
              <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 10 }}>{s.desc}</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {s.features.map((f, k) => (
                  <span key={k} className="chip" style={{ background: "var(--bg-tint)", color: "var(--ink-2)" }}>{f}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

const AdminView = ({ jobs, drivers, messages, assignDriver, sendMessage }) => {
  const [page, setPage] = useStateAdmin("dashboard");
  const [selectedJobId, setSelectedJobId] = useStateAdmin(null);
  const atCustoms = jobs.filter(j => ["Arrived", "Customs"].includes(j.stage)).length;
  const lastMile = jobs.filter(j => j.stage === "OutForDelivery").length;

  return (
    <div className="admin-shell">
      <aside className="sidebar">
        <div className="nav-group">
          <div className="nav-label">Operations</div>
          <button className={page === "dashboard" ? "active" : ""} onClick={() => setPage("dashboard")}>
            <FFIcon name="home" size={15} />Dashboard
          </button>
          <button className={page === "jobs" ? "active" : ""} onClick={() => setPage("jobs")}>
            <FFIcon name="list" size={15} />Shipments<span className="counter">{jobs.length}</span>
          </button>
          <button className={page === "drivers" ? "active" : ""} onClick={() => setPage("drivers")}>
            <FFIcon name="truck" size={15} />Fleet<span className="counter">{drivers.length}</span>
          </button>
          <button className={page === "inbox" ? "active" : ""} onClick={() => setPage("inbox")}>
            <FFIcon name="bell" size={15} />Inbox<span className="counter">{messages.length}</span>
          </button>
          <button className={page === "pricing" ? "active" : ""} onClick={() => setPage("pricing")}>
            <FFIcon name="wallet" size={15} />Rate card
          </button>
        </div>
        <div className="nav-group">
          <div className="nav-label">Needs attention</div>
          <button onClick={() => setPage("jobs")}>
            <FFIcon name="shield" size={15} />At customs<span className="counter">{atCustoms}</span>
          </button>
          <button onClick={() => setPage("jobs")}>
            <FFIcon name="truck" size={15} />Out for delivery<span className="counter">{lastMile}</span>
          </button>
        </div>
        <div style={{ marginTop: "auto", padding: "16px 10px 0", borderTop: "1px solid var(--line)" }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <span className="avatar">FA</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 700 }}>Folake Adediran</div>
              <div style={{ fontSize: 10, color: "var(--muted)" }}>Lead dispatcher</div>
            </div>
          </div>
        </div>
      </aside>

      <main className="main">
        {page === "dashboard" && <AdminDashboard jobs={jobs} drivers={drivers} messages={messages} onOpenJob={(id) => { setSelectedJobId(id); setPage("jobs"); }} />}
        {page === "jobs" && <AdminJobs jobs={jobs} drivers={drivers} selectedId={selectedJobId} setSelectedId={setSelectedJobId} assignDriver={assignDriver} sendMessage={sendMessage} />}
        {page === "drivers" && <AdminDrivers drivers={drivers} jobs={jobs} />}
        {page === "inbox" && <AdminInbox messages={messages} jobs={jobs} />}
        {page === "pricing" && <AdminPricing />}
      </main>
    </div>
  );
};

window.AdminView = AdminView;