import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Sfx } from './sounds';

/* =========================================================
   页面循环导航 —— 左右方向键切换大屏页面
   顺序：数据大屏 → 数字孪生 → AI 助手 → 媒体轮播（循环）
   管理后台不参与循环切换，仅在登录后进入
   ← 向左切换 · → 向右切换
   ========================================================= */

export const PAGE_ORDER = [
  { path: '/', label: '数据大屏' },
  { path: '/twin', label: '数字孪生' },
  { path: '/ai', label: 'AI 助手' },
  { path: '/voice', label: '语音对话' },
  { path: '/wall', label: '企业展示墙' },
  { path: '/screen', label: '媒体轮播' },
];

/**
 * 左右方向键循环切换页面。
 * 在任意页面使用；当前路径不在 PAGE_ORDER 中时不响应。
 * 输入框/文本域内按键不触发页面切换（避免影响输入）。
 */
export function usePageNav() {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    const onKey = (e) => {
      const t = e.target;
      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
      const idx = PAGE_ORDER.findIndex((p) => p.path === location.pathname);
      if (idx === -1) return;
      const n = PAGE_ORDER.length;
      if (e.key === 'ArrowRight') {
        Sfx.page();
        navigate(PAGE_ORDER[(idx + 1) % n].path);
      } else if (e.key === 'ArrowLeft') {
        Sfx.page();
        navigate(PAGE_ORDER[(idx - 1 + n) % n].path);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [navigate, location.pathname]);

  return null;
}

/** 获取当前页在循环中的位置（-1 表示不在循环中） */
export function usePageIndex() {
  const location = useLocation();
  return PAGE_ORDER.findIndex((p) => p.path === location.pathname);
}