/* eslint-disable */
// Staffing Partner v2 — App root

(function () {
const { V2, V2SideNav } = window;
const { V2JobsView, V2CandidatesView, V2WorkersView } = window;
const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle } = window;
const { useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "jobsLayout": "table",
  "density": "normal"
}/*EDITMODE-END*/;

function App() {
  const [tab, setTab] = useState("jobs");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  let view;
  if (tab === "jobs")            view = <V2JobsView tweaks={tweaks} />;
  else if (tab === "candidates") view = <V2CandidatesView tweaks={tweaks} />;
  else if (tab === "workers")    view = <V2WorkersView tweaks={tweaks} />;

  return (
    <div style={{
      minHeight: "100vh", background: V2.page, color: V2.text,
      fontFamily: "var(--font-body)",
    }}>
      <V2SideNav active={tab} onNav={setTab} />
      <main style={{
        marginLeft: 240,
        padding: "36px 40px 96px",
        maxWidth: 1400,
      }} data-screen-label={`${tab.charAt(0).toUpperCase() + tab.slice(1)}`}>
        {view}
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Jobs layout">
          <TweakRadio
            label="Layout"
            value={tweaks.jobsLayout}
            options={[
              { value: "table",   label: "Table" },
              { value: "grouped", label: "Grouped" },
            ]}
            onChange={v => setTweak("jobsLayout", v)}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "normal",  label: "Normal" },
            ]}
            onChange={v => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
})();