import React, { useState, useEffect, useRef } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { 
  Search, 
  Menu, 
  X, 
  BookOpen, 
  Cpu, 
  Layers, 
  Building2, 
  CreditCard, 
  Sparkles,
  ArrowLeft,
  GraduationCap
} from 'lucide-react';
import postsData from '../../data/posts.json';
import toolsData from '../../data/tools.json';
import modelsData from '../../data/models.json';

interface NavbarProps {
  onOpenAuth: () => void;
}

export const Navbar: React.FC<NavbarProps> = ({ onOpenAuth }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [scrolled, setScrolled] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();
  const searchInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 15) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Close menus on route change
  useEffect(() => {
    setIsOpen(false);
    setIsSearchOpen(false);
  }, [location.pathname]);

  // Focus search input when modal opens
  useEffect(() => {
    if (isSearchOpen) {
      setTimeout(() => {
        searchInputRef.current?.focus();
      }, 100);
    }
  }, [isSearchOpen]);

  // Handle escape key to close search modal
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        setIsSearchOpen(false);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  const navLinks = [
    { name: 'خانه', path: '/' },
    { name: 'رسانه', path: '/blog' },
    { name: 'مدل‌های زبانی', path: '/models' },
    { name: 'ابزارها', path: '/tools' },
    { name: 'راهکارهای سازمانی', path: '/enterprise' },
    { name: 'تعرفه', path: '/pricing' },
    { name: '+ هوشان', path: '/academy' },
  ];

  // Quick search filter
  const filteredPosts = searchQuery.trim() 
    ? postsData.filter(p => p.title.toLowerCase().includes(searchQuery.toLowerCase())).slice(0, 4)
    : [];

  const filteredTools = searchQuery.trim() 
    ? toolsData.filter(t => t.title.toLowerCase().includes(searchQuery.toLowerCase()) || t.description.toLowerCase().includes(searchQuery.toLowerCase())).slice(0, 3)
    : [];

  const filteredModels = searchQuery.trim() 
    ? modelsData.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.provider.toLowerCase().includes(searchQuery.toLowerCase())).slice(0, 3)
    : [];

  const hasSearchResults = filteredPosts.length > 0 || filteredTools.length > 0 || filteredModels.length > 0;

  return (
    <>
      <header 
        className={`fixed top-0 left-0 right-0 z-50 bg-white transition-all duration-200 border-b border-gray-100 ${
          scrolled ? 'shadow-md py-2.5 sm:py-3' : 'shadow-xs py-3 sm:py-3.5'
        }`}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            
            {/* Right Side: Logo & Navigation Links */}
            <div className="flex items-center gap-4 lg:gap-6">
              {/* Authentic Houshan Owl Logo */}
              <Link to="/" className="flex items-center flex-shrink-0 group">
                <img 
                  src="/storage/banner/owl_logo.png" 
                  alt="هوشان" 
                  className="h-10 sm:h-11 w-auto object-contain transition-transform group-hover:scale-105"
                />
              </Link>

              {/* Desktop Navigation Links separated by | */}
              <nav className="hidden lg:flex items-center">
                {navLinks.map((link, index) => {
                  const isActive = location.pathname === link.path;
                  return (
                    <React.Fragment key={link.path}>
                      <Link
                        to={link.path}
                        className={`text-sm xl:text-[15px] font-bold transition-colors duration-150 px-2.5 py-1 ${
                          isActive 
                            ? 'text-sky-600 font-extrabold' 
                            : 'text-[#38b6ff] hover:text-sky-600'
                        }`}
                      >
                        {link.name}
                      </Link>
                      {index < navLinks.length - 1 && (
                        <span className="text-gray-800/90 font-light text-sm select-none px-1">
                          |
                        </span>
                      )}
                    </React.Fragment>
                  );
                })}
              </nav>
            </div>

            {/* Left Side: Search Button & Login/Register Button */}
            <div className="flex items-center gap-3 sm:gap-4">
              
              {/* Search Icon Button */}
              <button
                type="button"
                onClick={() => setIsSearchOpen(true)}
                className="w-9 h-9 sm:w-10 sm:h-10 rounded-lg bg-gray-100 hover:bg-gray-200/80 border border-gray-200/70 flex items-center justify-center text-[#38b6ff] hover:text-sky-600 transition-all focus:outline-none"
                aria-label="جستجو در سایت"
                title="جستجو"
              >
                <Search className="w-4 h-4 sm:w-5 sm:h-5 stroke-[2.4]" />
              </button>

              {/* Login / Register Button */}
              <button
                type="button"
                onClick={onOpenAuth}
                className="bg-[#54b4d3] hover:bg-[#44a5c4] active:scale-[0.98] text-white font-bold text-xs sm:text-sm px-4 sm:px-6 py-2 sm:py-2.5 rounded-xl shadow-xs transition-all duration-150 flex items-center justify-center whitespace-nowrap cursor-pointer"
              >
                ورود / ثبت نام
              </button>

              {/* Mobile Menu Toggle Button */}
              <button
                type="button"
                onClick={() => setIsOpen(!isOpen)}
                className="lg:hidden p-2 rounded-lg bg-gray-100 text-gray-700 hover:text-sky-600 border border-gray-200 focus:outline-none"
                aria-label="منو"
              >
                {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
              </button>

            </div>

          </div>
        </div>

        {/* Mobile Navigation Drawer */}
        {isOpen && (
          <div className="lg:hidden bg-white border-t border-gray-100 px-4 pt-3 pb-6 space-y-2 shadow-lg animate-in slide-in-from-top-2 duration-150">
            <div className="grid grid-cols-2 gap-2 py-2">
              {navLinks.map((link) => {
                const isActive = location.pathname === link.path;
                return (
                  <Link
                    key={link.path}
                    to={link.path}
                    onClick={() => setIsOpen(false)}
                    className={`flex items-center justify-between p-2.5 rounded-xl text-sm font-bold transition-colors ${
                      isActive
                        ? 'bg-sky-50 text-sky-600 border border-sky-200'
                        : 'text-[#38b6ff] hover:bg-gray-50 hover:text-sky-600'
                    }`}
                  >
                    <span>{link.name}</span>
                  </Link>
                );
              })}
            </div>

            <div className="pt-3 border-t border-gray-100 flex flex-col gap-2">
              <button
                onClick={() => {
                  setIsOpen(false);
                  setIsSearchOpen(true);
                }}
                className="w-full py-2.5 rounded-xl text-center text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200/80 border border-gray-200 flex items-center justify-center gap-2"
              >
                <Search className="w-4 h-4 text-[#38b6ff]" />
                <span>جستجو در مقالات و ابزارها</span>
              </button>

              <button
                onClick={() => {
                  setIsOpen(false);
                  onOpenAuth();
                }}
                className="w-full py-2.5 rounded-xl text-center text-sm font-bold text-white bg-[#54b4d3] hover:bg-[#44a5c4] shadow-xs flex items-center justify-center gap-2"
              >
                <span>ورود / ثبت نام در هوشان</span>
              </button>
            </div>
          </div>
        )}
      </header>

      {/* Global Interactive Search Modal */}
      {isSearchOpen && (
        <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 sm:pt-28 px-4 bg-black/50 backdrop-blur-xs animate-in fade-in duration-150">
          <div 
            className="w-full max-w-2xl bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden text-slate-800 animate-in zoom-in-95 duration-150"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Search Input Bar */}
            <div className="relative flex items-center px-4 py-3.5 border-b border-gray-100 bg-gray-50/50">
              <Search className="w-5 h-5 text-[#38b6ff] ml-3 flex-shrink-0" />
              <input
                ref={searchInputRef}
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="جستجو در مقالات، ابزارها، مدل‌ها و دوره‌ها..."
                className="w-full bg-transparent text-slate-800 placeholder-gray-400 text-sm sm:text-base focus:outline-none"
              />
              {searchQuery && (
                <button
                  type="button"
                  onClick={() => setSearchQuery('')}
                  className="p-1 rounded-md text-gray-400 hover:text-gray-600 mr-2"
                >
                  <X className="w-4 h-4" />
                </button>
              )}
              <button
                type="button"
                onClick={() => setIsSearchOpen(false)}
                className="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-200/50 transition-colors"
                title="بستن (Esc)"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Live Search Results */}
            <div className="max-h-[60vh] overflow-y-auto p-4 space-y-4">
              {!searchQuery.trim() ? (
                <div className="py-6 text-center text-gray-500 space-y-3">
                  <p className="text-sm">عبارت مورد نظر خود را برای جستجو وارد کنید</p>
                  <div className="flex flex-wrap items-center justify-center gap-2 pt-2">
                    <span className="text-xs text-gray-400">پیشنهادها:</span>
                    {['هوش مصنوعی', 'چت‌بات', 'Claude 3.5', 'ChatGPT', 'تولید تصویر', 'سئو'].map((tag) => (
                      <button
                        key={tag}
                        type="button"
                        onClick={() => setSearchQuery(tag)}
                        className="px-2.5 py-1 rounded-lg bg-gray-100 hover:bg-sky-50 hover:text-sky-600 text-xs text-gray-600 transition-colors"
                      >
                        {tag}
                      </button>
                    ))}
                  </div>
                </div>
              ) : !hasSearchResults ? (
                <div className="py-8 text-center text-gray-500">
                  <p className="text-sm">نتیجه‌ای برای «{searchQuery}» یافت نشد.</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {/* Blog Articles */}
                  {filteredPosts.length > 0 && (
                    <div>
                      <h4 className="text-xs font-bold text-gray-400 mb-2 flex items-center gap-1.5">
                        <BookOpen className="w-3.5 h-3.5 text-[#38b6ff]" />
                        <span>مقالات و آموزش‌ها</span>
                      </h4>
                      <div className="space-y-1.5">
                        {filteredPosts.map((post) => (
                          <Link
                            key={post.id}
                            to={`/blog/${post.slug}`}
                            onClick={() => setIsSearchOpen(false)}
                            className="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 border border-transparent hover:border-gray-200 transition-all text-right group"
                          >
                            <span className="text-xs sm:text-sm font-medium text-gray-800 group-hover:text-sky-600 line-clamp-1">
                              {post.title}
                            </span>
                            <ArrowLeft className="w-3.5 h-3.5 text-gray-400 group-hover:text-sky-600 -translate-x-1 group-hover:translate-x-0 transition-transform flex-shrink-0 mr-2" />
                          </Link>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* AI Tools */}
                  {filteredTools.length > 0 && (
                    <div>
                      <h4 className="text-xs font-bold text-gray-400 mb-2 flex items-center gap-1.5">
                        <Layers className="w-3.5 h-3.5 text-[#38b6ff]" />
                        <span>ابزارهای هوش مصنوعی</span>
                      </h4>
                      <div className="space-y-1.5">
                        {filteredTools.map((tool) => (
                          <Link
                            key={tool.id}
                            to="/tools"
                            onClick={() => setIsSearchOpen(false)}
                            className="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 border border-transparent hover:border-gray-200 transition-all text-right group"
                          >
                            <div>
                              <span className="text-xs sm:text-sm font-medium text-gray-800 group-hover:text-sky-600 block">
                                {tool.title}
                              </span>
                              <span className="text-[11px] text-gray-500 line-clamp-1">
                                {tool.description}
                              </span>
                            </div>
                            <ArrowLeft className="w-3.5 h-3.5 text-gray-400 group-hover:text-sky-600 flex-shrink-0 mr-2" />
                          </Link>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* AI Models */}
                  {filteredModels.length > 0 && (
                    <div>
                      <h4 className="text-xs font-bold text-gray-400 mb-2 flex items-center gap-1.5">
                        <Cpu className="w-3.5 h-3.5 text-[#38b6ff]" />
                        <span>مدل‌های زبانی</span>
                      </h4>
                      <div className="space-y-1.5">
                        {filteredModels.map((model) => (
                          <Link
                            key={model.id}
                            to="/models"
                            onClick={() => setIsSearchOpen(false)}
                            className="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 border border-transparent hover:border-gray-200 transition-all text-right group"
                          >
                            <div>
                              <span className="text-xs sm:text-sm font-medium text-gray-800 group-hover:text-sky-600 block">
                                {model.name}
                              </span>
                              <span className="text-[11px] text-gray-500">
                                ارائه دهنده: {model.provider}
                              </span>
                            </div>
                            <ArrowLeft className="w-3.5 h-3.5 text-gray-400 group-hover:text-sky-600 flex-shrink-0 mr-2" />
                          </Link>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Modal Footer */}
            <div className="px-4 py-2.5 bg-gray-50 border-t border-gray-100 flex items-center justify-between text-[11px] text-gray-500">
              <span>هوشان • پلتفرم جامع هوش مصنوعی</span>
              <div className="flex items-center gap-1.5">
                <kbd className="px-1.5 py-0.5 rounded bg-gray-200 text-gray-600 text-[10px] font-mono">ESC</kbd>
                <span>جهت بستن</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};
