import React, { useEffect, useState } from 'react';
import { Bell, Search, User, ChevronDown, Moon, Sun, Palette } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';

export interface userData {
  userName: string;
  typeName: string;
}

const Header: React.FC = () => {
  const { theme, toggleTheme } = useTheme();
  const isDark = theme === 'dark';
  const [userData, setUserData] = useState<userData>({
    userName: '',
    typeName: ''
  });

  useEffect(() => {
    let userInfo: any = localStorage.getItem('userInfo');
    if (userInfo) {
      userInfo = JSON.parse(userInfo);
      setUserData(userInfo);
    }
  }, []);
  return (
    <header className={`h-16 flex items-center justify-between px-6 theme-transition ${
      isDark
        ? 'bg-slate-900/50 backdrop-blur-xl border-b border-blue-800/30'
        : 'bg-red-600 border-b border-red-700'
    }`}>
      {/* 左侧 - 搜索框 */}
      <div className="flex items-center gap-4">
        {/* <div className="relative">
          <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-red-200'}`} />
          <input
            type="text"
            placeholder="搜索场景、智能体、任务..."
            className={`w-80 pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-white/20 transition-all duration-200 theme-transition ${
              isDark
                ? 'bg-slate-800/50 border border-blue-800/30 text-white placeholder-slate-500'
                : 'bg-red-700 border border-red-800 text-white placeholder-red-200'
            }`}
          />
        </div> */}
      </div>

      {/* 右侧 - 用户信息和通知 */}
      <div className="flex items-center gap-4">
        {/* 主题切换按钮 */}
        <button
          onClick={toggleTheme}
          className={`p-2 rounded-lg transition-all duration-200 ${
            isDark
              ? 'hover:bg-slate-800/50 text-slate-400 hover:text-white'
              : 'hover:bg-red-500 text-white'
          }`}
          title={isDark ? '切换到红白主题' : '切换到深色主题'}
        >
          {isDark ? (
            <Palette className="w-5 h-5" />
          ) : (
            <Moon className="w-5 h-5" />
          )}
        </button>

        {/* 通知 */}
        {/* <button className={`relative p-2 rounded-lg transition-colors ${
          isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
        }`}>
          <Bell className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-white'}`} />
          <span className={`absolute top-1 right-1 w-2 h-2 rounded-full ${isDark ? 'bg-cyan-500' : 'bg-white'}`} />
        </button> */}

        {/* 分隔线 */}
        <div className={`w-px h-8 ${isDark ? 'bg-blue-800/30' : 'bg-red-500'}`} />

        {/* 用户信息 */}
        <button className={`flex items-center gap-3 px-3 py-1.5 rounded-lg transition-colors ${
          isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
        }`}>
          <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
            isDark
              ? 'bg-gradient-to-br from-blue-500 to-cyan-400'
              : 'bg-white'
          }`}>
            <User className={`w-4 h-4 ${isDark ? 'text-white' : 'text-red-600'}`} />
          </div>
          <div className="text-left">
            <p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-white'}`}>{userData.userName}</p>
            <p className={`text-xs ${isDark ? 'text-blue-400/60' : 'text-red-200'}`}>{userData.typeName}</p>
          </div>
          {/* <ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-white'}`} /> */}
        </button>
      </div>
    </header>
  );
};

export default Header;