// PageShell.jsx — sidebar + topbar + main + global tweaks panel.
// Owns the cross-page label-position pref. The "effective" value applied to
// body[data-labels] is: per-page override (if set) -> global default.
//
// Pages that include form boxes should:
//   1. pass a `pageKey` to <PageShell> so the override targets that page, and
//   2. render <LabelPositionSwitch pageKey="…"> near the page title.

const PageShell = ({ active, pageKey, children }) => {
  const [prefs, setPref] = usePrefs();
  const [, , tr] = useLang();

  // Resolve which label position to actually render with. The per-page override
  // wins; without one, the global default applies.
  const effective = effectiveLabels(prefs, pageKey);

  React.useEffect(() => {
    document.body.setAttribute('data-labels', effective);
    return () => { /* leave attribute in place on unmount */ };
  }, [effective]);

  return (
    <div className="app">
      <Sidebar active={active} />
      <TopBar />
      <main className="main">
        {children}
      </main>

      <TweaksPanel>
        <TweakSection label={tr('tweak.form')} />
        <TweakRadio
          label={tr('tweak.labels')}
          value={prefs.labels || 'side'}
          options={[
            { value: 'side', label: tr('tweak.label.side') },
            { value: 'top',  label: tr('tweak.label.top')  },
          ]}
          onChange={(v) => setPref('labels', v)}
        />
        <div className="twk-hint">{tr('tweak.labels.hint')}</div>
      </TweaksPanel>
    </div>
  );
};

// ---------------------------------------------------------------------------
// In-page label-position switch. Lives next to a form's title and overrides
// the global default for THIS page only. Reading the current value:
//   - if pageLabels[pageKey] is set, that wins (and the "Reset" link shows)
//   - otherwise the switch reflects the global default, no override stored.
// Clicking a segment writes pageLabels[pageKey]; clicking the reset link
// removes the override and that page falls back to the global default.
const LabelPositionSwitch = ({ pageKey }) => {
  const [prefs] = usePrefs();
  const [, , tr] = useLang();

  if (!pageKey) return null;

  const override = (prefs.pageLabels && prefs.pageLabels[pageKey]) || null;
  const globalVal = prefs.labels || 'side';
  const effective = override || globalVal;

  return (
    <div className="lp-switch" role="group" aria-label={tr('switch.labels')}>
      <span className="lp-lab">{tr('switch.labels')}</span>
      <div className="lp-seg">
        <button
          type="button"
          className={effective === 'side' ? 'on' : ''}
          aria-pressed={effective === 'side'}
          onClick={() => setPageLabels(pageKey, 'side')}
          title={override && override === 'side' ? tr('switch.labels.overridden') : ''}
        >
          {tr('switch.labels.side')}
        </button>
        <button
          type="button"
          className={effective === 'top' ? 'on' : ''}
          aria-pressed={effective === 'top'}
          onClick={() => setPageLabels(pageKey, 'top')}
          title={override && override === 'top' ? tr('switch.labels.overridden') : ''}
        >
          {tr('switch.labels.top')}
        </button>
      </div>
      {override ? (
        <button
          type="button"
          className="lp-reset"
          onClick={() => setPageLabels(pageKey, null)}
          title={tr('switch.labels.reset')}
        >
          {tr('switch.labels.reset')}
        </button>
      ) : null}
    </div>
  );
};

window.PageShell = PageShell;
window.LabelPositionSwitch = LabelPositionSwitch;