/* ============================================================
   AfricaMart Admin — shared UI (Icon, shell, charts, overlays)
   Composes the Modern Tiles design system bundle.
   ============================================================ */
const { useState: aUseState, useEffect: aUseEffect, useRef: aUseRef, useMemo: aUseMemo } = React;

/* ---------- Icon (Lucide-style inline paths, stroke 1.5) ---------- */
const ICON_PATHS = {
  "layout-dashboard": '<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>',
  users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  store: '<path d="M3 9l1-5h16l1 5"/><path d="M4 9v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9"/><path d="M3 9h18"/><path d="M9 21V12h6v9"/>',
  package: '<path d="M16.5 9.4 7.5 4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
  "file-text": '<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 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>',
  "shopping-cart": '<circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>',
  "alert-triangle": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
  "shield-check": '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
  "bar-chart": '<line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>',
  activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
  settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
  search: '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
  bell: '<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>',
  check: '<polyline points="20 6 9 17 4 12"/>',
  "check-circle": '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
  x: '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
  ban: '<circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>',
  pause: '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>',
  play: '<polygon points="5 3 19 12 5 21 5 3"/>',
  trash: '<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
  edit: '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"/>',
  eye: '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
  "message-square": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
  "arrow-up-right": '<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>',
  "more-horizontal": '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
  filter: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
  "map-pin": '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z"/><circle cx="12" cy="10" r="3"/>',
  clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
  "trending-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
  "trending-down": '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
  "chevron-right": '<polyline points="9 18 15 12 9 6"/>',
  "chevron-down": '<polyline points="6 9 12 15 18 9"/>',
  "log-out": '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>',
  flag: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/>',
  "user-check": '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/>',
  "user-x": '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="17" y1="8" x2="22" y2="13"/><line x1="22" y1="8" x2="17" y2="13"/>',
  "badge-check": '<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/>',
  "refresh-cw": '<path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/>',
  plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
  "external-link": '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>',
  star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
  "dollar-sign": '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
  building: '<rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01"/>',
  scale: '<path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>',
  inbox: '<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>',
  "credit-card": '<rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>',
  globe: '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>',
  "alert-octagon": '<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>',
  send: '<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>',
  "key-round": '<path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5"/>',
};
function Icon({ name, size = 16, color = "currentColor", strokeWidth = 1.6, style }) {
  return React.createElement("svg", {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color,
    strokeWidth, strokeLinecap: "round", strokeLinejoin: "round",
    style: { flexShrink: 0, ...style },
    dangerouslySetInnerHTML: { __html: ICON_PATHS[name] || "" },
  });
}

/* ---------- Flag chip ---------- */
function Flag({ code, size = 14 }) {
  const c = window.AM.countryByCode[code];
  if (!c) return null;
  return React.createElement("span", {
    title: c.name,
    style: { display: "inline-flex", width: size, height: Math.round(size * 0.72), borderRadius: 2, overflow: "hidden", border: "1px solid rgba(0,0,0,.08)", flexShrink: 0, verticalAlign: "middle" },
  }, c.flag.map((col, i) => React.createElement("span", { key: i, style: { flex: 1, background: col } })));
}

/* ---------- Avatar (initials) ---------- */
function Avatar({ name, size = 34, color = "#1E3A4A" }) {
  const initials = (name || "?").split(/\s+/).slice(0, 2).map(w => w[0]).join("").toUpperCase();
  return React.createElement("span", {
    style: { width: size, height: size, borderRadius: "50%", background: color, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: size * 0.36, flexShrink: 0, fontFamily: "'Figtree',sans-serif" },
  }, initials);
}

/* ---------- Risk pill ---------- */
function RiskPill({ level }) {
  const map = { low: ["#1A6B45", "#DDFAED"], medium: ["#A05C08", "#FEF3E2"], high: ["#B91C1C", "#FEF2F2"] };
  const [c, bg] = map[level] || map.low;
  return React.createElement("span", { style: { fontSize: 11, fontWeight: 600, color: c, background: bg, padding: "2px 8px", borderRadius: 100, textTransform: "capitalize", whiteSpace: "nowrap" } }, level + " risk");
}

/* ---------- Progress bar ---------- */
function Bar({ pct, color = "#C5622C", h = 6 }) {
  return React.createElement("div", { style: { background: "#EBE5DF", borderRadius: 100, height: h, overflow: "hidden", width: "100%" } },
    React.createElement("div", { style: { width: Math.max(0, Math.min(100, pct)) + "%", height: "100%", background: color, borderRadius: 100, transition: "width .4s var(--ease-out,ease)" } }));
}

/* ---------- Toast host ---------- */
function ToastHost({ toasts }) {
  return React.createElement("div", { style: { position: "fixed", bottom: 22, left: "50%", transform: "translateX(-50%)", zIndex: 200, display: "flex", flexDirection: "column", gap: 8, alignItems: "center" } },
    toasts.map(t => React.createElement("div", {
      key: t.id,
      style: { background: "#1A1614", color: "#fff", padding: "10px 18px", borderRadius: 8, fontSize: 13, fontWeight: 500, boxShadow: "0 8px 32px rgba(26,22,20,.28)", display: "flex", alignItems: "center", gap: 9, fontFamily: "'Figtree',sans-serif", animation: "admToast .25s var(--ease-out,ease) both" },
    }, React.createElement(Icon, { name: t.icon || "check-circle", size: 15, color: t.danger ? "#F59898" : "#7DCBA0" }), t.msg)));
}

/* ---------- Right-side drawer ---------- */
function Drawer({ open, onClose, width = 460, children }) {
  const [shown, setShown] = aUseState(false);
  aUseEffect(() => {
    const onKey = e => { if (e.key === "Escape") onClose(); };
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);
  aUseEffect(() => {
    if (!open) { setShown(false); return; }
    const r = requestAnimationFrame(() => setShown(true));
    return () => cancelAnimationFrame(r);
  }, [open]);
  if (!open) return null;
  return React.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 150 } },
    React.createElement("div", { onClick: onClose, style: { position: "absolute", inset: 0, background: "rgba(15,34,50,.42)", opacity: shown ? 1 : 0, transition: "opacity .2s ease" } }),
    React.createElement("div", { style: { position: "absolute", top: 0, right: 0, bottom: 0, width, maxWidth: "94vw", background: "#fff", boxShadow: "-8px 0 32px rgba(26,22,20,.16)", display: "flex", flexDirection: "column", transform: shown ? "translateX(0)" : "translateX(24px)", transition: "transform .3s var(--ease-out,cubic-bezier(.16,1,.3,1))" } }, children));
}

/* ---------- Confirm dialog ---------- */
function Confirm({ data, onClose, onConfirm }) {
  if (!data) return null;
  const { Btn } = window.ModernTilesDesignSystem_50dd07;
  return React.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 180, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 } },
    React.createElement("div", { onClick: onClose, style: { position: "absolute", inset: 0, background: "rgba(15,34,50,.48)" } }),
    React.createElement("div", { style: { position: "relative", background: "#fff", borderRadius: 14, width: "min(420px,100%)", boxShadow: "0 16px 48px rgba(26,22,20,.2)", overflow: "hidden", animation: "admPop .2s var(--ease-out,ease) both" } },
      React.createElement("div", { style: { padding: "22px 24px 8px" } },
        React.createElement("div", { style: { width: 40, height: 40, borderRadius: 10, background: data.danger ? "#FEF2F2" : "#FEF5EF", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 14 } },
          React.createElement(Icon, { name: data.icon || "alert-triangle", size: 20, color: data.danger ? "#B91C1C" : "#C5622C" })),
        React.createElement("h3", { style: { fontFamily: "'Outfit',sans-serif", fontSize: 18, fontWeight: 600, color: "#1A1614" } }, data.title),
        React.createElement("p", { style: { fontSize: 13.5, color: "#6B6158", marginTop: 6, lineHeight: 1.55 } }, data.body)),
      React.createElement("div", { style: { padding: "16px 24px", display: "flex", gap: 10, justifyContent: "flex-end" } },
        React.createElement(Btn, { variant: "muted", onClick: onClose }, data.cancelLabel || "Cancel"),
        React.createElement(Btn, { variant: data.danger ? "danger" : "primary", onClick: () => { onConfirm(); onClose(); } }, data.confirmLabel || "Confirm"))));
}

/* ============================================================
   CHARTS — lightweight SVG, design-system colors
   ============================================================ */
function LineChart({ data, height = 150, color = "#C5622C", fill = "rgba(197,98,44,.12)", labels, fmt }) {
  const w = 520, h = height, pad = { l: 8, r: 8, t: 12, b: 22 };
  const max = Math.max(...data) * 1.08, min = Math.min(...data) * 0.92;
  const xs = i => pad.l + (i / (data.length - 1)) * (w - pad.l - pad.r);
  const ys = v => pad.t + (1 - (v - min) / (max - min)) * (h - pad.t - pad.b);
  const pts = data.map((v, i) => [xs(i), ys(v)]);
  const line = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = line + ` L${xs(data.length - 1).toFixed(1)} ${h - pad.b} L${pad.l} ${h - pad.b} Z`;
  return React.createElement("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height, display: "block" } },
    [0.25, 0.5, 0.75].map((g, i) => React.createElement("line", { key: i, x1: pad.l, x2: w - pad.r, y1: pad.t + g * (h - pad.t - pad.b), y2: pad.t + g * (h - pad.t - pad.b), stroke: "#F0EBE5", strokeWidth: 1 })),
    React.createElement("path", { d: area, fill }),
    React.createElement("path", { d: line, fill: "none", stroke: color, strokeWidth: 2.4, strokeLinecap: "round", strokeLinejoin: "round" }),
    pts.map((p, i) => i === pts.length - 1 ? React.createElement("circle", { key: i, cx: p[0], cy: p[1], r: 3.5, fill: color, stroke: "#fff", strokeWidth: 2 }) : null),
    labels && labels.map((l, i) => (i % 2 === 0 || i === labels.length - 1) ? React.createElement("text", { key: "l" + i, x: xs(i), y: h - 6, fontSize: 9, fill: "#A09288", textAnchor: "middle", fontFamily: "'Figtree',sans-serif" }, l) : null));
}

function BarChart({ data, height = 150, color = "#447892", labels, fmt }) {
  const w = 520, h = height, pad = { l: 8, r: 8, t: 12, b: 22 };
  const max = Math.max(...data) * 1.1;
  const bw = (w - pad.l - pad.r) / data.length;
  return React.createElement("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height, display: "block" } },
    data.map((v, i) => {
      const bh = (v / max) * (h - pad.t - pad.b);
      return React.createElement("rect", { key: i, x: pad.l + i * bw + bw * 0.18, y: h - pad.b - bh, width: bw * 0.64, height: bh, rx: 3, fill: i === data.length - 1 ? "#C5622C" : color, opacity: i === data.length - 1 ? 1 : 0.82 });
    }),
    labels && labels.map((l, i) => (i % 2 === 0 || i === labels.length - 1) ? React.createElement("text", { key: "l" + i, x: pad.l + i * bw + bw / 2, y: h - 6, fontSize: 9, fill: "#A09288", textAnchor: "middle", fontFamily: "'Figtree',sans-serif" }, l) : null));
}

function Donut({ segments, size = 132, thickness = 18, center }) {
  const total = segments.reduce((s, x) => s + x.value, 0);
  const r = (size - thickness) / 2, cx = size / 2, cy = size / 2, C = 2 * Math.PI * r;
  let off = 0;
  return React.createElement("div", { style: { position: "relative", width: size, height: size, flexShrink: 0 } },
    React.createElement("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" } },
      React.createElement("circle", { cx, cy, r, fill: "none", stroke: "#F0EBE5", strokeWidth: thickness }),
      segments.map((s, i) => {
        const len = (s.value / total) * C;
        const el = React.createElement("circle", { key: i, cx, cy, r, fill: "none", stroke: s.hue, strokeWidth: thickness, strokeDasharray: `${len} ${C - len}`, strokeDashoffset: -off, strokeLinecap: "butt" });
        off += len; return el;
      })),
    center && React.createElement("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" } },
      React.createElement("div", { style: { fontFamily: "'Outfit',sans-serif", fontSize: 22, fontWeight: 700, color: "#1A1614", lineHeight: 1 } }, center.value),
      React.createElement("div", { style: { fontSize: 10, color: "#A09288", marginTop: 3, textTransform: "uppercase", letterSpacing: ".06em", fontWeight: 600 } }, center.label)));
}

function Sparkline({ data, width = 100, height = 32, color = "#1A6B45" }) {
  const max = Math.max(...data), min = Math.min(...data);
  const xs = i => (i / (data.length - 1)) * width;
  const ys = v => height - 3 - ((v - min) / (max - min || 1)) * (height - 6);
  const line = data.map((v, i) => (i ? "L" : "M") + xs(i).toFixed(1) + " " + ys(v).toFixed(1)).join(" ");
  return React.createElement("svg", { width, height, style: { display: "block" } },
    React.createElement("path", { d: line, fill: "none", stroke: color, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" }));
}

Object.assign(window, {
  AdmIcon: Icon, AdmFlag: Flag, Avatar, RiskPill, Bar, ToastHost, Drawer, Confirm,
  LineChart, BarChart, Donut, Sparkline,
});