const EQ = window.EquestrianismDesignSystem_6b57f9;
const { AppShell, Wordmark, EmptyState, NotFound, ErrorState, Button } = EQ;

const NAV = [
  { key: 'board', label: 'Board' },
  { key: 'sessions', label: 'Sessions' },
  { key: 'new', label: 'New task' },
  { key: 'approvals', label: 'Approvals', count: 2 },
  { key: 'artifacts', label: 'Artifacts' },
  { key: 'routines', label: 'Routines' },
  { key: 'budget', label: 'Budget' },
  { key: 'connections', label: 'Connections' },
  { key: 'settings', label: 'Settings' },
];

function PageHead({ title, sub, end }) {
  return (
    <div className="page-head">
      <div><h1 className="page-title">{title}</h1>
        {sub && <p className="page-sub">{sub}</p>}</div>
      {end}
    </div>
  );
}
window.PageHead = PageHead;

/* The three unbuilt destinations demo the honesty rule in situ. */
function Routines({ go }) {
  return (<div>
    <PageHead title="Routines" sub="Scheduled tasks that run and report back." />
    <div className="panel"><EmptyState title="No routines yet."
      body="A routine is a task on a schedule — the weekly shop, meter readings."
      action={<Button size="sm" onClick={() => go('new')}>Create one</Button>} /></div>
  </div>);
}
function Artifacts() {
  return (<div>
    <PageHead title="Artifacts" sub="Documents and reports produced by sessions." />
    <div className="panel"><ErrorState title="We couldn't load your artifacts."
      note="Anything already published is still published; we just can't list it right now."
      action={<Button variant="ghost" size="sm">Try again</Button>} /></div>
  </div>);
}
function Settings() {
  return (<div>
    <PageHead title="Settings" />
    <NotFound title="This page is not part of the kit."
      body="The kit demonstrates the shell, forms, board, budget, approvals, a session, and connections."
      action={<a href="#board">Back to the board</a>} />
  </div>);
}

function CarouselApp() {
  const [route, setRoute] = React.useState('board');
  const [session, setSession] = React.useState(null);
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('eq-theme') || 'light'; } catch (e) { return 'light'; }
  });
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('eq-theme', theme); } catch (e) {}
  }, [theme]);
  const go = (key, arg) => { setRoute(key); if (key === 'sessions') setSession(arg || null); window.scrollTo(0, 0); };
  const screens = {
    board: <window.BoardPage go={go} />,
    sessions: <window.SessionDetail go={go} />,
    new: <window.NewTask go={go} />,
    approvals: <window.Approvals go={go} />,
    artifacts: <Artifacts />,
    routines: <Routines go={go} />,
    budget: <window.Budget go={go} />,
    connections: <window.Connections go={go} />,
    settings: <Settings />,
  };
  return (
    <AppShell brand={<Wordmark size="sm" />} member="Margaret" role="Owner"
      nav={NAV} active={route} onNavigate={go}
      actions={<button type="button" className="theme-btn"
        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        {theme === 'dark' ? 'Light' : 'Dark'}</button>}>
      {screens[route]}
    </AppShell>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<CarouselApp />);