// components/AudienceMode.jsx
//
// State machine for audience mode selection. Persists to localStorage so mode
// survives navigation between /pitchdeck and /dungeon-master.
//
// Five states:
//   unselected, vc, enterprise, academic, all
//
// Wire-in: window.AudienceMode = AudienceMode
//          window.AudienceModeProvider = AudienceModeProvider
//          window.useAudienceMode = useAudienceMode
//          window.AudienceModeAPI = { getCurrentMode, setMode, getSlidePath, getMorphemeOverlay }

const { useState, useEffect, useContext, createContext } = React;

const AUDIENCE_MODE_KEY = 'morphy-audience-mode';
const VALID_MODES = ['vc', 'enterprise', 'academic', 'all'];

const AudienceModeContext = createContext({
  mode: 'unselected',
  setMode: function() {},
});

function AudienceModeProvider({ children }) {
  const [mode, setModeState] = useState('unselected');

  useEffect(function() {
    try {
      var stored = localStorage.getItem(AUDIENCE_MODE_KEY);
      if (stored && VALID_MODES.indexOf(stored) !== -1) {
        setModeState(stored);
      }
    } catch (e) {
      // localStorage may be unavailable
    }
  }, []);

  var setMode = function(newMode) {
    if (VALID_MODES.indexOf(newMode) === -1) {
      console.warn('[AudienceMode] Invalid mode: ' + newMode);
      return;
    }
    setModeState(newMode);
    try {
      localStorage.setItem(AUDIENCE_MODE_KEY, newMode);
    } catch (e) {
      // localStorage may be unavailable
    }
  };

  return (
    <AudienceModeContext.Provider value={{ mode: mode, setMode: setMode }}>
      {children}
    </AudienceModeContext.Provider>
  );
}

function useAudienceMode() {
  return useContext(AudienceModeContext);
}

// --- Standalone functions (no React needed) ---

function getCurrentMode() {
  try {
    var stored = localStorage.getItem(AUDIENCE_MODE_KEY);
    if (stored && VALID_MODES.indexOf(stored) !== -1) {
      return stored;
    }
  } catch (e) {
    // localStorage may be unavailable
  }
  return 'unselected';
}

function setModeImperative(newMode) {
  if (VALID_MODES.indexOf(newMode) === -1) {
    console.warn('[AudienceMode] Invalid mode: ' + newMode);
    return;
  }
  try {
    localStorage.setItem(AUDIENCE_MODE_KEY, newMode);
  } catch (e) {
    // localStorage may be unavailable
  }
}

function getSlidePath(mode) {
  if (VALID_MODES.indexOf(mode) === -1) return null;
  return 'slides/' + mode + '/';
}

function getMorphemeOverlay(mode, baseMorpheme) {
  if (!baseMorpheme || !baseMorpheme.audience_overlays) return baseMorpheme;
  var overlay = baseMorpheme.audience_overlays[mode];
  if (!overlay) return baseMorpheme;
  return Object.assign({}, baseMorpheme, {
    knowledge_stack_paths: overlay.knowledge_stack_paths || [],
    sales_morphemes_admissible: overlay.sales_morphemes_admissible || [],
    sales_morphemes_require_disclosure: overlay.sales_morphemes_require_disclosure != null
      ? overlay.sales_morphemes_require_disclosure
      : true,
  });
}

// AudienceMode component for the landing page
function AudienceMode({ onModeSelected }) {
  var ctx = useAudienceMode();
  var setMode = ctx.setMode;

  var handleSelect = function(selectedMode) {
    setMode(selectedMode);
    if (onModeSelected) onModeSelected(selectedMode);
    window.location.href = '/pitchdeck';
  };

  return (
    <div className="audience-mode-selector">
      <h2>Choose your view</h2>
      <p className="audience-mode-explainer">
        Each view shows the same Axiom Intelligence substrate, framed for
        different audiences. The substrate is the same; the framing changes.
      </p>
      <div className="audience-mode-buttons">
        <button
          className="audience-mode-btn"
          onClick={function() { handleSelect('vc'); }}
        >
          <h3>VC</h3>
          <p>Capital Partners</p>
        </button>
        <button
          className="audience-mode-btn"
          onClick={function() { handleSelect('enterprise'); }}
        >
          <h3>Enterprise</h3>
          <p>AI Security Buyers</p>
        </button>
        <button
          className="audience-mode-btn"
          onClick={function() { handleSelect('academic'); }}
        >
          <h3>Academic</h3>
          <p>Research Collaborators</p>
        </button>
        <button
          className="audience-mode-btn"
          onClick={function() { handleSelect('all'); }}
        >
          <h3>All</h3>
          <p>Universal Demo</p>
        </button>
      </div>
      <a className="audience-skip-link" href="/dungeon-master">
        Skip the deck, talk to Morphy directly
      </a>
    </div>
  );
}

// Window registrations
window.AudienceMode = AudienceMode;
window.AudienceModeProvider = AudienceModeProvider;
window.useAudienceMode = useAudienceMode;
window.getSlidePath = getSlidePath;
window.getMorphemeOverlay = getMorphemeOverlay;
window.AudienceModeAPI = {
  getCurrentMode: getCurrentMode,
  setMode: setModeImperative,
  getSlidePath: getSlidePath,
  getMorphemeOverlay: getMorphemeOverlay,
};