import { useEffect, useState } from 'react';
import { Library } from './pages/Library.tsx';
import { Prompter } from './pages/Prompter.tsx';
import { Recorder } from './pages/Recorder.tsx';
import { Settings } from './pages/Settings.tsx';
import { VideoPage } from './pages/VideoPage.tsx';

// Hash routes:
//   #/                     library
//   #/settings
//   #/video/:id            editor
//   #/video/:id/record     recorder
//   #/prompter/:id         pop-out teleprompter window

function useHash() {
  const [hash, setHash] = useState(window.location.hash);
  useEffect(() => {
    const on = () => setHash(window.location.hash);
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  return hash.replace(/^#\/?/, '');
}

export function navigate(path: string) {
  window.location.hash = `#/${path.replace(/^\//, '')}`;
}

export function App() {
  const path = useHash();
  const parts = path.split('/').filter(Boolean);

  if (parts[0] === 'settings') return <Settings />;
  if (parts[0] === 'prompter' && parts[1]) return <Prompter videoId={parts[1]} />;
  if (parts[0] === 'video' && parts[1] && parts[2] === 'record') return <Recorder key={parts[1]} videoId={parts[1]} />;
  if (parts[0] === 'video' && parts[1]) return <VideoPage key={parts[1]} videoId={parts[1]} />;
  return <Library />;
}