/* global React */
const { useState: useState_Vd, useMemo: useMemo_Vd } = React;

// ═══════════════ VIDEO CHALLENGES ═══════════════
function Videos({ videoStatus, setVideoStatus }) {
  const [filter, setFilter] = useState_Vd('all');
  const videos = window.VIDEO_CHALLENGES || [];
  const statuses = window.VIDEO_STATUS || {};

  const items = videos.map(v => ({ ...v, status: videoStatus[v.id] || 'unseen' }));
  const filtered = filter === 'all' ? items : items.filter(v => v.status === filter);

  function setStatus(id, s) {
    setVideoStatus({ ...videoStatus, [id]: s });
  }

  const counts = {
    all: items.length,
    unseen:   items.filter(v => v.status === 'unseen').length,
    listened: items.filter(v => v.status === 'listened').length,
    seen:     items.filter(v => v.status === 'seen').length,
  };

  return (
    <section>
      <div className="section-head">
        <div className="kicker">§ 04 · Video Challenges</div>
        <h2>聽力<span className="underline-hand">挑戰清單</span></h2>
        <div className="zh">先聽 → 再看字幕 → 全看完。三段式練耳朵。</div>
      </div>

      <div style={{ display: 'flex', gap: 6, marginBottom: 24, flexWrap: 'wrap' }}>
        {[
          { id: 'all', label: 'All' },
          { id: 'unseen', label: '未看' },
          { id: 'listened', label: '翻譯前聽過' },
          { id: 'seen', label: '看完' },
        ].map(f => (
          <div key={f.id} className={`chip ${filter === f.id ? 'active' : ''}`}
               onClick={() => setFilter(f.id)}>
            {f.label} <span style={{ opacity: 0.6, marginLeft: 4 }}>{counts[f.id]}</span>
          </div>
        ))}
      </div>

      <div className="col" style={{ gap: 14 }}>
        {filtered.map(v => (
          <VideoRow key={v.id} v={v} statuses={statuses} setStatus={setStatus} />
        ))}
      </div>
    </section>
  );
}

function VideoRow({ v, statuses, setStatus }) {
  const s = statuses[v.status] || {};
  return (
    <div className="card" style={{
      padding: '16px 20px',
      display: 'grid',
      gridTemplateColumns: '80px 1fr auto',
      gap: 20,
      alignItems: 'center',
    }}>
      {/* Left: thumbnail placeholder */}
      <div style={{
        aspectRatio: '16/9',
        background: `linear-gradient(135deg, var(--ink-2), var(--ink))`,
        position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="var(--paper)">
          <path d="M8 5v14l11-7z" />
        </svg>
        <div className="mono" style={{
          position: 'absolute', bottom: 2, right: 4,
          fontSize: 9, color: 'var(--paper)',
          background: 'rgba(0,0,0,0.6)', padding: '1px 3px'
        }}>{v.duration}</div>
      </div>

      {/* Middle: info */}
      <div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em',
                                            color: 'var(--ink-faint)', textTransform: 'uppercase' }}>
            Lv {v.level} · {v.topic}
          </span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)' }}>·</span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)' }}>
            {v.channel}
          </span>
        </div>
        <div className="serif" style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.3 }}>
          {v.title}
        </div>
        <div className="hand" style={{ fontSize: 16, color: 'var(--ink-2)',
                                          marginTop: 4, fontStyle: 'italic' }}>
          ↳ {v.why}
        </div>
      </div>

      {/* Right: status selector — 3-step segmented */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 140 }}>
        {['unseen', 'listened', 'seen'].map(st => {
          const isActive = v.status === st;
          const stInfo = statuses[st] || {};
          return (
            <div key={st}
                 onClick={() => setStatus(v.id, st)}
                 style={{
                   padding: '5px 10px',
                   border: '1px solid ' + (isActive ? stInfo.color : 'var(--rule)'),
                   background: isActive ? stInfo.color : 'transparent',
                   color: isActive ? 'var(--paper)' : 'var(--ink-2)',
                   fontFamily: 'var(--f-mono)',
                   fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
                   cursor: 'pointer', textAlign: 'center',
                   transition: 'all 0.15s',
                 }}>
              {isActive ? '● ' : '○ '}{stInfo.zh || st}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.Videos = Videos;