// Project detail page
const { useState: useStateD, useEffect: useEffectD } = React;

function ProjectDetail({ project, allProjects, onNav, onOpen }) {
  const [showTrailer, setShowTrailer] = useStateD(false);
  const [selectedImage, setSelectedImage] = useStateD(null);
  const idx = allProjects.findIndex((p) => p.id === project.id);
  const prev = allProjects[(idx - 1 + allProjects.length) % allProjects.length];
  const next = allProjects[(idx + 1) % allProjects.length];

  useEffectD(() => {
    window.scrollTo(0, 0);
  }, [project.id]);

  useEffectD(() => {
    const handleEsc = (e) => { if (e.key === 'Escape') { setShowTrailer(false); setSelectedImage(null); } };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, []);

  const trailer = project.links.find(l => l.kind === 'Trailer' && l.url !== '#');

  return (
    <div className="detail page">
      {showTrailer && trailer && (
        <div className="media-overlay" onClick={() => setShowTrailer(false)}>
          <button className="media-overlay-close" onClick={() => setShowTrailer(false)}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
          <div className="media-container" onClick={e => e.stopPropagation()}>
            {trailer.url.endsWith('.mp4') ? (
              <video 
                src={trailer.url} 
                controls 
                autoPlay 
                style={{ width: '100%', height: '100%', backgroundColor: '#000' }}
              ></video>
            ) : (
              <iframe 
                src={`${trailer.url}?autoplay=1`} 
                allow="autoplay; encrypted-media" 
                allowFullScreen
              ></iframe>
            )}
          </div>
        </div>
      )}

      {selectedImage && (
        <div className="media-overlay" onClick={() => setSelectedImage(null)}>
          <button className="media-overlay-close" onClick={() => setSelectedImage(null)}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
          <div className="media-container img-view" onClick={e => e.stopPropagation()}>
            <img src={selectedImage} alt="Full size screenshot" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
          </div>
        </div>
      )}

      {/* Hero */}
      <div className="detail-hero">
        <a className="back-link" onClick={() => onNav('home')}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M11 3L3 11M3 11H10M3 11V4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Back to all work
        </a>
        <div className="detail-meta">
          <span className={`pill ${project.status}`}>{project.statusLabel}</span>
          <span>{project.role}</span>
          <span>·</span>
          <span>{project.studio}</span>
          <span>·</span>
          <span>{project.year}</span>
          <span>·</span>
          <span>{project.engine}</span>
        </div>
        <div className="detail-title-row" style={{ display: 'flex', alignItems: 'center', gap: 20, margin: '24px 0 16px' }}>
          {project.icon && <img src={project.icon} alt="" className="detail-icon" />}
          <h1 style={{ margin: 0 }}>{project.title}</h1>
        </div>
        <p className="detail-tagline">{project.tagline}</p>
        <div className="detail-stats">
          {project.stats.map((s, i) => (
            <div key={i} className="detail-stat">
              <div className="lbl">{s.lbl}</div>
              <div className="val">{s.val}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Media */}
      <div className="detail-media">
        <div className="detail-media-main">
          {project.cover ? (
            <img src={project.cover} alt={project.title} className="detail-img cover-hero" />
          ) : project.screenshots && project.screenshots.length > 0 ? (
            <img src={project.screenshots[0]} alt={project.title} className="detail-img" />
          ) : (
            <ProjectArtwork kind={project.artwork} url={project.screenshots ? project.screenshots[0] : null} />
          )}
          {trailer && (
            <button className="play-button" aria-label="Play reel" onClick={() => setShowTrailer(true)}>
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M6 4L18 11L6 18V4Z" fill="currentColor"/>
              </svg>
            </button>
          )}
        </div>
      </div>

      {/* Body */}
      <div className="detail-body">
        <div>
          <div className="detail-section">
            <h2><span className="num">01</span>Overview</h2>
            <p>{project.overview}</p>
          </div>

          <div className="detail-section">
            <h2><span className="num">02</span>My role</h2>
            <ul>
              {project.role_breakdown.map((r, i) => <li key={i}>{r}</li>)}
            </ul>
          </div>

          <div className="detail-section">
            <h2><span className="num">03</span>Screens</h2>
            <div className="gallery" style={{ '--gallery-ar': project.aspect === 'landscape' ? '16/9' : '9/16' }}>
              {project.screenshots && project.screenshots.length > 0 ? (
                project.screenshots.map((url, i) => (
                  <div key={i} className="shot clickable" onClick={() => setSelectedImage(url)}>
                    <img src={url} alt={`Screenshot ${i+1}`} className="detail-img" />
                  </div>
                ))
              ) : (
                <>
                  <div className="shot"><ProjectArtwork kind={project.artwork} url={project.screenshots ? project.screenshots[0] : null} /></div>
                  <div className="shot"><div className="pa pa-noise"><div className="pa-grid"></div></div></div>
                  <div className="shot"><div className="pa pa-noise"><div className="pa-grid"></div></div></div>
                  <div className="shot"><div className="pa pa-noise"><div className="pa-grid"></div></div></div>
                  <div className="shot"><div className="pa pa-noise"><div className="pa-grid"></div></div></div>
                </>
              )}
            </div>
          </div>

          <div className="detail-section">
            <h2><span className="num">04</span>Postmortem</h2>
            {project.postmortem.map((p, i) => (
              <div key={i} style={{
                padding: '16px 18px',
                marginBottom: 12,
                border: '1px solid var(--line)',
                borderRadius: 8,
                background: 'var(--bg-2)',
                display: 'grid',
                gridTemplateColumns: '80px 1fr',
                gap: 16,
                alignItems: 'start',
              }}>
                <span className="chip" style={{
                  alignSelf: 'start',
                  borderColor: p.kind === 'Won' ? 'color-mix(in oklab, var(--good) 50%, var(--line))' : 'var(--line)',
                  color: p.kind === 'Won' ? 'var(--good)' : 'var(--accent)',
                }}>{p.kind}</span>
                <p style={{ margin: 0, color: 'var(--fg)', fontSize: 14, lineHeight: 1.6 }}>{p.text}</p>
              </div>
            ))}
          </div>
        </div>

        <aside className="detail-side">
          <div className="side-card">
            <h4>At a glance</h4>
            <ul className="side-list">
              <li><span>ROLE</span>{project.role}</li>
              <li><span>STUDIO</span>{project.studio}</li>
              <li><span>ENGINE</span>{project.engine}</li>
              <li><span>PLATFORM</span>{project.platform}</li>
              <li><span>YEAR</span>{project.year}</li>
              <li><span>DURATION</span>{project.duration}</li>
            </ul>
          </div>
          <div className="side-card">
            <h4>Stack</h4>
            <div className="pcard-stack">
              {project.stack.map((s) => <span key={s} className="chip">{s}</span>)}
            </div>
          </div>
          <div className="side-card">
            <h4>Credits</h4>
            <div className="credits-list">
              {project.credits.map((c, i) => (
                <div key={i} className="credit-row">
                  <span className="role">{c.role}</span>
                  <span>{c.name}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="side-card">
            <h4>Links</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {project.links.map((l, i) => (
                <a 
                  key={i} 
                  href={l.kind === 'Trailer' ? 'javascript:void(0)' : l.url} 
                  target={l.kind === 'Trailer' ? '_self' : '_blank'}
                  className="btn" 
                  style={{ justifyContent: 'space-between' }}
                  onClick={l.kind === 'Trailer' ? (e) => { e.preventDefault(); setShowTrailer(true); } : null}
                >
                  {l.kind}
                  <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                    <path d="M3 11L11 3M11 3H4M11 3V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              ))}
            </div>
          </div>
        </aside>
      </div>

      {/* Prev/Next */}
      <div className="detail-nav">
        <div className="dn-link" onClick={() => onOpen(prev.id)}>
          <div className="label">← Previous</div>
          <div className="title">{prev.title}</div>
        </div>
        <div className="dn-link" onClick={() => onOpen(next.id)}>
          <div className="label">Next →</div>
          <div className="title">{next.title}</div>
        </div>
      </div>
    </div>
  );
}

window.ProjectDetail = ProjectDetail;