// Themed page frame for pages that aren't part of a study project (Home, Import):
// slim top bar with a title, optional back button, and actions on the right.
import { useApp } from '../../context/AppContext.js';
import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
import { ChevronLeft } from '../reader/icons.jsx';
import AuthStatus from '../AuthStatus.jsx';

const THEME_ORDER = ['paper', 'sepia', 'dark'];

export default function PageShell({ title, onBack, actions, maxWidth = 'max-w-6xl', children }) {
  const { readerTheme, setReaderTheme } = useApp();
  const cycle = () => setReaderTheme(THEME_ORDER[(THEME_ORDER.indexOf(readerTheme) + 1) % THEME_ORDER.length]);
  return (
    <div className="min-h-screen bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
      <div className="sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
        <div className={`mx-auto flex min-h-[3rem] ${maxWidth} flex-wrap items-center gap-2 px-3 py-1.5`}>
          {onBack && (
            <button type="button" onClick={onBack} aria-label="Back" className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /></button>
          )}
          <h1 className="text-base font-medium">{title}</h1>
          <div className="ml-auto flex flex-wrap items-center gap-1.5">
            {actions}
            <button type="button" onClick={cycle} className="rounded-lg px-2 py-1.5 text-xs text-[var(--r-sub)] hover:bg-black/5" title="Change theme">{READER_THEMES[readerTheme]?.label}</button>
            <AuthStatus themed />
          </div>
        </div>
      </div>
      {children}
    </div>
  );
}