'use client';

import Link from 'next/link';
import { useState } from 'react';

export default function Header() {
  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);

  return (
    <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
      <div className="flex items-center justify-between px-6 py-4">
        <div className="flex items-center space-x-8">
          <Link href="/" className="text-2xl font-bold text-blue-600" style={{ fontFamily: 'Pacifico, serif' }}>
            AI Agent Studio
          </Link>
          <nav className="hidden md:flex items-center space-x-6">
            <Link href="/dashboard" className="text-gray-700 hover:text-blue-600 transition-colors">
              工作台
            </Link>
            <Link href="/agents" className="text-gray-700 hover:text-blue-600 transition-colors">
              Agent管理
            </Link>
            <Link href="/workflows" className="text-gray-700 hover:text-blue-600 transition-colors">
              工作流
            </Link>
            <Link href="/knowledge" className="text-gray-700 hover:text-blue-600 transition-colors">
              知识库
            </Link>
            <Link href="/templates" className="text-gray-700 hover:text-blue-600 transition-colors">
              模板市场
            </Link>
          </nav>
        </div>
        
        <div className="flex items-center space-x-4">
          <div className="relative">
            <div className="w-8 h-8 flex items-center justify-center">
              <i className="ri-notification-line text-gray-600 text-xl"></i>
            </div>
            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
          </div>
          
          <div className="relative">
            <button 
              onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
            >
              <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-medium">张</span>
              </div>
              <div className="w-4 h-4 flex items-center justify-center">
                <i className="ri-arrow-down-s-line text-gray-600"></i>
              </div>
            </button>
            
            {isUserMenuOpen && (
              <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2">
                <div className="px-4 py-2 border-b border-gray-100">
                  <p className="text-sm font-medium text-gray-900">张三</p>
                  <p className="text-xs text-gray-500">zhang@example.com</p>
                </div>
                <Link href="/profile" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  个人设置
                </Link>
                <Link href="/billing" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                  账单管理
                </Link>
                <div className="border-t border-gray-100 mt-2">
                  <button className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                    退出登录
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}