import { useEffect, useState } from 'react';
import { SETTINGS_ROLES } from '../../admin/js/role-capabilities.js';
import { logoutAndRedirect } from '../shared/auth-client.js';
import { SESSION_PHASES } from '../shared/session-policy.js';
import { useAuthorizedSession } from '../shared/use-authorized-session.js';
import { AsyncState } from '../shared/ui/AsyncState.jsx';
import { DatabaseTab } from './DatabaseTab.jsx';
import { EduFormsTab } from './EduFormsTab.jsx';
import { GeneralTab } from './GeneralTab.jsx';
import { TimeSlotsTab } from './TimeSlotsTab.jsx';
import {
defaultSettingsTabForRole,
settingsTabsForRole
} from './settings-service.js';
const THEME_STORAGE_KEY = 'theme';
const SIDEBAR_STORAGE_KEY = 'sidebar-collapsed';
const TAB_ICONS = Object.freeze({
database: (
),
'edu-forms': (
),
general: (
),
'time-slots': (
)
});
export function SettingsApp() {
const sessionState = useAuthorizedSession(SETTINGS_ROLES);
useEffect(() => {
document.documentElement.dataset.theme = localStorage.getItem(THEME_STORAGE_KEY) || 'light';
}, []);
if (sessionState.phase === SESSION_PHASES.loading) {
return ;
}
if (sessionState.phase !== SESSION_PHASES.ready) {
return ;
}
return ;
}
function SettingsShell({ title, sidebar, children }) {
const [collapsed, setCollapsed] = useState(() => (
typeof window !== 'undefined'
&& window.innerWidth > 768
&& localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true'
));
function toggleSidebar() {
setCollapsed(current => {
const next = !current;
localStorage.setItem(SIDEBAR_STORAGE_KEY, next);
return next;
});
}
function toggleTheme() {
const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = next;
localStorage.setItem(THEME_STORAGE_KEY, next);
}
function handleLogout(event) {
event.preventDefault();
void logoutAndRedirect();
}
return (
<>
);
}
function SettingsWorkspace({ role }) {
const tabs = settingsTabsForRole(role);
const [activeTab, setActiveTab] = useState(() => defaultSettingsTabForRole(role) || tabs[0]?.id);
const active = tabs.find(tab => tab.id === activeTab) || tabs[0];
const sidebar = (
);
return (
{active?.id === 'general' && }
{active?.id === 'time-slots' && }
{active?.id === 'edu-forms' && }
{active?.id === 'database' && }
);
}