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-revolut-white/95 backdrop-blur-md'
          : 'bg-revolut-white'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-standard bg-revolut-blue/10">
              <BarChart3 className="w-5 h-5 text-revolut-blue" />
            </div>
            <div>
              <h1 className="text-lg font-medium text-revolut-dark heading-display">期货智析</h1>
              <p className="text-xs text-revolut-midSlate hidden sm:block">智能期货期权分析系统</p>
            </div>
          </div>

          <div className="hidden md:flex items-center gap-2">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => onTabChange(item.id)}
                className={`px-4 py-2 rounded-pill text-sm font-medium transition-all duration-200 ${
                  activeTab === item.id
                    ? 'bg-revolut-dark text-revolut-white'
                    : 'text-revolut-midSlate hover:bg-revolut-surface'
                }`}
              >
                {item.label}
              </button>
            ))}
          </div>

          <div className="flex items-center gap-4">
            <div className="hidden sm:flex items-center gap-2 text-sm text-revolut-midSlate">
              <Clock className="w-4 h-4" />
              <span className="font-mono">{formatTime(currentTime)}</span>
            </div>

            <button className="p-2 rounded-standard hover:bg-revolut-surface transition-colors relative">
              <Bell className="w-4 h-4 text-revolut-coolGray" />
              <span className="absolute top-1 right-1 w-2 h-2 bg-revolut-danger rounded-full" />
            </button>

            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="md:hidden p-2 rounded-standard hover:bg-revolut-surface transition-colors"
            >
              {isMobileMenuOpen ? (
                <X className="w-5 h-5 text-revolut-coolGray" />
              ) : (
                <Menu className="w-5 h-5 text-revolut-coolGray" />
              )}
            </button>
          </div>
        </div>
      </div>

      {isMobileMenuOpen && (
        <div className="md:hidden border-t border-revolut-grayTone bg-revolut-white/95 backdrop-blur-md">
          <div className="px-4 py-3 space-y-2">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => {
                  onTabChange(item.id);
                  setIsMobileMenuOpen(false);
                }}
                className={`w-full px-4 py-3 rounded-pill text-left text-sm font-medium transition-all duration-200 ${
                  activeTab === item.id
                    ? 'bg-revolut-dark text-revolut-white'
                    : 'text-revolut-midSlate hover:bg-revolut-surface'
                }`}
              >
                {item.label}
              </button>
            ))}
            <div className="pt-3 border-t border-revolut-grayTone mt-3">
              <div className="flex items-center gap-2 text-sm text-revolut-midSlate px-4 py-2">
                <Clock className="w-4 h-4" />
                <span className="font-mono">{formatTime(currentTime)}</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}