// Shared icons + tiny helpers for Folfem POC (UK → Nigeria shipping)
const FFIcon = ({ name, size = 16, stroke = 1.6, style }) => {
  const paths = {
    box: <><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 11v10"/></>,
    truck: <><rect x="1" y="6" width="14" height="10" rx="1"/><path d="M15 9h4l3 3v4h-7z"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></>,
    user: <><circle cx="12" cy="8" r="3.6"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></>,
    bell: <><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 18a2 2 0 1 0 4 0"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    check: <><path d="M5 12l5 5L20 7"/></>,
    chev: <><path d="M9 6l6 6-6 6"/></>,
    pin: <><path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    filter: <><path d="M3 5h18M6 12h12M10 19h4"/></>,
    map: <><path d="M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2z"/><path d="M9 4v14M15 6v14"/></>,
    pallet: <><rect x="3" y="3" width="18" height="12" rx="1"/><path d="M3 9h18M9 3v12M15 3v12"/><path d="M3 18h18M5 18v3M11 18v3M19 18v3"/></>,
    parcel: <><path d="M21 8l-9-5-9 5 9 5 9-5z"/><path d="M3 8v8l9 5 9-5V8"/><path d="M12 13v8"/></>,
    barrel: <><path d="M6 3h12c-1 3-1 15 0 18H6c1-3 1-15 0-18z"/><path d="M5 8h14M5 16h14"/></>,
    plane: <><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></>,
    ship: <><path d="M3 14l1.5 6a1 1 0 0 0 1 .8h11a1 1 0 0 0 1-.8L20 14M3 14l9-3 9 3M12 11V5M12 5H8m4 0h4M6 11V8h12v3"/></>,
    anchor: <><circle cx="12" cy="5" r="2"/><path d="M12 7v13M5 12H3a9 9 0 0 0 18 0h-2"/></>,
    shield: <><path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5z"/><path d="M9 12l2 2 4-4"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18"/></>,
    star: <><path d="M12 2l3 7 7 .6-5.3 4.7L18 22l-6-3.5L6 22l1.3-7.7L2 9.6 9 9z"/></>,
    mail: <><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 7l10 7L22 7"/></>,
    sms: <><path d="M21 12a8 8 0 0 1-11.6 7.1L3 21l1.9-6.4A8 8 0 1 1 21 12z"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    cog: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.65 1.65 0 0 0-1.8-.3 1.65 1.65 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.65 1.65 0 0 0-1-1.5 1.65 1.65 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.65 1.65 0 0 0 .3-1.8 1.65 1.65 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.65 1.65 0 0 0 1.5-1 1.65 1.65 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.65 1.65 0 0 0 1.8.3H9a1.65 1.65 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.65 1.65 0 0 0 1 1.5 1.65 1.65 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.65 1.65 0 0 0-.3 1.8V9a1.65 1.65 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.65 1.65 0 0 0-1.5 1z"/></>,
    phone: <><path d="M22 16.9v3a2 2 0 0 1-2.2 2A20 20 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2L7.9 9.7a16 16 0 0 0 6.4 6.4l1.4-1.4a2 2 0 0 1 2-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></>,
    download: <><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></>,
    note: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h5"/></>,
    flame: <><path d="M12 2s5 5 5 10a5 5 0 1 1-10 0c0-2 1-3 1-3s2 1 2 4c0 0 2-3 2-7z"/></>,
    home: <><path d="M3 11l9-8 9 8M5 9.5V21h14V9.5"/></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    chat: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    hub: <><path d="M3 21V9l9-5 9 5v12"/><path d="M3 21h18M9 21v-6h6v6"/></>,
    backspace: <><path d="M22 5H9l-7 7 7 7h13a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/><path d="M18 9l-6 6M12 9l6 6"/></>,
    wallet: <><path d="M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v0H5a2 2 0 0 0-2 2z"/><path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2H5"/><circle cx="16.5" cy="13" r="1.3"/></>,
    bank: <><path d="M3 10l9-6 9 6M4 10h16M6 10v8M10 10v8M14 10v8M18 10v8M3 21h18"/></>,
    arrowUp: <><path d="M12 19V5M6 11l6-6 6 6"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name] || null}
    </svg>
  );
};

// Folfem charges UK customers in GBP; Nigeria last-mile driver payouts are local NGN.
const formatGBP = (n) => "£" + Number(n).toLocaleString();
const formatNGN = (n) => "₦" + Number(n).toLocaleString();

// Driver-leg status (last-mile in Nigeria)
const STATUS_ORDER = ["Pending", "Assigned", "Accepted", "InTransit", "Delivered"];
const statusLabel = (s) => ({
  Pending: "Awaiting last-mile",
  Assigned: "Assigned",
  Accepted: "Accepted",
  InTransit: "Out for delivery",
  Delivered: "Delivered",
}[s] || s);

// Shipment journey milestones (UK → Nigeria)
const STAGES = [
  { key: "Booked", label: "Booked", short: "Booked" },
  { key: "Collected", label: "Collected in UK", short: "Collected" },
  { key: "Export", label: "UK export hub", short: "Export" },
  { key: "Transit", label: "In transit", short: "In transit" },
  { key: "Arrived", label: "Arrived in Nigeria", short: "Arrived" },
  { key: "Customs", label: "Customs clearance", short: "Customs" },
  { key: "OutForDelivery", label: "Out for delivery", short: "Last mile" },
  { key: "Delivered", label: "Delivered", short: "Delivered" },
];
const stageIndex = (k) => Math.max(0, STAGES.findIndex(s => s.key === k));
const stageMeta = (k) => STAGES.find(s => s.key === k) || STAGES[0];
const modeIcon = (mode) => mode === "Sea" ? "ship" : "plane";

const initials = (name) => name.split(" ").slice(0, 2).map(s => s[0]).join("");
const flagFor = (country) => ({ UK: "🇬🇧", Nigeria: "🇳🇬" }[country] || "");

// Small badge showing transport mode + service
const ModeBadge = ({ mode, service, size = "sm" }) => (
  <span className={"mode-badge mode-" + (mode || "Air").toLowerCase() + (size === "lg" ? " lg" : "")}>
    <FFIcon name={modeIcon(mode)} size={size === "lg" ? 14 : 12} />
    {service || (mode === "Sea" ? "Sea freight" : "Air freight")}
  </span>
);

// Stage chip (journey milestone)
const StageChip = ({ stage }) => {
  const m = stageMeta(stage);
  return <span className={"chip stage-" + m.key}><span className="chip-dot" />{m.short}</span>;
};

// Horizontal journey tracker: UK collection → transit → W. Africa → delivery
const JourneyTracker = ({ stage, mode, eta, compact }) => {
  const cur = stageIndex(stage);
  return (
    <div className={"journey" + (compact ? " compact" : "")}>
      <div className="journey-line"><span className="journey-fill" style={{ width: `${(cur / (STAGES.length - 1)) * 100}%` }} /></div>
      <div className="journey-nodes">
        {STAGES.map((s, i) => {
          const cls = i < cur ? "done" : i === cur ? "current" : "todo";
          const isTransit = s.key === "Transit";
          return (
            <div key={s.key} className={"journey-node " + cls}>
              <span className="dot">
                {i < cur ? <FFIcon name="check" size={10} stroke={3} />
                  : isTransit ? <FFIcon name={modeIcon(mode)} size={11} />
                  : i === cur ? <span className="pulse" /> : null}
              </span>
              {!compact && <span className="lbl">{s.short}</span>}
            </div>
          );
        })}
      </div>
    </div>
  );
};

Object.assign(window, {
  FFIcon, formatGBP, formatNGN, STATUS_ORDER, statusLabel,
  STAGES, stageIndex, stageMeta, modeIcon, initials, flagFor,
  ModeBadge, StageChip, JourneyTracker,
});