/* eslint-disable */
// Staffing Partner — app root, routing, Tweaks integration

(function () {
const { SPTopNav } = window;
const { JobsView, CandidatesView, WorkerRosterView } = window;
const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window;
const { useState } = React;

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

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

  let view;
  if (tab === "jobs")            view = <JobsView tweaks={tweaks} />;
  else if (tab === "candidates") view = <CandidatesView tweaks={tweaks} />;
  else if (tab === "workers")    view = <WorkerRosterView tweaks={tweaks} />;

  return (
    <div style={{ minHeight: "100vh", background: "var(--neutral-20)", color: "var(--neutral-100)" }}>
      <SPTopNav active={tab} onNav={setTab} />
      <main style={{
        maxWidth: 1400, margin: "0 auto",
        padding: "32px 28px 80px", fontFamily: "var(--font-body)",
      }} 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)}
          />
          {tweaks.jobsLayout === "grouped" && (
            <TweakSelect
              label="Group by"
              value={tweaks.jobsGrouping}
              options={[
                { value: "urgency",  label: "Urgency (HCO end date)" },
                { value: "deadline", label: "Deadline buckets" },
                { value: "client",   label: "Client" },
              ]}
              onChange={v => setTweak("jobsGrouping", v)}
            />
          )}
        </TweakSection>
        <TweakSection label="Density & info">
          <TweakRadio
            label="Density"
            value={tweaks.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "normal",  label: "Normal" },
            ]}
            onChange={v => setTweak("density", v)}
          />
          <TweakToggle
            label="Show secondary metrics"
            value={tweaks.showSecondary}
            onChange={v => setTweak("showSecondary", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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