// Shared Risograph theme + texture helpers + small UI primitives.
// Loaded as Babel script in both index.html and host.html.

const R = {
  paper: '#f5efe2',
  paper2: '#ebe3d0',
  paper3: '#ddd3bb',
  ink: '#1a1a1a',
  pink: '#ff5a7a',
  blue: '#3b6cff',
  yellow: '#ffd23f',
  green: '#7ad05a',
  purple: '#b870ff',
  orange: '#ff8c3b',
  teal: '#5ad6c8',
  muted: 'rgba(26,26,26,.55)',
  dim: 'rgba(26,26,26,.3)',
  font: '"Helvetica Neue", Helvetica, Arial, sans-serif',
};

const risoTex = (color = 'rgba(26,26,26,.06)', size = 3) =>
  `radial-gradient(${color} 0.6px, transparent 0.7px) 0 0/${size}px ${size}px`;

// Wraps the whole app — fills the viewport with the riso paper background
// and centers a 420px-max content column. No iPhone frame; this IS a phone.
function Stage({ children }) {
  return (
    <div style={{
      minHeight: '100dvh',
      width: '100%',
      background: R.paper,
      color: R.ink,
      fontFamily: R.font,
      WebkitFontSmoothing: 'antialiased',
      backgroundImage: risoTex('rgba(26,26,26,.06)', 3),
      backgroundAttachment: 'fixed',
      display: 'flex',
      flexDirection: 'column',
      paddingTop: 'env(safe-area-inset-top, 16px)',
      paddingBottom: 'env(safe-area-inset-bottom, 16px)',
      paddingLeft: 'env(safe-area-inset-left, 0)',
      paddingRight: 'env(safe-area-inset-right, 0)',
    }}>
      <div style={{
        width: '100%', maxWidth: 460, margin: '0 auto',
        flex: 1, display: 'flex', flexDirection: 'column',
        position: 'relative', overflow: 'hidden',
      }}>
        {children}
      </div>
    </div>
  );
}

// One screen — flex column inside the Stage with riso paper background overlay
function Screen({ children, bg }) {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      paddingTop: 16, paddingBottom: 18,
      position: 'relative', overflow: 'hidden',
      background: bg || 'transparent',
    }}>
      {children}
    </div>
  );
}

function Tag({ color, children }) {
  return (
    <span style={{
      display: 'inline-block', padding: '4px 10px',
      background: color, color: R.paper,
      fontSize: 10, fontWeight: 800, letterSpacing: '.18em', textTransform: 'uppercase',
      boxShadow: `2px 2px 0 ${R.ink}`,
    }}>{children}</span>
  );
}

function Btn({ children, onClick, bg = R.pink, fg = R.ink, big = true, disabled = false, style = {} }) {
  return (
    <button
      onClick={disabled ? undefined : onClick}
      disabled={disabled}
      style={{
        width: '100%', height: big ? 56 : 44,
        border: `2px solid ${R.ink}`,
        background: disabled ? R.paper3 : bg, color: disabled ? R.muted : fg,
        fontSize: big ? 16 : 14, fontWeight: 800, letterSpacing: '.02em',
        cursor: disabled ? 'not-allowed' : 'pointer',
        boxShadow: disabled ? 'none' : `4px 4px 0 ${R.ink}`,
        fontFamily: 'inherit', textTransform: 'uppercase',
        transform: 'translate(0,0)',
        transition: 'transform .08s, box-shadow .08s',
        ...style,
      }}
      onPointerDown={(e) => {
        if (disabled) return;
        e.currentTarget.style.transform = 'translate(2px,2px)';
        e.currentTarget.style.boxShadow = `2px 2px 0 ${R.ink}`;
      }}
      onPointerUp={(e) => {
        if (disabled) return;
        e.currentTarget.style.transform = 'translate(0,0)';
        e.currentTarget.style.boxShadow = `4px 4px 0 ${R.ink}`;
      }}
      onPointerLeave={(e) => {
        if (disabled) return;
        e.currentTarget.style.transform = 'translate(0,0)';
        e.currentTarget.style.boxShadow = `4px 4px 0 ${R.ink}`;
      }}
    >{children}</button>
  );
}

// 2-color overprint big text
function Overprint({ children, sizes = 92, color1 = R.pink, color2 = R.blue, offset = 4 }) {
  return (
    <div style={{
      position: 'relative', lineHeight: .85, letterSpacing: '-.04em',
      fontWeight: 900, fontSize: sizes,
    }}>
      <div style={{
        position: 'absolute', left: -offset, top: offset, color: color1,
        mixBlendMode: 'multiply', opacity: .9,
      }}>{children}</div>
      <div style={{ color: color2, mixBlendMode: 'multiply', opacity: .9 }}>{children}</div>
    </div>
  );
}

// Slow-rotating riso "stamp"
function RisoStamp({ size = 220, color = R.pink, top = 40, left = -60, delay = 0, duration = 22 }) {
  return (
    <div style={{
      position: 'absolute', top, left, width: size, height: size,
      borderRadius: '50%', background: color, mixBlendMode: 'multiply',
      opacity: .55,
      animation: `rstamp ${duration}s ${delay}s linear infinite`,
      backgroundImage: risoTex('rgba(0,0,0,.18)', 4),
      pointerEvents: 'none',
    }} />
  );
}

function RisoBars() {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 28 }}>
      {[12, 22, 16, 26, 14].map((h, i) => (
        <div key={i} style={{
          width: 4, height: h, background: R.blue,
          animation: `rbE ${0.5 + (i % 3) * 0.2}s ${i * 0.06}s ease-in-out infinite alternate`,
        }} />
      ))}
    </div>
  );
}

function RisoConfetti({ count = 50 }) {
  const colors = [R.pink, R.blue, R.yellow, R.ink];
  const pieces = React.useMemo(() => Array.from({ length: count }).map((_, i) => ({
    left: Math.random() * 100,
    delay: Math.random() * 0.5,
    dur: 2 + Math.random() * 1.5,
    color: colors[i % colors.length],
    rot: Math.random() * 360,
    size: 8 + Math.random() * 6,
    drift: (Math.random() - 0.5) * 100,
    shape: Math.random() > 0.5 ? '50%' : '0',
  })), [count]);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 30 }}>
      {pieces.map((p, i) => (
        <div key={i} style={{
          position: 'absolute', left: `${p.left}%`, top: -20,
          width: p.size, height: p.size * 0.4, background: p.color, borderRadius: p.shape,
          mixBlendMode: 'multiply',
          transform: `rotate(${p.rot}deg)`,
          animation: `rconf ${p.dur}s ${p.delay}s linear forwards`,
          ['--drift']: `${p.drift}px`,
        }} />
      ))}
    </div>
  );
}

// Inject keyframes once globally
function GlobalRisoStyles() {
  return (
    <style>{`
      @keyframes rstamp {
        0% { transform: rotate(0deg) translateY(0); }
        50% { transform: rotate(180deg) translateY(8px); }
        100% { transform: rotate(360deg) translateY(0); }
      }
      @keyframes rbE { 0% { transform: scaleY(.4) } 100% { transform: scaleY(1) } }
      @keyframes rconf {
        0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
        100% { transform: translate(var(--drift), 110vh) rotate(720deg); opacity: 0.5; }
      }
      @keyframes rshake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }
      @keyframes rpop { 0% { transform: scale(.92) } 60% { transform: scale(1.06) } 100% { transform: scale(1) } }
      @keyframes rpopin { 0% { transform: translateX(-12px); opacity: 0 } 100% { transform: translateX(0); opacity: 1 } }
      @keyframes rpopin-r { 0% { opacity: 0; transform: translateX(-12px) } 100% { opacity: 1; transform: translateX(0) } }
      @keyframes rfade { 0% { opacity: 0 } 100% { opacity: 1 } }
      @keyframes rdrop {
        0% { transform: translateY(-40px) scale(.9); opacity: 0 }
        60% { transform: translateY(8px) scale(1.04); opacity: 1 }
        100% { transform: translateY(0) scale(1); opacity: 1 }
      }
      @keyframes rstamp-in {
        0% { transform: scale(2.4) rotate(-12deg); opacity: 0 }
        70% { transform: scale(.96) rotate(2deg); opacity: 1 }
        100% { transform: scale(1) rotate(0); opacity: 1 }
      }
      @keyframes rspin { 100% { transform: rotate(360deg) } }
      @keyframes rpulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }
      @keyframes rgrow { 0% { width: 0 } 100% { width: var(--w) } }
      html, body, #root { height: 100%; margin: 0; padding: 0; background: #f5efe2; }
      body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
      input, button, textarea { font-family: inherit; }
      * { box-sizing: border-box; }
    `}</style>
  );
}

window.R = R;
window.risoTex = risoTex;
window.Stage = Stage;
window.Screen = Screen;
window.Tag = Tag;
window.Btn = Btn;
window.Overprint = Overprint;
window.RisoStamp = RisoStamp;
window.RisoBars = RisoBars;
window.RisoConfetti = RisoConfetti;
window.GlobalRisoStyles = GlobalRisoStyles;