/* ============================================================
   Shared UI atoms — rings, bars, badges, buttons, mascot.
   ============================================================ */
(function () {
  const { useState } = React;

  /* progress ring ------------------------------------------------- */
  function Ring({ size = 44, stroke = 4, value = 0, color = 'var(--primary)', track = 'var(--line)', children }) {
    const r = (size - stroke) / 2;
    const c = 2 * Math.PI * r;
    return (
      <div style={{ position:'relative', width:size, height:size, flexShrink:0 }}>
        <svg width={size} height={size} style={{ transform:'rotate(-90deg)' }}>
          <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
          <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
                  strokeLinecap="round" strokeDasharray={c}
                  strokeDashoffset={c * (1 - Math.max(0, Math.min(1, value)))}
                  style={{ transition:'stroke-dashoffset .5s cubic-bezier(.3,1,.4,1)' }} />
        </svg>
        {children !== undefined && (
          <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
            {children}
          </div>
        )}
      </div>
    );
  }

  /* progress bar -------------------------------------------------- */
  function Bar({ value = 0, color = 'var(--primary)', height = 8 }) {
    return (
      <div style={{ width:'100%', height, background:'var(--line)', borderRadius:999, overflow:'hidden' }}>
        <div style={{ width:`${Math.max(0,Math.min(1,value))*100}%`, height:'100%', background:color,
                      borderRadius:999, transition:'width .5s cubic-bezier(.3,1,.4,1)' }} />
      </div>
    );
  }

  /* CEFR / level badge -------------------------------------------- */
  function Badge({ children, color = 'var(--ink)', bg = 'var(--chip)' }) {
    return (
      <span style={{
        fontFamily:'"JetBrains Mono", monospace', fontSize:10.5, fontWeight:700,
        letterSpacing:'0.06em', color, background:bg, borderRadius:7,
        padding:'3px 7px', lineHeight:1, whiteSpace:'nowrap',
      }}>{children}</span>
    );
  }

  /* emblem tile (track icon = a big Cyrillic letter) -------------- */
  function Emblem({ letter, color, size = 52, radius = 16, dim = false }) {
    return (
      <div style={{
        width:size, height:size, borderRadius:radius, flexShrink:0,
        background: dim ? 'var(--chip)' : color,
        display:'flex', alignItems:'center', justifyContent:'center',
        boxShadow: dim ? 'none' : `0 6px 16px -8px ${color}`,
      }}>
        <span style={{
          fontFamily:'"Golos Text", system-ui', fontWeight:600, fontSize:size*0.5,
          color: dim ? 'var(--muted)' : '#fff', lineHeight:1, transform:'translateY(-1px)',
        }}>{letter}</span>
      </div>
    );
  }

  /* primary / ghost buttons --------------------------------------- */
  function Btn({ children, onClick, variant = 'primary', disabled, full, style }) {
    const [press, setPress] = useState(false);
    const base = {
      appearance:'none', border:'none', cursor: disabled ? 'default' : 'pointer',
      fontFamily:'"Hanken Grotesk", system-ui', fontWeight:800, fontSize:16.5,
      borderRadius:16, padding:'15px 22px', width: full ? '100%' : undefined,
      letterSpacing:'-0.01em', transition:'transform .12s, background .18s, opacity .18s',
      transform: press ? 'scale(0.98)' : 'none', whiteSpace:'nowrap',
      display:'flex', alignItems:'center', justifyContent:'center', gap:8,
    };
    const variants = {
      primary:{ background: disabled ? 'var(--line)' : 'var(--primary)', color: disabled ? 'var(--muted)' : '#fff',
                boxShadow: disabled ? 'none' : '0 8px 20px -10px var(--primary)' },
      dark:{ background:'var(--ink)', color:'#fff' },
      ghost:{ background:'var(--chip)', color:'var(--ink)' },
      outline:{ background:'transparent', color:'var(--ink)', boxShadow:'inset 0 0 0 1.5px var(--line)' },
    };
    return (
      <button onClick={disabled ? undefined : onClick}
        onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onMouseLeave={() => setPress(false)}
        style={{ ...base, ...variants[variant], opacity: disabled ? 0.7 : 1, ...style }}>
        {children}
      </button>
    );
  }

  /* back / close chevrons ----------------------------------------- */
  function IconBtn({ onClick, kind = 'back', label }) {
    const paths = {
      back: <path d="M14 5l-7 7 7 7" stroke="currentColor" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
      close:<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" fill="none" strokeLinecap="round"/>,
    };
    return (
      <button onClick={onClick} aria-label={label || kind}
        style={{ appearance:'none', border:'none', background:'var(--surface)', cursor:'pointer',
                 width:40, height:40, borderRadius:12, display:'flex', alignItems:'center',
                 justifyContent:'center', color:'var(--ink)', flexShrink:0,
                 boxShadow:'0 1px 0 var(--line), 0 2px 8px -4px rgba(0,0,0,0.15)' }}>
        <svg width="22" height="22" viewBox="0 0 24 24">{paths[kind]}</svg>
      </button>
    );
  }

  /* flame (streak) — simple ---------------------------------------- */
  function Flame({ size = 16 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24">
        <path d="M12 2c1 4 5 5 5 9a5 5 0 11-10 0c0-1 .5-2 1-2.5C8 10 9 8 12 2z"
              fill="var(--primary)" />
        <path d="M12 12c.7 1.6 2 2.2 2 3.8A2 2 0 0112 18a2 2 0 01-2-2.2c0-1.2 1.3-1.8 2-3.8z"
              fill="#fff" fillOpacity="0.55" />
      </svg>
    );
  }

  /* the mascot — Мишка, a minimal bear from basic shapes ----------- */
  function Mascot({ size = 64, mood = 'happy' }) {
    const s = size;
    return (
      <svg width={s} height={s} viewBox="0 0 64 64" aria-label="Mishka the bear">
        {/* ears */}
        <circle cx="18" cy="16" r="9" fill="var(--primary)"/>
        <circle cx="46" cy="16" r="9" fill="var(--primary)"/>
        <circle cx="18" cy="16" r="4" fill="var(--primary-deep)"/>
        <circle cx="46" cy="16" r="4" fill="var(--primary-deep)"/>
        {/* head */}
        <circle cx="32" cy="34" r="22" fill="var(--primary)"/>
        {/* muzzle */}
        <circle cx="32" cy="40" r="11" fill="#fff" fillOpacity="0.92"/>
        {/* eyes */}
        <circle cx="24" cy="31" r="2.6" fill="var(--ink)"/>
        <circle cx="40" cy="31" r="2.6" fill="var(--ink)"/>
        {/* nose */}
        <ellipse cx="32" cy="36" rx="3.2" ry="2.4" fill="var(--ink)"/>
        {/* mouth */}
        {mood === 'happy'
          ? <path d="M27 41c2 2.6 8 2.6 10 0" stroke="var(--ink)" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
          : <path d="M27 43c2-2 8-2 10 0" stroke="var(--ink)" strokeWidth="1.8" fill="none" strokeLinecap="round"/>}
      </svg>
    );
  }

  Object.assign(window, { Ring, Bar, Badge, Emblem, Btn, IconBtn, Flame, Mascot });
})();