"use client";
import { useEffect, useState, useRef, useCallback } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutDashboard, Users, CreditCard, PieChart,
  Settings, LogOut, Bell, Search, MessageSquare,
  Menu, X, User as UserIcon, Loader2, ArrowRight
} from "lucide-react";
import { createClient } from "@/utils/supabase/client";

// Define search result types
interface SearchResult {
  id: string;
  type: 'user' | 'post';
  title: string;
  subtitle?: string;
  href: string;
}

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const supabase = createClient();
  const searchRef = useRef<HTMLDivElement>(null);

  // States
  const [profile, setProfile] = useState<{ full_name: string; avatar_url: string | null } | null>(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [loadingProfile, setLoadingProfile] = useState(true);

  // Global Search States
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [showResults, setShowResults] = useState(false);

  // 1. Fetch Admin Profile
  useEffect(() => {
    async function getProfile() {
      const { data: { user } } = await supabase.auth.getUser();
      if (user) {
        const { data } = await supabase
          .from('profiles')
          .select('full_name, avatar_url')
          .eq('id', user.id)
          .single();
        if (data) setProfile(data);
      }
      setLoadingProfile(false);
    }
    getProfile();
  }, [supabase]);

  // 2. Global Search Logic
  const performSearch = useCallback(async (query: string) => {
    if (query.length < 2) {
      setSearchResults([]);
      return;
    }

    setIsSearching(true);
    setShowResults(true);

    try {
      // Parallel search across tables
      const [usersSearch, postsSearch] = await Promise.all([
        supabase
          .from('profiles')
          .select('id, full_name, email')
          .ilike('full_name', `%${query}%`)
          .limit(5),
        supabase
          .from('community_posts')
          .select('id, content')
          .ilike('content', `%${query}%`)
          .limit(5)
      ]);

      const results: SearchResult[] = [
        ...(usersSearch.data?.map(u => ({
          id: u.id,
          type: 'user' as const,
          title: u.full_name || 'Unnamed User',
          subtitle: u.email,
          href: `/dashboard/users/${u.id}`
        })) || []),
        ...(postsSearch.data?.map(p => ({
          id: p.id,
          type: 'post' as const,
          title: p.content?.substring(0, 40) + '...',
          subtitle: 'Community Post',
          href: `/dashboard/posts/${p.id}`
        })) || [])
      ];

      setSearchResults(results);
    } catch (error) {
      console.error("Search error:", error);
    } finally {
      setIsSearching(false);
    }
  }, [supabase]);

  // Debounce search
  useEffect(() => {
    const timer = setTimeout(() => {
      if (searchQuery) performSearch(searchQuery);
    }, 400);
    return () => clearTimeout(timer);
  }, [searchQuery, performSearch]);

  // Close search on click outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
        setShowResults(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    router.refresh();
    router.push("/login");
  };

  const navItems = [
    { label: "Dashboard", href: "/dashboard", icon: <LayoutDashboard size={20} /> },
    { label: "App Users", href: "/dashboard/users", icon: <Users size={20} /> },
    { label: "Subscriptions", href: "/dashboard/subscriptions", icon: <CreditCard size={20} /> },
    { label: "Reports", href: "/dashboard/reports", icon: <PieChart size={20} /> },
    { label: "Settings", href: "/dashboard/settings", icon: <Settings size={20} /> },
    { label: "Community", href: "/dashboard/posts", icon: <MessageSquare size={20} /> },
  ];

  const currentPage = navItems.find(item => pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href)))?.label || "Overview";

  return (
    <div className="flex min-h-screen bg-[#F4F4F4]">
      {/* --- SIDEBAR --- */}
      <aside className={`
        fixed inset-y-0 left-0 w-64 bg-[#1C1C1C] text-gray-400 flex flex-col z-50 transition-transform duration-300
        ${isSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}
      `}>
        <div className="p-8 flex items-center justify-between">
          <h2 className="text-white text-[15px] font-black tracking-tighter flex items-center gap-2">
            <div className="w-1.5 h-6 bg-[#D4FB51] rounded-full"></div>
            AIRHCO <span className="text-[10px] text-gray-500 font-bold opacity-50">ADMIN</span>
          </h2>
          <button className="md:hidden text-white" onClick={() => setIsSidebarOpen(false)}>
            <X size={20} />
          </button>
        </div>

        <nav className="flex-1 px-0 space-y-1 overflow-y-auto">
          {navItems.map((item) => {
            const active = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href));
            return (
              <Link key={item.href} href={item.href} onClick={() => setIsSidebarOpen(false)}
                className={`flex items-center gap-3 px-8 py-3.5 text-sm font-bold transition-all ${active ? "bg-[#2D2D2D] text-[#D4FB51] border-l-[4px] border-[#D4FB51]" : "hover:text-white hover:bg-[#252525]"}`}>
                {item.icon}
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="p-6 border-t border-[#2D2D2D] space-y-6">
          <button onClick={handleSignOut} className="flex items-center gap-3 px-2 w-full text-sm font-bold text-gray-500 hover:text-rose-400 transition-colors">
            <LogOut size={18} /> Log Out
          </button>
          <div className="p-3 bg-[#2D2D2D] rounded-2xl flex items-center gap-3 border border-[#353535]">
            <div className="w-10 h-10 rounded-xl bg-[#D4FB51] overflow-hidden flex items-center justify-center text-black font-black text-xs shrink-0">
              {profile?.avatar_url ? <img src={profile.avatar_url} className="w-full h-full object-cover" alt="" /> : profile?.full_name?.substring(0, 2).toUpperCase() || "AD"}
            </div>
            <div className="overflow-hidden">
              <p className="text-white text-xs font-black truncate">{loadingProfile ? "..." : profile?.full_name || "Admin"}</p>
              <p className="text-[10px] text-gray-500 font-bold uppercase tracking-tight">Super Admin</p>
            </div>
          </div>
        </div>
      </aside>

      {/* --- MAIN WORKSPACE --- */}
      <div className="flex-1 flex flex-col md:ml-64 min-w-0">
        <header className="h-20 px-4 md:px-10 flex items-center justify-between sticky top-0 bg-[#F4F4F4]/80 backdrop-blur-md z-40 border-b border-gray-200/50">
          <div className="flex items-center gap-4">
            <button className="md:hidden p-2 bg-white rounded-lg shadow-sm border border-gray-200" onClick={() => setIsSidebarOpen(true)}>
              <Menu size={20} />
            </button>
          </div>

          <div className="flex items-center gap-3 md:gap-8">
            {/* --- GLOBAL SEARCH SECTION --- */}
            <div className="relative" ref={searchRef}>
              <div className="group flex items-center bg-white rounded-xl px-4 py-2 border border-gray-200 shadow-sm focus-within:ring-2 focus-within:ring-[#D4FB51]/20 transition-all">
                {isSearching ? <Loader2 size={16} className="text-[#D4FB51] animate-spin" /> : <Search size={16} className="text-gray-400" />}
                <input
                  type="text"
                  placeholder="Search users, posts..."
                  className="bg-transparent border-none outline-none pl-3 text-xs font-bold text-gray-600 placeholder:text-gray-400 w-32 md:w-48 lg:w-64"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  onFocus={() => setShowResults(true)}
                />
              </div>

              {/* SEARCH RESULTS OVERLAY */}
              {showResults && searchQuery.length > 0 && (
                <div className="absolute top-full mt-2 left-0 right-0 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 animate-in fade-in slide-in-from-top-2">
                  <div className="p-2 max-h-[400px] overflow-y-auto">
                    {searchResults.length > 0 ? (
                      searchResults.map((result) => (
                        <button
                          key={result.id}
                          onClick={() => {
                            router.push(result.href);
                            setShowResults(false);
                            setSearchQuery("");
                          }}
                          className="w-full flex items-center gap-3 p-3 hover:bg-[#F4F4F4] rounded-xl transition-colors text-left group"
                        >
                          <div className={`p-2 rounded-lg ${result.type === 'user' ? 'bg-blue-50 text-blue-500' : 'bg-green-50 text-green-500'}`}>
                            {result.type === 'user' ? <Users size={16} /> : <MessageSquare size={16} />}
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className="text-xs font-black text-[#1C1C1C] truncate">{result.title}</p>
                            <p className="text-[10px] font-bold text-gray-400 uppercase tracking-tight">{result.subtitle}</p>
                          </div>
                          <ArrowRight size={14} className="text-gray-300 opacity-0 group-hover:opacity-100 transition-all" />
                        </button>
                      ))
                    ) : (
                      <div className="p-8 text-center">
                        <p className="text-xs font-bold text-gray-400 italic">No results found for "{searchQuery}"</p>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
            
            <div className="flex items-center gap-3 md:gap-6">
              <Bell size={18} className="text-gray-400 cursor-pointer hover:text-black transition-colors" />
              <div className="hidden md:block h-8 w-[1px] bg-gray-200"></div>
              <p className="hidden lg:block text-[10px] text-gray-400 font-black uppercase tracking-[0.2em]">
                {new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
              </p>
            </div>
          </div>
        </header>

        <main className="p-4 md:p-10">{children}</main>
      </div>
    </div>
  );
}