/* eslint-disable */
// Shared UI atoms — Paper components used across modes
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const cefrClass = (l) => 'cefr ' + (l || '').toLowerCase();

// CEFR level chip
const CEFRChip = ({ level }) => (
  <span className={cefrClass(level)}>{level}</span>
);

// Speaker icon button — uses TTS
const SpeakerBtn = ({ text, size = 18, title = 'Pronounce' }) => (
  <button
    onClick={(e) => { e.stopPropagation(); window.speak(text); }}
    title={title}
    style={{
      background: 'transparent', border: 'none', cursor: 'pointer',
      color: 'var(--ink-soft)', padding: 4, display: 'inline-flex',
      alignItems: 'center', justifyContent: 'center',
    }}
  >
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M11 5L6 9H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3l5 4V5z"/>
      <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
      <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
    </svg>
  </button>
);

// Star/bookmark
const StarBtn = ({ active, onClick }) => (
  <button
    onClick={(e) => { e.stopPropagation(); onClick && onClick(); }}
    title={active ? 'Remove from difficult' : 'Mark as difficult'}
    style={{
      background: 'transparent', border: 'none', cursor: 'pointer',
      color: active ? 'var(--red-stamp)' : 'var(--ink-ghost)', padding: 4,
    }}
  >
    <svg width="20" height="20" viewBox="0 0 24 24" fill={active ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
  </button>
);

// Mini sparkbar for streak / charts
const SparkBar = ({ data, max, height = 28, color = 'var(--red-stamp)' }) => {
  const m = max || Math.max(1, ...data);
  return (
    <div style={{ display:'flex', alignItems:'flex-end', gap: 2, height }}>
      {data.map((v, i) => (
        <div key={i} style={{
          flex:1, height: `${Math.max(2, (v/m)*100)}%`,
          background: v ? color : 'var(--rule-soft)',
          borderRadius: 1,
          opacity: v ? 1 : 0.5,
        }}/>
      ))}
    </div>
  );
};

// Generic paper card wrapper with optional rotation
const PaperCard = ({ children, rotate = 0, style, className = '', onClick }) => (
  <div
    onClick={onClick}
    className={`card paper-grain foxed ${className}`}
    style={{
      transform: rotate ? `rotate(${rotate}deg)` : undefined,
      ...style,
    }}>
    {children}
  </div>
);

// Tab switcher
const Tabs = ({ value, onChange, options }) => (
  <div style={{ display:'flex', gap: 0, borderBottom:'1px solid var(--rule)' }}>
    {options.map(o => (
      <button key={o.value}
        onClick={() => onChange(o.value)}
        style={{
          background:'transparent', border:'none', cursor:'pointer',
          padding:'10px 16px', fontFamily:'var(--font-sans)', fontSize:13,
          color: value===o.value ? 'var(--ink)' : 'var(--ink-faded)',
          fontWeight: value===o.value ? 600 : 500,
          borderBottom: value===o.value ? '2px solid var(--ink)' : '2px solid transparent',
          marginBottom:-1,
          letterSpacing: '0.02em',
        }}>
        {o.label}
        {o.badge != null && (
          <span style={{
            marginLeft:6, fontSize:10, fontFamily:'var(--font-mono)',
            background:'var(--ink)', color:'var(--paper-0)',
            padding:'1px 5px', borderRadius:8,
          }}>{o.badge}</span>
        )}
      </button>
    ))}
  </div>
);

Object.assign(window, { CEFRChip, SpeakerBtn, StarBtn, SparkBar, PaperCard, Tabs });