// Variant switcher overlay — small corner widget + keyboard 1/2/3.
// Crossfades between Direction1/2/3 by mounting two layers and fading.

function VariantSwitcher({ variant, onChange }) {
  const [open, setOpen] = React.useState(false);
  const labels = window.NJF_AB.LABELS;
  const order = window.NJF_AB.VARIANTS;

  React.useEffect(() => {
    const onKey = (e) => {
      if (document.activeElement && /input|textarea/i.test(document.activeElement.tagName)) return;
      if (e.key === '1') onChange('terminal');
      if (e.key === '2') onChange('dossier');
      if (e.key === '3') onChange('index');
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onChange]);

  const dotColors = { terminal: '#7ee27a', dossier: '#9a3a1c', index: '#1c3fa8' };

  return (
    <div style={{
      position: 'fixed', top: 16, right: 16, zIndex: 1000,
      fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11,
    }}>
      <div onClick={() => setOpen(o => !o)} style={{
        background: 'rgba(20,20,24,0.85)', backdropFilter: 'blur(8px)',
        color: '#fff', padding: '8px 14px', borderRadius: 999,
        display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
        border: '1px solid rgba(255,255,255,0.12)',
        boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: dotColors[variant], boxShadow: `0 0 10px ${dotColors[variant]}` }} />
        <span style={{ letterSpacing: 1.5 }}>{labels[variant].toUpperCase()}</span>
        <span style={{ opacity: 0.5, fontSize: 9, letterSpacing: 1 }}>· VIEW</span>
      </div>
      {open && (
        <div style={{
          marginTop: 6, background: 'rgba(20,20,24,0.92)', backdropFilter: 'blur(8px)',
          color: '#fff', borderRadius: 10, padding: 6,
          border: '1px solid rgba(255,255,255,0.1)', minWidth: 200,
        }}>
          <div style={{ padding: '8px 10px 6px', fontSize: 9, letterSpacing: 2, opacity: 0.5 }}>VIEW THIS SITE AS</div>
          {order.map((v, i) => (
            <div key={v} onClick={() => { onChange(v); setOpen(false); }} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
              cursor: 'pointer', borderRadius: 6,
              background: variant === v ? 'rgba(255,255,255,0.08)' : 'transparent',
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: dotColors[v] }} />
              <span style={{ flex: 1 }}>{labels[v]}</span>
              <span style={{ opacity: 0.4, fontSize: 9 }}>{i + 1}</span>
            </div>
          ))}
          <div style={{ padding: '6px 10px', fontSize: 9, letterSpacing: 1, opacity: 0.4, borderTop: '1px solid rgba(255,255,255,0.08)', marginTop: 4 }}>
            press 1 / 2 / 3 to switch
          </div>
        </div>
      )}
    </div>
  );
}

function CrossfadeStage({ variant, data }) {
  const [layers, setLayers] = React.useState([{ id: 0, v: variant, fading: false }]);
  const idRef = React.useRef(0);

  React.useEffect(() => {
    const top = layers[layers.length - 1];
    if (top.v === variant) return;
    idRef.current += 1;
    setLayers(ls => [...ls, { id: idRef.current, v: variant, fading: false }]);
    // After mount, mark previous to fade out
    const t1 = setTimeout(() => {
      setLayers(ls => ls.map((l, i) => i < ls.length - 1 ? { ...l, fading: true } : l));
    }, 30);
    const t2 = setTimeout(() => {
      setLayers(ls => ls.slice(-1));
    }, 700);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [variant]);

  const renderVariant = (v) => {
    if (v === 'terminal') return <Direction1 data={data} />;
    if (v === 'dossier') return <Direction2 data={data} />;
    return <Direction3 data={data} />;
  };

  return (
    <div style={{ position: 'fixed', inset: 0, overflow: 'hidden', background: '#000' }}>
      {layers.map((l, i) => (
        <div key={l.id} style={{
          position: 'absolute', inset: 0,
          opacity: l.fading ? 0 : 1,
          transition: 'opacity 600ms ease',
          zIndex: i,
        }}>
          {renderVariant(l.v)}
        </div>
      ))}
    </div>
  );
}

function Site() {
  const [variant, setVariantState] = React.useState(() => window.NJF_AB.getVariant());
  const [data, setData] = React.useState(window.PORTFOLIO_DATA);
  const sessionStartRef = React.useRef(Date.now());

  // Pull admin-editable overrides from Supabase (site media URLs, intro/contact
  // copy edits) and merge over the static data.js defaults. data.js is the
  // baseline; Supabase values take precedence when present.
  React.useEffect(() => {
    if (!window.NJF_SUPA) return;
    window.NJF_SUPA.from('site_content').select('key, value').then(({ data: rows }) => {
      if (!rows) return;
      const overrides = {};
      rows.forEach(r => {
        const v = r.value || {};
        if (r.key === 'media') {
          if (v.portrait_url) overrides.portraitUrl = v.portrait_url;
          if (v.hero_url)     overrides.heroUrl     = v.hero_url;
        }
        if (r.key === 'intro' && Array.isArray(v.paragraphs) && v.paragraphs.length) {
          overrides.intro = v.paragraphs;
        }
        if (r.key === 'contact') {
          if (v.email) overrides.email = v.email;
          if (v.phone) overrides.phone = v.phone;
        }
      });
      if (Object.keys(overrides).length) setData(prev => ({ ...prev, ...overrides }));
    });
    // Pull published projects too, so admin-added projects show on the site.
    window.NJF_SUPA.from('projects').select('*')
      .eq('status', 'published').order('display_order', { ascending: true })
      .then(({ data: rows }) => {
        if (!rows || !rows.length) return;
        setData(prev => ({ ...prev, projects: rows }));
      });
  }, []);

  React.useEffect(() => {
    window.NJF_AB.logEvent('view', { section: 'home' });
    const onUnload = () => {
      const dwell = Math.floor((Date.now() - sessionStartRef.current) / 1000);
      window.NJF_AB.logEvent('session_end', { dwell });
    };
    window.addEventListener('beforeunload', onUnload);
    return () => window.removeEventListener('beforeunload', onUnload);
  }, []);

  const change = (v) => {
    window.NJF_AB.setVariant(v, true);
    setVariantState(v);
  };

  return (
    <>
      <CrossfadeStage variant={variant} data={data} />
      <VariantSwitcher variant={variant} onChange={change} />
      <Lightbox />
    </>
  );
}

window.Site = Site;