/* ============== UI overlay components — مكتبة نور (RTL / Arabic) ============== */
const { useState, useEffect, useRef, useCallback } = React;

/* ---- read-aloud: best-effort Arabic speech + timer-driven word highlight ---- */
const Speech = {
  supported: typeof window !== 'undefined' && 'speechSynthesis' in window,
  arVoice() {
    try { const v = window.speechSynthesis.getVoices(); return v.find(x => /^ar/i.test(x.lang)) || null; }
    catch (e) { return null; }
  },
  speak(text, rate, sound) {
    if (!this.supported || !sound) return;
    try {
      window.speechSynthesis.cancel();
      const u = new SpeechSynthesisUtterance(text);
      u.rate = rate || 0.9; u.pitch = 1.05; u.lang = 'ar-SA';
      const v = this.arVoice(); if (v) u.voice = v;
      window.speechSynthesis.speak(u);
    } catch (e) {}
  },
  stop() { try { this.supported && window.speechSynthesis.cancel(); } catch (e) {} },
};
// warm up the voice list (some browsers populate async)
if (Speech.supported) { try { window.speechSynthesis.getVoices(); window.speechSynthesis.onvoiceschanged = () => {}; } catch (e) {} }

const ALPHA = ['أ', 'ب', 'ج', 'د'];

const Wave = ({ play }) => (
  <span className={`wave ${play ? 'play' : ''}`}>{[0,1,2,3,4].map(i => <i key={i} />)}</span>
);

/* ---------- Top HUD (brand at RTL start = right; orbs at left) ---------- */
function HUD({ stars, total, level, logo, onParent, onSettings }) {
  const [pop, setPop] = useState(-1);
  const prev = useRef(stars);
  useEffect(() => {
    if (stars > prev.current) { setPop(stars - 1); const t = setTimeout(() => setPop(-1), 600); prev.current = stars; return () => clearTimeout(t); }
    prev.current = stars;
  }, [stars]);
  return (
    <React.Fragment>
      <div className="float glass hud" style={{ top: 16, right: 16 }}>
        <div className="brand">
          <span className="mark">{logo ? <img src={logo} alt="" /> : '📖'}</span>
          <span><span className="name">مكتبة نور</span><small>مكتبة ثلاثية الأبعاد للأطفال</small></span>
        </div>
        <div className="progress-pill glass" style={{ boxShadow: 'none', border: '1.5px solid var(--line)' }}>
          <span className="stars">
            {Array.from({ length: total }).map((_, i) => (
              <span key={i} className={`star ${i < stars ? 'on' : 'off'} ${pop === i ? 'pop' : ''}`}>★</span>
            ))}
          </span>
          <span className="count">{stars}/{total}</span>
          <span className="lvl">{level}</span>
        </div>
      </div>
      <div className="float orb-wrap" style={{ top: 16, left: 16 }}>
        <button className="orb" title="الإعدادات" aria-label="الإعدادات" onClick={onSettings}>⚙️</button>
        <button className="orb" title="للكبار" aria-label="ركن الكبار" onClick={onParent}>🧑</button>
      </div>
    </React.Fragment>
  );
}

/* ---------- Bottom helpers (RTL: walk pad on right, helpers on left) ---------- */
function Helpers({ onHint, onAloud, aloudOn }) {
  return (
    <div className="float orb-wrap" style={{ bottom: 24, left: 20 }}>
      <button className={`orb ${aloudOn ? 'on' : ''}`} title="استمع" aria-label="استمع" onClick={onAloud}>🔊</button>
      <button className="orb lg accent" title="تلميح" aria-label="تلميح" onClick={onHint}>💡</button>
    </div>
  );
}

/* ============================================================
   Side reading panel — hosts detail → reader → quiz → celebrate
   ============================================================ */
function ReadingPanel(props) {
  const { book, room, mode } = props;
  if (!book) return null;
  const reading = mode === 'reader' || mode === 'quiz';
  const coverStyle = book.cover
    ? { backgroundImage: `linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.25)), url("${book.cover}")` }
    : { background: `linear-gradient(160deg, ${book.color}, ${shade(book.color,-34)})` };
  return (
    <React.Fragment>
      <div className="scrim" onClick={props.onClose} />
      <div className={`panel slide ${reading ? 'reading' : ''}`}>
        <div className="ribbon" />
        <button className="close" onClick={props.onClose} aria-label="إغلاق">✕</button>
        <div className="pbody">
          {mode === 'detail' && <Detail {...props} coverStyle={coverStyle} />}
          {mode === 'reader' && <ReaderBody {...props} coverStyle={coverStyle} />}
          {mode === 'quiz'   && <QuizBody   {...props} />}
        </div>
      </div>
    </React.Fragment>
  );
}

function Detail({ book, room, done, onRead, onAloud, aloudOn, coverStyle }) {
  return (
    <React.Fragment>
      <div className="cover" style={coverStyle}>
        {!book.cover && <span className="big">{room.emoji}</span>}
        <span className="corner" />
      </div>
      <h2>{book.title}</h2>
      <p className="by">{book.author}</p>
      <div className="meta-row">
        <span className="tag">⏱ {book.minutes} دقائق</span>
        <span className="tag">{room.emoji} {room.label}</span>
        {done && <span className="tag done">✓ تمّت القراءة</span>}
      </div>
      <p className="blurb">{book.blurb}</p>
      <div className="actions">
        <button className="btn primary lg block" onClick={onRead}>▶ {done ? 'اقرأها مجدداً' : 'اقرأ القصة'}</button>
        <button className="btn ghost block" onClick={onAloud}>
          <Wave play={aloudOn} /> {aloudOn ? 'إيقاف الاستماع' : 'استمع للقصة'}
        </button>
      </div>
    </React.Fragment>
  );
}

/* ---------- Reader (paged, read-along) ---------- */
function ReaderBody({ book, room, sound, motion, onFinish, coverStyle }) {
  const [page, setPage] = useState(0);
  const [playing, setPlaying] = useState(false);
  const [wordIdx, setWordIdx] = useState(-1);
  const timer = useRef(null);
  const words = book.pages[page].split(' ');
  const last = page === book.pages.length - 1;

  const stop = useCallback(() => {
    clearInterval(timer.current); Speech.stop(); setPlaying(false); setWordIdx(-1);
  }, []);
  const play = useCallback(() => {
    clearInterval(timer.current);
    const ws = book.pages[page].split(' ');
    Speech.speak(book.pages[page], 0.9, sound);
    if (!motion) { setWordIdx(ws.length); setPlaying(false); return; }   // reduced motion: no play flicker
    setPlaying(true); setWordIdx(0);
    let i = 0;
    timer.current = setInterval(() => {
      i++;
      if (i >= ws.length) { clearInterval(timer.current); setPlaying(false); setWordIdx(ws.length); }
      else setWordIdx(i);
    }, 300);
  }, [page, book, sound, motion]);

  useEffect(() => () => stop(), [stop]);
  useEffect(() => { stop(); }, [page, stop]);
  const go = (d) => setPage(p => Math.min(Math.max(p + d, 0), book.pages.length - 1));

  return (
    <React.Fragment>
      <div className="reader-illu" style={coverStyle}>{!book.cover && <span className="big">{room.emoji}</span>}</div>
      <p className="page-text">
        {words.map((w, i) => (
          <span key={page + '-' + i} className={`word ${i <= wordIdx && wordIdx >= 0 ? 'read' : ''}`}>{w} </span>
        ))}
      </p>
      <div className="reader-foot">
        <button className="btn ghost" onClick={() => go(-1)} disabled={page === 0}>السابق ›</button>
        <div style={{ display:'flex', alignItems:'center', gap:14 }}>
          <button className="orb" title="استمع" onClick={() => playing ? stop() : play()} style={{ width:46, height:46, fontSize:19 }}>
            {playing ? '⏸' : '🔊'}
          </button>
          <div className="dots">{book.pages.map((_, i) => <i key={i} className={i === page ? 'on' : ''} />)}</div>
        </div>
        {last
          ? <button className="btn primary" onClick={() => { stop(); onFinish(); }}>أنهِ القصة ★</button>
          : <button className="btn primary" onClick={() => go(1)}>‹ التالي</button>}
      </div>
    </React.Fragment>
  );
}

/* ---------- Quiz + celebrate ---------- */
function QuizBody({ book, alreadyDone, onPass }) {
  const [picked, setPicked] = useState(-1);
  const [solved, setSolved] = useState(false);
  const choose = (i) => {
    if (solved) return;
    setPicked(i);
    if (i === book.quiz.answer) { setSolved(true); setTimeout(onPass, 1500); }
    else setTimeout(() => setPicked(-1), 600);
  };
  if (solved) return (
    <div className="celebrate">
      <div className="big">🌟</div>
      <h3>{alreadyDone ? 'قراءة رائعة!' : 'حصلت على نجمة!'}</h3>
      <p>{alreadyDone ? 'لقد قرأتها من قبل — أحسنت بقراءتها مجدداً.' : `«${book.title}» الآن على رفّك. أحسنت!`}</p>
      <button className="btn primary lg" onClick={onPass}>العودة إلى المكتبة</button>
    </div>
  );
  return (
    <div className="quiz">
      <div className="qkicker">سؤال القصة · سؤال واحد</div>
      <h3>{book.quiz.q}</h3>
      <div className="opts">
        {book.quiz.options.map((o, i) => (
          <button key={i}
            className={`opt ${picked === i ? (i === book.quiz.answer ? 'correct' : 'wrong') : ''}`}
            onClick={() => choose(i)}>
            <span className="key">{ALPHA[i]}</span>{o}
          </button>
        ))}
      </div>
    </div>
  );
}

/* ---------- Confetti ---------- */
function Confetti() {
  const pieces = useRef(Array.from({ length: 48 }).map((_, i) => ({
    left: (i * 53 % 100), delay: (i % 7) * 0.08, dur: 1.8 + (i % 9) * 0.18,
    color: ['#e0a838','#ef6f6c','#5f7fe0','#3f9d6d','#e0a93b','#b96fd0'][i % 6],
    rot: (i * 47) % 360,
  })));
  return (
    <div className="confetti">
      {pieces.current.map((p, i) => (
        <i key={i} style={{ left: p.left + '%', background: p.color, animationDuration: p.dur + 's',
          animationDelay: p.delay + 's', transform: `rotate(${p.rot}deg)` }} />
      ))}
    </div>
  );
}

/* ---------- Toast ---------- */
function Toast({ children }) { return <div className="toast">💡 {children}</div>; }

/* ---------- Parent gate + dashboard ---------- */
function Parent({ progress, total, settings, onSetting, onClose }) {
  const [a] = useState(() => 3 + Math.floor(Math.random() * 6));
  const [b] = useState(() => 2 + Math.floor(Math.random() * 6));
  const [entry, setEntry] = useState('');
  const [ok, setOk] = useState(false);
  const [err, setErr] = useState('');
  const press = (n) => {
    if (n === 'del') return setEntry(e => e.slice(0, -1));
    const v = (entry + n).slice(0, 2); setEntry(v);
    if (v.length >= String(a + b).length) {
      if (parseInt(v, 10) === a + b) setOk(true);
      else { setErr('ليست صحيحة — حاول مجدداً'); setTimeout(() => { setEntry(''); setErr(''); }, 800); }
    }
  };
  const mins = progress.completed.reduce((s, id) => s + ((window.BOOKS.find(x => x.id === id) || {}).minutes || 0), 0);
  return (
    <div className="modal-c" onClick={onClose}>
      <div className="card" onClick={e => e.stopPropagation()}>
        {!ok ? (
          <React.Fragment>
            <h3>للكبار فقط 🔒</h3>
            <p className="sub">حلّوا هذه العملية الحسابية للمتابعة.</p>
            <div className="gate-q">{a} + {b} = ؟</div>
            <div className="gate-display">{entry || '·'}</div>
            <div className="gate-err">{err}</div>
            <div className="gate-keys">
              {[1,2,3,4,5,6,7,8,9].map(n => <button key={n} onClick={() => press(n)}>{n}</button>)}
              <button onClick={() => press('del')}>⌫</button>
              <button onClick={() => press(0)}>0</button>
              <button onClick={onClose}>✕</button>
            </div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <h3>لوحة الكبار</h3>
            <p className="sub">نظرةٌ سريعة على القراءة حتى الآن.</p>
            <div className="dash-grid">
              <div className="stat"><b>{progress.completed.length}</b><span>كتب مكتملة</span></div>
              <div className="stat"><b>{progress.stars}</b><span>نجوم</span></div>
              <div className="stat"><b>{mins}</b><span>دقائق قراءة</span></div>
              <div className="stat"><b>{Math.round(progress.completed.length / total * 100)}%</b><span>نسبة الاستكشاف</span></div>
            </div>
            <div className="setting">
              <span className="lbl">القراءة الصوتية<small>قراءة القصص بصوتٍ عالٍ</small></span>
              <button className={`switch ${settings.sound ? 'on' : ''}`} onClick={() => onSetting('sound', !settings.sound)}><i /></button>
            </div>
            <div className="setting">
              <span className="lbl">حركة هادئة<small>تقليل الحركة والتأثيرات</small></span>
              <button className={`switch ${!settings.motion ? 'on' : ''}`} onClick={() => onSetting('motion', !settings.motion)}><i /></button>
            </div>
            <div style={{ marginTop: 18 }}>
              <button className="btn primary block" onClick={onClose}>تمّ</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ---------- Quick settings ---------- */
function Settings({ settings, onSetting, onClose }) {
  return (
    <div className="modal-c" onClick={onClose}>
      <div className="card" onClick={e => e.stopPropagation()} style={{ maxWidth: 390 }}>
        <h3>إعدادات سريعة</h3>
        <p className="sub">اضبط التجربة كما يحلو لك.</p>
        <div className="setting">
          <span className="lbl">القراءة الصوتية<small>قراءة القصص بصوت الجهاز</small></span>
          <button className={`switch ${settings.sound ? 'on' : ''}`} onClick={() => onSetting('sound', !settings.sound)}><i /></button>
        </div>
        <div className="setting">
          <span className="lbl">حركة هادئة<small>تقليل العَوم والدوران</small></span>
          <button className={`switch ${!settings.motion ? 'on' : ''}`} onClick={() => onSetting('motion', !settings.motion)}><i /></button>
        </div>
        <div style={{ marginTop: 18 }}><button className="btn primary block" onClick={onClose}>تمّ</button></div>
      </div>
    </div>
  );
}

/* ---------- Welcome ---------- */
function Welcome({ hero, onStart }) {
  return (
    <div className="welcome">
      <div className="card">
        <div className="whero" style={hero ? { backgroundImage:`url("${hero}")` } : { background:'linear-gradient(160deg,var(--accent),var(--accent-deep))' }}>
          {!hero && <div className="wbig">📚</div>}
        </div>
        <div className="bismillah">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</div>
        <h1>أهلاً بك في مكتبة نور</h1>
        <p>تجوّل في المكتبة، وابحث عن الكُتب <strong>المتوهّجة</strong>، وانقُر على أحدها ليمشيَ الصبيّ إليه وتقرآه معاً. أكمل القصة لتربح ⭐!</p>
        <button className="btn primary lg block" onClick={onStart}>ابدأ الاستكشاف ←</button>
      </div>
    </div>
  );
}

/* small helper: shift a hex color lighter/darker */
function shade(hex, amt) {
  const h = hex.replace('#', '');
  let r = parseInt(h.substring(0,2),16), g = parseInt(h.substring(2,4),16), b = parseInt(h.substring(4,6),16);
  r = Math.max(0, Math.min(255, r + amt)); g = Math.max(0, Math.min(255, g + amt)); b = Math.max(0, Math.min(255, b + amt));
  return `rgb(${r},${g},${b})`;
}

Object.assign(window, { Speech, Wave, HUD, Helpers, ReadingPanel, Confetti, Toast, Parent, Settings, Welcome, shade });