/* StoryForge Prototype Gallery — real prototypes, opened in a lightbox iframe.
   Card posters are real screenshots of each tool's hook screen (assets/thumbs/). */

const STORYFORGE_PROTOTYPES = [
  {
    id: 'frame-studio',
    title: 'Frame Studio',
    desc: 'Visual planner that QAs every storyboard frame — character layouts, emotions, props, and continuity side by side.',
    color: '#F06878',
    url: '../prototypes/visual_planner/index.html',
    thumbImg: 'assets/thumbs/frame-studio.png',
  },
  {
    id: 'image-generation',
    title: 'Image Generation',
    desc: 'Multi-model asset studio — generate across a broad explainer supported style library while assisted by inspirations.',
    color: '#818cf8',
    url: '../prototypes/asset_generation/index.html',
    thumbImg: 'assets/thumbs/image-generation.png',
  },
  {
    id: 'outlier-discovery',
    title: 'Outlier Discovery',
    desc: 'Free and open-source blend of vidIQ + TubeBuddy + ViewStats — ranks channels by breakout index and surfaces outlier videos against their baselines.',
    color: '#22c55e',
    url: '../prototypes/topic_workflow/index.html',
    thumbImg: 'assets/thumbs/outlier-discovery.png',
  },
  {
    id: 'voice-editor',
    title: 'Voice Editor',
    desc: 'AI audio integration tool — ElevenLabs & OpenVoice narration generation, prosody editing, music bed and SFX layering before handing over to free tools like DaVinci Resolve for traditional polishing.',
    color: '#38bdf8',
    url: '../prototypes/audio_editor/index.html',
    thumbImg: 'assets/thumbs/voice-editor.png',
  },
  {
    id: 'reverse-studio',
    title: 'Reverse Outlier Studio',
    desc: 'Reverse-engineers explainer videos (similar to Twelve Labs) — animation taxonomy, SFX counting, and cross-modal frame analysis.',
    color: '#f59e0b',
    url: '../prototypes/explainer_video_reverse_engineering/index.html',
    thumbImg: 'assets/thumbs/reverse-studio.png',
  },
];

function PrototypeViewer({ proto, onClose, onNext, onPrev, hasNext, hasPrev }) {
  React.useEffect(() => {
    const handler = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowRight' && hasNext) onNext();
      if (e.key === 'ArrowLeft' && hasPrev) onPrev();
    };
    window.addEventListener('keydown', handler);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', handler);
      document.body.style.overflow = '';
    };
  }, [onClose, onNext, onPrev, hasNext, hasPrev]);

  return (
    <div className="proto-overlay" onClick={onClose}>
      <div className="proto-viewer" onClick={(e) => e.stopPropagation()}>
        <div className="proto-viewer__header">
          <div>
            <h3 className="proto-viewer__title">{proto.title}</h3>
            <p className="proto-viewer__desc">{proto.desc}</p>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <a href={proto.url} target="_blank" rel="noopener noreferrer" className="proto-viewer__open" title="Open in new tab">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
                <polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
              </svg>
            </a>
            <button className="proto-viewer__close" onClick={onClose} aria-label="Close">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
          </div>
        </div>

        <div className="proto-viewer__body">
          <button className="proto-nav proto-nav--prev"
            onClick={() => hasPrev && onPrev()} disabled={!hasPrev} aria-label="Previous prototype">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>
          <div className="proto-viewer__screen proto-viewer__screen--live">
            <iframe key={proto.id} src={proto.url} title={proto.title}
              style={{ width: '100%', height: '100%', border: 'none', borderRadius: 12, background: proto.color + '10' }}
              loading="lazy" />
          </div>
          <button className="proto-nav proto-nav--next"
            onClick={() => hasNext && onNext()} disabled={!hasNext} aria-label="Next prototype">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>

        <div className="proto-viewer__strip">
          {STORYFORGE_PROTOTYPES.map((p) => (
            <button key={p.id}
              className={'proto-thumb' + (p.id === proto.id ? ' proto-thumb--active' : '')}
              onClick={() => {
                const idx = STORYFORGE_PROTOTYPES.findIndex((x) => x.id === p.id);
                const cur = STORYFORGE_PROTOTYPES.findIndex((x) => x.id === proto.id);
                if (idx < cur) onPrev && onPrev();
                else if (idx > cur) onNext && onNext();
              }}
              style={{ '--thumb-color': p.color }}>
              <span className="proto-thumb__dot"></span>
              <span className="proto-thumb__label">{p.title}</span>
            </button>
          ))}
        </div>

        <div className="proto-viewer__hint">
          Live prototype · arrow keys switch tools · Esc to close
        </div>
      </div>
    </div>
  );
}

function StoryForgeGallery() {
  const [viewIdx, setViewIdx] = React.useState(null);
  const viewing = viewIdx !== null ? STORYFORGE_PROTOTYPES[viewIdx] : null;

  return (
    <React.Fragment>
      <div className="designs-grid">
        {STORYFORGE_PROTOTYPES.map((p, i) => (
          <div key={p.id} className="design-card" onClick={() => setViewIdx(i)}
            role="button" tabIndex={0}
            onKeyDown={(e) => { if (e.key === 'Enter') setViewIdx(i); }}>
            <div className="design-card__poster design-card__poster--proto"
              style={{ background: '#0b0b11' }}>
              <img src={p.thumbImg} alt={p.title + ' screenshot'} className="design-card__poster-img" loading="lazy" />
              <div className="design-card__poster-badge">Live prototype</div>
            </div>
            <div className="design-card__info">
              <h4 className="design-card__title">{p.title}</h4>
              <p className="design-card__desc">{p.desc}</p>
            </div>
          </div>
        ))}
      </div>
      {viewing && (
        <PrototypeViewer
          proto={viewing}
          onClose={() => setViewIdx(null)}
          onNext={() => setViewIdx(Math.min(viewIdx + 1, STORYFORGE_PROTOTYPES.length - 1))}
          onPrev={() => setViewIdx(Math.max(viewIdx - 1, 0))}
          hasNext={viewIdx < STORYFORGE_PROTOTYPES.length - 1}
          hasPrev={viewIdx > 0}
        />
      )}
    </React.Fragment>
  );
}

Object.assign(window, { StoryForgeGallery, STORYFORGE_PROTOTYPES });