// Shared UI primitives for Reverse Vox — Panel, buttons, icons, mic card

function Panel({ title, children, accent = true, style = {}, titleRight, bodyStyle = {} }) {
  return (
    <section style={{
      background: 'var(--panel)', border: '1px solid var(--line)',
      borderRadius: 4, padding: 22,
      backgroundImage: accent ? 'linear-gradient(180deg, rgba(231,80,2,0.04), transparent 40%)' : 'none',
      ...style,
    }}>
      {title && (
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16,
        }}>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--amber)', letterSpacing: 3,
          }}>▸ {title}</div>
          {titleRight}
        </div>
      )}
      <div style={bodyStyle}>{children}</div>
    </section>
  );
}

function buttonStyleFor(buttonStyle) {
  const amber = '#E75002', amber2 = '#ff7a3d';
  switch (buttonStyle) {
    case 'outline': return { background: 'transparent', color: amber, border: `1.5px solid ${amber}` };
    case 'tape': return { background: `repeating-linear-gradient(135deg, ${amber} 0 10px, #b03a00 10px 20px)`, color: '#000', border: 'none' };
    case 'chunky': return { background: amber, color: '#000', border: `2px solid ${amber2}`, boxShadow: `0 4px 0 #6a2200, inset 0 1px 0 ${amber2}` };
    default: return { background: `linear-gradient(180deg, ${amber2}, ${amber})`, color: '#000', border: 'none', boxShadow: `0 0 24px ${amber}44` };
  }
}

function iconBtn() {
  return {
    background: 'transparent', border: '1px solid var(--line2)', color: 'var(--text)',
    padding: '6px 10px', borderRadius: 3, cursor: 'pointer', fontSize: 13,
  };
}

function VUMeter({ seg = 12, width = 22, height = 44 }) {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    let rafId;
    function update() {
      const AE = window.AudioEngine;
      const level = AE && AE.getLiveLevel ? AE.getLiveLevel() : 0;
      const active = Math.floor(level * seg);
      if (containerRef.current) {
        const divs = containerRef.current.children;
        for (let i = 0; i < divs.length; i++) {
          const on = i < active;
          const c = i > 9 ? '#ff3b3b' : i > 6 ? '#ffb84a' : '#E75002';
          divs[i].style.background = on ? c : 'rgba(255,255,255,0.05)';
          divs[i].style.boxShadow = on ? `0 0 4px ${c}` : 'none';
        }
      }
      rafId = requestAnimationFrame(update);
    }
    rafId = requestAnimationFrame(update);
    return () => cancelAnimationFrame(rafId);
  }, [seg]);

  return (
    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column-reverse', gap: 2, width, height }}>
      {Array.from({ length: seg }).map((_, i) => (
        <div key={i} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', borderRadius: 1 }} />
      ))}
    </div>
  );
}

function MicCard({ compact = false }) {
  const [mic, setMic] = React.useState('Predeterminado — Realtek(R) Audio');
  return (
    <Panel title="INPUT · MIC 01" titleRight={
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--ok)', boxShadow: '0 0 6px var(--ok)' }} />
        <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ok)', letterSpacing: 1 }}>ACTIVE</span>
      </div>
    }>
      <select value={mic} onChange={e => setMic(e.target.value)} style={{
        width: '100%', background: 'var(--panel2)', border: '1px solid var(--line)', color: 'var(--text)',
        padding: '10px 12px', fontFamily: 'var(--mono)', fontSize: 12, borderRadius: 3, outline: 'none',
        marginBottom: 12,
      }}>
        <option>Predeterminado — Realtek(R) Audio</option>
        <option>USB Microphone</option>
        <option>AirPods Pro</option>
      </select>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'end' }}>
        <div style={{
          background: 'var(--panel2)', borderRadius: 3, padding: '6px 8px',
          height: 44, border: '1px solid var(--line)',
        }}>
          <Waveform bars={42} height={32} color={'#E75002'} color2={'#3FA890'} />
        </div>
        <VUMeter />
      </div>
    </Panel>
  );
}

Object.assign(window, { Panel, buttonStyleFor, iconBtn, VUMeter, MicCard });