/* global React, ReactDOM, T, Icon, MockWorkspace, SidebarV1, SidebarV2, SidebarV3, SidebarV4 */

// =====================================================================
// Design-canvas app. Each artboard pairs one of the 4 sidebars with the
// shared MockWorkspace so the user sees the sidebar in the same context
// every time. A Tweaks panel hangs off the bottom-right and toggles
// between light + dark sidebar themes (defaults persist via the host's
// edit-mode protocol).
// =====================================================================

const { DesignCanvas, DCSection, DCArtboard, useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;

const ART_W = 1180;
const ART_H = 860;

// Persisted defaults. The host parses this block on disk and rewrites it
// when the user changes a tweak — so dark/light survives reload.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "Light"
}/*EDITMODE-END*/;

function Artboard({ Sidebar, headerLeft, dark }) {
  return (
    <div style={{
      width: ART_W, height: ART_H,
      display: "flex",
      background: T.bgPage,
      overflow: "hidden",
      fontFamily: "Inter, system-ui, sans-serif",
    }}>
      <Sidebar dark={dark}/>
      <MockWorkspace
        headerLeft={headerLeft}
        headerRight={<>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "5px 10px", borderRadius: 8,
            border: `1px solid ${T.border}`, background: "#fff",
            font: "500 12px/16px Inter", color: T.text2, cursor: "pointer",
          }}>
            <Icon.check size={14}/> Not started
          </span>
        </>}
      />
    </div>
  );
}

const Crumb = ({ items }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, font: "400 13px/18px Inter", color: T.text3 }}>
    <span style={{ color: T.text4, display: "inline-flex" }}><Icon.panel size={18}/></span>
    <span style={{ width: 1, height: 16, background: T.border, marginInline: 2 }}/>
    {items.map((it, i) => (
      <React.Fragment key={i}>
        {i > 0 && <span style={{ color: T.text4 }}>/</span>}
        <span style={{ font: i === items.length - 1 ? "600 13px/18px Inter" : "400 13px/18px Inter", color: i === items.length - 1 ? T.text : T.text3 }}>
          {it}
        </span>
      </React.Fragment>
    ))}
  </div>
);

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const dark = t.theme === "Dark";
  return (
    <>
      <DesignCanvas
        title="Method 8 — Sidebar explorations"
        subtitle="Four directions for the primary nav. Drag to reorder · click any artboard to focus."
        bg="#f5f6f8"
      >
        <DCSection id="row-1" title="Four sidebar directions" subtitle={`From a conservative cleanup to a verbs-first timeline. Showing in ${dark ? "dark" : "light"} theme — toggle in the Tweaks panel.`}>
          <DCArtboard id="v1" label="V1 · Refined floor"        width={ART_W} height={ART_H}>
            <Artboard Sidebar={SidebarV1} dark={dark} headerLeft={<Crumb items={["Deployed modules", "Safety Standard Gap Assessment"]}/>}/>
          </DCArtboard>

          <DCArtboard id="v2" label="V2 · Programme-scoped"     width={ART_W} height={ART_H}>
            <Artboard Sidebar={SidebarV2} dark={dark} headerLeft={<Crumb items={["Gold Fields", "Deployed modules", "Safety Standard Gap"]}/>}/>
          </DCArtboard>

          <DCArtboard id="v3" label="V3 · Command-first"        width={ART_W} height={ART_H}>
            <Artboard Sidebar={SidebarV3} dark={dark} headerLeft={<Crumb items={["Deployed modules", "Safety Standard Gap Assessment"]}/>}/>
          </DCArtboard>

          <DCArtboard id="v4" label="V4 · Live timeline"        width={ART_W} height={ART_H}>
            <Artboard Sidebar={SidebarV4} dark={dark} headerLeft={<Crumb items={["Gold Fields", "Safety Standard Gap Assessment"]}/>}/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks" noDeckControls>
        <TweakSection label="Sidebar theme">
          <TweakRadio
            label="Theme"
            value={t.theme}
            options={["Light", "Dark"]}
            onChange={(v) => setTweak("theme", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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