"use client"; 
import { useEffect, useState } from "react";
import { Bell, Search, User, LogOut, Settings, Menu, X, ExternalLink } from "lucide-react";
import { useRouter } from "next/navigation";
import { useUserStore } from "../../../store/useUserStore";
import Swal from "sweetalert2";

const Header = ({ onMenuClick }) => {
  const [openMenu, setOpenMenu] = useState(null); // 'notifications' | 'profile' | 'search'
  const [notifications, setNotifications] = useState([]);
  const [loading, setLoading] = useState(false);
  const [adminUser, setAdminUser] = useState({ name: "Admin User", email: "admin@university.com" });
  const [unreadCount, setUnreadCount] = useState(0);
  
  // Search state
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [searchLoading, setSearchLoading] = useState(false);
  const [showSearchResults, setShowSearchResults] = useState(false);
  const [searchHistory, setSearchHistory] = useState([]);
  const [showSearchHistory, setShowSearchHistory] = useState(false);

  const router = useRouter();

  const {logout} = useUserStore();

  const toggleMenu = (menu) => {
    setOpenMenu((prev) => (prev === menu ? null : menu));
  };

  // Global search function
  const performGlobalSearch = async (query) => {
    if (!query || query.trim().length < 2) {
      setSearchResults([]);
      setShowSearchResults(false);
      return;
    }

    setSearchLoading(true);
    try {
      const res = await fetch(`/api/internal/global-search?q=${encodeURIComponent(query)}&limit=15`);
      const data = await res.json();
      
      if (data.success) {
        setSearchResults(data.data || []);
        setShowSearchResults(true);
        
        // Add to search history
        addToSearchHistory(query);
      } else {
        setSearchResults([]);
        setShowSearchResults(false);
      }
    } catch (error) {
      console.error('Search error:', error);
      setSearchResults([]);
      setShowSearchResults(false);
    } finally {
      setSearchLoading(false);
    }
  };

  // Add search term to history
  const addToSearchHistory = (query) => {
    const trimmedQuery = query.trim();
    if (trimmedQuery.length < 2) return;
    
    setSearchHistory(prev => {
      const filtered = prev.filter(item => item !== trimmedQuery);
      return [trimmedQuery, ...filtered].slice(0, 5); // Keep only last 5 searches
    });
  };

  // Load search history from localStorage
  useEffect(() => {
    if (typeof window !== "undefined") {
      const stored = localStorage.getItem("searchHistory");
      if (stored) {
        try {
          setSearchHistory(JSON.parse(stored));
        } catch {}
      }
    }
  }, []);

  // Save search history to localStorage
  useEffect(() => {
    if (typeof window !== "undefined" && searchHistory.length > 0) {
      localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
    }
  }, [searchHistory]);

  // Debounced search
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (searchQuery.trim().length >= 2) {
        performGlobalSearch(searchQuery);
      } else {
        setSearchResults([]);
        setShowSearchResults(false);
      }
    }, 300);

    return () => clearTimeout(timeoutId);
  }, [searchQuery]);

  // Close search results when clicking outside
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!event.target.closest('.search-container')) {
        setShowSearchResults(false);
        setShowSearchHistory(false);
      }
    };

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

  // Load admin info from localStorage
  useEffect(() => {
    if (typeof window !== "undefined") {
      const stored = localStorage.getItem("adminUser");
      if (stored) {
        try {
          setAdminUser(JSON.parse(stored));
        } catch {}
      }
    }
  }, []);

  // Fetch notifications once on page load for count
  useEffect(() => {
    fetch("/api/internal/notifications?limit=5")
      .then((res) => res.json())
      .then((data) => {
        if (data.success) {
          setNotifications(data.data || []);
          // Count unread notifications
          const unread = data.data?.filter(n => !n.is_read).length || 0;
          setUnreadCount(unread);
        }
      });
  }, []);

  // Poll for new notifications every 30 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      fetch("/api/internal/notifications?limit=5")
        .then((res) => res.json())
        .then((data) => {
          if (data.success) {
            setNotifications(data.data || []);
            // Count unread notifications
            const unread = data.data?.filter(n => !n.is_read).length || 0;
            setUnreadCount(unread);
          }
        })
        .catch((error) => {
          console.error('Failed to fetch notifications:', error);
        });
    }, 30000); // 30 seconds

    return () => clearInterval(interval);
  }, []);

  // Re-fetch notifications when bell is clicked
  useEffect(() => {
    if (openMenu === "notifications") {
      setLoading(true);
      fetch("/api/internal/notifications?limit=5")
        .then((res) => res.json())
        .then((data) => {
          if (data.success) {
            setNotifications(data.data || []);
          }
        })
        .finally(() => setLoading(false));
    }
  }, [openMenu]);

    const handleLogout = async () => {
      const response = await fetch("/api/internal/logout", {
        method: "POST"
      })
  
      const data = await response.json();
  
      if(!response.ok){
        throw new Error(data.message)
      }
  
      logout()
  
      Swal.fire(
        'Logged Out!',
        'You have been logged out successfully.',
        'success'
      ).then(() => {
        router.push('/');
      })
    };

  // Get icon for search result type
  const getResultIcon = (type) => {
    switch (type) {
      case 'course':
        return '📚';
      case 'university':
        return '🏫';
      case 'student':
        return '👨‍🎓';
      case 'subject':
        return '📖';
      case 'job':
        return '💼';
      default:
        return '🔍';
    }
  };

  return (
    <header className="bg-white shadow-lg border-b border-gray-200 px-2 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        {/* Left Side: Menu Icon (Mobile) + Title */}
        <div className="flex items-center space-x-2 sm:space-x-4 min-w-0">
          {/* Mobile Menu Icon */}
          <button
            className="block md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
            onClick={onMenuClick}
            aria-label="Open menu"
          >
            <Menu className="w-7 h-7 text-gray-700" />
          </button>
          <h1 className="truncate text-lg sm:text-xl md:block hidden md:text-2xl font-bold bg-[#0B6D76] bg-clip-text text-transparent">
            University Admin Dashboard
          </h1>
        </div>
        {/* Right Side */}
        <div className="flex items-center space-x-2 sm:space-x-4 min-w-0">
          {/* Mobile Search Button
          <button
            className="block md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
            onClick={() => toggleMenu('search')}
            aria-label="Open search"
          >
            <Search className="w-6 h-6 text-gray-700" />
          </button> */}

          

          {/* Notifications */}
          <div className="relative">
            <button
              onClick={() => toggleMenu("notifications")}
              className="p-3 rounded-xl hover:bg-gray-100 relative transition-colors duration-200"
            >
              <Bell className="w-6 h-6 text-gray-600" />
              {unreadCount > 0 && (
                <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center font-medium">
                  {unreadCount}
                </span>
              )}
            </button>

            {/* Notifications Dropdown */}
            {openMenu === "notifications" && (
              <div className="absolute md:right-0  -right-18 mt-2  md:w-86 w-76 bg-white  rounded-2xl shadow-2xl border border-gray-200 z-50">
                <div className="p-6 rounded-2xl bg-[#0B6D76] text-white">
                  <h3 className="font-bold text-lg">Notifications</h3>
                  <p className="text-indigo-100 text-sm">
                    {loading
                      ? "Loading..."
                      : `You have ${notifications.length} new notification${notifications.length !== 1 ? "s" : ""}`}
                  </p>
                </div>
                <div className="p-4 ">
                  {notifications.length === 0 && !loading && (
                    <div className="text-gray-500 text-center">No notifications</div>
                  )}
                  {notifications.slice(0, 5).map((item, idx) => (
                    <div key={item.id || idx} className="flex items-start space-x-4 p-3 rounded-xl hover:bg-gray-50 transition-colors duration-150">
                      <div className={`w-3 h-3 rounded-full mt-2 flex-shrink-0 ${
                        item.type === 'login' ? 'bg-green-500' : 
                        item.type === 'account' ? 'bg-blue-500' : 
                        'bg-gray-500'
                      }`} />
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-800">
                          {item.meta || item.message || item.type || 'Notification'}
                        </p>
                        <p className="text-xs text-gray-500">
                          {item.name && item.email ? `${item.name} (${item.email})` : item.name || item.email || 'Unknown User'}
                        </p>
                        <p className="text-xs text-gray-400 mt-1">
                          {formatTimeAgo(item.created_at)}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="p-4 border-t border-gray-100">
                  <button
                    className="w-full text-center text-[#0B6D76] hover:text-indigo-700 font-medium text-sm"
                    onClick={() => router.push("/admin/notifications")}
                  >
                    View all notifications
                  </button>
                </div>
              </div>
            )}
          </div>

          {/* Profile */}
          <div className="relative">
            <button
              onClick={() => toggleMenu("profile")}
              className="flex items-center space-x-3 p-2 rounded-xl hover:bg-gray-100 transition-colors duration-200"
            >
              <div className="w-10 h-10 bg-[#0B6D76] rounded-full flex items-center justify-center">
                <User className="w-6 h-6 text-white" />
              </div>
              <div className="text-left hidden sm:block">
                <span className="text-sm font-semibold text-gray-700 block">{adminUser.name}</span>
                <span className="text-xs text-gray-500">Administrator</span>
              </div>
            </button>

            {/* Profile Dropdown */}
            {openMenu === "profile" && (
              <div className="absolute md:right-0  -right-0 mt-2  md:w-66 w-76  mt-2  bg-white rounded-2xl shadow-2xl border border-gray-200 z-50 overflow-hidden">
                <div className="p-6 bg-[#0B6D76] text-white">
                  <div className="flex items-center space-x-3">
                    <div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                      <User className="w-6 h-6" />
                    </div>
                    <div>
                      <p className="font-semibold">{adminUser.name}</p>
                      <p className="text-sm text-indigo-100">{adminUser.email}</p>
                    </div>
                  </div>
                </div>
                <div className="p-4">
                  <div className="space-y-2">
                    {/*<button className="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-gray-50 rounded-xl transition-colors duration-150">
                      <User className="w-5 h-5 text-gray-600" />
                      <span className="text-sm font-medium text-gray-700">My Profile</span>
                    </button> */}
                    {/* <button className="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-gray-50 rounded-xl transition-colors duration-150">
                      <Settings className="w-5 h-5 text-gray-600" />
                      <span className="text-sm font-medium text-gray-700">Settings</span>
                    </button> */}
                    <div className="border-t border-gray-100 pt-2">
                      <button
                        className="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-red-50 rounded-xl transition-colors duration-150"
                        onClick={handleLogout}
                      >
                        <LogOut className="w-5 h-5 text-red-600" />
                        <span className="text-sm font-medium text-red-600">Logout</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

// Helper: Format "time ago" from date string
function formatTimeAgo(dateString) {
  const date = new Date(dateString);
  const now = new Date();
  const diff = Math.floor((now - date) / 1000); // in seconds
  if (diff < 60) return `${diff} seconds ago`;
  if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
  if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
  return date.toLocaleDateString();
}
