/* eslint-disable no-undef */
// =====================================================
// Main app: sidebar navigation + routing + KaTeX render
// =====================================================

const PAGES = [
  // Home
  { id: 'home', title: 'Главная', group: null, render: () => <VizPageHome />, hideInSidebar: false },

  // Fall semester — chapters + their inline visualizations
  { id: 'ch-1-1',                 title: '1.1  Основные понятия',                              group: 'fall', render: () => <Page_1_1 /> },
  { id: 'viz-direction-field',    title: 'Поле направлений',                                   group: 'fall', isViz: true, render: () => <VizPageDirectionField /> },
  { id: 'viz-particle-playground',title: 'Песочница: поток в поле',                            group: 'fall', isViz: true, isPlay: true, render: () => <VizPageParticlePlayground /> },
  { id: 'ch-1-2',                 title: '1.2 – 1.4  Простейшие типы первого порядка',         group: 'fall', render: () => <Page_1_2 /> },
  { id: 'ch-1-5',                 title: '1.5 – 1.6  Полные дифференциалы, Бернулли и Риккати',group: 'fall', render: () => <Page_1_5 /> },
  { id: 'ch-1-7',                 title: '1.7  Не разрешённые относительно производной',       group: 'fall', render: () => <Page_1_7 /> },
  { id: 'viz-clairaut',           title: 'Уравнение Клеро и огибающая',                        group: 'fall', isViz: true, render: () => <VizPageClairaut /> },
  { id: 'ch-1-8',                 title: '1.8  Методы понижения порядка',                      group: 'fall', render: () => <Page_1_8 /> },
  { id: 'ch-2',                   title: '2  Задача Коши: существование и единственность',     group: 'fall', render: () => <Page_2 /> },
  { id: 'viz-blowup',             title: 'Взрыв решения за конечное время',                    group: 'fall', isViz: true, render: () => <VizPageBlowUp /> },
  { id: 'ch-3',                   title: '3  Линейные ОДУ с постоянными коэффициентами',       group: 'fall', render: () => <Page_3 /> },

  // Spring semester
  { id: 'ch-4',                   title: '4  Зависимость от параметра',                        group: 'spring', render: () => <Page_4 /> },
  { id: 'ch-5',                   title: '5  Линейные ОДУ с переменными коэффициентами',       group: 'spring', render: () => <Page_5 /> },
  { id: 'ch-6',                   title: '6  Автономные системы. Устойчивость',                group: 'spring', render: () => <Page_6 /> },
  { id: 'viz-phase',              title: 'Фазовые портреты особых точек',                      group: 'spring', isViz: true, render: () => <VizPagePhase /> },
  { id: 'viz-poincare',           title: 'Диаграмма Пуанкаре',                                 group: 'spring', isViz: true, render: () => <VizPagePoincare /> },
  { id: 'viz-phase-flow',         title: 'Песочница: фазовый поток',                           group: 'spring', isViz: true, isPlay: true, render: () => <VizPagePhaseFlow /> },
  { id: 'ch-7',                   title: '7  Первые интегралы автономных систем',              group: 'spring', render: () => <Page_7 /> },
  { id: 'viz-pendulum',           title: 'Маятник и фазовый портрет',                          group: 'spring', isViz: true, render: () => <VizPagePendulum /> },
  { id: 'viz-physical-pendulum',  title: 'Песочница: маятник в реальном времени',              group: 'spring', isViz: true, isPlay: true, render: () => <VizPagePhysicalPendulum /> },
  { id: 'ch-8',                   title: '8  Линейные УЧП первого порядка',                    group: 'spring', render: () => <Page_8 /> },
  { id: 'ch-9',                   title: '9  Элементы вариационного исчисления',               group: 'spring', render: () => <Page_9 /> },
];

function findPage(id) {
  return PAGES.find(p => p.id === id) || PAGES[0];
}

function App() {
  const [pageId, setPageId] = useState(() => (window.location.hash || '#home').slice(1) || 'home');

  // hash routing
  useEffect(() => {
    const onHash = () => {
      const id = (window.location.hash || '#home').slice(1) || 'home';
      setPageId(id);
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const page = findPage(pageId);
  const contentRef = useRef(null);

  // Render math (KaTeX) after each page change
  useEffect(() => {
    const id = setTimeout(() => {
      if (contentRef.current && window.renderMathInElement) {
        window.renderMathInElement(contentRef.current, {
          delimiters: [
            { left: '$$', right: '$$', display: true },
            { left: '$',  right: '$',  display: false },
          ],
          throwOnError: false,
          strict: false,
        });
      }
    }, 30);
    return () => clearTimeout(id);
  }, [pageId]);

  // prev/next nav
  const idx = PAGES.findIndex(p => p.id === pageId);
  const prev = idx > 0 ? PAGES[idx - 1] : null;
  const next = idx >= 0 && idx < PAGES.length - 1 ? PAGES[idx + 1] : null;

  const SidebarLink = ({ p }) => (
    <a
      href={`#${p.id}`}
      className={`sidebar-link ${pageId === p.id ? 'active' : ''} ${p.isViz ? 'is-viz' : ''} ${p.isPlay ? 'is-play' : ''}`}
    >
      {p.title}
    </a>
  );

  return (
    <div className="app">
      <aside className="sidebar">
        <div className="sidebar-title">Интерактивный гайд по ОДУ</div>
        <div className="sidebar-sub">МФТИ · 3–4 семестры</div>

        <SidebarLink p={PAGES[0]} />

        <div className="sidebar-section">Осенний семестр</div>
        {PAGES.filter(p => p.group === 'fall').map(p => <SidebarLink key={p.id} p={p} />)}

        <div className="sidebar-section">Весенний семестр</div>
        {PAGES.filter(p => p.group === 'spring').map(p => <SidebarLink key={p.id} p={p} />)}
      </aside>

      <main className="content" ref={contentRef}>
        {page.render()}

        <div className="page-nav">
          {prev ? (
            <a className="prev" href={`#${prev.id}`}>
              <span className="dir">← Назад</span>
              <span className="lbl">{prev.title}</span>
            </a>
          ) : <span className="spacer" />}
          {next ? (
            <a className="next" href={`#${next.id}`}>
              <span className="dir">Далее →</span>
              <span className="lbl">{next.title}</span>
            </a>
          ) : null}
        </div>
      </main>
    </div>
  );
}

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