import { useState, useEffect, useRef } from 'react';
import './App.css';
import { DSP, AppPage } from './types';
import TopBar from './components/Topbar/Topbar';
import DSPPage from './pages/DspPage/DspPage';
import AddDSPForm from './pages/AddDspPage/AddDspPage';
import { useNotifications } from './hooks/useNotifications';
import Notifications from './components/Notifications/Notifications';
import CreditsPage from './pages/CreditsPage/CreditsPage';
import HomePage from './pages/HomePage/HomePage';
import { addDSP, createDSPInstance } from './dsp/dspApi';
import { removeDSP } from './dsp/dspShared';
import { stopAllPolling } from './dsp/pollRegistry';

function App() {
  const [dsps, setDsps] = useState<DSP[]>([]);
  const [selected, setSelected] = useState<number | null>(null);
  const [page, setPage] = useState<AppPage>('home');
  const { notifications, notify, removeNotification, hoverNotification } = useNotifications();
  const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;

  const activeDsp = dsps.find((d) => d.id === selected) ?? null;
  const activeInstance = activeDsp ? createDSPInstance(activeDsp, setDsps, notify) : null;

  const dspsRef = useRef(dsps);
  dspsRef.current = dsps;
  useEffect(() => {
    return () => stopAllPolling(dspsRef.current);
  }, []);

  useEffect(() => {
    if (activeDsp == null) return;
    const instance = createDSPInstance(activeDsp, setDsps, notify);
    instance.api.setActive(true);
    return () => instance.api.setActive(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeDsp?.id]);

  return (
    <div className="app">
      <Notifications
        notifications={notifications}
        onRemove={removeNotification}
        onHover={hoverNotification}
      />

      <TopBar
        dsps={dsps}
        selected={selected}
        page={page}
        setPage={setPage}
        setSelect={setSelected}
        onSelect={(id) => {
          setSelected(id);
          setPage('view-dsp');
        }}
        onRemove={(dsp) => removeDSP(setDsps, selected, setSelected, dsp.id, dsp.type)}
        onAddClick={() => setPage('add-dsp')}
        onConnect={(dsp) => createDSPInstance(dsp, setDsps, notify).api.connect()}
        onDisconnect={(dsp) => createDSPInstance(dsp, setDsps, notify).api.disconnect()}
      />

      <main className="stage">
        {page === 'credits' ? (
          <CreditsPage />
        ) : page === 'add-dsp' ? (
          <AddDSPForm
            onCancel={() => setPage('home')}
            onAdd={(params) => addDSP(setDsps, setSelected, setPage, notify, params)}
          />
        ) : activeInstance ? (
          <DSPPage instance={activeInstance} />
        ) : (
          <HomePage
            onAddDSP={() => setPage('add-dsp')}
            dspCount={dsps.length}
            connectedCount={connectedDspCount}
          />
        )}
      </main>
    </div>
  );
}

export default App;