// Shared icons + small UI atoms
// Lucide-style stroke icons inline so we don't need an external lib.

const Icon = ({ name, size = 18, stroke = 1.6, ...rest }) => {
  const paths = {
    dashboard: <><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"/></>,
    store: <><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></>,
    building: <><rect x="4" y="3" width="16" height="18" rx="1.5"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/></>,
    check: <><path d="M5 12l4 4L19 7"/></>,
    checkCircle: <><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></>,
    cart: <><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M3 4h2l3 12h11l2-8H6"/></>,
    won: <><path d="M5 6l3 11h2l2-8 2 8h2l3-11"/><path d="M4 10h16M4 13h16"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c1-4 4-6 8-6s7 2 8 6"/></>,
    users: <><circle cx="9" cy="8" r="3.5"/><path d="M2 20c.6-3 3-5 7-5s6.4 2 7 5"/><path d="M16 4a3.5 3.5 0 010 7M22 20c-.4-2.4-2-4-4.5-4.7"/></>,
    star: <><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.6 1.6 0 00-1.8-.3 1.6 1.6 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.6 1.6 0 00-1-1.5 1.6 1.6 0 00-1.8.3l-.1.1a2 2 0 01-2.8-2.8l.1-.1a1.6 1.6 0 00.3-1.8 1.6 1.6 0 00-1.5-1H3a2 2 0 010-4h.1a1.6 1.6 0 001.5-1 1.6 1.6 0 00-.3-1.8l-.1-.1a2 2 0 012.8-2.8l.1.1a1.6 1.6 0 001.8.3h0a1.6 1.6 0 001-1.5V3a2 2 0 014 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 012.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8v0a1.6 1.6 0 001.5 1H21a2 2 0 010 4h-.1a1.6 1.6 0 00-1.5 1z"/></>,
    bell: <><path d="M6 8a6 6 0 0112 0c0 7 3 7 3 9H3c0-2 3-2 3-9z"/><path d="M10 21a2 2 0 004 0"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    chevDown: <><path d="M6 9l6 6 6-6"/></>,
    chevRight: <><path d="M9 6l6 6-6 6"/></>,
    chevLeft: <><path d="M15 6l-6 6 6 6"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    minus: <><path d="M5 12h14"/></>,
    download: <><path d="M12 4v12M6 12l6 6 6-6"/><path d="M4 20h16"/></>,
    upload: <><path d="M12 20V8M6 12l6-6 6 6"/><path d="M4 4h16"/></>,
    filter: <><path d="M4 5h16M7 12h10M10 19h4"/></>,
    moreH: <><circle cx="6" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="18" cy="12" r="1.2"/></>,
    moreV: <><circle cx="12" cy="6" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="12" cy="18" r="1.2"/></>,
    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 16v4z"/><path d="M14 6l4 4"/></>,
    trash: <><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></>,
    flask: <><path d="M9 3h6M10 3v6L4 19c-1 2 0 3 2 3h12c2 0 3-1 2-3l-6-10V3"/></>,
    arrowUp: <><path d="M12 19V5M5 12l7-7 7 7"/></>,
    arrowDown: <><path d="M12 5v14M5 12l7 7 7-7"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    pkg: <><path d="M12 3l9 4-9 4-9-4 9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></>,
    mapPin: <><path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></>,
    phone: <><path d="M5 3h4l2 5-3 2c1 3 3 5 6 6l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 5a2 2 0 012-2z"/></>,
    refresh: <><path d="M4 12a8 8 0 0114-5l2 2"/><path d="M20 4v5h-5"/><path d="M20 12a8 8 0 01-14 5l-2-2"/><path d="M4 20v-5h5"/></>,
    x: <><path d="M6 6l12 12M6 18L18 6"/></>,
    info: <><circle cx="12" cy="12" r="9"/><path d="M12 8h0M12 12v5"/></>,
    image: <><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5L4 20"/></>,
    list: <><path d="M4 6h16M4 12h16M4 18h16"/></>,
    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"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {paths[name]}
    </svg>
  );
};

const Badge = ({ tone = 'neutral', children, dot }) => (
  <span className={`badge badge-${tone}`}>
    {dot && <span className={`dot dot-${dot}`}></span>}
    {children}
  </span>
);

const Avatar = ({ name, tone = 'brand', size = 30 }) => {
  const c = (name || '?').slice(0, 1);
  const tones = {
    brand: { bg: 'var(--brand-soft)', fg: 'var(--brand)' },
    blue: { bg: 'var(--info-soft)', fg: 'var(--info)' },
    green: { bg: 'var(--success-soft)', fg: 'var(--success)' },
    pink: { bg: '#FDE9F3', fg: '#C13E84' },
    yellow: { bg: '#FFF7CC', fg: '#8A6900' },
    purple: { bg: '#F1ECFD', fg: '#6B3DD4' },
    neutral: { bg: '#F1F2F4', fg: 'var(--text-2)' },
  };
  const t = tones[tone] || tones.brand;
  return (
    <span style={{
      width: size, height: size, borderRadius: '50%',
      display: 'grid', placeItems: 'center',
      background: t.bg, color: t.fg,
      fontWeight: 700, fontSize: size <= 30 ? 12 : 14, flexShrink: 0,
    }}>{c}</span>
  );
};

const Pager = ({ total = 1, current = 1, onPick }) => {
  const pages = Array.from({ length: total }, (_, i) => i + 1).slice(0, 7);
  return (
    <div className="pager">
      <button><Icon name="chevLeft" size={14}/></button>
      {pages.map(n => (
        <button key={n} className={n === current ? 'active' : ''} onClick={() => onPick && onPick(n)}>{n}</button>
      ))}
      <button><Icon name="chevRight" size={14}/></button>
    </div>
  );
};

const Tabs = ({ items, value, onChange }) => (
  <div className="tabs">
    {items.map(it => (
      <button key={it.value} className={`tab ${value === it.value ? 'active' : ''}`} onClick={() => onChange(it.value)}>
        {it.label}
        {typeof it.count === 'number' && <span className="count">{it.count}</span>}
      </button>
    ))}
  </div>
);

const Seg = ({ items, value, onChange }) => (
  <div className="seg">
    {items.map(it => (
      <button key={it.value} className={value === it.value ? 'active' : ''} onClick={() => onChange(it.value)}>{it.label}</button>
    ))}
  </div>
);

const Empty = ({ title = '데이터가 없습니다', desc }) => (
  <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--text-3)' }}>
    <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--bg)', margin: '0 auto 12px', display: 'grid', placeItems: 'center' }}>
      <Icon name="info" size={22}/>
    </div>
    <div style={{ fontWeight: 600, color: 'var(--text)' }}>{title}</div>
    {desc && <div style={{ fontSize: 13, marginTop: 4 }}>{desc}</div>}
  </div>
);

const Drawer = ({ open, onClose, title, children, footer }) => {
  if (!open) return null;
  return (
    <>
      <div className="drawer-bd" onClick={onClose}></div>
      <aside className="drawer">
        <div className="drawer-h">
          <h3>{title}</h3>
          <button className="btn-icon" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="drawer-b">{children}</div>
        {footer && <div className="drawer-f">{footer}</div>}
      </aside>
    </>
  );
};

Object.assign(window, { Icon, Badge, Avatar, Pager, Tabs, Seg, Empty, Drawer });