import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { BrainCircuit, Calculator, Network, Boxes, ReceiptText, CalendarClock, Sparkles, LogOut } from 'lucide-react';
import { useTheme } from '@/shared/context/ThemeContext';
import StarBackground from '@/shared/components/StarBackground';
import ThemeToggle from '@/shared/components/ThemeToggle';
import { modules } from '@/modules/registry';
import { getUserInfo, clearSession, type SessionUserInfo } from '@/shared/services/iamAuth';

const ICON_MAP: Record<string, React.ComponentType<{ size?: number; color?: string }>> = {
  BrainCircuit,
  Calculator,
  Network,
  Boxes,
  ReceiptText,
  CalendarClock,
  Sparkles,
};

export default function HomePage() {
  const navigate = useNavigate();
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const [searchParams] = useSearchParams();
  const [userInfo, setUserInfo] = useState<SessionUserInfo | null>(() => getUserInfo());

  // 登录守卫：未登录跳转 /login
  useEffect(() => {
    const token = sessionStorage.getItem('userToken');
    if (!token) {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  // 首页模块多时需纵向滚动；离开后恢复全局 overflow:hidden（其他模块自管布局）
  useEffect(() => {
    document.body.style.overflow = 'auto';
    return () => { document.body.style.overflow = ''; };
  }, []);

  // 接收 URL 参数 userToken，写入 sessionStorage
  useEffect(() => {
    const userToken = searchParams.get('userToken');
    if (userToken) {
      sessionStorage.setItem('userToken', userToken);
    }
  }, [searchParams]);

  const handleLogout = () => {
    clearSession();
    setUserInfo(null);
    navigate('/login', { replace: true });
  };

  return (
    <div style={{
      width: '100vw', minHeight: '100vh',
      overflowX: 'hidden',
      display: 'flex', flexDirection: 'column',
      alignItems: 'stretch',
      position: 'relative',
      paddingTop: '64px',
      boxSizing: 'border-box',
      fontFamily: "-apple-system, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif",
      color: isDark ? '#a8d8ff' : '#1e3a6e',
    }}>
      {/* 星空背景（dark）/ 浅色渐变（light） */}
      {isDark ? (
        <StarBackground theme="dark" />
      ) : (
        <div style={{
          position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
          background: 'linear-gradient(160deg, #f8f8fb 0%, #f2f3f7 50%, #eef1f7 100%)',
          zIndex: 0,
        }} />
      )}

      {/* 顶部导航栏 */}
      <div style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        height: '64px',
        display: 'flex',
        alignItems: 'center',
        padding: '0 32px',
        zIndex: 100,
        background: isDark ? 'rgba(7,17,31,0.7)' : 'rgba(255,255,255,0.8)',
        backdropFilter: 'blur(12px)',
        borderBottom: `1px solid ${isDark ? 'rgba(0,212,255,0.15)' : 'rgba(0,0,0,0.06)'}`,
      }}>
        {/* 左上角 Logo + 标题 + 标语 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <img 
            src="/digiwin.svg" 
            alt="Digiwin" 
            style={{ 
              height: '32px', 
              width: 'auto', 
              objectFit: 'contain',
              filter: isDark ? 'drop-shadow(0 0 8px rgba(0,212,255,0.4))' : 'none'
            }} 
          />
          <div style={{ 
            width: '1px', 
            height: '24px', 
            background: isDark ? 'rgba(0,212,255,0.2)' : 'rgba(0,0,0,0.12)' 
          }} />
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <h1 style={{
              fontSize: 24, fontWeight: 700, letterSpacing: '0.04em', margin: 0,
              ...(isDark ? {
                color: '#e8f4ff',
                textShadow: '0 0 12px rgba(0,212,255,0.4)',
              } : {
                color: '#111827',
              }),
            }}>
              EIOSpace
            </h1>
            <span style={{
              fontSize: 13, fontWeight: 400, letterSpacing: '0.02em',
              ...(isDark ? { color: 'rgba(168,216,255,0.6)' } : { color: '#6b7280' }),
            }}>
              企业智能 · 数据驱动 · 产业赋能
            </span>
          </div>
        </div>

        {/* 右上角：用户信息 + 主题切换 */}
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 16 }}>
          {userInfo && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700,
                color: '#04121f',
                background: 'linear-gradient(135deg, #00d4ff, #4f9eff)',
              }}>
                {(userInfo.userName ?? userInfo.userId).charAt(0).toUpperCase()}
              </div>
              <span style={{
                fontSize: 13,
                ...(isDark ? { color: 'rgba(168,216,255,0.85)' } : { color: '#334155' }),
              }}>
                {userInfo.userName ?? userInfo.userId}
              </span>
              <button
                onClick={handleLogout}
                title="退出登录"
                style={{
                  marginLeft: 4,
                  display: 'flex', alignItems: 'center', gap: 4,
                  padding: '5px 12px',
                  borderRadius: 8,
                  border: `1px solid ${isDark ? 'rgba(0,212,255,0.3)' : 'rgba(0,0,0,0.12)'}`,
                  background: isDark ? 'rgba(0,212,255,0.06)' : '#fff',
                  color: isDark ? 'rgba(168,216,255,0.8)' : '#475569',
                  fontSize: 12,
                  cursor: 'pointer',
                  transition: 'border-color 0.2s, color 0.2s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.color = '#ef4444'; }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = isDark ? 'rgba(0,212,255,0.3)' : 'rgba(0,0,0,0.12)';
                  e.currentTarget.style.color = isDark ? 'rgba(168,216,255,0.8)' : '#475569';
                }}
              >
                <LogOut size={13} />
                退出
              </button>
            </div>
          )}
          <ThemeToggle />
        </div>
      </div>

      {/* 内容层 */}
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32, padding: '32px 24px 60px', maxWidth: 1400, width: '100%', margin: '0 auto' }}>

        {/* 模块卡片网格 */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 20,
          width: '100%',
          maxWidth: 1400,
          animation: 'card-in 0.5s 0.2s both',
        }}>
          {modules.map((mod, idx) => {
            const IconComp = ICON_MAP[mod.icon];
            const accentColor = isDark ? mod.accentColor : mod.accentColorLight;
            const gradient = isDark ? mod.gradient : mod.gradientLight;

            return (
              <div
                key={mod.id}
                onClick={() => navigate(mod.path)}
                style={{
                  borderRadius: 20,
                  overflow: 'hidden',
                  cursor: 'pointer',
                  transition: 'all 0.25s ease',
                  animation: `card-in 0.4s ${0.1 + idx * 0.08}s both`,
                  ...(isDark ? {
                    background: 'rgba(0,20,60,0.55)',
                    border: '1px solid rgba(0,212,255,0.25)',
                    boxShadow: '0 0 20px rgba(0,212,255,0.06), inset 0 1px 0 rgba(255,255,255,0.05)',
                    backdropFilter: 'blur(12px)',
                  } : {
                    background: '#ffffff',
                    border: '1px solid rgba(10,122,255,0.12)',
                    boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
                  }),
                }}
                onMouseEnter={(e) => {
                  if (isDark) {
                    e.currentTarget.style.borderColor = `${accentColor}60`;
                    e.currentTarget.style.boxShadow = `0 0 30px ${accentColor}20, inset 0 1px 0 rgba(255,255,255,0.08)`;
                    e.currentTarget.style.transform = 'translateY(-4px)';
                  } else {
                    e.currentTarget.style.borderColor = `${accentColor}40`;
                    e.currentTarget.style.boxShadow = `0 8px 24px rgba(0,0,0,0.10)`;
                    e.currentTarget.style.transform = 'translateY(-4px)';
                  }
                }}
                onMouseLeave={(e) => {
                  if (isDark) {
                    e.currentTarget.style.borderColor = 'rgba(0,212,255,0.25)';
                    e.currentTarget.style.boxShadow = '0 0 20px rgba(0,212,255,0.06), inset 0 1px 0 rgba(255,255,255,0.05)';
                    e.currentTarget.style.transform = 'translateY(0)';
                  } else {
                    e.currentTarget.style.borderColor = 'rgba(10,122,255,0.12)';
                    e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)';
                    e.currentTarget.style.transform = 'translateY(0)';
                  }
                }}
              >
                {/* 卡片顶部渐变条 */}
                <div style={{
                  height: 108,
                  background: gradient,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  position: 'relative',
                  overflow: 'hidden',
                }}>
                  {/* 扫光动画（dark模式） */}
                  {isDark && (
                    <div style={{
                      position: 'absolute', top: 0, left: '-100%', width: '60%', height: '100%',
                      background: `linear-gradient(to right, transparent, ${accentColor}15, transparent)`,
                      animation: 'space-border-scan 3s linear infinite',
                    }} />
                  )}
                  {IconComp && <IconComp size={48} color={isDark ? accentColor : '#ffffff'} />}
                </div>

                {/* 卡片内容 */}
                <div style={{ padding: '20px 24px 24px' }}>
                  <h2 style={{
                    fontSize: 20, fontWeight: 800, letterSpacing: '0.04em', margin: '0 0 8px',
                    ...(isDark ? {
                      color: '#e8f4ff',
                      textShadow: `0 0 12px ${accentColor}50`,
                    } : {
                      color: '#111827',
                    }),
                  }}>
                    {mod.name}
                  </h2>
                  <p style={{
                    fontSize: 14, lineHeight: 1.6, margin: '0 0 16px',
                    ...(isDark ? { color: 'rgba(168,216,255,0.7)' } : { color: '#6b7280' }),
                  }}>
                    {mod.description}
                  </p>

                  {/* 标签 */}
                  <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
                    {mod.tags.map(tag => (
                      <span key={tag} style={{
                        padding: '3px 10px', borderRadius: 20, fontSize: 12, fontWeight: 600,
                        ...(isDark ? {
                          background: `${accentColor}10`,
                          border: `1px solid ${accentColor}30`,
                          color: accentColor,
                        } : {
                          background: `${accentColor}08`,
                          border: `1px solid ${accentColor}20`,
                          color: accentColor,
                        }),
                      }}>
                        {tag}
                      </span>
                    ))}
                  </div>

                  {/* 进入按钮 */}
                  <button style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                    width: '100%', padding: '10px 0', borderRadius: 12,
                    fontSize: 14, fontWeight: 700, cursor: 'pointer',
                    transition: 'all 0.18s ease',
                    ...(isDark ? {
                      background: `${accentColor}12`,
                      border: `1px solid ${accentColor}35`,
                      color: accentColor,
                    } : {
                      background: accentColor,
                      border: 'none',
                      color: '#ffffff',
                    }),
                  }}
                    onMouseEnter={(e) => {
                      if (isDark) {
                        e.currentTarget.style.background = `${accentColor}20`;
                        e.currentTarget.style.borderColor = accentColor;
                        e.currentTarget.style.boxShadow = `0 0 16px ${accentColor}30`;
                      } else {
                        e.currentTarget.style.background = `${accentColor}dd`;
                        e.currentTarget.style.boxShadow = `0 4px 12px ${accentColor}30`;
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (isDark) {
                        e.currentTarget.style.background = `${accentColor}12`;
                        e.currentTarget.style.borderColor = `${accentColor}35`;
                        e.currentTarget.style.boxShadow = 'none';
                      } else {
                        e.currentTarget.style.background = accentColor;
                        e.currentTarget.style.boxShadow = 'none';
                      }
                    }}
                  >
                    进入模块 →
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        {/* 底部品牌 */}
        <div style={{
          textAlign: 'center',
          ...(isDark ? { color: 'rgba(0,212,255,0.55)' } : { color: '#aeaeb2' }),
          fontSize: 13, letterSpacing: '0.06em',
        }}>
          Powered by Digiwin EIOSpace
        </div>
      </div>
    </div>
  );
}