/* ============================================================
 * Tweaks panel — exposes the design variations the brief asked
 * for. Uses the starter `tweaks-panel.jsx` host wiring.
 * ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "createProjectVariant": "stepper",
  "detailLayout": "scroll",
  "signOffLayout": "ceremony",
  "resumePhase3Mode": "workspace",
  "fieldStateStyle": "pills",
  "showPermissionBanner": true
}/*EDITMODE-END*/;

function PamojaTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <TweaksPanel title="Tweaks · Pamoja dMRV demo">
      <TweakSection label="Create project modal">
        <TweakSelect
          label="Layout"
          value={t.createProjectVariant}
          onChange={(v)=>setTweak('createProjectVariant', v)}
          options={[
            { value:'stepper',   label:'Stepper (4 steps)' },
            { value:'single',    label:'Single-page form' },
            { value:'sidepanel', label:'Slide-in side panel' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Project detail">
        <TweakSelect
          label="Layout"
          value={t.detailLayout}
          onChange={(v)=>setTweak('detailLayout', v)}
          options={[
            { value:'scroll',    label:'Single-scroll · content + sidebar' },
            { value:'tabs',      label:'Tabs · Overview / Phase / Findings / Trust / Credits' },
            { value:'accordion', label:'Accordion · stacked sections' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Resume Phase 3 behavior">
        <TweakRadio
          value={t.resumePhase3Mode}
          onChange={(v)=>setTweak('resumePhase3Mode', v)}
          options={[
            { value:'workspace', label:'Editable workspace' },
            { value:'view',      label:'Read-only view' },
          ]}
        />
      </TweakSection>

      <TweakSection label="VVB sign-off ceremony">
        <TweakSelect
          label="Layout"
          value={t.signOffLayout}
          onChange={(v)=>setTweak('signOffLayout', v)}
          options={[
            { value:'ceremony', label:'Full-page · ceremony' },
            { value:'drawer',   label:'Side drawer summary' },
            { value:'modal',    label:'Compact modal' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Field-state visual treatment">
        <TweakRadio
          value={t.fieldStateStyle}
          onChange={(v)=>setTweak('fieldStateStyle', v)}
          options={[
            { value:'pills',  label:'Colored pills (current)' },
            { value:'subtle', label:'Subtle labels' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.PamojaTweaks = PamojaTweaks;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;