/* Guju Guru — UI Kit shared components.
   Exposes window.GG = { TopBar, TabBar, StatPills, Card, Tile, Btn, Progress, Chip, Row, Icon }
*/

const Icon = ({ name, size = 22, color, stroke = 1.75, style }) => {
  // Render a Lucide icon using the global UMD bundle. We render a placeholder
  // <i> with the data-lucide attr; lucide.createIcons() called on every effect tick.
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': stroke, width: size, height: size } });
  });
  return <i ref={ref} data-lucide={name} style={{ color, display: 'inline-flex', ...style }} />;
};

const StatPills = ({ streak = 5, coins = 40, hearts = 3, xp }) => (
  <div className="gg-stats">
    <span className="gg-stat gg-stat--streak"><Icon name="flame" size={14} color="#f59e0b" stroke={2} /> {streak}</span>
    <span className="gg-stat gg-stat--coin"><Icon name="coins" size={14} color="#b45309" stroke={2} /> {coins}</span>
    <span className="gg-stat gg-stat--heart"><Icon name="heart" size={14} color="#ef4444" stroke={2} /> {hearts}</span>
    {xp != null && <span className="gg-stat gg-stat--xp"><Icon name="zap" size={14} color="#1456f0" stroke={2} /> {xp}</span>}
  </div>
);

const TopBar = ({ title = 'Guju Guru', stats = {} }) => (
  <div className="gg-topbar">
    <div className="gg-topbar__brand">
      <img src="../../assets/AppIcon.png" alt="" />
      <span>{title}</span>
    </div>
    <StatPills {...stats} />
  </div>
);

const TabBar = ({ active = 'learn', onChange = () => {} }) => {
  const tabs = [
    { id: 'learn', label: 'Learn', icon: 'book-open' },
    { id: 'leaderboard', label: 'Leaderboard', icon: 'trophy' },
    { id: 'shop', label: 'Shop', icon: 'shopping-bag' },
    { id: 'profile', label: 'Profile', icon: 'user' },
  ];
  return (
    <div className="gg-tabbar">
      {tabs.map(t => (
        <button key={t.id} className="gg-tab" aria-current={active === t.id ? 'page' : undefined} onClick={() => onChange(t.id)}>
          <Icon name={t.icon} size={22} color={active === t.id ? '#1456f0' : '#8e8e93'} />
          <span>{t.label}</span>
        </button>
      ))}
    </div>
  );
};

const Btn = ({ variant = 'primary', pill, block, children, ...rest }) => (
  <button
    className={[
      'gg-btn',
      `gg-btn--${variant}`,
      pill && 'gg-btn--pill',
      block && 'gg-btn--block',
    ].filter(Boolean).join(' ')}
    {...rest}
  >{children}</button>
);

const Progress = ({ value = 0, color = '#1456f0' }) => (
  <div className="gg-progress"><div className="gg-progress__fill" style={{ width: `${value}%`, background: color }} /></div>
);

const Chip = ({ active, children, ...rest }) => (
  <button className="gg-chip" aria-pressed={active ? 'true' : 'false'} {...rest}>{children}</button>
);

const Card = ({ featured, style, children }) => (
  <div className={`gg-card ${featured ? 'gg-card--featured' : ''}`} style={style}>{children}</div>
);

const Tile = ({ tone = 'blue', kicker, title, body, children, onClick }) => (
  <div className={`gg-tile gg-grad-${tone}`} onClick={onClick} style={{ cursor: onClick ? 'pointer' : undefined }}>
    {kicker && <h4>{kicker}</h4>}
    {title && <h3>{title}</h3>}
    {body && <p>{body}</p>}
    {children}
  </div>
);

const Row = ({ left, title, sub, right, onClick }) => (
  <div className="gg-row" onClick={onClick} style={{ cursor: onClick ? 'pointer' : undefined }}>
    {left}
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ font: '600 15px var(--font-ui)', color: '#222' }}>{title}</div>
      {sub && <div style={{ font: '400 12px var(--font-ui)', color: '#8e8e93', marginTop: 2 }}>{sub}</div>}
    </div>
    {right}
  </div>
);

window.GG = { Icon, StatPills, TopBar, TabBar, Btn, Progress, Chip, Card, Tile, Row };