// Case detail page.

// Extract embed URL from YouTube or Vimeo link
function getEmbedUrl(href) {
  if (!href) return null;
  const yt = href.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
  if (yt) return `https://www.youtube.com/embed/${yt[1]}?autoplay=1`;
  const vimeo = href.match(/vimeo\.com\/(\d+)/);
  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}?autoplay=1`;
  return null;
}

// Lock body scroll when any modal is open
function useLockScroll() {
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, []);
}

// Lightbox for gallery
function Lightbox({ images, startIdx, onClose }) {
  useLockScroll();
  const [idx, setIdx] = React.useState(startIdx);
  const prev = () => setIdx((i) => (i - 1 + images.length) % images.length);
  const next = () => setIdx((i) => (i + 1) % images.length);
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  return ReactDOM.createPortal(
    <div className="lightbox" onClick={onClose}>
      <div className="lightbox__frame" onClick={(e) => e.stopPropagation()}>
        <div className="lightbox__toolbar">
          <span className="lightbox__count">{idx + 1} / {images.length}</span>
          <div className="lightbox__nav">
            <button className="lightbox__btn" onClick={prev}>←</button>
            <button className="lightbox__btn" onClick={next}>→</button>
            <button className="lightbox__btn lightbox__btn--close" onClick={onClose}>✕</button>
          </div>
        </div>
        <img className="lightbox__img" src={images[idx]} alt="" />
      </div>
    </div>,
    document.body
  );
}

// Gallery strip
function CaseGallery({ images }) {
  const [lightboxIdx, setLightboxIdx] = React.useState(null);
  if (!images || images.length === 0) return null;
  return (
    <div className="case-gallery">
      {images.map((src, i) => (
        <button
          key={i}
          className="case-gallery__thumb"
          onClick={() => setLightboxIdx(i)}
          aria-label={`Open image ${i + 1}`}
        >
          <img src={src} alt="" loading="lazy" />
        </button>
      ))}
      {lightboxIdx !== null && (
        <Lightbox
          images={images}
          startIdx={lightboxIdx}
          onClose={() => setLightboxIdx(null)}
        />
      )}
    </div>
  );
}

function VideoModal({ href, title, onClose }) {
  useLockScroll();
  const embedUrl = getEmbedUrl(href);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  return ReactDOM.createPortal(
    <div className="video-modal" onClick={onClose}>
      <div className="video-modal__inner" onClick={(e) => e.stopPropagation()}>
        <div className="video-modal__toolbar">
          <span className="video-modal__title">{title}</span>
          <button className="video-modal__close" onClick={onClose}>✕</button>
        </div>
        <div className="video-modal__video">
          {embedUrl
            ? <iframe src={embedUrl} allowFullScreen allow="autoplay; fullscreen" title={title} />
            : <div style={{padding:32,color:"var(--ink)",display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}}>
                <a href={href} target="_blank" rel="noopener noreferrer" style={{color:"var(--accent)"}}>
                  Open video ↗
                </a>
              </div>
          }
        </div>
      </div>
    </div>,
    document.body
  );
}

function PageCase({ data, ui, caseId }) {
  const item = data.cases.find((c) => c.id === caseId);
  if (!item) {
    return (
      <div className="page-fade">
        <div className="not-found">
          <div className="not-found__code">404</div>
          <h1 className="not-found__title">{ui.notFoundTitle}</h1>
          <p className="not-found__body">{ui.notFoundBody(caseId)}</p>
          <div className="not-found__actions">
            <a href="#/projects" className="btn-primary">
              <Icon name="arrow-l" size={14} /> &nbsp;{ui.notFoundBack}
            </a>
            <a href="#/all" className="btn-ghost">
              {ui.notFoundViewAll(data.cases.length)} <Icon name="arrow-tr" size={14} />
            </a>
            <a href="#/contacts" className="btn-ghost">
              {ui.notFoundTell} <Icon name="arrow-tr" size={14} />
            </a>
          </div>
        </div>
      </div>
    );
  }

  const nextItem = data.cases.find((c) => c.id === item.next) || data.cases[0];
  const prevIdx =
    (data.cases.findIndex((c) => c.id === caseId) - 1 + data.cases.length) %
    data.cases.length;
  const prevItem = data.cases[prevIdx];
  const [videoOpen, setVideoOpen] = React.useState(false);

  return (
    <div className="page-fade" data-screen-label={`Case · ${item.title}`}>
      <a href="#/projects" className="case-back">
        <Icon name="arrow-l" size={14} /> {ui.allProjectsLink}
      </a>

      {/* header */}
      <header className="case-header reveal" style={{ "--delay": "0ms" }}>
        <div>
          <div className="label">{item.tag} · {ui.caseStudy}</div>
          <h1 className="case-title">{item.title}</h1>
          <p className="case-tagline">{item.tagline}</p>
        </div>
        <div className="hero__meta">
          <div><b>{ui.yearLabel}</b> {item.year}</div>
          <div><b>{ui.roleLabel}</b> {item.role}</div>
        </div>
      </header>

      {/* meta strip */}
      <dl className="case-meta reveal" style={{ "--delay": "80ms" }}>
        <div><dt>{ui.clientLabel}</dt><dd>{item.client}</dd></div>
        <div><dt>{ui.agencyLabel}</dt><dd>{item.agency}</dd></div>
        <div><dt>{ui.countryLabel}</dt><dd>{item.country}</dd></div>
        <div><dt>{ui.durationLabel}</dt><dd>{item.duration}</dd></div>
      </dl>

      {/* cover */}
      <div className="case-cover reveal" style={{ "--delay": "160ms" }}>
        <img src={item.cover} alt={item.title} />
      </div>

      {/* gallery */}
      {item.images && item.images.length > 1 && (
        <CaseGallery images={item.images} />
      )}

      {/* content blocks */}
      {item.sections.map((s, i) => (
        <CaseBlock key={i} num={i + 1} total={item.sections.length} section={s} item={item} />
      ))}

      {/* video */}
      {item.video && item.video.href && (
        <div className="case-block" style={{ borderTop: "1px solid var(--line)", paddingTop: 32 }}>
          <div className="case-block__head">
            <div className="case-block__num">
              0{item.sections.length + 1} / 0{item.sections.length + 1}
            </div>
            <h3 className="case-block__title">{ui.videoLabel}</h3>
          </div>
          <div style={{ minWidth: 0, width: "100%" }}>
            <button
              className="case-media video-trigger"
              onClick={() => setVideoOpen(true)}
              style={{ display: "block", width: "100%", background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "left" }}
            >
              <figure>
                <div className="video">
                  <img src={item.cover} alt="" />
                  <span className="video__source">{item.video.source}</span>
                  <span className="video__play">
                    <Icon name="play" size={12} /> {ui.watchLabel} — {item.video.title}
                  </span>
                </div>
                <figcaption>{ui.clickToPlay}</figcaption>
              </figure>
            </button>
          </div>
          {videoOpen && (
            <VideoModal href={item.video.href} title={item.video.title} onClose={() => setVideoOpen(false)} />
          )}
        </div>
      )}

      {/* testimonials */}
      {item.testimonialIds && item.testimonialIds.length > 0 && (
        <div className="case-block" style={{ borderTop: "1px solid var(--line)", paddingTop: 32 }}>
          <div className="case-block__head">
            <div className="case-block__num">
              {ui.peopleLabel} &nbsp;·&nbsp; {ui.fromThisTeam}
            </div>
            <h3 className="case-block__title">{ui.whatTheySaid}</h3>
          </div>
          <div className="case-testimonials" style={{ minWidth: 0, width: "100%" }}>
            {item.testimonialIds
              .map((idx) => data.feedback[idx])
              .filter(Boolean)
              .map((f, i) => (
                <article className="feedback-card" key={i}>
                  <p className="feedback-card__quote">{f.quote}</p>
                  <div className="feedback-card__author">
                    <span className="avatar">{f.avatar}</span>
                    <div>
                      <div className="feedback-card__name">{f.name}</div>
                      <div className="feedback-card__role">{f.role}</div>
                    </div>
                  </div>
                </article>
              ))}
          </div>
          <a href="#/cv" style={{ gridColumn: "2 / -1", marginTop: 12, fontSize: 12, color: "var(--muted)" }}>
            {ui.seeAllFeedback}
          </a>
        </div>
      )}

      {/* case nav */}
      <nav className="case-nav" aria-label="Case navigation">
        <a href={`#/case/${prevItem.id}`} className="case-nav__side" aria-label={prevItem.title}>
          <span className="case-nav__hint">{ui.prevCase}</span>
          <span className="case-nav__title">{prevItem.title}</span>
        </a>
        <a href={`#/case/${nextItem.id}`} className="case-nav__side right" aria-label={nextItem.title} style={{ textAlign: "right" }}>
          <span className="case-nav__hint">{ui.nextCase}</span>
          <span className="case-nav__title">{nextItem.title}</span>
        </a>
      </nav>
    </div>
  );
}

function CaseBlock({ num, total, section, item }) {
  return (
    <div className="case-block reveal">
      <div className="case-block__head">
        <div className="case-block__num">
          0{num} / 0{total + 1}
        </div>
        <h3 className="case-block__title">{section.title}</h3>
      </div>
      <div style={{ minWidth: 0, width: "100%" }}>
        <div className="case-block__body">
          {section.body.map((p, i) => (
            <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
          ))}
        </div>

        {section.results && (
          <div className="case-results">
            {section.results.map((r, i) => (
              <div className="result-card" key={i}>
                <div className="result-card__num">{r.num}</div>
                <div className="result-card__label">{r.label}</div>
              </div>
            ))}
          </div>
        )}

      </div>
    </div>
  );
}

// SVG placeholder so case page reads as a real layout even before extra
// imagery is dropped in. Striped pattern + monospace label.
function CaseImagePlaceholder({ item, variant }) {
  const labels = {
    a: "process · jpg",
    b: "team · jpg",
  };
  return (
    <div
      style={{
        aspectRatio: "16 / 10",
        background:
          "repeating-linear-gradient(135deg, var(--card) 0 12px, var(--surface) 12px 24px)",
        display: "grid",
        placeItems: "center",
        position: "relative",
        color: "var(--muted)",
      }}
    >
      <span
        style={{
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          padding: "6px 10px",
          background: "rgba(255,255,255,.78)",
          borderRadius: 6,
          border: "1px solid var(--line)",
        }}
      >
        {item.id}_{variant}.{labels[variant].split(" · ")[1]}
      </span>
    </div>
  );
}

Object.assign(window, { PageCase });