"use client";

import React from "react";
import { Menu, Search, Bell, HelpCircle, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ThemeToggle } from "./ThemeToggle";

import Link from "next/link";
import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import { useCompanyLogo } from "@/hooks/useCompanyLogo";

interface HeaderProps {
    toggleSidebar: () => void;
}

export function Header({ toggleSidebar }: HeaderProps) {
    const [isSearchOpen, setIsSearchOpen] = React.useState(false);
    const [user, setUser] = React.useState<any>(null);
    const logo = useCompanyLogo();

    React.useEffect(() => {
        async function fetchUser() {
            try {
                const res = await fetch(`${API_BASE_URL}/users/me/`, { headers: getAuthHeaders() });
                if (res.ok) {
                    const data = await res.json();
                    setUser(data);
                }
            } catch (err) {
                console.error("Failed to fetch user:", err);
            }
        }
        fetchUser();
    }, []);

    const userDisplayName = user ? `${user.first_name || user.username}` : "Staff User";
    const userRole = user ? (user.role || "Administrator").replace("_", " ") : "Enterprise Admin";

    return (
        <header className="sticky top-0 z-30 flex h-20 shrink-0 items-center justify-between border-b bg-background px-4 backdrop-blur-md md:px-8 transition-all duration-300">

            {/* Mobile Menu & Search */}
            <div className="flex flex-1 items-center gap-2 md:gap-4">
                {/* Company logo (desktop) — shows when logo is set */}
                {logo && (
                    <div className="hidden md:flex h-9 w-9 rounded-xl overflow-hidden border border-border/20 bg-muted/10 items-center justify-center flex-shrink-0">
                        <img src={logo} alt="Logo" className="w-full h-full object-contain" />
                    </div>
                )}

                <Button
                    variant="ghost"
                    size="icon"
                    className="md:hidden text-foreground hover:bg-accent rounded-xl"
                    onClick={toggleSidebar}
                >
                    <Menu className="h-5 w-5" />
                    <span className="sr-only">Toggle Sidebar</span>
                </Button>

                {/* Mobile Search Toggle */}
                <Button
                    variant="ghost"
                    size="icon"
                    className="md:hidden text-muted-foreground hover:text-foreground rounded-xl"
                    onClick={() => setIsSearchOpen(!isSearchOpen)}
                >
                    <Search className="h-5 w-5" />
                </Button>

                <div className="hidden max-w-lg flex-1 md:block relative group">
                    <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors" />
                    <Input
                        type="search"
                        placeholder="Quick search properties, clients..."
                        className="w-full h-11 rounded-2xl bg-muted/50 pl-11 pr-4 border-transparent hover:bg-muted focus:bg-background focus:ring-2 focus:ring-primary/20 transition-all text-sm"
                    />
                </div>
            </div>

            {/* Mobile Search Overlay */}
            {isSearchOpen && (
                <div className="absolute inset-0 z-50 flex items-center bg-background px-4 md:hidden">
                    <div className="relative flex flex-1 items-center">
                        <Search className="absolute left-3 h-4 w-4 text-muted-foreground" />
                        <Input
                            autoFocus
                            placeholder="Search..."
                            className="w-full h-11 rounded-xl bg-muted pl-10 pr-10 border-none focus:ring-0"
                        />
                        <Button
                            variant="ghost"
                            size="icon"
                            className="absolute right-1 text-muted-foreground"
                            onClick={() => setIsSearchOpen(false)}
                        >
                            <X className="h-4 w-4" />
                        </Button>
                    </div>
                </div>
            )}

            {/* Global Actions */}
            <div className="flex items-center gap-2 md:gap-4">
                <div className="flex items-center gap-1">
                    <Button variant="ghost" size="icon" className="hidden md:flex text-muted-foreground hover:text-foreground rounded-xl">
                        <HelpCircle className="h-5 w-5" />
                    </Button>
                    {/* Theme Toggle Visible on Mobile too */}
                    <ThemeToggle />
                </div>

                {/* Notifications */}
                <Button variant="ghost" size="icon" className="relative text-muted-foreground hover:text-foreground rounded-xl">
                    <Bell className="h-5 w-5" />
                    <span className="absolute right-2.5 top-2.5 h-2 w-2 rounded-full bg-primary border-2 border-background animate-pulse" />
                </Button>

                <div className="h-8 w-px bg-border mx-1 hidden sm:block"></div>

                {/* User Profile */}
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="relative h-10 px-0 md:px-2 rounded-xl border border-transparent hover:border-border hover:bg-accent transition-all">
                            <Avatar className="h-8 w-8 border-2 border-primary/20">
                                <AvatarImage src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${user?.username || 'admin'}`} alt="@user" />
                                <AvatarFallback className="bg-primary/10 text-primary font-bold">{user?.first_name?.charAt(0) || 'A'}</AvatarFallback>
                            </Avatar>
                            <span className="ml-2 hidden lg:inline-block text-sm font-black uppercase tracking-tight">{userDisplayName}</span>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="w-64 mt-2 rounded-2xl p-2" align="end" forceMount>
                        <DropdownMenuLabel className="font-normal p-4">
                            <div className="flex flex-col space-y-1">
                                <p className="text-sm font-black leading-none uppercase tracking-widest">{userRole}</p>
                                <p className="text-xs leading-none text-muted-foreground mt-1">
                                    {user?.email || "staff@dohainstall.com"}
                                </p>
                            </div>
                        </DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <Link href="/settings">
                            <DropdownMenuItem className="p-3 rounded-xl cursor-pointer font-bold hover:bg-accent transition-all">
                                System Settings
                            </DropdownMenuItem>
                        </Link>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                            onClick={() => {
                                localStorage.removeItem("access_token");
                                localStorage.removeItem("refresh_token");
                                window.location.href = "/login";
                            }}
                            className="p-3 rounded-xl text-red-500 font-black uppercase text-[10px] tracking-widest cursor-pointer hover:bg-red-50 dark:hover:bg-red-950/30"
                        >
                            Sign out
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>

        </header>
    );
}