// Vidgas — main App

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "cinema",
  "accent": "#ff3d3d",
  "density": "regular",
  "fontStyle": "modern"
}/*EDITMODE-END*/;

// Read initial route from URL: ?v=<id> opens the player for that video
function getInitialRoute() {
  try {
    const params = new URLSearchParams(window.location.search);
    const v = params.get('v');
    if (v) return { name: 'player', id: v };
  } catch (e) {}
  return { name: 'library' };
}

function syncUrl(route) {
  try {
    const url = new URL(window.location.href);
    if (route.name === 'player' && route.id) {
      url.searchParams.set('v', route.id);
    } else {
      url.searchParams.delete('v');
    }
    window.history.replaceState({}, '', url.toString());
  } catch (e) {}
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(getInitialRoute());
  const [menuOpen, setMenuOpen] = useState(false);
  const data = window.VIDGAS_DATA;

  // Keep URL in sync with route so player links are shareable
  useEffect(() => { syncUrl(route); }, [route]);

  // Apply theme to body
  useEffect(() => {
    document.body.className = '';
    document.body.classList.add('theme-' + (t.theme || 'cinema'));
    document.documentElement.style.setProperty('--accent', t.accent);
    // derive accent variants
    document.documentElement.style.setProperty('--accent-glow', hexToRgba(t.accent, 0.35));
    if (t.fontStyle === 'editorial') {
      document.documentElement.style.setProperty('--font-display', "'Instrument Serif', 'Cormorant Garamond', serif");
    } else if (t.fontStyle === 'mono') {
      document.documentElement.style.setProperty('--font-display', "'Geist Mono', ui-monospace, monospace");
    } else {
      document.documentElement.style.setProperty('--font-display', "'Geist', 'Bricolage Grotesque', system-ui, sans-serif");
    }
  }, [t.theme, t.accent, t.fontStyle]);

  // Scroll to top on route change
  useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [route]);

  const navigate = (r) => { setRoute(r); setMenuOpen(false); };

  let screen;
  if (route.name === 'library') screen = <LibraryScreen data={data} navigate={navigate} />;
  else if (route.name === 'player') screen = <PlayerScreen data={data} route={route} navigate={navigate} />;
  else if (route.name === 'upload') screen = <UploadScreen data={data} navigate={navigate} />;
  else if (route.name === 'collections') screen = <CollectionsScreen data={data} navigate={navigate} />;
  else if (route.name === 'search') screen = <SearchScreen data={data} navigate={navigate} />;
  else screen = <LibraryScreen data={data} navigate={navigate} />;

  return (
    <div className={'app' + (menuOpen ? ' menu-open' : '')} data-screen-label={'app-' + route.name}>
      <Sidebar route={route} navigate={navigate} collections={data.COLLECTIONS} />
      <div className="main">
        <TopBar navigate={navigate} onMenu={() => setMenuOpen(o => !o)} route={route} />
        {screen}
      </div>

      <TweaksPanel>
        <TweakSection label="Style" />
        <TweakRadio label="Theme" value={t.theme}
          options={[
            { value: 'cinema',    label: 'Cinema' },
            { value: 'editorial', label: 'Editorial' },
            { value: 'vibrant',   label: 'Vibrant' },
          ]}
          onChange={(v) => setTweak('theme', v)} />
        <TweakRadio label="Display font" value={t.fontStyle}
          options={[
            { value: 'modern',    label: 'Modern' },
            { value: 'editorial', label: 'Serif' },
            { value: 'mono',      label: 'Mono' },
          ]}
          onChange={(v) => setTweak('fontStyle', v)} />
        <TweakColor label="Accent" value={t.accent}
          options={['#ff3d3d', '#7c5cff', '#22d3ee', '#a3e635', '#fbbf24', '#ec4899']}
          onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Navigation" />
        <TweakButton label="Library" onClick={() => navigate({ name: 'library' })} />
        <TweakButton label="Player" onClick={() => navigate({ name: 'player', id: 'v01' })} />
        <TweakButton label="Upload" onClick={() => navigate({ name: 'upload' })} />
        <TweakButton label="Collections" onClick={() => navigate({ name: 'collections' })} />
        <TweakButton label="Search" onClick={() => navigate({ name: 'search' })} />
      </TweaksPanel>
    </div>
  );
}

function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return `rgba(${r},${g},${b},${a})`;
}

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