// PROJECT (blog) page — full-bleed images alternating with narrow text columns
window.ProjectPage = function ProjectPage({ navigate, lang, projectId, categoryId }) {
  const { useState, useEffect, useRef, useCallback } = React;
  const t = STRINGS[lang];
  const data = window.PORTFOLIO_DATA;
  const allProjects = data.projects[categoryId] || [];
  const project = allProjects.find(p => p.id === projectId);
  if (!project) return <div style={{ padding: 96 }}>Project not found</div>;

  const detail = window.PROJECT_DETAILS[projectId] || {
    ...window.PROJECT_DETAILS.__default__,
    title: project.title,
    subtitle: project.excerpt
  };

  const cat = data.categories.find(c => c.id === categoryId);
  const idx = allProjects.findIndex(p => p.id === projectId);
  const next = allProjects[(idx + 1) % allProjects.length];
  const prev = allProjects[(idx - 1 + allProjects.length) % allProjects.length];

  // Collect all image srcs in order for modal navigation
  const allImages = [];
  detail.blocks.forEach(block => {
    if (block.type === 'image' && (block.src || block.cover?.src)) {
      allImages.push(block.src || block.cover.src);
    }
    if (block.type === 'image-pair') {
      block.items.forEach(it => { if (it.src || it.cover?.src) allImages.push(it.src || it.cover.src); });
    }
    if (block.type === 'image-mosaic') {
      block.items.forEach(it => { if (it.src) allImages.push(it.src); });
    }
  });

  const [modalIdx, setModalIdx] = useState(null);
  const [zoom, setZoom] = useState(1);
  const [pan, setPan] = useState({ x: 0, y: 0 });
  const dragRef = useRef(null);
  const modalSrc = modalIdx !== null ? allImages[modalIdx] : null;

  const resetModal = () => { setZoom(1); setPan({ x: 0, y: 0 }); };
  const openModal = (src) => {
    const i = allImages.indexOf(src);
    if (i !== -1) { setModalIdx(i); resetModal(); }
  };
  const closeModal = () => { setModalIdx(null); resetModal(); };
  const modalPrev = (e) => { e.stopPropagation(); setModalIdx(i => (i - 1 + allImages.length) % allImages.length); resetModal(); };
  const modalNext = (e) => { e.stopPropagation(); setModalIdx(i => (i + 1) % allImages.length); resetModal(); };

  // Lock body scroll when modal open
  useEffect(() => {
    if (modalIdx !== null) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [modalIdx]);

  // Keyboard navigation
  useEffect(() => {
    if (modalIdx === null) return;
    const handler = (e) => {
      if (e.key === 'ArrowRight') { setModalIdx(i => (i + 1) % allImages.length); resetModal(); }
      if (e.key === 'ArrowLeft')  { setModalIdx(i => (i - 1 + allImages.length) % allImages.length); resetModal(); }
      if (e.key === 'Escape') closeModal();
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [modalIdx]);

  // Scroll to zoom — prevent page scroll
  const handleWheel = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    setZoom(z => Math.min(5, Math.max(1, z - e.deltaY * 0.003)));
  }, []);

  // Drag to pan
  const handleMouseDown = useCallback((e) => {
    if (zoom <= 1) return;
    e.preventDefault();
    dragRef.current = { startX: e.clientX - pan.x, startY: e.clientY - pan.y };
  }, [zoom, pan]);

  const handleMouseMove = useCallback((e) => {
    if (!dragRef.current) return;
    setPan({ x: e.clientX - dragRef.current.startX, y: e.clientY - dragRef.current.startY });
  }, []);

  const handleMouseUp = useCallback(() => { dragRef.current = null; }, []);

  const renderImage = (src, cover, layout, caption, key) => {
    const isContained = layout === 'contained';
    const isHero = layout === 'full';
    const isWide = layout === 'wide';
    const imgSrc = src || cover?.src;
    const hasSrc = !!imgSrc;

    // Contained & Wide — natural image height, img tag
    if ((isContained || isWide) && hasSrc) {
      return (
        <div key={key} className={`block block-image${isContained ? ' is-contained' : ''}${isWide ? ' is-wide' : ''}`}>
          <div className="frame is-clickable" onClick={() => openModal(imgSrc)}>
            <img src={imgSrc} alt="" draggable={false} style={{ width: '100%', height: 'auto', display: 'block' }} />
            <div className="zoom-hint">⊕</div>
          </div>
          {caption && <div className="caption">↳ {caption[lang]}</div>}
        </div>
      );
    }

    return (
      <div key={key} className={`block block-image${isHero ? ' is-hero' : ''}`}>
        <div className={`frame${hasSrc ? ' is-clickable' : ''}`} onClick={() => hasSrc && openModal(imgSrc)}>
          <ColorField hue={cover?.hue} lightness={cover?.lightness} chroma="rich" src={imgSrc} fit="cover" />
          {hasSrc && <div className="zoom-hint">⊕</div>}
        </div>
        {caption && <div className="caption">↳ {caption[lang]}</div>}
      </div>
    );
  };

  return (
    <article className="project-page fade-in" data-screen-label={`03 ${project.title}`}>
      <div className="project-head">
        <div>
          <div className="crumb">
            <button onClick={() => navigate({ name: 'category', id: categoryId })} style={{ opacity: 0.6 }}>← {cat.label[lang]}</button>
          </div>
          <h1>{project.title}</h1>
        </div>
        <p className="subtitle">{detail.subtitle?.[lang] || project.excerpt[lang]}</p>
      </div>

      <div className="project-meta">
        <div className="item"><div className="k">{t.client}</div><div className="v">{detail.meta?.client || project.client}</div></div>
        <div className="item"><div className="k">{t.year}</div><div className="v">{detail.meta?.year || project.year}</div></div>
        <div className="item"><div className="k">{t.role}</div><div className="v">{detail.meta?.role?.[lang] || project.tags.join(', ')}</div></div>
        <div className="item"><div className="k">{t.collab}</div><div className="v">{detail.meta?.collaborators || '—'}</div></div>
      </div>

      <div className="project-body">
        {detail.blocks.map((block, i) => {
          if (block.type === 'image') {
            return renderImage(block.src, block.cover, block.layout, block.caption, i);
          }
          if (block.type === 'text') {
            return (
              <div key={i} className="block block-text">
                {block.heading && <h2>{block.heading[lang]}</h2>}
                <p>{block.body[lang]}</p>
              </div>
            );
          }
          if (block.type === 'image-pair') {
            return (
              <div key={i} className="block block-pair">
                {block.items.map((it, j) => {
                  const itSrc = it.src || it.cover?.src;
                  return (
                    <div key={j}>
                      <div className={`frame${itSrc ? ' is-clickable' : ''}`} onClick={() => itSrc && openModal(itSrc)}>
                        <ColorField hue={it.hue} lightness={it.lightness} chroma="rich" src={itSrc} />
                        {itSrc && <div className="zoom-hint">⊕</div>}
                      </div>
                      {it.caption && <div className="caption">↳ {it.caption[lang]}</div>}
                    </div>
                  );
                })}
              </div>
            );
          }
          if (block.type === 'image-mosaic') {
            const count = block.items.length;
            return (
              <div key={i} className={`block block-mosaic mosaic-${Math.min(count, 4)}`}>
                {block.items.map((it, j) => (
                  <div key={j} className={`mosaic-item${it.src ? ' is-clickable' : ''}`} onClick={() => it.src && openModal(it.src)}>
                    <ColorField src={it.src} hue={it.hue} lightness={it.lightness} chroma="rich" />
                    {it.src && <div className="zoom-hint">⊕</div>}
                  </div>
                ))}
                {block.caption && <div className="mosaic-caption caption">↳ {block.caption[lang]}</div>}
              </div>
            );
          }
          if (block.type === 'video') {
            return (
              <div key={i} className="block block-video block-image">
                <div className="frame">
                  <ColorField hue={block.cover.hue} lightness={block.cover.lightness} chroma="rich" />
                  <div className="play">▶</div>
                </div>
                {block.caption && <div className="caption">↳ {block.caption[lang]}</div>}
              </div>
            );
          }
          if (block.type === 'youtube') {
            return (
              <div key={i} className="block block-youtube">
                <div className="youtube-wrap">
                  <iframe
                    src={`https://www.youtube.com/embed/${block.id}?rel=0&modestbranding=1`}
                    title={block.caption?.[lang] || 'Video'}
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                </div>
                {block.caption && <div className="caption">↳ {block.caption[lang]}</div>}
              </div>
            );
          }
          return null;
        })}
      </div>

      <div className="project-nav">
        <button className="nav-btn prev" onClick={() => navigate({ name: 'project', id: prev.id, categoryId })}>
          <span className="k">← {t.prev}</span>
          <span className="v">{prev.title}</span>
        </button>
        <button className="nav-btn next" onClick={() => navigate({ name: 'project', id: next.id, categoryId })}>
          <span className="k">{t.next} →</span>
          <span className="v">{next.title}</span>
        </button>
      </div>

      <button className="fab-back" onClick={() => navigate({ name: 'category', id: categoryId })} title={cat.label[lang]}>
        ← {cat.label[lang]}
      </button>

      {modalSrc && (
        <div
          className="modal-overlay"
          onClick={closeModal}
          onWheel={handleWheel}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseUp}
        >
          <button className="modal-close" onClick={closeModal}>✕</button>
          <button className="modal-arrow modal-arrow-prev" onClick={modalPrev}>‹</button>
          <button className="modal-arrow modal-arrow-next" onClick={modalNext}>›</button>
          <div className="modal-counter">{modalIdx + 1} / {allImages.length}</div>
          <div className="modal-inner" onClick={e => e.stopPropagation()}>
            <img
              src={modalSrc}
              alt=""
              draggable={false}
              onMouseDown={handleMouseDown}
              style={{
                transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
                transformOrigin: 'center',
                cursor: zoom > 1 ? (dragRef.current ? 'grabbing' : 'grab') : 'default',
                userSelect: 'none',
              }}
            />
          </div>
        </div>
      )}
    </article>
  );
};