// Viewfinder hero — the signature moment.
// Cycles through office photos with rotating shot labels, rule-of-thirds,
// REC dot, timecode, focus reticle that subtly drifts, and a timeline strip.

const { useState, useEffect, useRef } = React;

const VF_SHOTS = [
  {
    cat: "Construction, week 02",
    name: "Empty shell, north wall",
    img: "uploads/DSC04089.png",
    meta: { lens: "24mm", fps: "timelapse", iso: "ISO 200", shutter: "1/125" },
    tag: "TL-CAM · T001",
  },
  {
    cat: "Construction, week 06",
    name: "Rough-in, conduit overhead",
    img: "uploads/DSC0410.png",
    meta: { lens: "35mm", fps: "timelapse", iso: "ISO 400", shutter: "1/100" },
    tag: "TL-CAM · T014",
  },
  {
    cat: "Construction, week 11",
    name: "Millwork landing on site",
    img: "uploads/DSC0410112.png",
    meta: { lens: "50mm", fps: "24p", iso: "ISO 800", shutter: "1/60" },
    tag: "B-CAM · B007",
  },
  {
    cat: "Move-in day",
    name: "Populated reception, morning one",
    img: "uploads/DSC041021.png",
    meta: { lens: "35mm", fps: "24p", iso: "ISO 400", shutter: "1/125" },
    tag: "A-CAM · A022",
  },
  {
    cat: "Finishes, locked tripod",
    name: "Tilt-shift vertical",
    img: "uploads/DSC0410478.png",
    meta: { lens: "24mm TS-E", fps: "still", iso: "ISO 100", shutter: "1/80" },
    tag: "STILL · S041",
  },
  {
    cat: "Month 06 revisit",
    name: "Settled desks, late light",
    img: "uploads/DSC04106_2.png",
    meta: { lens: "35mm", fps: "24p", iso: "ISO 640", shutter: "1/100" },
    tag: "A-CAM · A041",
  },
];

function Viewfinder({ cycleSpeed = 3800 }) {
  const [idx, setIdx] = useState(0);
  const [progress, setProgress] = useState(0);
  const [tc, setTc] = useState("00:00:00:00");
  const [reticle, setReticle] = useState({ x: 50, y: 50 });
  const rafRef = useRef();
  const startRef = useRef(Date.now());

  // Cycle shots
  useEffect(() => {
    const id = setInterval(() => {
      setIdx((i) => (i + 1) % VF_SHOTS.length);
      // jitter the reticle a little each shot for a live feel
      setReticle({
        x: 42 + Math.random() * 16,
        y: 42 + Math.random() * 16,
      });
    }, cycleSpeed);
    return () => clearInterval(id);
  }, [cycleSpeed]);

  // Progress bar
  useEffect(() => {
    setProgress(0);
    const start = Date.now();
    const tick = () => {
      const p = Math.min(100, ((Date.now() - start) / cycleSpeed) * 100);
      setProgress(p);
      if (p < 100) rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [idx, cycleSpeed]);

  // Timecode ticking
  useEffect(() => {
    const id = setInterval(() => {
      const elapsed = (Date.now() - startRef.current) / 1000;
      const h = String(Math.floor(elapsed / 3600)).padStart(2, "0");
      const m = String(Math.floor((elapsed % 3600) / 60)).padStart(2, "0");
      const s = String(Math.floor(elapsed % 60)).padStart(2, "0");
      const f = String(Math.floor((elapsed * 24) % 24)).padStart(2, "0");
      setTc(`${h}:${m}:${s}:${f}`);
    }, 42);
    return () => clearInterval(id);
  }, []);

  const shot = VF_SHOTS[idx];

  return (
    <div className="viewfinder" role="img" aria-label={shot.name}>
      <div className="vf-frame">
        {VF_SHOTS.map((s, i) => (
          <div
            key={i}
            className={"vf-photo " + (i === idx ? "on" : "")}
            style={{ backgroundImage: `url(${s.img})` }}
          />
        ))}
      </div>

      <div className="vf-scan" />
      <div className="vf-grid" />

      <div className="vf-corner tl" />
      <div className="vf-corner tr" />
      <div className="vf-corner bl" />
      <div className="vf-corner br" />

      <div
        className="vf-reticle"
        style={{
          left: reticle.x + "%",
          top: reticle.y + "%",
        }}
      />

      <div className="vf-hud-top">
        <div className="vf-rec">
          <span className="vf-rec-dot" />
          REC · {tc}
        </div>
        <div className="vf-hud-tag">{shot.tag}</div>
      </div>

      <div className="vf-timeline">
        <div className="vf-timeline-fill" style={{ width: progress + "%" }} />
      </div>

      <div className="vf-hud-bot">
        <div className="vf-shot-name">
          <small>{shot.cat}</small>
          {shot.name}
        </div>
        <div className="vf-meta">
          <div className="vf-meta-row">
            <span>{shot.lens || shot.meta.lens}</span>
            <span>{shot.meta.iso}</span>
          </div>
          <div className="vf-meta-row">
            <span>{shot.meta.fps}</span>
            <span>{shot.meta.shutter}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Viewfinder = Viewfinder;
window.VF_SHOTS = VF_SHOTS;