app.tsx

import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { SettingsProvider } from './context/settings_context';
import { SetupFlowProvider } from './context/setup_flow_context';
import { LibraryProvider } from './context/library_context';
import { PlayerProvider, usePlayer } from './src/context/player';
import { RemoteProvider } from './context/remote_context';
import { useSettings } from './context/settings_context';
import { useMediaSession } from './hooks/media_session';
import { useElectronBridge } from './hooks/electron_bridge';
import { isElectron } from './utils/electron';
import { useTrackNotifications } from './hooks/track_notifications';
import { useSpeechAnnouncements } from './hooks/speech_announcements';
import { useQueueFinishedSound } from './hooks/queue_finished_sound';
import { useScrobbler } from './hooks/scrobbler';
import { useAccentColor } from './hooks/accent_color';
import { useDynamicFavicon } from './hooks/dynamic_favicon';
import { useKeyboardShortcuts } from './hooks/keyboard_shortcuts';
import { usePageKeys } from './hooks/page_keys';
import { Radio_page } from './pages/radio';
import { HomePage } from './pages/home';
import { LibraryPage } from './pages/library';
import { SearchPage } from './pages/search';
import { ArtistsPage } from './pages/artists';
import { ArtistDetailPage } from './pages/artist_detail';
import { AlbumsPage } from './pages/albums';
import { AlbumDetailPage } from './pages/album_detail';
import { QueuePage } from './pages/queue';
import { LyricsPage } from './pages/lyrics';
import { ShareLyricsPage } from './pages/share_lyrics';
import { SettingsPage } from './pages/settings';
import { AboutPage } from './pages/about';
import { ReleaseNotesPage } from './pages/release_notes';
import { LastfmPage } from './pages/lastfm';
import { RemotePage } from './pages/remote';
import { SetupFlowPage } from './pages/setup_flow';
import { NAV_LINKS, Sidebar } from './components/sidebar';
import { PlayerBar } from './components/player_bar';
import { FullscreenPlayer } from './components/fs_player';
import { ToastContainer } from './components/toast_container';
import { SetupLeaveModal } from './components/setup_leave_modal';
import { SidePanel } from './components/side_panel';
import { SleepTimerFinishedModal } from './components/sleep_timer_finished_modal';

const SIDE_PANEL_MEDIA = '(min-width: 1100px)';

function MediaBridge() {
  useMediaSession();
  useElectronBridge();
  useTrackNotifications();
  useSpeechAnnouncements();
  useQueueFinishedSound();
  useScrobbler();
  return null;
}

function KeyboardShortcuts({ toggleFullscreen }: { toggleFullscreen: () => void }) {
  useKeyboardShortcuts({ toggleFullscreen });
  return null;
}

type NavItem = (typeof NAV_LINKS)[number];
type BackdropPhase = 'entering' | 'visible' | 'leaving';

function pageNavItem(pathname: string): NavItem | null {
  if (pathname === '/') return NAV_LINKS[0];
  return (
    NAV_LINKS.slice(1).find(
      (item) => pathname === item.path || pathname.startsWith(`${item.path}/`)
    ) ?? null
  );
}

function PageIconBackdrop() {
  const { pathname } = useLocation();
  const item = pageNavItem(pathname);
  const requestedItemRef = useRef<NavItem | null>(item);
  requestedItemRef.current = item;
  const [displayedItem, setDisplayedItem] = useState<NavItem | null>(item);
  const [phase, setPhase] = useState<BackdropPhase>('visible');

  useEffect(() => {
    if (phase !== 'visible') return;
    if (item?.path === displayedItem?.path) return;
    if (displayedItem) {
      setPhase('leaving');
    } else if (item) {
      setDisplayedItem(item);
      setPhase('entering');
    }
  }, [item, displayedItem, phase]);

  const finishAnimation = () => {
    const requestedItem = requestedItemRef.current;
    if (phase === 'leaving') {
      setDisplayedItem(requestedItem);
      setPhase(requestedItem ? 'entering' : 'visible');
      return;
    }
    if (phase === 'entering') {
      setPhase(requestedItem?.path === displayedItem?.path ? 'visible' : 'leaving');
    }
  };

  return (
    <div className="xe_page-backdrops" aria-hidden="true">
      {displayedItem && (
        <div
          className={`xe_page-backdrop xe_page-backdrop--${phase}`}
          key={displayedItem.path}
          onAnimationEnd={finishAnimation}
        >
          <displayedItem.icon size={666} />
        </div>
      )}
    </div>
  );
}

function Shell() {
  const [fullscreenOpen, setFullscreenOpen] = useState(false);
  const [playerBarCollapsed, setPlayerBarCollapsed] = useState(false);
  const [sidePanelSupported, setSidePanelSupported] = useState(
    () => window.matchMedia(SIDE_PANEL_MEDIA).matches
  );
  const { current, radio_station, artworkUrl, isPlaying } = usePlayer();
  const { settings, update } = useSettings();
  const accent = useAccentColor(artworkUrl);
  useDynamicFavicon(Boolean(current || radio_station), accent.accent, isPlaying);
  usePageKeys(settings.pageKeyMode);
  const accentStyle = useMemo(
    () =>
      ({
        '--accent': accent.accent,
        '--accent-bright': accent.accentBright,
        '--accent-text': accent.accentText,
        '--accent-soft': accent.accentSoft,
        '--accent-glow': accent.accentGlow,
        '--accent-wash': accent.accentWash
      }) as CSSProperties,
    [accent]
  );

  useEffect(() => {
    document.documentElement.style.setProperty('--xe-active-accent', accent.accent);
    return () => {
      document.documentElement.style.removeProperty('--xe-active-accent');
    };
  }, [accent.accent]);

  useEffect(() => {
    document.documentElement.classList.toggle('xe_reduced-motion', settings.reducedMotion);
  }, [settings.reducedMotion]);

  useEffect(() => {
    if (settings.theme === 'default') {
      delete document.documentElement.dataset.theme;
    } else {
      document.documentElement.dataset.theme = settings.theme;
    }
  }, [settings.theme]);

  useEffect(() => {
    if (!current && !radio_station) setFullscreenOpen(false);
  }, [current, radio_station]);

  useEffect(() => {
    const media = window.matchMedia(SIDE_PANEL_MEDIA);
    const handleChange = () => setSidePanelSupported(media.matches);
    media.addEventListener('change', handleChange);
    return () => media.removeEventListener('change', handleChange);
  }, []);

  useEffect(() => {
    if (!fullscreenOpen || (!current && !radio_station)) return;
    const previous = document.title;
    const { title, artist } = radio_station ? { title: radio_station.name, artist: 'Live radio' } : current!.track;
    document.title = isElectron ? `${title} by ${artist}` : `${title} by ${artist} / Xebrine`;
    return () => {
      document.title = previous;
    };
  }, [fullscreenOpen, current, radio_station]);

  return (
    <div
      className={`xe_xebrine${settings.playerBarPosition === 'top' ? ' xe_xebrine--player-top' : ''}${
        settings.playerBarLayout === 'compact' ? ' xe_xebrine--player-compact' : ''
      }`}
      style={accentStyle}
    >
      <Sidebar onOpenFullscreen={() => setFullscreenOpen(true)} />
      <main className="xe_main">
        <div className="xe_route-view">
          {settings.showBackgroundIcon && <PageIconBackdrop />}
          <Routes>
            <Route path="/radio" element={<Radio_page />} />
            <Route path="/" element={<HomePage />} />
            <Route path="/search" element={<SearchPage />} />
            <Route path="/library" element={<LibraryPage />} />
            <Route path="/artists" element={<ArtistsPage />} />
            <Route path="/artists/:artistName" element={<ArtistDetailPage />} />
            <Route path="/albums/:artistName/:albumName" element={<AlbumDetailPage />} />
            <Route path="/albums" element={<AlbumsPage />} />
            <Route path="/queue" element={<QueuePage />} />
            <Route path="/lyrics" element={<LyricsPage />} />
            <Route path="/lyrics/share" element={<ShareLyricsPage />} />
            <Route path="/settings" element={<Navigate to="/settings/preferences" replace />} />
            <Route path="/settings/scrobbling" element={<Navigate to="/lastfm" replace />} />
            <Route path="/settings/:section" element={<SettingsPage />} />
            <Route path="/i" element={<Navigate to="/i/info" replace />} />
            <Route path="/i/flow/setup" element={<SetupFlowPage />} />
            <Route path="/i/:section" element={<AboutPage />} />
            <Route path="/i/release_notes" element={<ReleaseNotesPage />} />
            <Route path="/lastfm" element={<LastfmPage />} />
            <Route path="/remote" element={<RemotePage />} />
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </div>
        <SidePanel
          open={settings.sidePanelOpen && sidePanelSupported}
          view={settings.sidePanelView}
          onViewChange={(view) => update({ sidePanelView: view })}
          onClose={() => update({ sidePanelOpen: false })}
        />
      </main>
      <FullscreenPlayer
        open={fullscreenOpen}
        playerBarCollapsed={playerBarCollapsed}
        onClose={() => setFullscreenOpen(false)}
      />
      <PlayerBar
        collapsed={playerBarCollapsed}
        fullscreenOpen={fullscreenOpen && Boolean(current || radio_station)}
        onCollapsedChange={setPlayerBarCollapsed}
        onToggleFullscreen={() => setFullscreenOpen((open) => !open)}
        sidePanelOpen={settings.sidePanelOpen && sidePanelSupported}
        sidePanelAvailable={sidePanelSupported}
        onToggleSidePanel={() => {
          if (sidePanelSupported) update({ sidePanelOpen: !settings.sidePanelOpen });
        }}
      />
      <MediaBridge />
      <KeyboardShortcuts
        toggleFullscreen={() => {
          if (current || radio_station) setFullscreenOpen((open) => !open);
        }}
      />
      <ToastContainer />
      <SleepTimerFinishedModal />
    </div>
  );
}

export default function App() {
  return (
    <SetupFlowProvider>
      <SettingsProvider>
        <LibraryProvider>
          <PlayerProvider>
            <RemoteProvider>
              <Shell />
            </RemoteProvider>
          </PlayerProvider>
        </LibraryProvider>
      </SettingsProvider>
      <SetupLeaveModal />
    </SetupFlowProvider>
  );
}