// Root: design canvas with 3 variations of the prototype + Tweaks panel

const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "editorial",
  "theme": "light",
  "density": "comfortable",
  "page": "catchup",
  "showAllVariants": true
}/*EDITMODE-END*/;

function FocusedTroveApp({ tweaks }) {
  return (
    <TroveApp
      key={tweaks.variant + '-' + tweaks.theme + '-' + tweaks.density + '-' + tweaks.page}
      initialPage={tweaks.page}
      variant={tweaks.variant}
    />
  );
}

// Wrap to apply tweak overrides
function TweakedTrove({ tweaks, variant }) {
  const v = variant || tweaks.variant;
  const themeStyle = tweaks.theme;
  const dens = tweaks.density;

  // Use a wrapper that overrides theme/density via context
  return (
    <ScopedApp variant={v} theme={themeStyle} density={dens} page={tweaks.page} />
  );
}

function ScopedApp({ variant, theme, density, page }) {
  return (
    <TroveAppControlled
      variant={variant}
      theme={theme}
      density={density}
      initialPage={page}
    />
  );
}

// TroveAppControlled is now in app-controlled.jsx (shared with mono-root.jsx)

function Root() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const PUBLIC = typeof window !== 'undefined' && window.__PUBLIC_MODE__;
  const GATED = PUBLIC && !(typeof window !== 'undefined' && window.__FULL_ACCESS__);

  const VARIANTS = [
    { id: "editorial", label: "Editorial", subtitle: "DM Sans · warm neutrals · royal blue (default)", color: "#2563EB" },
    { id: "mono",      label: "Mono",      subtitle: "Pure monochrome · ink black accents · maximum focus", color: "#1A1A1A" },
  ];

  const PAGES_FULL = [
    { id: "landing",     label: "Landing" },
    { id: "catchup",     label: "Catch Up" },
    { id: "bookmarks",   label: "Bookmarks list" },
    { id: "collections", label: "Collections" },
    { id: "map",         label: "Insights" },
    { id: "community",  label: "Community" },
    { id: "feedback",    label: "Feedback" },
    { id: "bulk",        label: "Bulk import" },
  ];
  const PAGES = GATED
    ? PAGES_FULL.filter(p => ['landing','catchup','collections','community'].includes(p.id))
    : PAGES_FULL;

  // If only one variant is shown, render the controls inside the canvas
  const variantsToRender = tweaks.showAllVariants
    ? VARIANTS
    : VARIANTS.filter(v => v.id === tweaks.variant);

  const W = 1280;
  const H = tweaks.page === 'landing' ? 1100 : 1500;

  // V2-Public: skip the design-canvas chrome and render the app fullscreen.
  // V1 (editorial review): keep the canvas with all variants/sections.
  const publicApp = (
    <div style={{ position: 'fixed', inset: 0, background: 'var(--surface, #fafaf7)', overflow: 'auto' }}>
      <TroveAppControlled
        variant={VARIANTS[0].id}
        theme={tweaks.theme}
        density={tweaks.density}
        initialPage={PAGES.find(p=>p.id===tweaks.page) ? tweaks.page : 'catchup'}
      />
    </div>
  );

  return (
    <>
      {PUBLIC ? publicApp : (
        <DesignCanvas defaultZoom={0.6}>
          <DCSection id="trove" title="Trove — Webapp Prototype" subtitle={`Visual direction · ${tweaks.theme} · ${tweaks.density} · current page: ${PAGES.find(p=>p.id===tweaks.page)?.label}`}>
            {variantsToRender.map(v => (
              <DCArtboard key={v.id} id={v.id} label={`${v.label} — ${v.subtitle}`} width={W} height={H}>
                <TroveAppControlled
                  variant={v.id}
                  theme={tweaks.theme}
                  density={tweaks.density}
                  initialPage={tweaks.page}
                />
              </DCArtboard>
            ))}
          </DCSection>

          {/* Catch Up v2 — Magazine variant for comparison */}
          {tweaks.page === 'catchup' && (
            <DCSection id="catchup-v2" title="Catch Up v2 — Magazine Grid" subtitle="Collapsible sidebar · no stat cards · media tabs · editorial card layout">
              <DCArtboard id="magazine" label="Magazine layout · collapsible sidebar · All/Watch/Read/Listen/Other tabs" width={W} height={900}>
                <TroveAppV2 initialPage="catchup" />
              </DCArtboard>
            </DCSection>
          )}
        </DesignCanvas>
      )}

      <TweaksPanel title="Trove Tweaks">
        <TweakSection title="View">
          <TweakRadio
            label="Page"
            value={tweaks.page}
            onChange={(v) => setTweak('page', v)}
            options={(GATED ? [
              { value: 'catchup', label: 'Catch Up' },
              { value: 'collections', label: 'Collections' },
              { value: 'community', label: 'Community' },
            ] : [
              { value: 'catchup', label: 'Catch Up' },
              { value: 'bookmarks', label: 'Bookmarks' },
              { value: 'collections', label: 'Collections' },
              { value: 'community', label: 'Community' },
            ])}
          />
          <TweakSelect
            label="More pages"
            value={tweaks.page}
            onChange={(v) => setTweak('page', v)}
            options={PAGES.map(p => ({value: p.id, label: p.label}))}
          />
          <TweakToggle
            label="Show all 3 variants"
            value={tweaks.showAllVariants}
            onChange={(v) => setTweak('showAllVariants', v)}
          />
          {!tweaks.showAllVariants && (
            <TweakRadio
              label="Variant"
              value={tweaks.variant}
              onChange={(v) => setTweak('variant', v)}
              options={VARIANTS.map(v => ({value: v.id, label: v.label}))}
            />
          )}
        </TweakSection>

        <TweakSection title="Theme & Density">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'light', label: 'Light' },
              { value: 'dark', label: 'Dark' },
            ]}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: 'Comfortable' },
              { value: 'compact', label: 'Compact' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Tips">
          <div style={{fontSize:11, color:'var(--om-tw-muted, #999)', lineHeight:1.5}}>
            Inside any artboard, press <span className="kbd" style={{background:'rgba(255,255,255,0.08)', padding:'1px 4px', borderRadius:3}}>⌘K</span> to open the command palette, or click <strong>Add</strong> to try the AI-extract flow.
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);