/* global React */
const { useState, useEffect, useRef } = React;

// ============================================
// Polaroid
// ============================================
function Polaroid({
  src,
  caption,
  rotate = 0,
  width = 220,
  photoH = 220,
  tape = "lime",
  className = "",
  style = {},
}) {
  return (
    <div
      className={`polaroid ${className}`}
      style={{ width, transform: `rotate(${rotate}deg)`, ...style }}
    >
      <div className={`polaroid-tape tape-${tape}`}></div>
      <div className="polaroid-photo-wrap" style={{ height: photoH }}>
        {src ? (
          <img src={src} alt={caption || ""} className="polaroid-photo" />
        ) : (
          <div
            className="polaroid-photo"
            style={{
              background:
                "repeating-linear-gradient(45deg, #cdc1a4 0 8px, #d8cdb0 8px 16px)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "#5b4f33",
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 11,
              letterSpacing: "0.12em",
              textTransform: "uppercase",
              textAlign: "center",
              padding: 8,
            }}
          >
            {caption || "photo"}
          </div>
        )}
      </div>
      {caption && <div className="polaroid-caption">{caption}</div>}
    </div>
  );
}

// ============================================
// Countdown
// ============================================
function Countdown({ target }) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
  const mins = Math.floor((diff / (1000 * 60)) % 60);
  const secs = Math.floor((diff / 1000) % 60);

  const pad = (n, l = 2) => String(n).padStart(l, "0");

  return (
    <div className="countdown">
      {[
        { v: pad(days, 3), l: "days" },
        { v: pad(hours), l: "hours" },
        { v: pad(mins), l: "minutes" },
        { v: pad(secs), l: "seconds" },
      ].map((cell, i) => (
        <div className="cd-cell" key={i}>
          <div className="cd-digit">{cell.v}</div>
          <div className="cd-label">{cell.l}</div>
        </div>
      ))}
    </div>
  );
}

// ============================================
// Marquee
// ============================================
function Marquee({ items, variant = "" }) {
  // Duplicate items to enable seamless loop
  const all = [...items, ...items];
  return (
    <div className={`marquee ${variant}`}>
      <div className="marquee-track">
        {all.map((t, i) => (
          <span key={i}>{t}</span>
        ))}
      </div>
    </div>
  );
}

// ============================================
// Audio bar
// ============================================
function AudioBar({ src }) {
  const [playing, setPlaying] = useState(false);
  const audioRef = useRef(null);
  useEffect(() => {
    if (!audioRef.current) return;
    if (playing) audioRef.current.play().catch(() => setPlaying(false));
    else audioRef.current.pause();
  }, [playing]);
  return (
    <div
      className={`audio-bar ${playing ? "playing" : ""}`}
      onClick={() => setPlaying((p) => !p)}
    >
      <div className="eq">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <span>{playing ? "Now Playing — 90s Mix" : "Press Play — 90s Mix"}</span>
      <audio ref={audioRef} src={src} loop />
    </div>
  );
}

Object.assign(window, { Polaroid, Countdown, Marquee, AudioBar });