/* =====================================================================
   Loaders — the cleanest loading icons imaginable.
   Five variants, all brand-consistent, all SVG/CSS based.
   ===================================================================== */

const { useEffect: useEffectLd, useRef: useRefLd, useState: useStateLd } = React;

// 1. BarSpectrum — equalizer bars, mono + accent
function BarSpectrum({ size = 22, color = 'currentColor' }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, height: size }}>
      {[0, 1, 2, 3, 4].map(i => (
        <span key={i} style={{
          width: size / 8, background: color,
          animation: `mwBar ${0.9 + i * 0.05}s ease-in-out ${i * 0.08}s infinite`,
          transformOrigin: 'center',
        }}/>
      ))}
      <style>{`@keyframes mwBar { 0%, 100% { height: ${size*0.2}px } 50% { height: ${size}px } }`}</style>
    </span>
  );
}

// 2. OrbitArc — minimal rotating arc (what Apple wishes theirs was)
function OrbitArc({ size = 28, stroke = 1.5, color = 'var(--accent)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: 'inline-block' }}>
      <circle cx="20" cy="20" r="16" fill="none" stroke="currentColor" strokeOpacity="0.18" strokeWidth={stroke}/>
      <path d="M 20 4 A 16 16 0 0 1 36 20" fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.9s" repeatCount="indefinite"/>
      </path>
    </svg>
  );
}

// 3. DotTrace — three dots with confidence
function DotTrace({ color = 'var(--accent)', size = 4 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
      {[0, 1, 2].map(i => (
        <span key={i} style={{
          width: size, height: size, background: color, borderRadius: '50%',
          animation: `mwDot 1.2s ease-in-out ${i * 0.16}s infinite`,
        }}/>
      ))}
      <style>{`@keyframes mwDot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.75) } 40% { opacity: 1; transform: scale(1.1) } }`}</style>
    </span>
  );
}

// 4. BarProgress — determinate bar with mono label
function BarProgress({ pct = 0, label = 'LOADING', width = 180 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--fg-3)' }}>
        <span>— {label}</span>
        <span style={{ color: 'var(--accent)' }}>{Math.round(pct)}%</span>
      </div>
      <div style={{ height: 2, background: 'var(--border-strong)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ height: '100%', background: 'var(--accent)', width: `${pct}%`, transition: 'width .3s var(--ease-out)', boxShadow: '0 0 8px var(--accent)' }}/>
      </div>
    </div>
  );
}

// 5. Scanline — terminal-style character rolodex
function Scanline({ text = 'LOADING', speed = 45 }) {
  const [frame, setFrame] = useStateLd(0);
  useEffectLd(() => {
    const t = setInterval(() => setFrame(f => f + 1), speed);
    return () => clearInterval(t);
  }, [speed]);
  const chars = '█▓▒░▄▀◆◇◈◉';
  const scrambled = text.split('').map((c, i) => {
    if (frame > (i + 4) * 3) return c;
    return chars[(frame + i * 3) % chars.length];
  }).join('');
  return (
    <span style={{ fontFamily: 'var(--font-mono)', letterSpacing: '0.2em', color: 'var(--accent)' }}>{scrambled}</span>
  );
}

// 6. Grid pulse — 3x3 dot matrix, each fading in/out on phase
function GridPulse({ size = 20 }) {
  const cells = 9;
  return (
    <span style={{ display: 'inline-grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2, width: size, height: size }}>
      {[...Array(cells)].map((_, i) => (
        <span key={i} style={{
          background: 'currentColor', width: '100%', height: '100%',
          animation: `mwGrid 1.4s ease-in-out ${((i * 37) % 100) / 100}s infinite`,
        }}/>
      ))}
      <style>{`@keyframes mwGrid { 0%, 100% { opacity: 0.15 } 50% { opacity: 1 } }`}</style>
    </span>
  );
}

// -------------- Full-page boot splash --------------
function BootSplash({ onDone }) {
  const [pct, setPct] = useStateLd(0);
  const [stage, setStage] = useStateLd('init');
  const stages = [
    { at: 0,  label: 'INIT' },
    { at: 18, label: 'LOADING FONTS' },
    { at: 38, label: 'COMPILING SHADERS' },
    { at: 62, label: 'WIRING AGENT' },
    { at: 85, label: 'FINALIZING' },
    { at: 100, label: 'READY' },
  ];
  useEffectLd(() => {
    let p = 0;
    const t = setInterval(() => {
      p += 1.5 + Math.random() * 3;
      if (p >= 100) {
        p = 100; clearInterval(t);
        setStage('READY');
        setTimeout(() => onDone && onDone(), 420);
      }
      setPct(p);
      const st = stages.slice().reverse().find(s => p >= s.at);
      if (st) setStage(st.label);
    }, 32);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 999,
      background: 'var(--bg)', color: 'var(--fg-1)',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      animation: pct >= 100 ? 'mwBootOut .4s var(--ease-out) forwards' : 'none',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32, minWidth: 280, maxWidth: '80%' }}>
        {/* Logo mark + live ring */}
        <div style={{ position: 'relative', width: 64, height: 64 }}>
          <svg width="64" height="64" viewBox="0 0 68 68" fill="none" style={{ position: 'absolute' }}>
            <circle cx="34" cy="34" r="31" stroke="var(--fg-1)" strokeWidth="2"/>
            <path d="M19 48 L19 22 L34 35 L49 22 L49 48" stroke="var(--fg-1)" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
            <path d="M13 22 L55 22" stroke="var(--fg-1)" strokeWidth="2.25" strokeLinecap="round"/>
            <circle cx="34" cy="34" r="2" fill="var(--accent)">
              <animate attributeName="opacity" values="1;0.3;1" dur="1.4s" repeatCount="indefinite"/>
            </circle>
          </svg>
          <svg width="64" height="64" viewBox="0 0 68 68" fill="none" style={{ position: 'absolute' }}>
            <circle cx="34" cy="34" r="31" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray={`${pct * 1.95} 195`} strokeLinecap="round" transform="rotate(-90 34 34)" style={{ filter: 'drop-shadow(0 0 6px var(--accent))' }}/>
          </svg>
        </div>
        <BarProgress pct={pct} label={stage} width={280}/>
        <div style={{ display: 'flex', gap: 16, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--fg-4)', textAlign: 'center' }}>
          <span>MIDWEST&nbsp;TECHNOLOGIES</span>
          <span style={{ color: 'var(--fg-3)' }}>·</span>
          <span>OKLAHOMA&nbsp;STATE</span>
        </div>
      </div>
      <style>{`@keyframes mwBootOut { to { opacity: 0; pointer-events: none } }`}</style>
    </div>
  );
}

Object.assign(window, { BarSpectrum, OrbitArc, DotTrace, BarProgress, Scanline, GridPulse, BootSplash });