// detail.jsx — Full-screen project detail as a fade slideshow.
// Slide 0 is an overview/cover; slides 1..N are captioned work images.
// Every slide can carry its own full-bleed background (<Background>).
// Exports to window: DetailView

function CoverSlide({ project }) {
  return (
    <div className="pf-cover">
      <h2 className="pf-cover__title">{project.title}</h2>
      <p className="pf-cover__tagline" style={{ fontWeight: "700" }}>{project.tagline}</p>
      <div className="pf-cover__rule"></div>
      <div className="pf-cover__meta">
        <div>
          <div className="pf-meta__label">역할 · 담당</div>
          <div className="pf-meta__role">{project.role}</div>
        </div>
        <div>
          <div className="pf-meta__label">사용 툴 · 기술</div>
          <div className="pf-meta__tools">
            {project.tools.map((t) =>
            <Chip key={t} subtle>{t}</Chip>
            )}
          </div>
        </div>
      </div>
      <p className="pf-cover__desc">{project.description}</p>
    </div>);

}

function ImageSlide({ project, slide, n }) {
  return (
    <figure className="pf-figure">
      <div className="pf-media">
        <Slot id={`slide-${project.id}-${n}`} label={slide.label} radius={18} />
      </div>
      <figcaption className="pf-caption">
        <span className="pf-caption__num">{String(n).padStart(2, "0")}</span>
        <span className="pf-caption__text">{slide.caption}</span>
      </figcaption>
    </figure>);

}

function SplitSlide({ project, slide, n }) {
  const mediaLeft = slide.media !== "right";
  return (
    <div className={"pf-split" + (mediaLeft ? "" : " pf-split--rev")}>
      <div className="pf-split__media">
        <Slot id={`slide-${project.id}-${n}`} label={slide.label} radius={18} />
      </div>
      <div className="pf-split__text">
        <span className="pf-split__num">{String(n).padStart(2, "0")}</span>
        <h3 className="pf-split__heading">{slide.heading}</h3>
        <p className="pf-split__body">{slide.body}</p>
        {slide.points &&
        <ul className="pf-split__list">
            {slide.points.map((pt, i) =>
          <li key={i}>{pt}</li>
          )}
          </ul>
        }
      </div>
    </div>);

}

function DetailView({ project, onClose }) {
  const slides = React.useMemo(
    () => [{ type: "cover" }, ...project.slides.map((s) => ({ type: "image", ...s }))],
    [project]
  );
  const [idx, setIdx] = React.useState(0);
  const total = slides.length;

  const go = React.useCallback(
    (next) => setIdx((cur) => Math.max(0, Math.min(total - 1, next))),
    [total]
  );

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowRight" || e.key === "PageDown" || e.key === " ") {e.preventDefault();go(idxRef.current + 1);} else
      if (e.key === "ArrowLeft" || e.key === "PageUp") {e.preventDefault();go(idxRef.current - 1);} else
      if (e.key === "Escape") {onClose();}
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [go, onClose]);

  // keep a ref of idx for the keydown closure
  const idxRef = React.useRef(idx);
  idxRef.current = idx;

  return (
    <div className="pf-detail">
      <div className="pf-detail__bar">
        <button className="pf-back" onClick={onClose}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 12H5M11 6l-6 6 6 6" />
          </svg>
          목록
        </button>
        <div className="pf-bar__title">{project.title}</div>
        <div className="pf-bar__count"><b>{String(idx + 1).padStart(2, "0")}</b> / {String(total).padStart(2, "0")}</div>
      </div>

      <div className="pf-stage">
        {slides.map((s, i) => {
          const bgId = s.type === "cover" ? `cover-bg-${project.id}` : `slide-bg-${project.id}-${i}`;
          return (
            <div className={"pf-slide" + (i === idx ? " is-active" : "")} key={i} aria-hidden={i !== idx}>
              <Background id={bgId} />
              {s.type === "cover" ?
              <CoverSlide project={project} /> :
              s.type === "split" ?
              <SplitSlide project={project} slide={s} n={i} /> :

              <ImageSlide project={project} slide={s} n={i} />
              }
            </div>);
        })}

        <button className="pf-arrow pf-arrow--prev" onClick={() => go(idx - 1)} disabled={idx === 0} aria-label="이전">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M15 6l-6 6 6 6" />
          </svg>
        </button>
        <button className="pf-arrow pf-arrow--next" onClick={() => go(idx + 1)} disabled={idx === total - 1} aria-label="다음">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 6l6 6-6 6" />
          </svg>
        </button>
      </div>

      <div className="pf-progress">
        {slides.map((_, i) =>
        <button
          key={i}
          className={"pf-progress__seg" + (i === idx ? " is-active" : "")}
          onClick={() => go(i)}
          aria-label={`${i + 1}번째 슬라이드로`}>
        </button>
        )}
      </div>
    </div>);

}

Object.assign(window, { DetailView });