/* global React, BeforeAfterSlider, Placeholder, WORKFLOWS, FilterBar, I18N, localizeWorkflow */
const { useState, useEffect, useMemo, createContext, useContext } = React;

// ============================================================
// Language context
// ============================================================
const LangCtx = createContext({ lang: 'en', t: (k) => k, setLang: () => {} });
const useT = () => useContext(LangCtx);

// ============================================================
// Locked-in configuration (Tweaks panel removed)
// ============================================================
const CONFIG = {
  sliderMode: "hover",
  labelMode: "hover",
  layout: "alternating",
  showNumbering: false
};

// ============================================================
// Lightbox — fullscreen view of a workflow's slider
// ============================================================
function Lightbox({ workflow, onClose, sliderMode, labelMode }) {
  const { t } = useT();
  const [zoom, setZoom] = React.useState(1);
  const containerRef = React.useRef(null);
  
  useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  // Scroll-to-zoom for upscale workflows
  useEffect(() => {
    if (!workflow || workflow.category !== 'Upscale') return;
    
    const container = containerRef.current;
    if (!container) return;
    
    const onWheel = (e) => {
      e.preventDefault();
      const delta = e.deltaY > 0 ? -0.2 : 0.2;
      setZoom(prev => Math.max(1, Math.min(4, prev + delta)));
    };
    
    container.addEventListener('wheel', onWheel, { passive: false });
    return () => container.removeEventListener('wheel', onWheel);
  }, [workflow]);

  if (!workflow) return null;

  const before = workflow.before ||
  <Placeholder kind="before" label={workflow.beforeLabel || t('before')} />;

  const after = workflow.after ||
  <Placeholder kind="after" label={workflow.afterLabel || t('after')} />;

  const isUpscale = workflow.category === 'Upscale';

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(20, 23, 28, 0.92)',
        zIndex: 100,
        display: 'flex',
        flexDirection: 'column',
        animation: 'lb-fade 200ms cubic-bezier(0.2,0.6,0.2,1)'
      }}>
      
      {/* Top bar */}
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          padding: '24px 32px',
          color: '#fff',
          fontFamily: 'Poppins, Arial, sans-serif'
        }}>
        
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
          <span
            style={{
              fontSize: 11,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              fontWeight: 600,
              color: '#9D9D9C'
            }}>
            
            {workflow.number}
          </span>
          <span style={{ fontWeight: 300, fontSize: 22, letterSpacing: '-0.01em' }}>
            {workflow.name}
          </span>
        </div>
        
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          {isUpscale && (
            <>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  setZoom(Math.max(1, zoom - 0.5));
                }}
                disabled={zoom <= 1}
                style={{
                  background: 'transparent',
                  border: '1px solid #fff',
                  color: '#fff',
                  fontFamily: 'Poppins, Arial, sans-serif',
                  fontSize: 11,
                  fontWeight: 600,
                  letterSpacing: '0.16em',
                  textTransform: 'uppercase',
                  padding: '10px 18px',
                  cursor: zoom <= 1 ? 'not-allowed' : 'pointer',
                  opacity: zoom <= 1 ? 0.5 : 1
                }}>
                Zoom −
              </button>
              
              <span style={{ 
                color: '#fff', 
                fontSize: 12, 
                fontWeight: 600,
                minWidth: 60,
                textAlign: 'center'
              }}>
                {Math.round(zoom * 100)}%
              </span>
              
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  setZoom(Math.min(4, zoom + 0.5));
                }}
                disabled={zoom >= 4}
                style={{
                  background: 'transparent',
                  border: '1px solid #fff',
                  color: '#fff',
                  fontFamily: 'Poppins, Arial, sans-serif',
                  fontSize: 11,
                  fontWeight: 600,
                  letterSpacing: '0.16em',
                  textTransform: 'uppercase',
                  padding: '10px 18px',
                  cursor: zoom >= 4 ? 'not-allowed' : 'pointer',
                  opacity: zoom >= 4 ? 0.5 : 1
                }}>
                Zoom +
              </button>
            </>
          )}
          
          <button
            onClick={(e) => {
              e.stopPropagation();
              onClose();
            }}
            style={{
              background: 'transparent',
              border: '1px solid #fff',
              color: '#fff',
              fontFamily: 'Poppins, Arial, sans-serif',
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              padding: '10px 18px',
              cursor: 'pointer',
              marginLeft: isUpscale ? 16 : 0
            }}>
            
            {t('close') || 'Close'} ✕
          </button>
        </div>
      </div>

      {/* Slider frame — clicking inside doesn't close */}
      <div
        ref={containerRef}
        onClick={(e) => e.stopPropagation()}
        style={{
          flex: 1,
          padding: '0 32px 32px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: isUpscale && zoom > 1 ? 'auto' : 'hidden'
        }}>
        
        <div style={{ 
          width: '100%', 
          maxWidth: zoom > 1 ? 'none' : 1600, 
          maxHeight: '100%',
          transform: `scale(${zoom})`,
          transformOrigin: 'center',
          transition: 'transform 200ms cubic-bezier(0.2,0.6,0.2,1)'
        }}>
          <BeforeAfterSlider
            before={before}
            after={after}
            beforeLabel={workflow.beforeLabel || 'Before'}
            afterLabel={workflow.afterLabel || 'After'}
            showLabels={labelMode}
            mode={sliderMode}
            containMode={workflow.containMode}
            aspectRatio="16 / 9" />
          
        </div>
      </div>

      <style>{`
        @keyframes lb-fade {
          from { opacity: 0; }
          to { opacity: 1; }
        }
      `}</style>
    </div>);

}

// ============================================================
// Single workflow row
// ============================================================
function WorkflowRow({ workflow, index, layout, sliderMode, labelMode, showNumbering, onOpen }) {
  const { t, lang } = useT();
  const isReversed = layout === 'alternating' && index % 2 === 1;
  const isStacked = layout === 'stacked';

  const before = workflow.before ||
  <Placeholder kind="before" label={workflow.beforeLabel || t('before')} />;

  const after = workflow.after ||
  <Placeholder kind="after" label={workflow.afterLabel || t('after')} />;


  const sliderEl = workflow.videoOnly ? (
    <div style={{
      position: 'relative',
      width: '100%',
      aspectRatio: '16 / 10',
      overflow: 'hidden',
      background: 'var(--prompt-black)',
      border: '1px solid var(--prompt-black)'
    }}>
      <video
        src={workflow.before}
        autoPlay
        loop
        muted
        playsInline
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover'
        }}
      />
    </div>
  ) : (
  <BeforeAfterSlider
    before={before}
    after={after}
    beforeLabel={workflow.beforeLabel || t('before')}
    afterLabel={workflow.afterLabel || t('after')}
    showLabels={labelMode}
    mode={sliderMode}
    aspectRatio="16 / 10"
    containMode={workflow.containMode}
    caption={sliderMode === 'hover' ? lang === 'es' ? 'Pasa el cursor para comparar' : 'Hover to compare' : lang === 'es' ? 'Arrastra para comparar' : 'Drag to compare'} />
  );



  const textEl =
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      gap: 24,
      paddingTop: isStacked ? 0 : 8
    }}>
    
      {/* Eyebrow: number + label */}
      {showNumbering &&
    <div
      style={{
        display: 'flex',
        alignItems: 'baseline',
        gap: 14,
        fontSize: 11,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        fontWeight: 600,
        color: 'var(--prompt-black)'
      }}>
      
          <span style={{ fontVariantNumeric: 'tabular-nums' }}>{workflow.number}</span>
          <span
        style={{
          width: 32,
          height: 1,
          background: 'var(--prompt-black)',
          transform: 'translateY(-3px)'
        }} />
      
          <span style={{ color: 'var(--prompt-gray)' }}>{t('workflow')}</span>
        </div>
    }

      {/* Title */}
      <h2
      style={{
        margin: 0,
        fontWeight: 300,

        lineHeight: 1.05,
        letterSpacing: '-0.015em',
        color: 'var(--prompt-black)', fontSize: "51px"
      }}>
      
        {workflow.name}
      </h2>

      {/* Description */}
      <p
      style={{
        margin: 0,
        fontSize: 17,
        lineHeight: 1.6,
        fontWeight: 300,
        color: 'var(--prompt-charcoal)',
        maxWidth: 540,
        textWrap: 'pretty'
      }}>
      
        {workflow.description}
      </p>

      {/* Tags */}
      {workflow.tags && workflow.tags.length > 0 &&
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
          {workflow.tags.map((t) =>
      <span
        key={t}
        style={{
          fontSize: 10,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          fontWeight: 600,
          color: 'var(--prompt-black)',
          border: '1px solid var(--prompt-light-gray)',
          padding: '7px 12px',
          background: 'var(--prompt-white)'
        }}>
        
              {t}
            </span>
      )}
        </div>
    }

      {/* Affordance */}
      <button
      onClick={() => onOpen(workflow)}
      style={{
        alignSelf: 'flex-start',
        marginTop: 8,
        background: 'transparent',
        border: 0,
        borderBottom: '1.5px solid var(--prompt-black)',
        color: 'var(--prompt-black)',
        fontFamily: 'Poppins, Arial, sans-serif',
        fontSize: 11,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        fontWeight: 600,
        padding: '10px 0',
        cursor: 'pointer',
        transition: 'color 200ms cubic-bezier(0.2,0.6,0.2,1), border-color 200ms'
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.color = 'var(--prompt-gray)';
        e.currentTarget.style.borderColor = 'var(--prompt-gray)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.color = 'var(--prompt-black)';
        e.currentTarget.style.borderColor = 'var(--prompt-black)';
      }}>
      
        {t('viewFullscreen')} &nbsp;&gt;&gt;
      </button>
    </div>;


  if (isStacked) {
    return (
      <article
        data-screen-label={`${workflow.number} ${workflow.name}`}
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 40,
          paddingTop: 64,
          paddingBottom: 64,
          borderTop: '1px solid var(--prompt-light-gray)'
        }}>
        
        {textEl}
        <div style={{ width: '100%' }}>{sliderEl}</div>
      </article>);

  }

  return (
    <article
      data-screen-label={`${workflow.number} ${workflow.name}`}
      style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 1fr)',
        gap: 'clamp(32px, 5vw, 80px)',
        alignItems: 'center',
        paddingTop: 80,
        paddingBottom: 80,
        borderTop: '1px solid var(--prompt-light-gray)'
      }}>
      
      <div style={{ order: isReversed ? 2 : 1 }}>{sliderEl}</div>
      <div style={{ order: isReversed ? 1 : 2 }}>{textEl}</div>
    </article>);

}

// ============================================================
// Header
// ============================================================
function PageHeader({ count }) {
  const { t } = useT();
  return (
    <>
    <header
        style={{
          paddingTop: 'clamp(48px, 8vw, 120px)',
          paddingBottom: 'clamp(48px, 6vw, 96px)',
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 80px)',
          alignItems: 'end', padding: "35px 0px 92px"
        }}>
      
      <div>
        {/* Title */}
        <h1
            style={{
              margin: 0,
              fontWeight: 300,



              color: 'var(--prompt-black)', letterSpacing: "-2.6px", borderStyle: "solid", borderWidth: "0px", padding: "0px", fontSize: "81px", whiteSpace: "pre-line", lineHeight: "1.2"
            }}>{t('title')}
          </h1>
      </div>

      <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 16,
            paddingBottom: 8
          }}>

        <p
            style={{
              margin: 0,
              fontSize: 17,
              lineHeight: 1.55,
              color: 'var(--prompt-charcoal)',
              fontWeight: 300,
              maxWidth: 460,
              textWrap: 'pretty', padding: "0px", letterSpacing: "0px", width: "450px", height: "84px", textAlign: "left"
            }}>{t('intro')}</p>
      </div>
    </header>

    <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          paddingTop: 16,
          paddingBottom: 24
        }}>
      <div
          style={{
            fontSize: 10,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            fontWeight: 600,
            color: 'var(--prompt-gray)'
          }}>
        {t('lastUpdate')}
      </div>
    </div>
    </>);

}

// ============================================================
// Top chrome — logo strip
// ============================================================
function TopBar() {
  const { lang, setLang } = useT();
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        borderBottom: '1px solid var(--prompt-light-gray)',
        fontWeight: '400',
        height: '120px',
        padding: '0px',
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
      <img
        src="assets/logo-black.svg"
        alt="Prompt"
        style={{ display: 'block', padding: '0px', objectFit: 'contain', width: '180px', height: '180px' }} />

      <div style={{ display: 'flex', border: '1px solid var(--prompt-black)' }}>
        {['en', 'es', 'ca'].map((code) => {
          const active = lang === code;
          return (
            <button
              key={code}
              onClick={() => setLang(code)}
              style={{
                fontFamily: 'Poppins, Arial, sans-serif',
                fontSize: 11,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                fontWeight: 600,
                padding: '10px 16px',
                background: active ? 'var(--prompt-black)' : 'transparent',
                color: active ? 'var(--prompt-white)' : 'var(--prompt-black)',
                border: 0,
                cursor: active ? 'default' : 'pointer',
                transition: 'background 160ms, color 160ms'
              }}>
              {code === 'en' ? 'EN' : code === 'es' ? 'ES' : 'CA'}
            </button>);
        })}
      </div>
    </div>);

}

// ============================================================
// Footer
// ============================================================
function PageFooter() {
  return (
    <PageFooterInner />);
}

function PageFooterInner() {
  const { t } = useT();
  return (
    <footer
      style={{
        marginTop: 96,
        paddingTop: 32,
        paddingBottom: 48,
        borderTop: '1px solid var(--prompt-light-gray)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'baseline',
        fontSize: 11,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        fontWeight: 600,
        color: 'var(--prompt-gray)'
      }}>
      
      <span>{t('endOfIndex')}</span>
      <span>prompt-studio.com</span>
    </footer>);

}

// ============================================================
// App
// ============================================================
function App() {
  const [openWorkflow, setOpenWorkflow] = useState(null);
  const [query, setQuery] = useState('');
  const [category, setCategory] = useState('All');
  const [lang, setLangState] = useState(() => {
    try {return localStorage.getItem('lang') || 'en';} catch (e) {return 'en';}
  });

  const setLang = (l) => {
    setLangState(l);
    try {localStorage.setItem('lang', l);} catch (e) {}
  };

  const t = useMemo(() => {
    const dict = window.I18N && window.I18N[lang] || {};
    return (k) => dict[k] != null ? dict[k] : k;
  }, [lang]);

  const rawWorkflows = window.WORKFLOWS || [];
  const workflows = useMemo(
    () => rawWorkflows.map((wf) => window.localizeWorkflow ? window.localizeWorkflow(wf, lang) : wf),
    [rawWorkflows, lang]
  );
  const categories = window.CATEGORIES || [];

  // ---------- URL state (read once, write on change) ----------
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const q = params.get('q');
    const c = params.get('cat');
    if (q) setQuery(q);
    if (c) setCategory(c);
  }, []);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (query.trim()) params.set('q', query.trim());else params.delete('q');
    if (category !== 'All') params.set('cat', category);else params.delete('cat');
    const qs = params.toString();
    const url = window.location.pathname + (qs ? `?${qs}` : '') + window.location.hash;
    window.history.replaceState({}, '', url);
  }, [query, category]);

  // ---------- Filter logic ----------
  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return workflows.filter((wf) => {
      if (category !== 'All' && wf.category !== category) return false;
      if (!q) return true;
      const haystack = [
      wf.name,
      wf.description,
      wf.category,
      ...(wf.tags || [])].
      join(' ').toLowerCase();
      return haystack.includes(q);
    });
  }, [workflows, query, category]);

  const clearFilters = () => {
    setQuery('');
    setCategory('All');
  };

  return (
    <LangCtx.Provider value={{ lang, setLang, t }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 clamp(20px, 4vw, 56px)' }}>
        <TopBar />
      </div>

      <FilterBar
        query={query}
        setQuery={setQuery}
        category={category}
        setCategory={setCategory}
        categories={categories}
        resultCount={filtered.length} />
      

      <div
        style={{
          maxWidth: 1320,
          margin: '0 auto',
          padding: '0 clamp(20px, 4vw, 56px)', width: "1333px", fontSize: "50px"
        }}>

        <PageHeader count={workflows.length} />

        <main>
          {filtered.length === 0 ?
          <EmptyState onClear={clearFilters} /> :

          filtered.map((wf, i) =>
          <WorkflowRow
            key={wf.id}
            workflow={wf}
            index={i}
            layout={CONFIG.layout}
            sliderMode={CONFIG.sliderMode}
            labelMode={CONFIG.labelMode}
            showNumbering={CONFIG.showNumbering}
            onOpen={setOpenWorkflow} />
          )
          }
        </main>

        <PageFooter />

        {openWorkflow &&
        <Lightbox
          workflow={openWorkflow}
          sliderMode={CONFIG.sliderMode}
          labelMode={CONFIG.labelMode}
          onClose={() => setOpenWorkflow(null)} />
        }
      </div>
    </LangCtx.Provider>);

}

// ============================================================
// Empty state — shown when no workflows match
// ============================================================
function EmptyState({ onClear }) {
  const { t } = useT();
  return (
    <div
      style={{
        padding: 'clamp(72px, 12vw, 160px) 0',
        borderTop: '1px solid var(--prompt-light-gray)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 28,
        textAlign: 'center'
      }}>
      <div
        style={{
          fontSize: 11,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          fontWeight: 600,
          color: 'var(--prompt-gray)'
        }}>
        {t('noResults')}
      </div>
      <h3
        style={{
          margin: 0,
          fontWeight: 300,
          fontSize: 'clamp(28px, 3.6vw, 48px)',
          letterSpacing: '-0.015em',
          color: 'var(--prompt-black)',
          lineHeight: 1.1,
          maxWidth: 720
        }}>
        {t('noMatch')}
      </h3>
      <button
        onClick={onClear}
        style={{
          marginTop: 8,
          background: 'var(--prompt-black)',
          border: '1px solid var(--prompt-black)',
          color: 'var(--prompt-white)',
          fontFamily: 'Poppins, Arial, sans-serif',
          fontSize: 11,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          fontWeight: 600,
          padding: '14px 24px',
          cursor: 'pointer',
          transition: 'background 200ms, color 200ms'
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = 'var(--prompt-yellow)';
          e.currentTarget.style.color = 'var(--prompt-black)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = 'var(--prompt-black)';
          e.currentTarget.style.color = 'var(--prompt-white)';
        }}>
        {t('clearFilters')}
      </button>
    </div>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);