// OBEY — design primitives. Reusable atoms used across all screens.

const { useState, useEffect, useRef } = React;

function ObeyMark({ size = 28, color = '#F5F1E8', dot = '#FF3B3B' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.32 }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: 'transparent',
        border: `1.5px solid ${color}`,
        position: 'relative',
        flexShrink: 0,
      }}>
        <div style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%,-50%)',
          width: size * 0.32, height: size * 0.32,
          borderRadius: '50%',
          background: dot,
          boxShadow: `0 0 ${size * 0.4}px ${dot}`,
        }} />
      </div>
      <span style={{
        fontFamily: 'Inter, sans-serif',
        fontWeight: 900,
        fontSize: size * 0.78,
        letterSpacing: '0.16em',
        color,
      }}>OBEY</span>
    </div>
  );
}

function Tag({ children, color = 'var(--paper)', bg = 'transparent', border = 'var(--line-2)', style = {} }) {
  return (
    <span className="mono all-caps" style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      fontSize: 10,
      fontWeight: 500,
      padding: '5px 9px',
      borderRadius: 999,
      color,
      background: bg,
      border: `1px solid ${border}`,
      letterSpacing: '0.18em',
      ...style,
    }}>{children}</span>
  );
}

function StatusDot({ color = 'var(--acid)', size = 6 }) {
  return (
    <span className="pulse" style={{
      display: 'inline-block', width: size, height: size, borderRadius: '50%',
      background: color, boxShadow: `0 0 8px ${color}`,
    }} />
  );
}

function ScoreRing({ value = 72, max = 100, size = 180, label = 'LIFE SCORE', sublabel, color = '#C4B5FD' }) {
  const r = size / 2 - 10;
  const c = 2 * Math.PI * r;
  const dash = (value / max) * c;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(245,241,232,0.08)" strokeWidth="1.5" />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth="1.5"
          strokeDasharray={`${dash} ${c}`} strokeLinecap="butt"
          style={{ transition: 'stroke-dasharray 0.6s ease' }}
        />
        {Array.from({ length: 60 }).map((_, i) => {
          const a = (i / 60) * Math.PI * 2;
          const inner = r - 4;
          const outer = r - (i % 5 === 0 ? 8 : 6);
          const x1 = size/2 + Math.cos(a) * inner;
          const y1 = size/2 + Math.sin(a) * inner;
          const x2 = size/2 + Math.cos(a) * outer;
          const y2 = size/2 + Math.sin(a) * outer;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(245,241,232,0.18)" strokeWidth="0.6" />;
        })}
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
      }}>
        <div className="serif" style={{ fontSize: size * 0.34, lineHeight: 1, color: 'var(--paper)' }}>{value}</div>
        <div className="mono all-caps" style={{ fontSize: 9, color: 'var(--mute)', marginTop: 4 }}>{label}</div>
        {sublabel && <div className="mono" style={{ fontSize: 9, color: 'var(--mute-2)', marginTop: 2 }}>{sublabel}</div>}
      </div>
    </div>
  );
}

function AIDispatch({ persona, mood, moodColor, children, day, time = '21:04', glitch = false }) {
  return (
    <div style={{ width: '100%' }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 18, paddingBottom: 10, borderBottom: '1px solid var(--line)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <StatusDot color={moodColor} />
          <span className="mono all-caps" style={{ fontSize: 10, color: 'var(--paper)' }}>OBEY · {persona}</span>
        </div>
        <span className="mono" style={{ fontSize: 10, color: 'var(--mute)' }}>D{day} · {time}</span>
      </div>
      <div className="serif" style={{
        fontSize: 30,
        lineHeight: 1.18,
        color: 'var(--paper)',
        textWrap: 'pretty',
        animation: glitch ? 'obeyGlitchX 0.18s steps(4) 3' : 'obeyEnter 0.5s ease',
      }}>{children}</div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8, marginTop: 18,
        color: 'var(--mute)',
      }}>
        <span className="mono" style={{ fontSize: 10 }}>MOOD</span>
        <span className="mono all-caps" style={{ fontSize: 10, color: moodColor }}>{mood}</span>
        <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        <TypingDots color={moodColor} />
      </div>
    </div>
  );
}

function TypingDots({ color = 'var(--paper)' }) {
  return (
    <div style={{ display: 'inline-flex', gap: 4 }}>
      {[0, 1, 2].map(i => (
        <span key={i} style={{
          width: 4, height: 4, borderRadius: '50%', background: color,
          animation: `obeyTyping 1.2s ease-in-out ${i * 0.18}s infinite`,
        }} />
      ))}
    </div>
  );
}

function ChoiceButton({ kind = 'OBEY', sub, onClick }) {
  const { CHOICES } = window.OBEY_DATA;
  const c = CHOICES[kind];
  const isObey = kind === 'OBEY';
  const isLie = kind === 'LIE';
  return (
    <button onClick={onClick} className="sans" style={{
      width: '100%',
      background: c.color,
      color: c.fg,
      border: c.border || 'none',
      borderRadius: 14,
      padding: isObey ? '18px 20px' : '14px 18px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 12,
      cursor: 'pointer',
      fontFamily: 'inherit',
      transition: 'transform 0.12s ease, background 0.2s ease',
      textAlign: 'left',
    }}
    onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.985)'}
    onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
    >
      <div>
        <div className="all-caps" style={{
          fontSize: isObey ? 18 : 13,
          fontWeight: 800,
          letterSpacing: '0.22em',
          color: c.fg,
        }}>{c.label}</div>
        <div style={{
          fontSize: 11,
          color: isObey ? 'rgba(10,6,18,0.65)' : 'var(--mute)',
          marginTop: 2,
        }}>{sub || c.sub}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {isLie && (
          <span className="mono" style={{ fontSize: 9, color: 'var(--warn)', opacity: 0.7 }}>RISK</span>
        )}
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <path d="M5 12h14M13 6l6 6-6 6" stroke={isObey ? '#0A0612' : 'currentColor'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    </button>
  );
}

function MissionCard({ mission, day }) {
  return (
    <div style={{
      border: '1px solid var(--line-2)',
      borderRadius: 18,
      padding: 18,
      background: 'rgba(245,241,232,0.025)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <Tag>MISSION · D{day}</Tag>
        <Tag color="var(--warn)" border="rgba(255,176,32,0.4)">{mission.tag}</Tag>
      </div>
      <div className="serif" style={{ fontSize: 24, lineHeight: 1.2, color: 'var(--paper)', marginBottom: 10 }}>
        {mission.title}
      </div>
      <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--mute)', marginBottom: 16 }}>
        {mission.brief}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--line)' }}>
        <div>
          <div className="mono all-caps" style={{ fontSize: 9, color: 'var(--mute-2)' }}>WINDOW</div>
          <div className="mono" style={{ fontSize: 13, color: 'var(--paper)', marginTop: 2 }}>{mission.duration}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="mono all-caps" style={{ fontSize: 9, color: 'var(--mute-2)' }}>REWARD</div>
          <div className="mono" style={{ fontSize: 13, color: 'var(--acid)', marginTop: 2 }}>{mission.reward}</div>
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value, sub, accent = 'var(--paper)' }) {
  return (
    <div style={{ flex: 1 }}>
      <div className="mono all-caps" style={{ fontSize: 9, color: 'var(--mute-2)', marginBottom: 6 }}>{label}</div>
      <div className="serif" style={{ fontSize: 28, color: accent, lineHeight: 1 }}>{value}</div>
      {sub && <div className="mono" style={{ fontSize: 10, color: 'var(--mute)', marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

function DayDots({ current = 1, completed = 0 }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
      {Array.from({ length: 7 }).map((_, i) => {
        const n = i + 1;
        const isDone = n <= completed;
        const isNow = n === current;
        return (
          <div key={n} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            width: isNow ? 24 : 8, height: 8, borderRadius: 999,
            background: isDone ? 'var(--acid)' : (isNow ? 'var(--paper)' : 'rgba(245,241,232,0.15)'),
            transition: 'all 0.3s ease',
          }}>
            {isNow && <span className="mono" style={{ fontSize: 9, fontWeight: 700, color: 'var(--void)' }}>D{n}</span>}
          </div>
        );
      })}
    </div>
  );
}

function Countdown({ seconds = 597, label = 'WINDOW CLOSES' }) {
  const [s, setS] = useState(seconds);
  useEffect(() => {
    setS(seconds);
    const t = setInterval(() => setS(v => Math.max(0, v - 1)), 1000);
    return () => clearInterval(t);
  }, [seconds]);
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const ss = s % 60;
  const fmt = (n) => String(n).padStart(2, '0');
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
      <div className="mono" style={{ fontSize: 22, color: 'var(--paper)', letterSpacing: '0.05em' }}>
        {h > 0 && <>{fmt(h)}<span className="blink">:</span></>}{fmt(m)}<span className="blink">:</span>{fmt(ss)}
      </div>
      <div className="mono all-caps" style={{ fontSize: 9, color: 'var(--mute-2)' }}>{label}</div>
    </div>
  );
}

function DayBackdrop({ from = '#1A0F2E', to = '#0A0612', children }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(120% 80% at 50% 0%, ${from} 0%, ${to} 60%, #000 100%)`,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px)',
        pointerEvents: 'none',
      }} />
      {children}
    </div>
  );
}

Object.assign(window, {
  ObeyMark, Tag, StatusDot, ScoreRing, AIDispatch, TypingDots,
  ChoiceButton, MissionCard, Stat, DayDots, Countdown, DayBackdrop,
});