import { useState, useEffect, useMemo, type ComponentType } from 'react';
import { useAuth } from '../auth/useAuth';
import { DemoModeProvider } from './Blur';
import FeedbackFab from './FeedbackFab';

export interface ModuleConfig {
  id: string;
  label: string;
  icon: ComponentType<{ size?: number; className?: string }>;
  component: ComponentType;
}

/** hash 一级段（`#<id>` 或 `#<id>/<sub>` 都只取 id） */
function getHashHead(): string {
  return window.location.hash.slice(1).split('/')[0];
}

function getInitialModule(modules: ModuleConfig[]): string {
  const head = getHashHead();
  if (modules.some((m) => m.id === head)) return head;
  return modules[0]?.id ?? '';
}

function getHashModule(modules: ModuleConfig[]): string {
  const head = getHashHead();
  return modules.some((m) => m.id === head) ? head : '';
}

export function Shell({ modules }: { modules: ModuleConfig[] }) {
  const [activeModule, setActiveModule] = useState(() => getInitialModule(modules));

  useEffect(() => {
    const onHashChange = () => {
      const h = getHashModule(modules);
      if (h) setActiveModule(h);
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, [modules]);

  useEffect(() => {
    // 同步 hash 一段到当前模块：使用 replaceState 避免产生多余的 history 记录，
    // 否则在小程序/webview 环境下首次进入需要点两次返回才能退出。
    // 注意只比对一级段，避免把子模块写入的 `#<id>/<sub>` 二级段抹掉。
    if (getHashHead() !== activeModule) {
      const { pathname, search } = window.location;
      window.history.replaceState(null, '', `${pathname}${search}#${activeModule}`);
    }
  }, [activeModule]);

  const switchModule = (id: string) => {
    if (getHashHead() === id) return;
    const { pathname, search } = window.location;
    window.history.replaceState(null, '', `${pathname}${search}#${id}`);
    setActiveModule(id);
  };

  const ActiveComponent = modules.find((m) => m.id === activeModule)?.component ?? modules[0]?.component;

  const { user } = useAuth();
  const watermarkText = useMemo(() => {
    const name = user?.userName || '未登录';
    const time = new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-');
    return `${name}-${time}`;
  }, [user]);

  return (
    <DemoModeProvider enabled={false}>
    <div className="flex min-h-screen">
      {/* 全局水印 */}
      <div className="fixed inset-0 pointer-events-none z-[9999] overflow-hidden" style={{ opacity: 0.06 }}>
        <div className="absolute inset-0" style={{
          backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='320' height='200'><text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle' font-size='14' font-family='sans-serif' fill='%23000' transform='rotate(-25 160 100)'>${watermarkText}</text></svg>`)}")`,
          backgroundRepeat: 'repeat',
        }} />
      </div>
      {/* Web 侧边栏 (md 及以上) */}
      <nav className="hidden md:flex flex-col items-center w-16 bg-white border-r border-gray-100 fixed top-0 left-0 h-full z-50 py-6 gap-2">
        {modules.map((m) => {
          const Icon = m.icon;
          const isActive = m.id === activeModule;
          return (
            <button
              key={m.id}
              onClick={() => switchModule(m.id)}
              className={`flex flex-col items-center justify-center w-14 h-14 rounded-xl transition-colors ${
                isActive
                  ? 'bg-blue-50 text-blue-600'
                  : 'text-gray-400 hover:text-gray-600 hover:bg-gray-50'
              }`}
            >
              <Icon size={22} />
              <span className="text-[10px] mt-1 leading-tight">{m.label}</span>
            </button>
          );
        })}
      </nav>

      {/* 内容区 */}
      <main className="flex-1 md:ml-16 pb-16 md:pb-0 min-w-0" style={{ overflowX: 'clip' }}>
        {ActiveComponent && <ActiveComponent />}
        <FeedbackFab module={activeModule} />
      </main>

      {/* 移动端底部导航 (md 以下) */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-2 flex justify-around items-center md:hidden z-50">
        {modules.map((m) => {
          const Icon = m.icon;
          const isActive = m.id === activeModule;
          return (
            <button
              key={m.id}
              onClick={() => switchModule(m.id)}
              className={`flex flex-col items-center ${isActive ? 'text-blue-600' : 'text-gray-400'}`}
            >
              <Icon size={20} />
              <span className="text-[10px] mt-1">{m.label}</span>
            </button>
          );
        })}
      </nav>
    </div>
    </DemoModeProvider>
  );
}