import { useState, useRef, useEffect } from 'react';
import { Mail, Users, MessageCircle, ChevronDown, Check, Heart, X, Languages, HelpCircle } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

export default function Navbar() {
  const { language, setLanguage, t } = useLanguage();
  const [showContact, setShowContact] = useState(false);
  const [showReward, setShowReward] = useState(false);
  const [showLangMenu, setShowLangMenu] = useState(false);
  const [copied, setCopied] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const langMenuRef = useRef<HTMLDivElement>(null);

  const handleCopyQQ = async () => {
    await navigator.clipboard.writeText('1018282100');
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setShowContact(false);
      }
      if (langMenuRef.current && !langMenuRef.current.contains(event.target as Node)) {
        setShowLangMenu(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative">
      {/* Left: Logo */}
      <div className="flex items-center gap-2">
        <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-8 h-8" />
        <span className="text-xl font-bold text-gray-900 tracking-tight">
          TexPixel
        </span>
      </div>

      {/* Right: Actions */}
      <div className="flex items-center gap-3">
        {/* Language Switcher */}
        <div className="relative" ref={langMenuRef}>
          <button
            onClick={() => setShowLangMenu(!showLangMenu)}
            className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
            title="Switch Language"
          >
            <Languages size={18} />
            <span className="hidden sm:inline">{language === 'en' ? 'English' : '简体中文'}</span>
            <ChevronDown size={14} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
          </button>

          {showLangMenu && (
            <div className="absolute right-0 top-full mt-2 w-32 bg-white rounded-xl shadow-lg border border-gray-200 py-1 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
              <button
                onClick={() => {
                  setLanguage('en');
                  setShowLangMenu(false);
                }}
                className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === 'en' ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
              >
                English
                {language === 'en' && <Check size={14} />}
              </button>
              <button
                onClick={() => {
                  setLanguage('zh');
                  setShowLangMenu(false);
                }}
                className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === 'zh' ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
              >
                简体中文
                {language === 'zh' && <Check size={14} />}
              </button>
            </div>
          )}
        </div>

        {/* User Guide Button */}
        <button
          id="guide-button"
          className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
          onClick={() => {
            // This will be handled in App.tsx via a custom event or shared state
            window.dispatchEvent(new CustomEvent('start-user-guide'));
          }}
        >
          <HelpCircle size={18} />
          <span className="hidden sm:inline">{t.common.guide}</span>
        </button>

        {/* Reward Button */}
        <div className="relative">
          <button
            onClick={() => setShowReward(!showReward)}
            className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-rose-500 to-pink-500 hover:from-rose-600 hover:to-pink-600 rounded-lg text-white text-sm font-medium transition-all shadow-sm hover:shadow-md"
          >
            <Heart size={14} className="fill-white" />
            <span>{t.common.reward}</span>
          </button>

          {/* Reward Modal */}
          {showReward && (
            <div
              className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[70] p-4"
              onClick={() => setShowReward(false)}
            >
              <div
                className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 animate-in fade-in zoom-in-95 duration-200"
                onClick={e => e.stopPropagation()}
              >
                <div className="flex items-center justify-between mb-4">
                  <span className="text-lg font-bold text-gray-900">{t.navbar.rewardTitle}</span>
                  <button
                    onClick={() => setShowReward(false)}
                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                  >
                    <X size={20} className="text-gray-500" />
                  </button>
                </div>
                <div className="flex flex-col items-center">
                  <img
                    src="https://cdn.texpixel.com/public/rewardcode.png"
                    alt={t.navbar.rewardTitle}
                    className="w-64 h-64 object-contain rounded-lg shadow-sm"
                  />
                  <p className="text-sm text-gray-500 text-center mt-4">
                    {t.navbar.rewardThanks}<br />
                    <span className="text-xs text-gray-400 mt-1 block">{t.navbar.rewardSubtitle}</span>
                  </p>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Contact Button with Dropdown */}
        <div className="relative" ref={dropdownRef}>
          <button
            onClick={() => setShowContact(!showContact)}
            className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 text-sm font-medium transition-colors"
          >
            <MessageCircle size={14} />
            <span>{t.common.contactUs}</span>
            <ChevronDown
              size={14}
              className={`transition-transform duration-200 ${showContact ? 'rotate-180' : ''}`}
            />
          </button>

          {/* Contact Dropdown List */}
          {showContact && (
            <div className="absolute right-0 top-full mt-2 w-64 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
              <a
                href="mailto:yogecoder@gmail.com"
                className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors"
              >
                <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                  <Mail size={16} className="text-blue-600" />
                </div>
                <div>
                  <div className="text-xs text-gray-500">{t.common.email}</div>
                  <div className="text-sm font-medium text-gray-900">yogecoder@gmail.com</div>
                </div>
              </a>
              <div
                className={`flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-all cursor-pointer ${copied ? 'bg-green-50' : ''}`}
                onClick={handleCopyQQ}
              >
                <div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${copied ? 'bg-green-500' : 'bg-green-100'}`}>
                  {copied ? (
                    <Check size={16} className="text-white" />
                  ) : (
                    <Users size={16} className="text-green-600" />
                  )}
                </div>
                <div>
                  <div className={`text-xs transition-colors ${copied ? 'text-green-600 font-medium' : 'text-gray-500'}`}>
                    {copied ? t.common.copied : t.common.qqGroup}
                  </div>
                  <div className="text-sm font-medium text-gray-900">1018282100</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}