import React from 'react';
import toast from 'react-hot-toast';

export default function Header({ activeTab, setActiveTab, theme, setTheme }) {
  const toggleTheme = () => {
    const nextTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(nextTheme);
    toast.success(`已切换至${nextTheme === 'dark' ? '暗黑科技' : '明亮日间'}模式`, {
      icon: nextTheme === 'dark' ? '🌙' : '☀️',
    });
  };

  return (
    <header className="hero-header">
      <div className="header-container">
        {/* LOGO & 标题区域 */}
        <div className="header-title-area">
          <svg 
            className="header-logo-svg" 
            viewBox="0 0 24 24" 
            fill="none" 
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* 拟物化双螺旋DNA生物链结构 */}
            <path 
              d="M4.5 10.5C6 7.5 10.5 4.5 12 4.5C13.5 4.5 18 7.5 19.5 10.5M4.5 13.5C6 16.5 10.5 19.5 12 19.5C13.5 19.5 18 16.5 19.5 13.5" 
              stroke="#ffffff" 
              strokeWidth="2.5" 
              strokeLinecap="round"
            />
            <path 
              d="M12 4.5V19.5M8 6.5V17.5M16 6.5V17.5" 
              stroke="rgba(255, 255, 255, 0.4)" 
              strokeWidth="2" 
              strokeDasharray="2 3"
            />
            <circle cx="12" cy="4.5" r="2.5" fill="#10b981" />
            <circle cx="12" cy="19.5" r="2.5" fill="#3b82f6" />
            <circle cx="8" cy="7" r="2" fill="#60a5fa" />
            <circle cx="16" cy="17" r="2" fill="#34d399" />
          </svg>
          <div className="header-titles">
            <h1>动物繁殖学智慧教学与科研一体化平台</h1>
            <p>基于核心教材及 AI 认知引擎的科研与教学评估综合终端</p>
          </div>
        </div>

        {/* 顶部导航 Tabs 切换与右侧工具 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
          <nav className="nav-tabs">
            <button 
              className={`nav-tab-btn ${activeTab === 'literature' ? 'active' : ''}`}
              onClick={() => setActiveTab('literature')}
            >
              {/* 文献图标 */}
              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
              </svg>
              文献自动采集
            </button>
            
            <button 
              className={`nav-tab-btn ${activeTab === 'qa' ? 'active' : ''}`}
              onClick={() => setActiveTab('qa')}
            >
              {/* 问答图标 */}
              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              智能问答检索
            </button>
            
            <button 
              className={`nav-tab-btn ${activeTab === 'dashboard' ? 'active' : ''}`}
              onClick={() => setActiveTab('dashboard')}
            >
              {/* 看板图标 */}
              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              学习评价看板
            </button>
          </nav>
          
          <button 
            onClick={toggleTheme}
            style={{ 
              background: 'rgba(255, 255, 255, 0.08)',
              border: '1px solid rgba(255, 255, 255, 0.12)',
              color: 'rgba(255, 255, 255, 0.8)',
              width: '40px',
              height: '40px',
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              cursor: 'pointer',
              transition: 'var(--transition-fast)'
            }}
            title="切换模式"
          >
            {theme === 'light' ? (
              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20" height="20">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
              </svg>
            ) : (
              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20" height="20">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            )}
          </button>
        </div>
      </div>
    </header>
  );
}
