// Lecture Player — single viewport, no scroll
// Layout: full height = header(compact) + [chapters sidebar | video + context strip]

function LecturePlayer({ rtl, t }) {
  const [activeCh, setActiveCh] = React.useState(2);
  const [playing, setPlaying] = React.useState(true);
  const [qaOpen, setQaOpen] = React.useState(false);
  const [question, setQuestion] = React.useState('');

  const chapters = [
    { n: '01', he: 'הקדמה — למה מיסוי בינלאומי מסובך',   en: 'Intro — why intl tax is hard',       t: '00:00', dur: '5:30' },
    { n: '02', he: 'מושגי יסוד: תושבות, מקור הכנסה',       en: 'Core: residency, source of income',  t: '05:30', dur: '6:45' },
    { n: '03', he: 'אמנות למניעת כפל מס · OECD model',     en: 'Double-tax treaties · OECD model',   t: '12:15', dur: '8:10' },
    { n: '04', he: 'דוגמה מספרית — Transfer Pricing',      en: 'Worked example — Transfer Pricing',  t: '20:25', dur: '9:40' },
    { n: '05', he: 'מוסד קבע (Permanent Establishment)',   en: 'Permanent Establishment',             t: '30:05', dur: '7:20' },
    { n: '06', he: 'סיכום + 3 שאלות לחזרה',                 en: 'Wrap-up + 3 review questions',       t: '37:25', dur: '4:15' },
  ];

  const suggestions = rtl ? [
    { ico: 'sparkle', q: 'אפשר להסביר שוב את ההבחנה בין תושבות למקור?' },
    { ico: 'activity', q: 'איך זה מתחבר לדוגמה מ-IFRS שראינו בשיעור קודם?' },
    { ico: 'grad',    q: 'תן לי דוגמה מספרית פשוטה של החישוב הזה' },
  ] : [
    { ico: 'sparkle', q: 'Can you explain residency vs source again?' },
    { ico: 'activity', q: 'How does this connect to the IFRS example from last lesson?' },
    { ico: 'grad',    q: 'Walk me through a simple numerical example' },
  ];

  const ch = chapters[activeCh];

  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      height: 'calc(100vh - 65px)', overflow: 'hidden',
      background: 'var(--binah-indigo-night)', color: 'var(--binah-cloud)',
    }}>
      {/* Compact header bar */}
      <div style={{
        padding: '12px 24px', display: 'flex', alignItems: 'center', gap: 16,
        borderBottom: '1px solid rgba(232,238,242,0.06)', flexShrink: 0,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <h1 style={{ margin: 0, fontSize: 18, fontWeight: 700,
              fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)',
              color: 'var(--binah-cloud)', letterSpacing: '-0.01em' }}>
              {t('title', 'סוגיות במיסוי בינלאומי · שיעור 04', 'International Tax · Lecture 04')}
            </h1>
            <span style={{ fontSize: 12, color: 'var(--binah-cloud-3)' }}>
              {t('prof', 'ד״ר נועם אבירם', 'Dr. Noam Aviram')} · <span className="num">41:45</span> · {t('ch', '6 פרקים', '6 chapters')}
            </span>
          </div>
        </div>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6,
          color: 'var(--positive-fg)', fontSize: 12 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--binah-sage-mint)',
            boxShadow: '0 0 0 3px rgba(159,212,192,0.2)',
            animation: 'binahPulse 2s ease-in-out infinite' }} />
          {t('syn', 'מסונכרן', 'In sync')}
        </span>
      </div>

      {/* Main area: [chapters sidebar | video + context] */}
      <div style={{ flex: 1, display: 'flex', overflow: 'hidden', minHeight: 0 }}>

        {/* Chapters sidebar */}
        <div style={{
          width: 280, flexShrink: 0, display: 'flex', flexDirection: 'column',
          borderInlineEnd: '1px solid rgba(232,238,242,0.06)',
          background: 'rgba(15,27,48,0.5)',
        }}>
          <div style={{
            padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            borderBottom: '1px solid rgba(232,238,242,0.06)',
          }}>
            <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--binah-cloud-3)',
              letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              {t('toc', 'תוכן עניינים', 'Contents')}
            </span>
            <span style={{ fontSize: 11, color: 'var(--binah-cloud-3)' }}>
              {t('done', '2 הושלמו', '2 done')}
            </span>
          </div>
          <div style={{ flex: 1, overflow: 'auto', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
            {chapters.map((c, i) => {
              const isActive = i === activeCh;
              const isDone = i < activeCh;
              return (
                <button key={i} onClick={() => setActiveCh(i)} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  textAlign: rtl ? 'right' : 'left',
                  padding: '10px 12px', borderRadius: 10,
                  background: isActive ? 'rgba(159,212,192,0.12)' : 'transparent',
                  border: isActive ? '1px solid rgba(159,212,192,0.25)' : '1px solid transparent',
                  cursor: 'pointer',
                  transition: 'all 140ms ease',
                  fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
                  color: 'var(--binah-cloud)',
                }}>
                  <span style={{
                    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13,
                    color: isActive ? 'var(--binah-sage-mint)' : isDone ? 'var(--binah-cloud-3)' : 'var(--binah-cloud-2)',
                    fontVariantNumeric: 'tabular-nums', flexShrink: 0, width: 22,
                  }}>{c.n}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontSize: 13, fontWeight: isActive ? 600 : 400,
                      color: isActive ? 'var(--binah-cloud)' : isDone ? 'var(--binah-cloud-3)' : 'var(--binah-cloud-2)',
                      lineHeight: 1.35, overflow: 'hidden', textOverflow: 'ellipsis',
                      display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
                    }}>{rtl ? c.he : c.en}</div>
                  </div>
                  <span className="num" style={{
                    fontSize: 11, color: isActive ? 'var(--binah-sage-mint)' : 'var(--binah-cloud-3)',
                    fontFamily: 'var(--font-display)', fontVariantNumeric: 'tabular-nums',
                    flexShrink: 0,
                  }}>{c.t}</span>
                </button>
              );
            })}
          </div>
          {/* Conductor tip */}
          <div style={{
            margin: '8px 12px 12px', padding: 12, borderRadius: 10,
            background: 'rgba(244,162,97,0.08)',
            border: '1px dashed rgba(244,162,97,0.25)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 4 }}>
              <Icon name="sparkle" size={12} style={{ color: 'var(--binah-saffron)' }}/>
              <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--binah-saffron)' }}>
                {t('tip', 'טיפ מהמנצח', 'Conductor tip')}
              </span>
            </div>
            <div style={{ fontSize: 11, color: 'var(--binah-cloud-2)', lineHeight: 1.5,
              fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)' }}>
              {t('tipb', 'פרק 04 (דוגמה מספרית) הוא המקום שבו סטודנטים עצרו הכי הרבה.',
                      'Ch. 04 (worked example) is where students paused the most.')}
            </div>
          </div>
        </div>

        {/* Video + context column */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>

          {/* Video frame — takes remaining height */}
          <div style={{
            flex: 1, position: 'relative', minHeight: 0,
            background: 'linear-gradient(180deg, #1a2742 0%, #0B1628 100%)',
          }}>
            {/* Slide content */}
            <div style={{ position: 'absolute', inset: '6% 15% 28% 15%',
              background: 'rgba(21,37,64,0.7)', borderRadius: 8,
              padding: '20px 28px', color: 'rgba(232,238,242,0.4)',
              fontFamily: 'var(--font-display)', fontSize: 14, lineHeight: 1.6 }}>
              <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 10,
                color: 'rgba(232,238,242,0.6)' }}>Double-Tax Treaties</div>
              <div>• OECD Model Convention — Article 4 residency</div>
              <div>• Tie-breaker rules: permanent home → center of vital interests</div>
              <div>• Article 7 business profits</div>
              <div style={{ marginTop: 8, opacity: 0.5 }}>• Transfer pricing arm's-length principle...</div>
            </div>

            {/* Presenter silhouette */}
            <div style={{ position: 'absolute', bottom: '12%', left: '50%', transform: 'translateX(-50%)' }}>
              <svg viewBox="0 0 120 140" width="160" height="180">
                <ellipse cx="60" cy="45" rx="22" ry="26" fill="#3a4a66"/>
                <ellipse cx="53" cy="42" rx="4" ry="2" fill="#1a2742"/>
                <ellipse cx="67" cy="42" rx="4" ry="2" fill="#1a2742"/>
                <path d="M 20 140 L 20 95 Q 60 75 100 95 L 100 140 Z" fill="#152540"/>
                <path d="M 52 78 L 60 105 L 68 78 Z" fill="#C96F53" opacity="0.6"/>
              </svg>
            </div>

            {/* Chapter pill overlay */}
            <div style={{ position: 'absolute', top: 14, insetInlineStart: 16,
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              background: 'rgba(11,22,40,0.7)', backdropFilter: 'blur(16px)',
              border: '1px solid rgba(159,212,192,0.2)',
              color: '#fff', fontSize: 12, fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)' }}>
              <span style={{ color: 'var(--binah-sage-mint)', fontFamily: 'var(--font-display)',
                fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{ch.n}</span>
              <span style={{ opacity: 0.5 }}>·</span>
              <span>{rtl ? ch.he : ch.en}</span>
            </div>

            {/* Scrubber — near bottom of video */}
            <div style={{ position: 'absolute', bottom: 50, left: 20, right: 20 }}>
              <div style={{ height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.12)', position: 'relative' }}>
                {chapters.map((c, i) => {
                  const start = (i / chapters.length) * 100;
                  const w = (1 / chapters.length) * 100;
                  return <div key={i} style={{
                    position: 'absolute', top: 0, left: `${start}%`, width: `${w}%`, height: '100%',
                    borderInlineEnd: i < chapters.length - 1 ? '2px solid #0B1628' : 'none',
                  }}/>;
                })}
                <div style={{ position: 'absolute', top: 0, left: 0, width: '32%', height: '100%',
                  background: 'var(--binah-saffron)', borderRadius: 2 }}/>
                <div style={{ position: 'absolute', left: '32%', top: '50%', transform: 'translate(-50%,-50%)',
                  width: 14, height: 14, borderRadius: '50%', background: 'var(--binah-saffron)',
                  boxShadow: '0 0 0 4px rgba(244,162,97,0.25)' }}/>
                {/* Q&A pin */}
                <div style={{ position: 'absolute', left: '13%', top: -16, width: 2, height: 10, background: 'var(--binah-sage-mint)' }}>
                  <div style={{ position: 'absolute', top: -5, left: '50%', transform: 'translateX(-50%)',
                    width: 10, height: 10, borderRadius: '50%', background: 'var(--binah-sage-mint)',
                    border: '2px solid #0B1628' }}/>
                </div>
              </div>
            </div>

            {/* Controls bar */}
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 42,
              display: 'flex', alignItems: 'center', gap: 14, padding: '0 18px',
              background: 'linear-gradient(0deg, rgba(11,22,40,0.9), transparent)',
              color: 'rgba(255,255,255,0.85)' }}>
              <button onClick={() => setPlaying(!playing)} style={{
                width: 32, height: 32, borderRadius: '50%', border: 'none',
                background: 'rgba(255,255,255,0.1)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}>
                <Icon name={playing ? 'pause' : 'play'} size={14} />
              </button>
              <span className="num" style={{ fontSize: 12, color: 'rgba(255,255,255,0.9)',
                fontFamily: 'var(--font-display)', fontVariantNumeric: 'tabular-nums' }}>13:24 / 41:45</span>
              <div style={{ flex: 1 }}/>
              <button style={{
                padding: '5px 10px', borderRadius: 8, border: '1px solid rgba(255,255,255,0.15)',
                background: 'transparent', color: '#fff', fontSize: 11, cursor: 'pointer',
                fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
                display: 'flex', alignItems: 'center', gap: 5 }}>
                <Icon name="grad" size={12}/> {t('notes', 'תמלול', 'Transcript')}
              </button>
              <span style={{ fontSize: 11, opacity: 0.6 }}>1×</span>
              <span style={{ fontSize: 11, opacity: 0.6 }}>HD</span>
            </div>
          </div>

          {/* Context strip + Q&A toggle — fixed at bottom, no scroll */}
          <div style={{
            flexShrink: 0, padding: '10px 20px',
            borderTop: '1px solid rgba(232,238,242,0.06)',
            background: 'rgba(15,27,48,0.7)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 8,
              background: 'rgba(159,212,192,0.12)', color: 'var(--binah-sage-mint)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, flexShrink: 0 }}>
              {ch.n}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--binah-cloud)',
                fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)',
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {rtl ? ch.he : ch.en}
              </div>
              <div style={{ fontSize: 11, color: 'var(--binah-cloud-3)', marginTop: 1,
                fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
                display: 'flex', alignItems: 'center', gap: 5 }}>
                <Icon name="sparkle" size={10} style={{ color: 'var(--binah-sage-mint)' }}/>
                {t('hint', '2 הערות הקשר · ECL, תושבות חברה', '2 context notes · ECL, corporate residency')}
              </div>
            </div>
            <button onClick={() => setQaOpen(!qaOpen)} style={{
              padding: '8px 14px', borderRadius: 10, border: 'none',
              background: qaOpen ? 'var(--binah-sage-mint)' : 'rgba(159,212,192,0.15)',
              color: qaOpen ? 'var(--binah-indigo-night)' : 'var(--binah-sage-mint)',
              fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
              fontSize: 13, fontWeight: 600, cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 6,
              transition: 'all 160ms ease',
            }}>
              <Icon name="msg" size={14} /> {t('ask', 'שאל על הרגע הזה', 'Ask about this moment')}
            </button>
          </div>

          {/* Q&A expandable panel — slides up from bottom */}
          {qaOpen && (
            <div style={{
              flexShrink: 0, padding: '14px 20px',
              borderTop: '1px solid rgba(232,238,242,0.06)',
              background: 'rgba(21,37,64,0.6)',
              maxHeight: 200, overflow: 'auto',
            }}>
              {/* Input row */}
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12,
              }}>
                <div style={{
                  flex: 1, display: 'flex', alignItems: 'center', gap: 8,
                  padding: '10px 12px', borderRadius: 10,
                  background: 'rgba(232,238,242,0.06)', border: '1px solid rgba(232,238,242,0.08)',
                }}>
                  <input
                    value={question}
                    onChange={(e) => setQuestion(e.target.value)}
                    placeholder={t('ph', 'שאל שאלה על החלק הזה בהרצאה…', 'Ask about this moment…')}
                    style={{
                      flex: 1, border: 'none', background: 'transparent', outline: 'none',
                      fontSize: 13, color: 'var(--binah-cloud)',
                      fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
                    }}
                  />
                </div>
                <button style={{
                  height: 36, padding: '0 14px', borderRadius: 10, border: 'none',
                  background: question ? 'var(--binah-sage-mint)' : 'rgba(232,238,242,0.08)',
                  color: question ? 'var(--binah-indigo-night)' : 'var(--binah-cloud-3)',
                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  <Icon name="send" size={13}/> {t('snd', 'שלח', 'Send')}
                </button>
              </div>

              {/* Suggested questions — horizontal pills */}
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {suggestions.map((s, i) => (
                  <button key={i} onClick={() => setQuestion(s.q)} style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    padding: '7px 12px', borderRadius: 999,
                    background: 'rgba(232,238,242,0.06)', border: '1px solid rgba(232,238,242,0.08)',
                    color: 'var(--binah-cloud-2)', fontSize: 12, cursor: 'pointer',
                    fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
                    transition: 'all 140ms ease', whiteSpace: 'nowrap',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(159,212,192,0.12)';
                                          e.currentTarget.style.borderColor = 'rgba(159,212,192,0.3)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(232,238,242,0.06)';
                                          e.currentTarget.style.borderColor = 'rgba(232,238,242,0.08)'; }}>
                    <Icon name={s.ico} size={12} style={{ color: 'var(--binah-sage-mint)' }}/>
                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 260 }}>{s.q}</span>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`@keyframes binahPulse { 0%,100%{opacity:1} 50%{opacity:0.35} }`}</style>
    </div>
  );
}

Object.assign(window, { LecturePlayer });