/* ============================================================
   BrotherVader — Video block.
   A click-to-play video (sound ON). Never autoplays. The file
   lives at /mp4/intro.mp4; title/caption come from the DB and
   are editable by the admin.
   ============================================================ */

function VideoBlock({ video, admin, onSave }) {
  const ref = useRef(null);
  const [playing, setPlaying] = useState(false);
  const [edit, setEdit] = useState(false);
  if (!video || video.enabled === false) {
    if (!admin) return null;
  }
  const v = video || { src: "/mp4/intro.mp4", title: "Add a video", caption: "" };

  function play() {
    const el = ref.current;
    if (!el) return;
    el.muted = false;       // user-initiated → audio allowed
    el.volume = 1;
    el.controls = true;
    const p = el.play();
    if (p && p.catch) p.catch(() => {});
    setPlaying(true);
  }

  return (
    <section id="video" className="section">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-index">08 — THE STANDARD</div>
            <h2 className="section-title">Press<br/>Play</h2>
          </div>
          <div style={{ maxWidth: 320 }}>
            <p className="muted" style={{ margin: 0 }}>{v.caption}</p>
            {admin && <button className="btn btn-ghost" style={{ marginTop: 14 }} onClick={() => setEdit(true)}><Icons.Pen size={14}/> Edit video</button>}
          </div>
        </Reveal>

        <Reveal className="card video-card">
          <div className="video-frame">
            <video ref={ref} className="video-el" src={v.src} poster={v.poster || undefined}
              playsInline preload="metadata"
              onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)} onPlay={() => setPlaying(true)} />
            {!playing && (
              <button className="video-overlay" onClick={play} aria-label="Play video">
                <span className="video-play"><Icons.Play size={30} /></span>
                <span className="video-title display">{v.title}</span>
                <span className="video-hint eyebrow">Tap to play · sound on</span>
              </button>
            )}
          </div>
        </Reveal>
      </div>

      {edit && (
        <Modal title="Edit video" onClose={() => setEdit(false)}
          footer={<>
            <button className="btn" onClick={() => setEdit(false)}>Cancel</button>
            <button className="btn btn-primary" onClick={() => { onSave(draftRef.current); setEdit(false); }}><Icons.Check size={15}/> Save</button>
          </>}>
          <VideoForm video={v} draftRef={draftRef} />
        </Modal>
      )}
    </section>
  );
}

const draftRef = { current: {} };
function VideoForm({ video, draftRef }) {
  const [src, setSrc] = useState(video.src || "/mp4/intro.mp4");
  const [title, setTitle] = useState(video.title || "");
  const [caption, setCaption] = useState(video.caption || "");
  const [enabled, setEnabled] = useState(video.enabled !== false);
  useEffect(() => { draftRef.current = { src, title, caption, enabled }; }, [src, title, caption, enabled]);
  return (
    <>
      <div className="field"><label>Video file path</label><input className="input" value={src} onChange={(e) => setSrc(e.target.value)} placeholder="/mp4/intro.mp4" /><p className="dim" style={{ fontSize: 12, marginTop: 6 }}>Drop your file in the <code>mp4/</code> folder and reference it here.</p></div>
      <div className="field"><label>Title (overlay)</label><input className="input" value={title} onChange={(e) => setTitle(e.target.value)} /></div>
      <div className="field"><label>Caption</label><input className="input" value={caption} onChange={(e) => setCaption(e.target.value)} /></div>
      <div className="field" style={{ marginBottom: 0 }}>
        <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} /> Show this video on the page
        </label>
      </div>
    </>
  );
}

Object.assign(window, { VideoBlock });