import React, { useState, useEffect } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { Menu, X, ChevronDown, UserCircle, Search, MessageCircle } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import { useI18n } from '../../contexts/I18nContext';
import { api } from '../../services/api';
import Button from './Button';

const Navbar: React.FC = () => {
  const { user, logout, isRole } = useAuth();
  const { lang, setLang, t } = useI18n();
  const navigate = useNavigate();
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isProfileOpen, setIsProfileOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [unreadCount, setUnreadCount] = useState(0);

  // Poll unread message count for agency users
  useEffect(() => {
    if (!user || user.role !== 'agency') return;
    const fetchUnread = () => {
      api.messages.unreadCount()
        .then((data: any) => setUnreadCount(data.count ?? data.unread_count ?? 0))
        .catch(() => {});
    };
    fetchUnread();
    const interval = setInterval(fetchUnread, 60000); // refresh every minute
    return () => clearInterval(interval);
  }, [user]);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      navigate(`/listings?search=${encodeURIComponent(searchQuery.trim())}`);
      setSearchQuery('');
      setIsMenuOpen(false);
    }
  };

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  const isActive = (path: string) => location.pathname === path;

  const navLinkClasses = 'px-3 py-2 text-primary-700 hover:text-accent-600 font-medium transition-colors';
  const navLinkActiveClasses = 'text-accent-700 border-b-2 border-accent-600';

  const LangToggle = () => (
    <button
      onClick={() => setLang(lang === 'en' ? 'fr' : 'en')}
      className="px-2 py-1 text-xs font-semibold rounded border border-primary-300 text-primary-700 hover:bg-primary-50 transition-colors"
      title="Switch language"
    >
      {lang === 'en' ? 'FR' : 'EN'}
    </button>
  );

  return (
    <nav className="bg-white shadow-sm sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          {/* Logo and desktop navigation */}
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <Link to="/" className="text-2xl font-bold text-primary-800">
                Deals24Togo
              </Link>
            </div>
            <div className="hidden sm:ml-6 sm:flex sm:items-center">
              <div className="flex space-x-4">
                <Link
                  to="/"
                  className={`${navLinkClasses} ${isActive('/') ? navLinkActiveClasses : ''}`}
                >
                  {t.nav.home}
                </Link>
                <Link
                  to="/listings"
                  className={`${navLinkClasses} ${isActive('/listings') ? navLinkActiveClasses : ''}`}
                >
                  {t.nav.listings}
                </Link>
                <Link
                  to="/categories"
                  className={`${navLinkClasses} ${isActive('/categories') ? navLinkActiveClasses : ''}`}
                >
                  {t.nav.categories}
                </Link>
                {user && (
                  <Link
                    to="/favorites"
                    className={`${navLinkClasses} ${isActive('/favorites') ? navLinkActiveClasses : ''}`}
                  >
                    {t.nav.favorites}
                  </Link>
                )}
                {isRole('agency') && (
                  <Link
                    to="/agency/dashboard"
                    className={`${navLinkClasses} ${isActive('/agency/dashboard') ? navLinkActiveClasses : ''} relative inline-flex items-center`}
                  >
                    {t.nav.myDashboard}
                    {unreadCount > 0 && (
                      <span className="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold rounded-full bg-error-500 text-white leading-none">
                        {unreadCount > 99 ? '99+' : unreadCount}
                      </span>
                    )}
                  </Link>
                )}
                {isRole('admin') && (
                  <Link
                    to="/admin/dashboard"
                    className={`${navLinkClasses} ${isActive('/admin/dashboard') ? navLinkActiveClasses : ''}`}
                  >
                    {t.nav.adminDashboard}
                  </Link>
                )}
              </div>
            </div>
          </div>

          {/* Desktop right section */}
          <div className="hidden sm:flex sm:items-center space-x-3">
            <form onSubmit={handleSearch} className="relative">
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder={t.nav.searchPlaceholder}
                className="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 w-56"
              />
              <button type="submit" className="absolute left-3 top-2.5 p-0 bg-transparent border-0">
                <Search className="h-5 w-5 text-gray-400" />
              </button>
            </form>

            <LangToggle />

            {user ? (
              <div className="relative">
                <button
                  onClick={() => setIsProfileOpen(p => !p)}
                  className="flex items-center bg-gray-100 rounded-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-500"
                >
                  <UserCircle className="h-6 w-6 text-primary-700" />
                  <span className="ml-2 font-medium hidden md:block">{user.name}</span>
                  <ChevronDown className="ml-1 h-4 w-4 text-primary-600" />
                </button>
                {isProfileOpen && (
                  <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 z-10 animate-fade-in">
                    <div className="px-4 py-2 text-xs text-gray-500">
                      {user.email}
                    </div>
                    <div className="border-t border-gray-200" />
                    <Link
                      to="/profile"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                      onClick={() => setIsProfileOpen(false)}
                    >
                      {t.nav.myProfile}
                    </Link>
                    {isRole('agency') && (
                      <Link
                        to="/agency/dashboard"
                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        onClick={() => setIsProfileOpen(false)}
                      >
                        {t.nav.agencyProfile}
                      </Link>
                    )}
                    <button
                      onClick={handleLogout}
                      className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >
                      {t.nav.signOut}
                    </button>
                  </div>
                )}
              </div>
            ) : (
              <div className="flex items-center space-x-2">
                <Link to="/login">
                  <Button variant="outline" size="sm">{t.nav.signIn}</Button>
                </Link>
                <Link to="/register">
                  <Button size="sm">{t.nav.register}</Button>
                </Link>
              </div>
            )}
          </div>

          {/* Mobile menu button */}
          <div className="flex items-center sm:hidden space-x-2">
            <LangToggle />
            <button
              onClick={() => setIsMenuOpen(o => !o)}
              className="p-2 rounded-md text-primary-600 hover:text-primary-800 focus:outline-none"
            >
              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {isMenuOpen && (
        <div className="sm:hidden bg-white border-t border-gray-200 animate-fade-in">
          <div className="px-4 pt-3 pb-2">
            <form onSubmit={handleSearch} className="relative">
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder={t.nav.searchPlaceholder}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500"
              />
              <button type="submit" className="absolute left-3 top-2.5 p-0 bg-transparent border-0">
                <Search className="h-5 w-5 text-gray-400" />
              </button>
            </form>
          </div>
          <div className="px-2 pt-1 pb-3 space-y-1">
            {[
              { to: '/', label: t.nav.home },
              { to: '/listings', label: t.nav.listings },
              { to: '/categories', label: t.nav.categories },
            ].map(({ to, label }) => (
              <Link
                key={to}
                to={to}
                className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
                onClick={() => setIsMenuOpen(false)}
              >
                {label}
              </Link>
            ))}
            {isRole('agency') && (
              <Link
                to="/agency/dashboard"
                className="flex items-center px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
                onClick={() => setIsMenuOpen(false)}
              >
                {t.nav.myDashboard}
                {unreadCount > 0 && (
                  <span className="ml-2 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold rounded-full bg-error-500 text-white leading-none">
                    {unreadCount > 99 ? '99+' : unreadCount}
                  </span>
                )}
              </Link>
            )}
            {isRole('admin') && (
              <Link
                to="/admin/dashboard"
                className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
                onClick={() => setIsMenuOpen(false)}
              >
                {t.nav.adminDashboard}
              </Link>
            )}
          </div>
          <div className="pt-4 pb-3 border-t border-gray-200">
            {user ? (
              <>
                <div className="flex items-center px-4">
                  <UserCircle className="h-10 w-10 text-primary-600" />
                  <div className="ml-3">
                    <div className="text-base font-medium text-primary-800">{user.name}</div>
                    <div className="text-sm font-medium text-primary-500">{user.email}</div>
                  </div>
                </div>
                <div className="mt-3 px-2 space-y-1">
                  <Link
                    to="/profile"
                    className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    {t.nav.myProfile}
                  </Link>
                  <Link
                    to="/favorites"
                    className="block px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    {t.nav.favorites}
                  </Link>
                  <button
                    onClick={() => { handleLogout(); setIsMenuOpen(false); }}
                    className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-primary-700 hover:bg-gray-100"
                  >
                    {t.nav.signOut}
                  </button>
                </div>
              </>
            ) : (
              <div className="px-4 flex flex-col space-y-2">
                <Link to="/login" onClick={() => setIsMenuOpen(false)}>
                  <Button variant="outline" fullWidth>{t.nav.signIn}</Button>
                </Link>
                <Link to="/register" onClick={() => setIsMenuOpen(false)}>
                  <Button fullWidth>{t.nav.register}</Button>
                </Link>
              </div>
            )}
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;