/* global React */
// Shared icon set + small primitives used across the app
// All icons have intrinsic width/height so they never stretch in flex containers.

const I = (props, children) => React.createElement('svg', {
  viewBox: "0 0 24 24",
  width: 16, height: 16,
  fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round",
  ...props,
}, children);

const Icon = {
  dashboard: (p) => I(p, <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>),
  orders: (p) => I(p, <><path d="M9 4h6l1 3H8l1-3z"/><path d="M5 7h14v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7z"/><path d="M9 12h6"/></>),
  inventory: (p) => I(p, <><path d="M3.3 7L12 3l8.7 4-8.7 4-8.7-4z"/><path d="M3.3 7v10L12 21l8.7-4V7"/><path d="M12 11v10"/></>),
  stores: (p) => I(p, <><path d="M4 4h16l-1 5a3 3 0 0 1-6 0 3 3 0 0 1-6 0L4 4z"/><path d="M5 11v9h14v-9"/></>),
  packing: (p) => I(p, <><path d="M21 8l-9 4-9-4 9-4 9 4z"/><path d="M3 8v9l9 4 9-4V8"/><path d="M7 6.2v4l5 2"/></>),
  returns: (p) => I(p, <><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></>),
  reports: (p) => I(p, <><path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 16V11"/><path d="M12 16V8"/><path d="M16 16v-3"/></>),
  api: (p) => I(p, <><path d="M8 7l-5 5 5 5"/><path d="M16 7l5 5-5 5"/><path d="M14 4l-4 16"/></>),
  settings: (p) => I(p, <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>),
  search: (p) => I(p, <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>),
  bell: (p) => I(p, <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></>),
  help: (p) => I(p, <><circle cx="12" cy="12" r="9"/><path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2-3 4"/><path d="M12 17h.01"/></>),
  plus: (p) => I(p, <path d="M12 5v14M5 12h14"/>),
  filter: (p) => I(p, <><path d="M3 5h18"/><path d="M6 12h12"/><path d="M10 19h4"/></>),
  download: (p) => I(p, <><path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M5 21h14"/></>),
  printer: (p) => I(p, <><path d="M6 9V3h12v6"/><rect x="3" y="9" width="18" height="9" rx="1"/><path d="M6 14h12v7H6z"/></>),
  arrowUp: (p) => I({ ...p, strokeWidth: 2.5 }, <path d="M7 14l5-5 5 5"/>),
  arrowDown: (p) => I({ ...p, strokeWidth: 2.5 }, <path d="M7 10l5 5 5-5"/>),
  cash: (p) => I(p, <><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 10v4M18 10v4"/></>),
  cart: (p) => I(p, <><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l3 13h12l2-9H6"/></>),
  truck: (p) => I(p, <><rect x="1" y="6" width="13" height="11" rx="1"/><path d="M14 9h5l3 4v4h-8"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></>),
  box: (p) => I(p, <><path d="M3 7l9-4 9 4v10l-9 4-9-4V7z"/><path d="M3 7l9 4 9-4"/><path d="M12 11v10"/></>),
  check: (p) => I({ ...p, strokeWidth: 2.5 }, <path d="M5 12l5 5L20 7"/>),
  x: (p) => I(p, <path d="M6 6l12 12M18 6L6 18"/>),
  more: (p) => I(p, <><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></>),
  scan: (p) => I(p, <><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M21 7V5a2 2 0 0 0-2-2h-2"/><path d="M3 17v2a2 2 0 0 0 2 2h2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 8v8M11 8v8M15 8v8M19 8v8"/></>),
  inbound: (p) => I(p, <><path d="M21 8v8a2 2 0 0 1-1 1.7l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.7l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8z"/><path d="M12 22V12"/><path d="M3.3 7L12 12l8.7-5"/><path d="M12 8V2"/><path d="M9 5l3-3 3 3"/></>),
  copy: (p) => I(p, <><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>),
  link: (p) => I(p, <><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></>),
  warn: (p) => I(p, <><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></>),
  zap: (p) => I(p, <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z"/>),
  finance: (p) => I(p, <><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 5-6"/><path d="M14 7h5v5"/></>),
  ledger: (p) => I(p, <><path d="M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V4z"/><path d="M4 17a3 3 0 0 1 3-3h13"/><path d="M8 8h7M8 11h5"/></>),
  flow: (p) => I(p, <><path d="M3 7h13l-3-3M21 17H8l3 3"/><circle cx="3" cy="7" r="1.5"/><circle cx="21" cy="17" r="1.5"/></>),
  cost: (p) => I(p, <><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 10h4.5a1.5 1.5 0 0 1 0 3H9h5a2 2 0 0 1 0 4h-5"/></>),
  material: (p) => I(p, <><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 12l9 4 9-4M3 17l9 4 9-4"/></>),
  user: (p) => I(p, <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>),
};

// Marketplace badge
function MP({ type, showName = true }) {
  const meta = {
    shopee:   { cls: "mp-shopee",  label: "S",  name: "Shopee" },
    tokopedia:{ cls: "mp-tokped",  label: "T",  name: "Tokopedia" },
    tiktok:   { cls: "mp-tiktok",  label: "",   name: "TikTok Shop" },
    lazada:   { cls: "mp-lazada",  label: "L",  name: "Lazada" },
    bukalapak:{ cls: "mp-bukalap", label: "B",  name: "Bukalapak" },
    blibli:   { cls: "mp-blibli",  label: "B",  name: "Blibli" },
  }[type];
  if (!meta) return null;
  return (
    <span className="mp">
      <span className={`mp-icon ${meta.cls}`}>{meta.label}</span>
      {showName && <span>{meta.name}</span>}
    </span>
  );
}

function Sparkline({ data, color = "var(--brand-500)", fill = "var(--brand-100)", height = 60 }) {
  const w = 220, h = height, max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const step = w / (data.length - 1);
  const pts = data.map((v, i) => [i * step, h - 6 - ((v - min) / range) * (h - 12)]);
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = `${path} L${w},${h} L0,${h} Z`;
  return (
    <svg className="spark" width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height: h }}>
      <path d={area} fill={fill} opacity="0.7"/>
      <path d={path} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function BarChart({ data, labels, height = 220, color = "var(--brand-500)" }) {
  const max = Math.max(...data) * 1.15;
  return (
    <div style={{ position: 'relative', height, padding: '12px 4px 28px', borderBottom: '1px solid var(--border)' }}>
      <div style={{ position: 'absolute', inset: '12px 4px 28px', display: 'flex', alignItems: 'flex-end', gap: 4 }}>
        {data.map((v, i) => (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>
            <div style={{
              width: '70%',
              height: `${(v / max) * 100}%`,
              background: `linear-gradient(180deg, ${color}, ${color}aa)`,
              borderRadius: '6px 6px 0 0',
              transition: 'height 0.4s'
            }}/>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', left: 4, right: 4, bottom: 6, display: 'flex' }}>
        {labels.map((l, i) => (
          <div key={i} style={{ flex: 1, textAlign: 'center', fontSize: 11, color: 'var(--ink-500)' }}>{l}</div>
        ))}
      </div>
    </div>
  );
}

function Donut({ segments, size = 140 }) {
  const total = segments.reduce((s, x) => s + x.value, 0);
  const r = size / 2 - 12;
  const c = 2 * Math.PI * r;
  let off = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ width: size, height: size }}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--surface-2)" strokeWidth="14"/>
      {segments.map((s, i) => {
        const len = (s.value / total) * c;
        const dasharray = `${len} ${c - len}`;
        const el = (
          <circle key={i} cx={size/2} cy={size/2} r={r} fill="none"
            stroke={s.color} strokeWidth="14"
            strokeDasharray={dasharray}
            strokeDashoffset={-off}
            transform={`rotate(-90 ${size/2} ${size/2})`}
            strokeLinecap="butt"
          />
        );
        off += len;
        return el;
      })}
    </svg>
  );
}

window.Icon = Icon;
window.MP = MP;
window.Sparkline = Sparkline;
window.BarChart = BarChart;
window.Donut = Donut;