/* ============== ROUTER + STATE ============== */
/* Single source of truth for which route + section is showing inside the console.
   Routes: 'HOME' | 'SURGEON' | 'AI' | 'LAZY' | 'ABOUT' | 'JOURNEY' | 'COMMS'
   Sections: array of slide IDs per route. HOME has no sections (it's the carousel).
*/

const ROUTES = {
  HOME: {
    key: 'HOME',
    label: 'PICK A VENTURE',
    short: 'HOME',
    sections: [], // carousel itself
    color: '01',
  },
  SURGEON: {
    key: 'SURGEON',
    label: 'THE CONTENT SURGEON',
    short: 'THE CONTENT SURGEON',
    color: '01',
    sections: [
      { id: 'intro', label: 'INTRO' },
      { id: 'diagnosis', label: 'DIAGNOSIS' },
      { id: 'services', label: 'SERVICES' },
      { id: 'method', label: 'METHOD' },
      { id: 'live', label: 'LIVE SITE' },
    ],
  },
  AI: {
    key: 'AI',
    label: 'PURO AI LABS',
    short: 'PURO AI LABS',
    color: '02',
    sections: [
      { id: 'intro', label: 'INTRO' },
      { id: 'problem', label: 'THE PROBLEM' },
      { id: 'studio', label: 'THE STUDIO' },
      { id: 'workshop', label: 'THE WORKSHOP' },
      { id: 'live', label: 'LIVE SITE' },
    ],
  },
  LAZY: {
    key: 'LAZY',
    label: 'LAZZZYHUSTLER',
    short: 'LAZZZYHUSTLER',
    color: '03',
    sections: [
      { id: 'intro', label: 'INTRO' },
      { id: 'manifesto', label: 'MANIFESTO' },
      { id: 'formats', label: 'FORMATS' },
      { id: 'status', label: 'STATUS' },
    ],
  },
  ABOUT: {
    key: 'ABOUT',
    label: 'PLAYER DATA',
    short: 'PLAYER (FOUNDER)',
    color: 'P1',
    sections: [
      { id: 'intro', label: 'INTRO' },
      { id: 'story', label: 'STORY' },
      { id: 'skills', label: 'SKILLS' },
      { id: 'now', label: 'NOW' },
    ],
  },
  JOURNEY: {
    key: 'JOURNEY',
    label: 'MISSION LOG',
    short: 'MISSION LOG',
    color: 'LOG',
    sections: [
      { id: 'intro', label: 'INTRO' },
      { id: 'y1', label: 'CH.01' },
      { id: 'y2', label: 'CH.02' },
      { id: 'y3', label: 'CH.03' },
      { id: 'y4', label: 'CH.04' },
    ],
  },
  COMMS: {
    key: 'COMMS',
    label: 'COMMS CHANNELS',
    short: 'CONTACT',
    color: 'C0',
    sections: [
      { id: 'intro', label: 'INTRO' },
      { id: 'channels', label: 'CHANNELS' },
      { id: 'live', label: 'LIVE SITES' },
    ],
  },
};

const ROUTE_ORDER = ['HOME', 'SURGEON', 'AI', 'LAZY', 'ABOUT', 'JOURNEY', 'COMMS'];

function parseHash() {
  const h = (location.hash || '#/').replace(/^#/, '');
  const parts = h.split('/').filter(Boolean);
  const route = (parts[0] || 'home').toUpperCase();
  const section = parts[1] || null;
  if (!ROUTES[route]) return { route: 'HOME', sectionIdx: 0 };
  if (!section) return { route, sectionIdx: 0 };
  const idx = ROUTES[route].sections.findIndex(s => s.id === section);
  return { route, sectionIdx: idx < 0 ? 0 : idx };
}

function writeHash(route, sectionIdx) {
  const r = ROUTES[route];
  if (!r || route === 'HOME') {
    if (location.hash !== '' && location.hash !== '#/') {
      history.replaceState(null, '', location.pathname);
    }
    return;
  }
  const sec = r.sections[sectionIdx];
  const next = sec ? `#/${route.toLowerCase()}/${sec.id}` : `#/${route.toLowerCase()}`;
  if (location.hash !== next) history.replaceState(null, '', next);
}

function useRouter() {
  const [state, setState] = React.useState(() => parseHash());
  const [dir, setDir] = React.useState(null); // 'left' | 'right' | 'up' | 'down' | 'zoom'

  React.useEffect(() => {
    const onHash = () => setState(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  React.useEffect(() => {
    writeHash(state.route, state.sectionIdx);
  }, [state.route, state.sectionIdx]);

  const go = React.useCallback((route, sectionIdx = 0, direction = 'zoom') => {
    setDir(direction);
    setState({ route, sectionIdx });
    setTimeout(() => setDir(null), 500);
  }, []);

  const nextSection = React.useCallback(() => {
    const r = ROUTES[state.route];
    if (!r || r.sections.length === 0) return false;
    if (state.sectionIdx >= r.sections.length - 1) return false;
    setDir('right');
    setState(s => ({ ...s, sectionIdx: s.sectionIdx + 1 }));
    setTimeout(() => setDir(null), 500);
    return true;
  }, [state]);

  const prevSection = React.useCallback(() => {
    if (state.sectionIdx <= 0) return false;
    setDir('left');
    setState(s => ({ ...s, sectionIdx: s.sectionIdx - 1 }));
    setTimeout(() => setDir(null), 500);
    return true;
  }, [state]);

  const nextRoute = React.useCallback(() => {
    const i = ROUTE_ORDER.indexOf(state.route);
    const nxt = ROUTE_ORDER[(i + 1) % ROUTE_ORDER.length];
    go(nxt, 0, 'down');
  }, [state, go]);

  const prevRoute = React.useCallback(() => {
    const i = ROUTE_ORDER.indexOf(state.route);
    const nxt = ROUTE_ORDER[(i - 1 + ROUTE_ORDER.length) % ROUTE_ORDER.length];
    go(nxt, 0, 'up');
  }, [state, go]);

  const back = React.useCallback(() => {
    if (state.route === 'HOME') return false;
    if (state.sectionIdx > 0) {
      prevSection();
      return true;
    }
    go('HOME', 0, 'zoom');
    return true;
  }, [state, prevSection, go]);

  return {
    state,
    dir,
    go,
    nextSection,
    prevSection,
    nextRoute,
    prevRoute,
    back,
  };
}

window.ROUTES = ROUTES;
window.ROUTE_ORDER = ROUTE_ORDER;
window.useRouter = useRouter;