'use client'

import Image from 'next/image'
import { useState, useEffect } from 'react'
import { Menu, X, User, LogOut } from 'lucide-react'
import { useSession, signIn, signOut } from 'next-auth/react'

interface HeaderProps {
  scrolled: boolean
}

export default function Header({ scrolled }: HeaderProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const { data: session, status } = useSession()

  const navItems = [
    { name: '系统功能', href: '#system-features' },
    { name: '版本定价', href: '#pricing' },
    { name: '联系购买', href: '#contact' },
  ]

  useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'unset'
    }
  }, [mobileMenuOpen])

  return (
    <>
      <header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
          scrolled ? 'glass-effect apple-shadow' : 'bg-transparent'
        }`}
      >
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16 sm:h-20">
            {/* Logo */}
            <div className="flex items-center space-x-3">
              <div className="relative w-10 h-10 sm:w-12 sm:h-12">
                <Image
                  src="/images/logo.png"
                  alt="FLNXI Logo"
                  fill
                  className="object-contain"
                  priority
                />
              </div>
              <span className="text-xl sm:text-2xl font-semibold text-apple-gray-900">
                FLNXI
              </span>
            </div>

            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center space-x-6">
              {navItems.map((item) => (
                <a
                  key={item.name}
                  href={item.href}
                  className="text-apple-gray-600 hover:text-apple-blue transition-colors duration-200 text-sm font-medium"
                >
                  {item.name}
                </a>
              ))}
              <a
                href="http://sc.flnxi.com"
                target="_blank"
                rel="noopener noreferrer"
                className="px-5 py-2 bg-apple-blue text-white rounded-full text-sm font-medium button-hover apple-shadow"
              >
                体验演示
              </a>
              
              {/* Login/User Info */}
              {status === 'loading' ? (
                <div className="w-9 h-9 rounded-full bg-apple-gray-200 animate-pulse" />
              ) : session ? (
                // 已登录 - 显示用户信息
                <div className="flex items-center space-x-3">
                  <div className="flex items-center space-x-2 px-4 py-2 bg-apple-gray-50 rounded-full">
                    <User className="w-4 h-4 text-apple-blue" />
                    <span className="text-sm font-medium text-apple-gray-700">
                      {session.user?.name || session.user?.email}
                    </span>
                  </div>
                  <button
                    onClick={() => signOut()}
                    className="p-2 text-apple-gray-600 hover:text-red-600 hover:bg-red-50 rounded-full transition-all"
                    title="退出登录"
                  >
                    <LogOut className="w-5 h-5" />
                  </button>
                </div>
              ) : (
                // 未登录 - 显示注册和登录按钮
                <div className="flex items-center space-x-3">
                  <a
                    href="/auth/signup"
                    className="px-5 py-2 text-apple-gray-700 hover:text-apple-blue rounded-full text-sm font-medium transition-colors"
                  >
                    注册
                  </a>
                  <button
                    onClick={() => signIn()}
                    className="flex items-center space-x-2 px-5 py-2 bg-apple-blue text-white hover:bg-blue-700 rounded-full text-sm font-medium transition-all apple-shadow"
                  >
                    <User className="w-4 h-4" />
                    <span>登录</span>
                  </button>
                </div>
              )}
            </div>

            {/* Mobile Menu Button */}
            <button
              className="md:hidden p-2 rounded-lg hover:bg-apple-gray-100 transition-colors"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              {mobileMenuOpen ? (
                <X className="w-6 h-6 text-apple-gray-800" />
              ) : (
                <Menu className="w-6 h-6 text-apple-gray-800" />
              )}
            </button>
          </div>
        </nav>
      </header>

      {/* Mobile Menu */}
      <div
        className={`fixed inset-0 z-40 md:hidden transition-opacity duration-300 ${
          mobileMenuOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
        }`}
      >
        <div className="absolute inset-0 bg-black/20 backdrop-blur-sm" onClick={() => setMobileMenuOpen(false)} />
        <div
          className={`absolute top-20 left-4 right-4 bg-white rounded-2xl apple-shadow-lg p-6 transition-transform duration-300 ${
            mobileMenuOpen ? 'translate-y-0' : '-translate-y-4'
          }`}
        >
          <div className="flex flex-col space-y-4">
            {navItems.map((item) => (
              <a
                key={item.name}
                href={item.href}
                className="text-apple-gray-700 hover:text-apple-blue transition-colors duration-200 text-lg font-medium py-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                {item.name}
              </a>
            ))}
            <a
              href="http://sc.flnxi.com"
              target="_blank"
              rel="noopener noreferrer"
              className="px-6 py-3 bg-apple-blue text-white rounded-full text-center font-medium button-hover apple-shadow mt-2"
            >
              体验演示
            </a>
            
            {/* Mobile Login/User Info */}
            <div className="pt-4 border-t border-apple-gray-200">
              {status === 'loading' ? (
                <div className="h-12 bg-apple-gray-200 rounded-full animate-pulse" />
              ) : session ? (
                // 已登录
                <div className="space-y-3">
                  <div className="flex items-center space-x-3 px-4 py-3 bg-apple-gray-50 rounded-xl">
                    <User className="w-5 h-5 text-apple-blue" />
                    <span className="text-sm font-medium text-apple-gray-700">
                      {session.user?.name || session.user?.email}
                    </span>
                  </div>
                  <button
                    onClick={() => signOut()}
                    className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-red-50 text-red-600 rounded-full font-medium hover:bg-red-100 transition-all"
                  >
                    <LogOut className="w-5 h-5" />
                    <span>退出登录</span>
                  </button>
                </div>
              ) : (
                // 未登录 - 显示注册和登录按钮
                <div className="space-y-3">
                  <a
                    href="/auth/signup"
                    onClick={() => setMobileMenuOpen(false)}
                    className="w-full flex items-center justify-center space-x-2 px-6 py-3 border-2 border-apple-gray-300 text-apple-gray-700 rounded-full font-medium hover:border-apple-blue hover:text-apple-blue transition-all"
                  >
                    <User className="w-5 h-5" />
                    <span>注册账户</span>
                  </a>
                  <button
                    onClick={() => {
                      signIn()
                      setMobileMenuOpen(false)
                    }}
                    className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-apple-blue text-white rounded-full font-medium hover:bg-blue-700 transition-all apple-shadow"
                  >
                    <User className="w-5 h-5" />
                    <span>登录</span>
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}