// Shared UI primitives used across baseline + redesigns
const { useState, useEffect, useRef } = React;

// —— Icon glyphs (minimal line icons, drawn inline) ——
const Icon = ({ name, size=20, color='currentColor', strokeWidth=1.6 }) => {
  const paths = {
    home: 'M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2z',
    list: 'M4 6h16M4 12h16M4 18h10',
    plus: 'M12 5v14M5 12h14',
    search: 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0M20 20l-4.35-4.35',
    chevR: 'M9 6l6 6-6 6',
    chevL: 'M15 6l-9 6 9 6',
    chevD: 'M6 9l6 6 6-6',
    chevU: 'M6 15l6-6 6 6',
    close: 'M6 6l12 12M18 6L6 18',
    filter: 'M4 5h16M7 12h10M10 19h4',
    calendar: 'M4 6h16v14H4zM4 10h16M8 3v4M16 3v4',
    tag: 'M3 10V4h6l11 11-6 6z M7 7h.01',
    cart: 'M3 4h2l2.5 11h11l2-8H6',
    coffee: 'M4 9h12v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM16 9h3a2 2 0 0 1 0 4h-3M6 3v2M10 3v2M14 3v2',
    car: 'M5 14l1.5-5h11L19 14M5 14v4h2v-2h10v2h2v-4M5 14h14M8 14v-1M16 14v-1',
    home2: 'M3 10l9-6 9 6v10H3z',
    zap: 'M13 2L4 14h7l-1 8 9-12h-7z',
    heart: 'M12 20s-7-5-7-11a4 4 0 0 1 7-2.5A4 4 0 0 1 19 9c0 6-7 11-7 11z',
    film: 'M3 5h18v14H3zM3 9h4M3 13h4M3 17h4M17 9h4M17 13h4M17 17h4',
    shield: 'M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z',
    wifi: 'M3 9a14 14 0 0 1 18 0M6 13a9 9 0 0 1 12 0M9 17a4 4 0 0 1 6 0M12 20v.01',
    refresh: 'M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0 1 14-3M20 15a8 8 0 0 1-14 3',
    split: 'M16 3h5v5M21 3l-7 7M4 16l7-7M4 21h5v-5',
    bell: 'M6 8a6 6 0 0 1 12 0v5l2 3H4l2-3zM10 19a2 2 0 0 0 4 0',
    mic: 'M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v3',
    camera: 'M4 7h3l2-2h6l2 2h3v12H4zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
    sparkle: 'M12 3l1.5 5L18 9.5 13.5 11 12 16l-1.5-5L6 9.5 10.5 8z M19 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z',
    eye: 'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
    eyeOff: 'M3 3l18 18M10 5.5A7 7 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3 3.5M6.5 6.5A17 17 0 0 0 2 12s3.5 7 10 7a10 10 0 0 0 4.5-1.2M10 10a3 3 0 0 0 4 4',
    star: 'M12 3l2.8 6 6.2.9-4.5 4.4 1.1 6.2L12 17.6 6.4 20.5 7.5 14.3 3 9.9l6.2-.9z',
    check: 'M5 12l5 5 9-10',
    lock: 'M6 10V7a6 6 0 0 1 12 0v3M5 10h14v10H5z',
    edit: 'M4 20h4l10-10-4-4L4 16z M13 6l4 4',
    trash: 'M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6',
    arrowD: 'M12 5v14M5 12l7 7 7-7',
    arrowU: 'M12 19V5M5 12l7-7 7 7',
    arrowR: 'M5 12h14M12 5l7 7-7 7',
    arrowL: 'M19 12H5M12 19l-7-7 7-7',
    mapPin: 'M12 21s-7-6-7-12a7 7 0 0 1 14 0c0 6-7 12-7 12zM12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
    card: 'M3 7h18v10H3zM3 11h18M7 15h3',
    bank: 'M3 10l9-6 9 6v1H3zM5 11v8M10 11v8M14 11v8M19 11v8M3 21h18',
    wallet: 'M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3zM16 13h3',
    piggy: 'M5 12a7 7 0 0 1 14 0v5h-2l-1 2h-3l-1-2h-2l-1 2H7l-1-2H5zM16 10h.01',
    receipt: 'M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h3',
    x: 'M6 6l12 12M18 6L6 18',
    more: 'M5 12h.01M12 12h.01M19 12h.01',
    moreV: 'M12 5h.01M12 12h.01M12 19h.01',
    qr: 'M3 3h6v6H3zM15 3h6v6h-6zM3 15h6v6H3zM15 15h2v2h-2zM19 15h2M15 19h2v2M19 17v4',
    grid: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z',
    dot: 'M12 12m-2 0a2 2 0 1 0 4 0 2 2 0 1 0-4 0',
    sliders: 'M4 6h8m4 0h4M4 12h2m4 0h10M4 18h12m4 0h0 M12 4v4M8 10v4M16 16v4',
    download: 'M12 4v12M6 12l6 6 6-6M4 20h16',
    sun: 'M12 3v2M12 19v2M5 12H3M21 12h-2M6.3 6.3L4.8 4.8M17.7 6.3l1.5-1.5M6.3 17.7l-1.5 1.5M17.7 17.7l1.5 1.5M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z',
    moon: 'M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z',
    target: 'M12 12m-9 0a9 9 0 1 0 18 0 9 9 0 1 0-18 0M12 12m-5 0a5 5 0 1 0 10 0 5 5 0 1 0-10 0M12 12m-1 0a1 1 0 1 0 2 0 1 1 0 1 0-2 0',
    trendingUp: 'M3 17l6-6 4 4 7-7M15 8h5v5',
    award: 'M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM9 13l-1.5 8L12 18l4.5 3L15 13',
    flame: 'M12 3c1.5 4 5 5 5 9a5 5 0 0 1-10 0c0-2 1-3.5 2.2-4.5C9.5 9.5 11 9 11 11c1-1.5 1-4 1-8z',
    gradCap: 'M3 9l9-4 9 4-9 4zM7 11.5V16c0 1 2.2 2 5 2s5-1 5-2v-4.5',
    chart: 'M4 20V10M10 20V4M16 20v-7M21 20H3',
    wand: 'M5 19L18 6M14 4h5v5M9 3l.8 2 2 .8-2 .8L9 9l-.8-2.4-2-.8 2-.8z',
    message: 'M4 5h16v11H9l-4 3v-3H4z',
    compass: 'M12 12m-9 0a9 9 0 1 0 18 0 9 9 0 1 0-18 0M16 8l-2.5 5.5L8 16l2.5-5.5z',
    layers: 'M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 17l9 5 9-5',
    bulb: 'M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.3 1 2.5h6c0-1.2.3-1.8 1-2.5A6 6 0 0 0 12 3z',
    book: 'M4 4h6a4 4 0 0 1 2 1 4 4 0 0 1 2-1h6v15h-6a3 3 0 0 0-2 1 3 3 0 0 0-2-1H4zM12 5v14',
    users: 'M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2 20a6 6 0 0 1 12 0M17 11a3 3 0 1 0 0-6M22 20a6 6 0 0 0-5-5.9',
    info: 'M12 9v5M12 16v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z',
    repeat: 'M3 11V7a3 3 0 0 1 3-3h12l-3-2m3 2l-3 2M21 13v4a3 3 0 0 1-3 3H6l3 2m-3-2l3-2',
    bookmark: 'M6 3h12v18l-6-4-6 4z',
    gift: 'M4 9h16v4H4zM4 13v8h16v-8M12 9v12M8 9a3 3 0 1 1 0-6c2 0 4 3 4 6M16 9a3 3 0 1 0 0-6c-2 0-4 3-4 6',
    smile: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM8 10h.01M16 10h.01M8 14s1.5 2 4 2 4-2 4-2',
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[name] || paths.dot} />
    </svg>
  );
};

// —— iOS status bar —— (matches frame, but we draw our own so content can control background)
const StatusBar = ({ color='#000', bg=null }) => (
  <div style={{
    height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '12px 22px 4px', color, fontFamily: window.KOI.sans, fontWeight: 600, fontSize: 15,
    background: bg || 'transparent',
    letterSpacing: '-0.01em',
  }}>
    <div>9:41</div>
    <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
      {/* Signal */}
      <svg width="18" height="12"><g fill={color}>
        <rect x="0" y="8" width="3" height="4" rx="0.5"/>
        <rect x="5" y="5" width="3" height="7" rx="0.5"/>
        <rect x="10" y="2" width="3" height="10" rx="0.5"/>
        <rect x="15" y="0" width="3" height="12" rx="0.5" opacity="0.4"/>
      </g></svg>
      {/* Wifi */}
      <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round">
        <path d="M1 4.5a11 11 0 0 1 14 0"/>
        <path d="M3 7a8 8 0 0 1 10 0"/>
        <path d="M5.5 9.5a4.5 4.5 0 0 1 5 0"/>
        <circle cx="8" cy="11" r="0.7" fill={color}/>
      </svg>
      {/* Battery */}
      <svg width="26" height="13">
        <rect x="0.5" y="0.5" width="22" height="12" rx="3" fill="none" stroke={color} opacity="0.5"/>
        <rect x="23.5" y="4" width="1.5" height="5" rx="0.5" fill={color} opacity="0.5"/>
        <rect x="2" y="2" width="19" height="9" rx="1.5" fill={color}/>
      </svg>
    </div>
  </div>
);

// —— Home indicator ——
const HomeIndicator = ({ color='#000', opacity=0.85 }) => (
  <div style={{ position:'absolute', bottom:8, left:'50%', transform:'translateX(-50%)', width:134, height:5, borderRadius:3, background:color, opacity }}/>
);

// —— Tab bar (current: Home / Expenses / Invest / Goals / Mascot) ——
const TabBar = ({ active='expenses', variant='default' }) => {
  const c = window.KOI.light;
  const tabs = [
    {id:'home', label:'Home', icon:'home'},
    {id:'expenses', label:'Expenses', icon:'list'},
    {id:'invest', label:'Invest', icon:'arrowU'},
    {id:'goals', label:'Goals', icon:'star'},
    {id:'mascot', label:'Mascot', icon:'smile'},
  ];
  return (
    <div style={{
      position:'absolute', bottom:0, left:0, right:0,
      background: c.surfaceElevated,
      borderTop: `0.5px solid ${c.border}`,
      paddingBottom: 28, paddingTop: 8,
      display:'flex',
    }}>
      {tabs.map(t => (
        <div key={t.id} style={{
          flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:3,
          color: t.id===active ? c.koiGold : c.ts,
        }}>
          <Icon name={t.icon} size={22} strokeWidth={t.id===active?1.8:1.5}/>
          <div style={{ fontSize:10, fontFamily: window.KOI.sans, fontWeight: t.id===active?600:500, letterSpacing:'0.01em' }}>{t.label}</div>
        </div>
      ))}
    </div>
  );
};

// —— Category icon circle ——
const CatIcon = ({ icon='cart', color, size=40 }) => {
  const c = window.KOI.light;
  return (
    <div style={{
      width:size, height:size, borderRadius:size/2,
      background: color || c.n100,
      display:'flex', alignItems:'center', justifyContent:'center',
      flexShrink: 0,
    }}>
      <Icon name={icon} size={size*0.5} color={c.n700} strokeWidth={1.6}/>
    </div>
  );
};

// —— Pill / chip ——
const Pill = ({ children, bg, color, bold=false, size='md', style={} }) => {
  const sizes = { sm:{px:8, py:3, fs:11}, md:{px:10, py:4, fs:12}, lg:{px:14, py:6, fs:13}};
  const s = sizes[size];
  return (
    <span style={{
      padding:`${s.py}px ${s.px}px`, background:bg, color, borderRadius:99,
      fontFamily: window.KOI.sans, fontWeight: bold?600:500, fontSize: s.fs,
      display:'inline-flex', alignItems:'center', gap:4, whiteSpace:'nowrap',
      ...style,
    }}>{children}</span>
  );
};

// —— Annotation callout (for design-intent callouts on designs) ——
const Note = ({ n, title, children, side='right', top=0, width=260 }) => {
  return (
    <div style={{
      position:'absolute',
      top,
      [side]: -width - 24,
      width,
      fontFamily: window.KOI.sans,
      fontSize: 12,
      color: '#5e5b56',
      lineHeight: 1.55,
      zIndex: 20,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:4 }}>
        <div style={{ width:22, height:22, borderRadius:99, background:'#1A1917', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:600, fontSize:11 }}>{n}</div>
        <div style={{ fontWeight:600, color:'#1A1917', fontSize:13 }}>{title}</div>
      </div>
      <div>{children}</div>
    </div>
  );
};

// —— Fake categories ——
window.CATS = [
  { id:'food',      name:'Groceries',     icon:'cart',     color:'#E8DDD2', chart:'#C9987E' },
  { id:'dining',    name:'Dining',        icon:'coffee',   color:'#F0E4D8', chart:'#B57A5C' },
  { id:'transport', name:'Transport',     icon:'car',      color:'#E3E2DB', chart:'#908D85' },
  { id:'housing',   name:'Rent',          icon:'home2',    color:'#E0DAD2', chart:'#7E7B75' },
  { id:'utilities', name:'Utilities',     icon:'zap',      color:'#EAE1D5', chart:'#D4A043' },
  { id:'health',    name:'Health',        icon:'heart',    color:'#EBDCDC', chart:'#C94A4A' },
  { id:'fun',       name:'Entertainment', icon:'film',     color:'#E3DEE6', chart:'#7E6A9B' },
  { id:'insurance', name:'Insurance',     icon:'shield',   color:'#E1E7E3', chart:'#6B8F71' },
  { id:'subs',      name:'Subscriptions', icon:'wifi',     color:'#E4E8EE', chart:'#5B8EC9' },
];

window.PRIMITIVES = { Icon, StatusBar, HomeIndicator, TabBar, CatIcon, Pill, Note };
Object.assign(window, { Icon, StatusBar, HomeIndicator, TabBar, CatIcon, Pill, Note });