/* Track & Train — App shell & tab nav */

const TABS = [
  { id: 'cal',   key: 'tab_calendar', icon: Icon.calendar },
  { id: 'type',  key: 'tab_bytype',   icon: Icon.tag },
  { id: 'types', key: 'tab_types',    icon: Icon.settings },
];

function App() {
  const [data, setData] = useState(() => loadData() || demoSeed());
  const [lang, setLang] = useState(() => loadLang());
  const [tab, setTab] = useState('cal');
  const [scrolled, setScrolled] = useState(false);

  setCurrentLang(lang); // sync module-level language before children render

  useEffect(() => { saveData(data); }, [data]);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const changeLang = (l) => { setLang(l); saveLang(l); };

  // ----- Session ops -----
  const addSession = (s) => setData((d) => ({ ...d, sessions: [...d.sessions, s] }));
  const updateSession = (s) => setData((d) => ({ ...d, sessions: d.sessions.map((x) => x.id === s.id ? s : x) }));
  const deleteSession = (id) => setData((d) => ({ ...d, sessions: d.sessions.filter((x) => x.id !== id) }));

  // ----- Type ops -----
  const addType = (name, color, id) => {
    const ty = { id: id || uid('typ'), name, color };
    setData((d) => ({ ...d, types: [...d.types, ty] }));
    return ty;
  };
  const updateType = (ty) => setData((d) => ({ ...d, types: d.types.map((x) => x.id === ty.id ? { ...x, ...ty } : x) }));
  const deleteType = (id) => setData((d) => ({
    ...d,
    types: d.types.filter((x) => x.id !== id),
    sessions: d.sessions.filter((s) => s.typeId !== id),
  }));
  const reset = () => setData(blankData());
  const importData = (next) => setData(next);

  return (
    <ToastProvider>
      <div className="app">
        <header className={'topbar ' + (scrolled ? 'scrolled' : '')}>
          <div className="logo"><img src="app-icon.png" alt=""/></div>
          <h1>Track &amp; Train</h1>
        </header>

        <main className="main">
          {tab === 'cal' && (
            <CalendarView
              data={data}
              onAddSession={addSession}
              onUpdateSession={updateSession}
              onDeleteSession={deleteSession}
              onAddType={addType} />
          )}
          {tab === 'type' && (
            <ByTypeView
              data={data}
              onUpdateSession={updateSession}
              onDeleteSession={deleteSession}
              onAddType={addType} />
          )}
          {tab === 'types' && (
            <TypesView
              data={data}
              lang={lang}
              onSetLang={changeLang}
              onAddType={addType}
              onUpdateType={updateType}
              onDeleteType={deleteType}
              onImport={importData}
              onReset={reset} />
          )}
        </main>

        <nav className="tabbar">
          {TABS.map((tb) => (
            <button key={tb.id} className={'tab ' + (tab === tb.id ? 'active' : '')} onClick={() => setTab(tb.id)}>
              <tb.icon/> {t(tb.key)}
            </button>
          ))}
        </nav>
      </div>
    </ToastProvider>
  );
}

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