import React, { useState } from 'react';
import { Globe, User, LogOut, GraduationCap, Menu, X, Coins } from 'lucide-react';
import { Language, Student } from '../types';
import { translations } from '../data';
import Logo from './Logo';

interface HeaderProps {
  lang: Language;
  onToggleLang: () => void;
  currency: 'NGN' | 'USD';
  onToggleCurrency: () => void;
  student: Student | null;
  onShowPortal: () => void;
  onShowRegister: () => void;
  onShowLogin: () => void;
  onLogout: () => void;
}

export default function Header({
  lang,
  onToggleLang,
  currency,
  onToggleCurrency,
  student,
  onShowPortal,
  onShowRegister,
  onShowLogin,
  onLogout
}: HeaderProps) {
  const t = translations[lang];
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header 
      className="bg-white border-b border-teal-100 shadow-sm sticky top-0 z-40"
      dir={lang === 'ar' ? 'rtl' : 'ltr'}
    >
      {/* Top Banner Bar - Contact and quick details */}
      <div className="bg-gradient-to-r from-teal-900 to-teal-800 text-teal-100 text-[11px] py-2 px-4 md:px-8 flex justify-between items-center flex-wrap gap-2">
        <div className="flex items-center gap-4 flex-wrap">
          <span className="font-mono">📞 +234 813 420 0006 • +234 902 646 1916</span>
          <span className="hidden sm:inline">|</span>
          <span className="font-mono hidden sm:inline">✉️ habuamar36@gmail.com</span>
        </div>
        <div className="flex items-center gap-4">
          <span className="font-sans font-medium tracking-wide">
            📍 {t.officeAddress}
          </span>
        </div>
      </div>

      {/* Main Navigation Row */}
      <div className="max-w-7xl mx-auto px-4 md:px-8 h-20 flex justify-between items-center">
        {/* Logo and school branding */}
        <a href="#" className="h-14 flex items-center shrink-0">
          <Logo className="h-11 md:h-12" />
        </a>

        {/* Desktop Navigation Controls */}
        <div className="hidden lg:flex items-center gap-5">
          {/* Main sections */}
          <nav className="flex items-center gap-6 text-sm font-semibold text-gray-700">
            <a href="#courses" className="hover:text-teal-700 transition-colors">
              {t.exploreBtn}
            </a>
            <a href="#live-schedules" className="hover:text-teal-700 transition-colors">
              {t.upcomingClasses}
            </a>
            <a href="#contact-footer" className="hover:text-teal-700 transition-colors">
              {lang === 'en' ? 'Support & Office' : 'موقع الأكاديمية والاتصال'}
            </a>
          </nav>

          <span className="text-gray-300">|</span>

          {/* Pricing Currency Switcher */}
          <button
            type="button"
            onClick={onToggleCurrency}
            className="flex items-center gap-1.5 bg-amber-50 hover:bg-amber-100 text-amber-700 font-bold font-mono text-xs py-1.5 px-3 rounded-lg border border-amber-200 transition-all cursor-pointer"
            title={t.currencyToggle}
          >
            <Coins size={14} />
            <span>{currency}</span>
          </button>

          {/* Language Swapper */}
          <button
            type="button"
            onClick={onToggleLang}
            className="flex items-center gap-1.5 bg-teal-50 hover:bg-teal-100 text-teal-850 font-bold text-xs py-1.5 px-3 rounded-lg border border-teal-200 transition-all cursor-pointer"
          >
            <Globe size={14} className="text-teal-600" />
            <span>{lang === 'en' ? 'العربية' : 'English'}</span>
          </button>

          {/* Student Profile Auth Block */}
          {student ? (
            <div className="flex items-center gap-3">
              <button
                onClick={onShowPortal}
                className="bg-teal-700 hover:bg-teal-800 text-white font-bold text-xs py-2 px-4 rounded-xl flex items-center gap-1.5 shadow-md transition-all active:scale-95"
              >
                <GraduationCap size={15} />
                <span>{t.studentPortal}</span>
              </button>
              <button
                onClick={onLogout}
                className="text-gray-500 hover:text-red-600 p-1.5 rounded-lg transition-colors"
                title={t.logoutBtn}
              >
                <LogOut size={16} />
              </button>
            </div>
          ) : (
            <div className="flex items-center gap-2">
              <button
                onClick={onShowLogin}
                className="text-teal-800 hover:bg-teal-50 font-bold text-xs py-2 px-3 rounded-xl transition-all"
              >
                {t.loginBtn}
              </button>
              <button
                onClick={onShowRegister}
                className="bg-teal-700 hover:bg-teal-800 text-white font-bold text-xs py-2 px-4 rounded-xl shadow-md hover:shadow-lg transition-all active:scale-95"
              >
                {t.registerBtn}
              </button>
            </div>
          )}
        </div>

        {/* Mobile Hamburger toggle */}
        <button
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="lg:hidden p-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
          aria-label="Toggle Menu"
        >
          {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* Mobile Menu Dropdown Panel */}
      {mobileMenuOpen && (
        <div className="lg:hidden bg-white border-t border-teal-50 px-4 py-6 space-y-5 animate-in slide-in-from-top-4 duration-200 shadow-inner">
          <nav className="flex flex-col gap-3 font-semibold text-gray-700 text-sm">
            <a 
              href="#courses" 
              onClick={() => setMobileMenuOpen(false)}
              className="hover:text-teal-700 py-1"
            >
              {t.exploreBtn}
            </a>
            <a 
              href="#live-schedules" 
              onClick={() => setMobileMenuOpen(false)}
              className="hover:text-teal-700 py-1"
            >
              {t.upcomingClasses}
            </a>
            <a 
              href="#contact-footer" 
              onClick={() => setMobileMenuOpen(false)}
              className="hover:text-teal-700 py-1"
            >
              {lang === 'en' ? 'Support & Office' : 'موقع الأكاديمية والاتصال'}
            </a>
          </nav>

          <div className="border-t border-teal-50 pt-4 flex flex-wrap gap-3">
            {/* Currency toggle */}
            <button
              onClick={() => { onToggleCurrency(); setMobileMenuOpen(false); }}
              className="flex items-center gap-1.5 bg-amber-50 hover:bg-amber-100 text-amber-700 font-bold font-mono text-xs py-2 px-4 rounded-lg border border-amber-200 transition-all flex-1 justify-center"
            >
              <Coins size={14} />
              <span>{currency} Prices</span>
            </button>

            {/* Language toggle */}
            <button
              onClick={() => { onToggleLang(); setMobileMenuOpen(false); }}
              className="flex items-center gap-1.5 bg-teal-50 hover:bg-teal-100 text-teal-800 font-bold text-xs py-2 px-4 rounded-lg border border-teal-200 transition-all flex-1 justify-center"
            >
              <Globe size={14} />
              <span>{lang === 'en' ? 'العربية' : 'English'}</span>
            </button>
          </div>

          <div className="border-t border-teal-50 pt-4 space-y-2">
            {student ? (
              <div className="space-y-2">
                <button
                  onClick={() => { onShowPortal(); setMobileMenuOpen(false); }}
                  className="w-full bg-teal-750 hover:bg-teal-800 text-white font-bold text-xs py-2.5 px-4 rounded-xl flex items-center justify-center gap-1.5 shadow-md"
                >
                  <GraduationCap size={16} />
                  <span>{t.studentPortal}</span>
                </button>
                <button
                  onClick={() => { onLogout(); setMobileMenuOpen(false); }}
                  className="w-full bg-gray-100 hover:bg-gray-200 text-red-600 font-semibold text-xs py-2.5 px-4 rounded-xl flex items-center justify-center gap-1.5"
                >
                  <LogOut size={16} />
                  <span>{t.logoutBtn}</span>
                </button>
              </div>
            ) : (
              <div className="grid grid-cols-2 gap-3">
                <button
                  onClick={() => { onShowLogin(); setMobileMenuOpen(false); }}
                  className="text-teal-800 hover:bg-teal-50 border border-teal-100 font-bold text-xs py-2.5 px-3 rounded-xl"
                >
                  {t.loginBtn}
                </button>
                <button
                  onClick={() => { onShowRegister(); setMobileMenuOpen(false); }}
                  className="bg-teal-700 hover:bg-teal-800 text-white font-bold text-xs py-2.5 px-4 rounded-xl shadow-md text-center"
                >
                  {t.registerBtn}
                </button>
              </div>
            )}
          </div>
        </div>
      )}
    </header>
  );
}
