// Shared UI primitives + iconography for the Samofund redesign.
// Components are tiny, presentational, dependency-free.

// ── Icons (24px) ─────────────────────────────────────────────────
const SfIcon = ({ name, size = 18, stroke = 'currentColor', sw = 1.6, style }) => {
  const paths = {
    home: <><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z" /></>,
    users: <><circle cx="9" cy="8" r="3.2" /><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" /><circle cx="17" cy="9" r="2.5" /><path d="M15 14c2.8 0 6 1.7 6 5" /></>,
    coin: <><circle cx="12" cy="12" r="8.5" /><path d="M15 9.5c-.6-.9-1.7-1.5-3-1.5-2 0-3 1-3 2.2 0 1.3 1 1.8 3 2.3s3 1 3 2.3c0 1.2-1 2.2-3 2.2-1.3 0-2.4-.6-3-1.5M12 6.5v11" /></>,
    receipt: <><path d="M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h4" /></>,
    cashbox: <><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h6m6 0h6M11 12h2" /></>,
    chart: <><path d="M4 20h16M7 16V9M12 16V5M17 16v-7" /></>,
    bell: <><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5zM10 20a2 2 0 0 0 4 0" /></>,
    cog: <><circle cx="12" cy="12" r="3" /><path d="M19.4 14.5l1.6 1-1.5 2.6-1.9-.5a8 8 0 0 1-1.9 1.1l-.5 1.9h-3l-.5-1.9a8 8 0 0 1-1.9-1.1l-1.9.5L4.4 17.5l1.6-1a8 8 0 0 1 0-2.2L4.4 13.3l1.5-2.6 1.9.5a8 8 0 0 1 1.9-1.1l.5-1.9h3l.5 1.9a8 8 0 0 1 1.9 1.1l1.9-.5 1.5 2.6-1.6 1a8 8 0 0 1 0 2.2z" /></>,
    out: <><path d="M14 4h5v5M19 4l-8 8M11 5H5v14h14v-6" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></>,
    plus: <><path d="M12 5v14M5 12h14" /></>,
    check: <><path d="M5 12.5l4.5 4.5L19 7" /></>,
    chev: <><path d="M9 6l6 6-6 6" /></>,
    chevDown: <><path d="M6 9l6 6 6-6" /></>,
    up: <><path d="M7 14l5-5 5 5" /></>,
    down: <><path d="M7 10l5 5 5-5" /></>,
    filter: <><path d="M4 5h16l-6 8v6l-4-2v-4z" /></>,
    pin: <><path d="M12 21v-7M7 4h10l-1 6a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3z" /></>,
    phone: <><path d="M5 4h3l2 5-3 2c1.2 2.6 3.4 4.8 6 6l2-3 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" /></>,
    map: <><path d="M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14" /></>,
    clock: <><circle cx="12" cy="12" r="8.5" /><path d="M12 7v5l3.5 2" /></>,
    flame: <><path d="M12 21c-4 0-7-3-7-7 0-3 2-5 3-6 0 2 1 3 2 3 0-3 1-7 5-9-1 4 4 6 4 11 0 5-3 8-7 8z" /></>,
    trophy: <><path d="M8 4h8v5a4 4 0 0 1-8 0zM4 5h4v3a2 2 0 0 1-4 0zM16 5h4v3a2 2 0 0 1-4 0zM9 14h6l1 6H8z" /></>,
    bolt: <><path d="M13 3L4 14h6l-1 7 9-11h-6z" /></>,
    moon: <><path d="M20 14a8 8 0 1 1-9-10 6 6 0 0 0 9 10z" /></>,
    note: <><path d="M5 4h11l4 4v12H5zM15 4v5h5" /></>,
    book: <><path d="M5 4h9a4 4 0 0 1 4 4v12H8a3 3 0 0 0-3 3zM5 4v17M9 8h5M9 12h5" /></>,
    leaf: <><path d="M5 19c0-9 7-15 16-15 0 9-6 15-15 15zM5 19c2-4 6-7 11-9" /></>,
    pkg: <><path d="M3 7l9-4 9 4-9 4zM3 7v10l9 4M21 7v10l-9 4M7.5 5.2l9 4" /></>,
    arrowR: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    arrowL: <><path d="M19 12H5M11 6l-6 6 6 6" /></>,
    sparkle: <><path d="M12 3l1.5 5L18 9.5 13.5 11 12 16l-1.5-5L6 9.5 10.5 8z M19 16l.7 2.3L22 19l-2.3.7L19 22l-.7-2.3L16 19l2.3-.7z" /></>,
    close: <><path d="M6 6l12 12M18 6L6 18" /></>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></>,
    edit: <><path d="M4 20h4l11-11-4-4L4 16zM14 6l4 4" /></>,
    download: <><path d="M12 4v11M7 11l5 5 5-5M5 20h14" /></>,
    paid: <><circle cx="12" cy="12" r="8.5" /><path d="M8 12l3 3 5-6" /></>,
    dot: <><circle cx="12" cy="12" r="3" /></>,
    grid: <><rect x="4" y="4" width="7" height="7" rx="1" /><rect x="13" y="4" width="7" height="7" rx="1" /><rect x="4" y="13" width="7" height="7" rx="1" /><rect x="13" y="13" width="7" height="7" rx="1" /></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13M4 6h.01M4 12h.01M4 18h.01" /></>,
    bank: <><path d="M3 10l9-6 9 6M5 10v8M19 10v8M9 10v8M15 10v8M3 20h18" /></>,
    flag: <><path d="M5 3v18M5 4h12l-2 4 2 4H5" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name] || <circle cx="12" cy="12" r="3" />}
    </svg>
  );
};

// ── Logo ─────────────────────────────────────────────────────────
const SfLogo = ({ size = 18, mono = false }) => {
  // Stylized "sf" mark — pink "s", green "f"
  const fs = size;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 0, fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: fs, letterSpacing: '-0.03em', lineHeight: 1 }}>
      <span style={{ color: mono ? 'currentColor' : '#D6398A' }}>samo</span>
      <span style={{ color: mono ? 'currentColor' : '#1E8C45' }}>fund</span>
    </div>
  );
};

// ── Pill / Badge ────────────────────────────────────────────────
const Pill = ({ tone = 'green', children, style, dot }) => {
  const tones = {
    green: { bg: '#E7F4EC', fg: '#0F4E27', dot: '#1E8C45' },
    pink: { bg: '#FBE7F1', fg: '#9A2367', dot: '#D6398A' },
    amber: { bg: '#FCEBD0', fg: '#7A4A0B', dot: '#C77A0B' },
    red: { bg: '#FBE3E0', fg: '#7A1E15', dot: '#C0392B' },
    blue: { bg: '#E1EEF8', fg: '#0F3F66', dot: '#1F6FB2' },
    gray: { bg: '#EFF2EE', fg: '#3B453F', dot: '#6B7570' },
    ink: { bg: '#16201A', fg: '#F6F8F4', dot: '#FFFFFF' },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: tones.bg, color: tones.fg,
      padding: dot ? '3px 9px 3px 7px' : '3px 9px',
      borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: 0.02,
      lineHeight: 1.4, whiteSpace: 'nowrap', ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: tones.dot, flex: '0 0 6px' }} />}
      {children}
    </span>
  );
};

// ── Button ──────────────────────────────────────────────────────
const Btn = ({ kind = 'primary', size = 'md', children, icon, trailing, style, ...rest }) => {
  const palettes = {
    primary: { bg: '#1E8C45', fg: '#fff', bd: 'transparent' },
    primaryDark: { bg: '#0F4E27', fg: '#fff', bd: 'transparent' },
    pink: { bg: '#D6398A', fg: '#fff', bd: 'transparent' },
    ghost: { bg: 'transparent', fg: '#16201A', bd: '#E6EAE6' },
    soft: { bg: '#E7F4EC', fg: '#0F4E27', bd: 'transparent' },
    dark: { bg: '#16201A', fg: '#fff', bd: 'transparent' },
  };
  const p = palettes[kind];
  const sizes = {
    sm: { h: 30, px: 12, fs: 12 },
    md: { h: 38, px: 16, fs: 13 },
    lg: { h: 46, px: 20, fs: 14 },
  };
  const s = sizes[size];
  return (
    <button {...rest} style={{
      height: s.h, padding: `0 ${s.px}px`, fontSize: s.fs, fontWeight: 600,
      background: p.bg, color: p.fg, border: `1px solid ${p.bd}`,
      borderRadius: 10, cursor: 'pointer', display: 'inline-flex',
      alignItems: 'center', gap: 8, fontFamily: 'inherit', letterSpacing: -0.1,
      ...style,
    }}>
      {icon}
      {children}
      {trailing}
    </button>
  );
};

// ── Card surface ────────────────────────────────────────────────
const Card = ({ children, pad = 20, style, bd = '#E6EAE6', radius = 16 }) => (
  <div style={{
    background: '#fff', border: `1px solid ${bd}`, borderRadius: radius,
    padding: pad, ...style,
  }}>
    {children}
  </div>
);

// ── Inline mini bar chart ───────────────────────────────────────
const MiniBars = ({ data, color = '#1E8C45', height = 36, gap = 3, max }) => {
  const m = max || Math.max(...data, 1);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap, height }}>
      {data.map((v, i) => (
        <div key={i} style={{
          flex: 1, height: `${(v / m) * 100}%`, minHeight: 2,
          background: color, opacity: 0.25 + 0.75 * (v / m), borderRadius: 2,
        }} />
      ))}
    </div>
  );
};

// ── Avatar ──────────────────────────────────────────────────────
const Avatar = ({ name = 'A', size = 32, tone = 'green', style }) => {
  const palettes = {
    green: { bg: '#1E8C45', fg: '#fff' },
    pink: { bg: '#D6398A', fg: '#fff' },
    ink: { bg: '#16201A', fg: '#fff' },
    soft: { bg: '#E7F4EC', fg: '#0F4E27' },
    pinkSoft: { bg: '#FBE7F1', fg: '#9A2367' },
  };
  const p = palettes[tone] || palettes.green;
  const init = name.split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: 999, background: p.bg, color: p.fg,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontWeight: 700, fontSize: size * 0.4, letterSpacing: 0.5, flex: `0 0 ${size}px`, ...style,
    }}>
      {init}
    </div>
  );
};

// ── Photo placeholder (subtle striped) ─────────────────────────
const Photo = ({ w = 200, h = 120, label = 'photo', radius = 12, style }) => (
  <div style={{
    width: w, height: h, borderRadius: radius, overflow: 'hidden', position: 'relative',
    background: 'repeating-linear-gradient(135deg, #E7F4EC 0 8px, #DEEFE3 8px 16px)',
    border: '1px solid #E6EAE6',
    display: 'flex', alignItems: 'center', justifyContent: 'center', ...style,
  }}>
    <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#0F4E27', opacity: 0.6, letterSpacing: 0.5 }}>{label}</span>
  </div>
);

// Money formatter — Philippine peso (₱ + K/M compact)
const fmtPHP = (n, opts = {}) => {
  const { compact = false, prefix = '₱' } = opts;
  if (compact && Math.abs(n) >= 1e6) return prefix + (n / 1e6).toFixed(2).replace(/\.00$/, '') + 'M';
  if (compact && Math.abs(n) >= 1e3) return prefix + (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
  return prefix + n.toLocaleString('en-PH');
};

Object.assign(window, { SfIcon, SfLogo, Pill, Btn, Card, MiniBars, Avatar, Photo, fmtPHP });