// components.jsx — primitivos de UI compartilhados
const { useState, useEffect, useRef } = React;

/* ---------- Ícones (formas simples / abstratas) ---------- */
function Icon({ name, size = 24, stroke = 2, className }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', className };
  switch (name) {
    case 'home':   return <svg {...p}><path d="M4 11l8-6 8 6"/><path d="M6 10v8h12v-8"/></svg>;
    case 'flame':  return <svg {...p}><path d="M12 3c3 4 5 6 5 9a5 5 0 0 1-10 0c0-1.6.7-3 2-4 .2 1.4 1 2 2 2 0-2-1-4 1-7z"/></svg>;
    case 'avatar': return <svg {...p}><circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.3 3.1-6 7-6s7 2.7 7 6"/></svg>;
    case 'chart':  return <svg {...p}><path d="M4 20V6"/><path d="M4 20h16"/><rect x="8" y="12" width="3" height="6"/><rect x="14" y="8" width="3" height="10"/></svg>;
    case 'play':   return <svg {...p} fill="currentColor" stroke="none"><path d="M8 5l11 7-11 7z"/></svg>;
    case 'pause':  return <svg {...p} fill="currentColor" stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>;
    case 'check':  return <svg {...p}><path d="M4 12l5 5L20 6"/></svg>;
    case 'arrow':  return <svg {...p}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>;
    case 'back':   return <svg {...p}><path d="M19 12H5"/><path d="M11 6l-6 6 6 6"/></svg>;
    case 'plus':   return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':  return <svg {...p}><path d="M5 12h14"/></svg>;
    case 'next':   return <svg {...p} fill="currentColor" stroke="none"><path d="M6 5l8 7-8 7z"/><rect x="16" y="5" width="3" height="14" rx="1"/></svg>;
    case 'music':  return <svg {...p}><circle cx="7" cy="18" r="2.4"/><circle cx="18" cy="16" r="2.4"/><path d="M9.4 18V7l11-2v11"/></svg>;
    case 'bell':   return <svg {...p}><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>;
    case 'fire':   return <svg {...p}><path d="M12 3c3 4 5 6 5 9a5 5 0 0 1-10 0c0-1.6.7-3 2-4 .2 1.4 1 2 2 2 0-2-1-4 1-7z"/></svg>;
    case 'clock':  return <svg {...p}><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg>;
    case 'bolt':   return <svg {...p}><path d="M13 3L5 13h6l-1 8 8-10h-6z"/></svg>;
    // glyphs de objetivo
    case 'push':   return <svg {...p}><path d="M4 16h16"/><circle cx="7" cy="12" r="2"/><path d="M9 13l8 1"/></svg>;
    case 'bar':    return <svg {...p}><path d="M4 5h16"/><path d="M8 5v3M16 5v3"/><circle cx="8" cy="11" r="1.4"/><circle cx="16" cy="11" r="1.4"/></svg>;
    case 'core':   return <svg {...p}><rect x="6" y="4" width="12" height="16" rx="3"/><path d="M6 9h12M6 14h12"/></svg>;
    case 'burn':   return <svg {...p}><path d="M12 3c3 4 5 6 5 9a5 5 0 0 1-10 0c0-1.6.7-3 2-4 .2 1.4 1 2 2 2 0-2-1-4 1-7z"/></svg>;
    case 'power':  return <svg {...p}><path d="M13 3L5 13h6l-1 8 8-10h-6z"/></svg>;
    // glyphs de badge (abstratos)
    case 'diamond':return <svg {...p}><path d="M12 3l7 6-7 12L5 9z"/></svg>;
    case 'crown':  return <svg {...p}><path d="M4 18h16M4 18l1-9 4 4 3-6 3 6 4-4 1 9"/></svg>;
    case 'peak':   return <svg {...p}><path d="M3 20h18L12 4z"/><path d="M9 12l3-4 3 4"/></svg>;
    case 'balance':return <svg {...p}><circle cx="12" cy="12" r="8"/><path d="M4 12h16"/></svg>;
    case 'fist':   return <svg {...p}><rect x="6" y="8" width="12" height="9" rx="3"/><path d="M9 8V6M12 8V5.5M15 8V6"/></svg>;
    case 'target': return <svg {...p}><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.5"/></svg>;
    default: return null;
  }
}

/* ---------- Status bar (relógio dinâmico) ---------- */
function StatusBar() {
  const [time, setTime] = useState('');
  useEffect(() => {
    const t = () => setTime(new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }));
    t(); const id = setInterval(t, 1000 * 20); return () => clearInterval(id);
  }, []);
  return (
    <div className="statusbar">
      <span>{time}</span>
      <div className="statusbar__right">
        <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"/><rect x="5" y="4" width="3" height="8" rx="1"/><rect x="10" y="2" width="3" height="10" rx="1" opacity=".4"/><rect x="15" y="0" width="3" height="12" rx="1" opacity=".4"/></svg>
        <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><path d="M8.5 3.5c1.8 0 3.4.7 4.6 1.8l1.1-1.2A8 8 0 0 0 8.5 1.8 8 8 0 0 0 2.8 4.1l1.1 1.2A6.4 6.4 0 0 1 8.5 3.5z"/><path d="M8.5 6.6c1 0 1.9.4 2.6 1l1.1-1.2a5.4 5.4 0 0 0-7.4 0l1.1 1.2c.7-.6 1.6-1 2.6-1z"/><circle cx="8.5" cy="10" r="1.6"/></svg>
        <svg width="26" height="13" viewBox="0 0 26 13" fill="none"><rect x="0.5" y="0.5" width="22" height="12" rx="3.2" stroke="currentColor" opacity=".5"/><rect x="2" y="2" width="16" height="9" rx="1.8" fill="currentColor"/><rect x="24" y="4" width="2" height="5" rx="1" fill="currentColor" opacity=".5"/></svg>
      </div>
    </div>
  );
}

/* ---------- Phone frame (auto-fit to viewport) ---------- */
function PhoneFrame({ children }) {
  const [scale, setScale] = useState(1);
  useEffect(() => {
    const fit = () => {
      const m = 24;
      const s = Math.min(1, (window.innerHeight - m * 2) / 866, (window.innerWidth - m * 2) / 412);
      setScale(s > 0 ? s : 1);
    };
    fit();
    window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  }, []);
  return (
    <div style={{ width: 412 * scale, height: 866 * scale, flex: 'none' }}>
      <div className="phone" style={{ transform: `scale(${scale})`, transformOrigin: 'top left' }}>
        <div className="phone__screen">
          <div className="phone__island" />
          <StatusBar />
          {children}
        </div>
      </div>
    </div>
  );
}

/* ---------- Bottom nav ---------- */
function BottomNav({ active, onNav }) {
  const items = [
    { id: 'dashboard', icon: 'home',   label: 'Início' },
    { id: 'workout',   icon: 'bolt',   label: 'Treino' },
    { id: 'avatar',    icon: 'avatar', label: 'Zenith' },
    { id: 'history',   icon: 'chart',  label: 'Progresso' },
  ];
  return (
    <nav style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 30,
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      padding: '12px 14px 30px',
      background: 'linear-gradient(to top, var(--bg) 62%, transparent)',
    }}>
      {items.map(it => {
        const on = active === it.id;
        return (
          <button key={it.id} onClick={() => onNav(it.id)} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
            color: on ? 'var(--accent)' : 'var(--muted-2)', flex: 1, transition: 'color .15s',
          }}>
            <Icon name={it.icon} size={24} stroke={on ? 2.4 : 2} />
            <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: .3, fontFamily: 'var(--ff-body)' }}>{it.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

/* ---------- Progress ring ---------- */
function ProgressRing({ size = 220, stroke = 12, progress = 0, track = 'var(--line)', color = 'var(--accent)', glow = true, children, animate = true }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - Math.max(0, Math.min(1, progress)));
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)', display: 'block' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke={track} strokeWidth={stroke} fill="none" />
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} fill="none"
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}
          style={{ transition: animate ? 'stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1)' : 'none',
            filter: glow ? 'var(--glow)' : 'none' }} />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {children}
      </div>
    </div>
  );
}

/* ---------- Avatar Zenith (placeholder marcado dentro de aura) ---------- */
function AvatarSlot({ size = 200, level = 1, progress = 0.4, pulse = true }) {
  return (
    <div style={{ position: 'relative', width: size, height: size, margin: '0 auto' }}>
      {/* aura/glow */}
      <div style={{
        position: 'absolute', inset: -14, borderRadius: '50%',
        background: 'radial-gradient(circle, var(--accent-soft) 0%, transparent 68%)',
        animation: 'glowPulse 3.4s ease-in-out infinite', animationPlayState: 'var(--aura-play)',
      }} />
      <ProgressRing size={size} stroke={9} progress={progress} glow>
        <div className="slot" style={{ width: size - 34, height: size - 34, borderRadius: '50%', flexDirection: 'column', gap: 6, padding: 14 }}>
          <span style={{ fontSize: 9, opacity: .8 }}>ARTE ZENITH</span>
          <span style={{ fontFamily: 'var(--ff-display)', fontSize: 30, color: 'var(--text)', fontWeight: 800 }}>NÍVEL {level}</span>
          <span style={{ fontSize: 8.5, opacity: .7 }}>drop da arte aqui</span>
        </div>
      </ProgressRing>
    </div>
  );
}

/* ---------- Badge ---------- */
function BadgeChip({ badge, earned }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, textAlign: 'center',
      opacity: earned ? 1 : 0.42,
    }}>
      <div style={{
        width: 62, height: 62, borderRadius: '50%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: earned ? 'var(--accent-soft)' : 'var(--surface-2)',
        color: earned ? 'var(--accent)' : 'var(--muted-2)',
        boxShadow: earned ? 'inset 0 0 0 1.5px var(--accent)' : 'inset 0 0 0 1px var(--line)',
        filter: earned ? 'none' : 'grayscale(1)',
      }}>
        <Icon name={badge.glyph} size={28} stroke={2} />
      </div>
      <div>
        <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: .3, lineHeight: 1 }}>{badge.name}</div>
        <div style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 3 }}>{badge.desc}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, StatusBar, PhoneFrame, BottomNav, ProgressRing, AvatarSlot, BadgeChip });