import { useState, useEffect } from 'react';
import { BarChart3, Bell, Clock, Menu, X } from 'lucide-react';

interface NavbarProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
}

const navItems = [
  { id: 'overview', label: '市场概览' },
  { id: 'events', label: '热点事件' },
  { id: 'products', label: '品种分析' },
  { id: 'risks', label: '风险提醒' },
];

export function Navbar({ activeTab, onTabChange }: NavbarProps) {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      clearInterval(timer);
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const formatTime = (date: Date) => {
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    });
  };

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled
          ? 'bg-[#09090b]/95 backdrop-blur-md shadow-lg shadow-black/20'
          : 'bg-[#09090b]'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-[#7dd75a]/10">
              <BarChart3 className="w-5 h-5 text-[#7dd75a]" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-white">期货智析</h1>
              <p className="text-xs text-[#71717a] hidden sm:block">智能期货期权分析系统</p>
            </div>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-1">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => onTabChange(item.id)}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative ${
                  activeTab === item.id
                    ? 'text-[#7dd75a]'
                    : 'text-[#a1a1aa] hover:text-white'
                }`}
              >
                {item.label}
                {activeTab === item.id && (
                  <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-0.5 bg-[#7dd75a] rounded-full" />
                )}
              </button>
            ))}
          </div>

          {/* Right Section */}
          <div className="flex items-center gap-4">
            {/* Time */}
            <div className="hidden sm:flex items-center gap-2 text-sm text-[#71717a]">
              <Clock className="w-4 h-4" />
              <span className="font-mono">{formatTime(currentTime)}</span>
            </div>

            {/* Notification */}
            <button className="p-2 rounded-lg hover:bg-[#27272a] transition-colors relative">
              <Bell className="w-4 h-4 text-[#a1a1aa]" />
              <span className="absolute top-1 right-1 w-2 h-2 bg-[#ef4444] rounded-full" />
            </button>

            {/* Mobile Menu Button */}
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="md:hidden p-2 rounded-lg hover:bg-[#27272a] transition-colors"
            >
              {isMobileMenuOpen ? (
                <X className="w-5 h-5 text-[#a1a1aa]" />
              ) : (
                <Menu className="w-5 h-5 text-[#a1a1aa]" />
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden border-t border-[#27272a] bg-[#09090b]/95 backdrop-blur-md">
          <div className="px-4 py-3 space-y-1">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => {
                  onTabChange(item.id);
                  setIsMobileMenuOpen(false);
                }}
                className={`w-full px-4 py-3 rounded-lg text-left text-sm font-medium transition-all duration-200 ${
                  activeTab === item.id
                    ? 'bg-[#7dd75a]/10 text-[#7dd75a]'
                    : 'text-[#a1a1aa] hover:bg-[#27272a] hover:text-white'
                }`}
              >
                {item.label}
              </button>
            ))}
            <div className="pt-3 border-t border-[#27272a] mt-3">
              <div className="flex items-center gap-2 text-sm text-[#71717a] px-4 py-2">
                <Clock className="w-4 h-4" />
                <span className="font-mono">{formatTime(currentTime)}</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}
