/* ============================================================
   CENSA — Vidéos courtes (poster + lecture, fil vertical)
   ============================================================ */

function ShortVideo({ video }) {
  const url = useMediaUrl(video.media.key);
  const ref = useRef(null);
  const [playing, setPlaying] = useState(false);
  const toggle = () => { const v = ref.current; if (!v) return; if (v.paused) { v.play(); } else { v.pause(); } };
  return (
    <div className="short-card">
      {url
        ? <video ref={ref} src={url} loop playsInline onClick={toggle}
            onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} className="short-video" />
        : <div className="short-video" style={{ display: 'grid', placeItems: 'center', color: '#777' }}>…</div>}
      {!playing && url && (
        <button className="short-playbtn" onClick={toggle}><Icon name="play" size={30} fill /></button>
      )}
      <div className="short-overlay">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Avatar user={video.author} size={38} />
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ fontWeight: 700, fontSize: 14.5, color: '#fff' }}>{video.author.name || '—'}</span>
              <Badge user={video.author} />
            </div>
            <span style={{ fontSize: 12.5, color: 'rgba(255,255,255,.75)' }}>@{video.author.handle || 'membre'}</span>
          </div>
        </div>
        {video.caption && <p style={{ marginTop: 9, fontSize: 14, color: '#fff', maxWidth: 460, textShadow: '0 1px 3px rgba(0,0,0,.6)' }}>{video.caption}</p>}
      </div>
    </div>
  );
}

function VideosPage({ t, me, videos, onPersist }) {
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');
  const list = videos || [];

  const add = async () => {
    setErr('');
    const file = await pickFile('video/*');
    if (!file || !window.Media) return;
    if (!window.Media.isVideo(file)) { setErr(t.video_only); return; }
    if (file.size > 50 * 1024 * 1024) { setErr(t.too_big); return; }
    setBusy(true);
    try {
      const key = await window.Media.put(file);
      const author = { id: me.id, name: me.name, handle: me.handle, hue: me.hue, avatar: me.avatar, verified: me.verified };
      onPersist({ id: 'v_' + Date.now().toString(36), author, media: { type: 'video', key }, caption: '', ts: Date.now() });
    } finally { setBusy(false); }
  };

  return (
    <div className="animate-in" style={{ minHeight: '100%' }}>
      <div style={{ position: 'sticky', top: 0, zIndex: 12, display: 'flex', alignItems: 'center', gap: 12,
        padding: '13px 18px', background: 'color-mix(in oklch, var(--bg) 72%, transparent)', backdropFilter: 'blur(14px)',
        borderBottom: '1px solid var(--border)' }}>
        <div>
          <h1 style={{ fontSize: 19, fontWeight: 700, fontFamily: 'var(--font-brand)' }}>{t.videos_title}</h1>
          <p className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>{t.videos_sub}</p>
        </div>
        <button className="btn btn-primary" onClick={add} disabled={busy} style={{ marginLeft: 'auto', padding: '9px 16px', fontSize: 13.5 }}>
          {busy ? t.uploading : <><Icon name="plus" size={16} sw={2.6} /> {t.post_video}</>}
        </button>
      </div>

      {err && <div style={{ padding: '10px 18px', color: 'var(--alarm)', fontSize: 13 }}>{err}</div>}

      {list.length === 0 ? (
        <div style={{ padding: '70px 24px', textAlign: 'center', color: 'var(--text-faint)' }}>
          <Icon name="video" size={34} style={{ opacity: .5 }} />
          <p style={{ marginTop: 14, fontWeight: 600, fontSize: 16, color: 'var(--text-dim)' }}>{t.empty_videos_hed}</p>
          <p className="mono" style={{ marginTop: 6, fontSize: 13 }}>{t.empty_videos_sub}</p>
          <button className="btn btn-primary" onClick={add} disabled={busy} style={{ marginTop: 18, padding: '11px 22px' }}>
            {busy ? t.uploading : <><Icon name="plus" size={16} sw={2.6} /> {t.post_video}</>}
          </button>
        </div>
      ) : (
        <div className="shorts-feed">
          {list.map(v => <ShortVideo key={v.id} video={v} />)}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { VideosPage, ShortVideo });