import { useEffect, useState } from "react";
import { OutlineButton } from "@/components/outline-button";
import { heartline } from "@/lib/content";
import { cn } from "@/lib/utils";

const media = [
  { image: "/images/hero-rome.jpg", video: "/videos/hero-rome.mp4" },
  { image: "/images/hero-web.jpg", video: "/videos/hero-web.mp4" },
  { image: "/images/hero-candle.jpg", video: "/videos/hero-candle.mp4" },
  { image: "/images/page-build.jpg", video: "/videos/hero-build.mp4" },
];

type Props = {
  open: boolean;
  onClose: () => void;
};

export function CharterWatch({ open, onClose }: Props) {
  const [index, setIndex] = useState(0);
  const total = heartline.length;

  useEffect(() => {
    if (!open) {
      setIndex(0);
      return;
    }
    const id = window.setInterval(() => {
      setIndex((i) => (i + 1) % total);
    }, 6500);
    return () => window.clearInterval(id);
  }, [open, total]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIndex((i) => (i + 1) % total);
      if (e.key === "ArrowLeft") setIndex((i) => (i - 1 + total) % total);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose, total]);

  if (!open) return null;

  const beat = heartline[index];
  const clip = media[index] ?? media[0];

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label="The scale"
      className="fixed inset-0 z-[80] bg-bg"
    >
      <video
        key={clip.video}
        className="absolute inset-0 h-full w-full object-cover"
        autoPlay
        muted
        loop
        playsInline
        poster={clip.image}
      >
        <source src={clip.video} type="video/mp4" />
      </video>
      <div className="hero-scrim absolute inset-0" />
      <div className="relative z-10 flex h-full flex-col justify-end px-6 pb-16 sm:px-12 lg:px-20">
        <p className="mb-2 font-display text-kicker font-medium uppercase tracking-wide">
          {String(index + 1).padStart(2, "0")} / {String(total).padStart(2, "0")} · {beat.kicker}
        </p>
        <h2 className="max-w-3xl font-display text-hero font-semibold uppercase leading-tight tracking-hero whitespace-pre-line">
          {beat.title}
        </h2>
        <p className="mt-5 max-w-xl text-body leading-body text-fg/90">{beat.body}</p>
        <div className="mt-8 flex flex-wrap items-center gap-3">
          <OutlineButton onClick={() => setIndex((i) => (i + 1) % total)}>
            Next
          </OutlineButton>
          <OutlineButton onClick={onClose}>Close</OutlineButton>
        </div>
        <div className="mt-8 flex gap-2">
          {heartline.map((h, i) => (
            <button
              key={h.id}
              type="button"
              aria-label={h.kicker}
              onClick={() => setIndex(i)}
              className={cn("h-0.5 w-16 bg-fg/25", i === index && "bg-fg")}
            />
          ))}
        </div>
      </div>
    </div>
  );
}