import AppLogo from '@/components/app-logo';
import AppearanceToggleTab from '@/components/appearance-tabs';
import { GlobalSearch } from '@/components/GlobalSearch';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { UserMenuContent } from '@/components/user-menu-content';
import { useInitials } from '@/hooks/use-initials';
import { dashboard } from '@/routes';
import { type SharedData } from '@/types';
import { Link, router, usePage } from '@inertiajs/react';
import { Bell, Languages, Search, User, X } from 'lucide-react';
import { type Dispatch, type SetStateAction, useEffect, useRef, useState } from 'react';
import { useSocketNotifications } from '@/hooks/useSocket';
import { SocketEvents } from '@/types/socket';
import NotificationBox, { type Notification } from '@/components/notification-box';
import axios from 'axios';

export default function AppHeader({
    isMobileSearchOpen,
    setIsMobileSearchOpen,
}: {
    isMobileSearchOpen: boolean;
    setIsMobileSearchOpen: Dispatch<SetStateAction<boolean>>;
}) {
    const page = usePage<SharedData>();
    // page.props typing may be partial; cast to safer runtime types to satisfy TypeScript
    const auth = page.props.auth as any;
    const { current_user_roles, languages, current_locale, notifications: initialNotifications } = usePage().props as any;
    const [selectedRole, setSelectedRole] = useState(auth?.user?.current_role_id?.toString());
    const [selectedLanguage, setSelectedLanguage] = useState(current_locale || 'us');

    // Notification state
    const [notifications, setNotifications] = useState<Notification[]>(initialNotifications?.data || []);
    const [unreadCount, setUnreadCount] = useState(initialNotifications?.unread_count || 0);
    const [isNotificationOpen, setIsNotificationOpen] = useState(false);
    const notificationRef = useRef<HTMLDivElement>(null);

    const getInitials = useInitials();
    const avatarUrl = auth?.user?.avatar?.startsWith('https://via.placeholder.com') ? '/assets/avatar.png' : auth?.user?.avatar;

    // Handle socket notifications
    const handleSocketNotification = async (data: any) => {
        console.groupEnd();

        // Create temporary notification object with temp ID
        const tempId = Date.now();
        const tempNotification: Notification = {
            id: tempId,
            notification_id: 0,
            action: data.action,
            message: data.message,
            action_url: data.action_url,
            user_image: data.user_image,
            timestamp: data.timestamp || new Date().toISOString(),
            is_read: false,
            time_ago: 'Just now'
        };

        // Add to notifications list immediately (optimistic update)
        setNotifications((prev) => [tempNotification, ...prev]);
        setUnreadCount((prev) => prev + 1);

        // Save to database and update with real data
        try {
            const response = await axios.post('/api/notifications/store-from-socket', {
                action: data.action,
                message: data.message,
                action_url: data.action_url,
                user_image: data.user_image,
                timestamp: data.timestamp,
            });

            // Replace temporary notification with real one from database
            if (response.data.success && response.data.data) {
                const dbNotification: Notification = {
                    id: response.data.data.id,
                    notification_id: response.data.data.notification_id,
                    action: response.data.data.action,
                    message: response.data.data.message,
                    action_url: response.data.data.action_url,
                    user_image: response.data.data.user_image,
                    timestamp: response.data.data.timestamp,
                    is_read: response.data.data.is_read,
                    time_ago: response.data.data.time_ago,
                };

                setNotifications((prev) =>
                    prev.map((n) => (n.id === tempId ? dbNotification : n))
                );
                console.log('[AppHeader] ✅ Notification saved with ID:', dbNotification.id);
            }
        } catch (error) {
            console.error('[AppHeader] ❌ Failed to save notification:', error);
            // Remove temp notification on error
            setNotifications((prev) => prev.filter((n) => n.id !== tempId));
            setUnreadCount((prev) => Math.max(0, prev - 1));
        }
    };

    useSocketNotifications(handleSocketNotification, auth?.user?.id);

    // Mark notification as read
    const handleMarkAsRead = async (notificationId: number) => {
        try {
            await axios.post(`/api/notifications/${notificationId}/mark-read`);

            // Update local state
            setNotifications((prev) =>
                prev.map((n) =>
                    n.id === notificationId ? { ...n, is_read: true } : n
                )
            );
            setUnreadCount((prev) => Math.max(0, prev - 1));
        } catch (error) {
            console.error('Failed to mark notification as read:', error);
        }
    };

    // Keep selectedRole state in sync if roles or auth change
    useEffect(() => {
        setSelectedRole(auth?.user?.current_role_id?.toString());
    }, [auth?.user?.current_role_id]);

    // Handle click outside to close the notification panel
    useEffect(() => {
        function handleClickOutside(event: MouseEvent) {
            if (notificationRef.current && !notificationRef.current.contains(event.target as Node)) {
                setIsNotificationOpen(false);
            }
        }

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

    useEffect(() => {
        // update selected role when roles or auth change (useful after page refresh / inertia update)
        setSelectedRole(auth?.user?.current_role_id?.toString());
    }, [auth?.user?.current_role_id, current_user_roles]);

    useEffect(() => {
        // update selected language when current_locale changes
        setSelectedLanguage(current_locale || 'us');
    }, [current_locale]);
    const handleRoleChange = (roleId: string) => {
        const selectedRole = current_user_roles.find((r) => r.id.toString() === roleId);
        if (!selectedRole) return;

        const payload = {
            id: selectedRole.id,
            name: selectedRole.name,
        };
        // router.post(route('users.switch.role'), payload);
        router.post(route('users.switch.role'), payload, {
            onSuccess: () => {
                window.location.href = route('dashboard');
            },
            onError: (errors) => {
                console.error('Failed to switch role:', errors);
            },
        });
    };

    const handleLanguageChange = (locale: string) => {
        setSelectedLanguage(locale);

        router.post(route('language.switch'), { locale }, {
            preserveState: false,
            preserveScroll: false,
            onSuccess: (page) => {
                // Need full page animation
            },
            onError: (errors) => {
                console.error('❌ Failed to switch language:', errors);
            },
        });
    };

    return (
        <>
            <header className="sticky top-0 z-40 ml-1 flex h-14 shrink-0 items-center justify-between bg-white px-2 sm:h-16 sm:px-3 lg:px-4 dark:bg-background">
                <div className="flex w-full items-center gap-2 sm:gap-3 lg:w-[60%]">
                    {/* Desktop Search Bar */}
                    <SidebarTrigger className="h-7 w-7 sm:h-8 sm:w-8" />
                    <div className="block md:hidden">
                        <Link href={dashboard()} prefetch>
                            {/* <AppLogoLight /> */}
                            <AppLogo />
                        </Link>
                    </div>
                    <div className="hidden max-w-xs flex-1 md:block lg:max-w-96">
                        <GlobalSearch />
                    </div>
                </div>

                {/* Right Section */}
                <div className="flex max-w-[45%] items-center gap-1 pr-2 sm:gap-2 md:max-w-none lg:gap-4">
                    {/* Mobile Search Toggle */}
                    {/* Role selector: full select on md+, compact dropdown on small screens */}
                    <div className="hidden md:block">
                        <Select
                            value={selectedRole}
                            onValueChange={(v) => {
                                setSelectedRole(v);
                                handleRoleChange(v);
                            }}
                        >
                            <SelectTrigger className="w-[180px]">
                                <SelectValue placeholder="Select a Role" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    {current_user_roles.map((role) => (
                                        <SelectItem key={role.id} value={role.id.toString()}>
                                            {role.name ? role.name.charAt(0).toLocaleUpperCase() + role.name.slice(1).toLocaleLowerCase() : ''}
                                        </SelectItem>
                                    ))}
                                </SelectGroup>
                            </SelectContent>
                        </Select>
                    </div>

                    {/* Mobile: compact role dropdown */}
                    <div className="md:hidden">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <User className="h-5 w-5 text-gray-600 dark:text-gray-400" />
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end" className="w-48">
                                <div className="py-1">
                                    {current_user_roles.map((role) => (
                                        <button
                                            key={role.id}
                                            className="w-full px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800"
                                            onClick={() => {
                                                setSelectedRole(role.id.toString());
                                                handleRoleChange(role.id.toString());
                                            }}
                                        >
                                            {role.name ? role.name.charAt(0).toLocaleUpperCase() + role.name.slice(1).toLocaleLowerCase() : ''}
                                        </button>
                                    ))}
                                </div>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>

                    {/* Language Switcher - Desktop */}
                    <div className="hidden md:block">
                        {(() => {
                            const currentLang = languages?.find((lang: any) => lang.code === selectedLanguage) || languages?.[0];
                            return (
                                <Select value={selectedLanguage} onValueChange={handleLanguageChange}>
                                    <SelectTrigger className="gap-2">
                                        <div className="flex items-center gap-2">
                                            {currentLang?.icon ? (
                                                <span className="text-lg">{currentLang.icon}</span>
                                            ) : (
                                                <Languages className="h-4 w-4" />
                                            )}
                                            {/*<span className="text-sm">{currentLang?.name || 'Language'}</span>*/}
                                        </div>
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            {languages?.filter((lang: any) => lang.code !== selectedLanguage).map((lang: any) => (
                                                <SelectItem key={lang.code} value={lang.code}>
                                                    <div className="flex items-center gap-2">
                                                        {lang.icon && (
                                                            <span className="text-lg">{lang.icon}</span>
                                                        )}
                                                        <span>{lang.name}</span>
                                                    </div>
                                                </SelectItem>
                                            ))}
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            );
                        })()}
                    </div>

                    {/* Language Switcher - Mobile */}
                    <div className="md:hidden">
                        {(() => {
                            const currentLang = languages?.find((lang: any) => lang.code === selectedLanguage) || languages?.[0];
                            return (
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Button variant="ghost" size="icon" className="h-7 w-7 sm:h-8 sm:w-8 relative">
                                            {currentLang?.icon ? (
                                                <span className="text-lg">{currentLang.icon}</span>
                                            ) : (
                                                <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                                            )}
                                        </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="end" className="w-48">
                                        <div className="py-1">
                                            {languages?.filter((lang: any) => lang.code !== selectedLanguage).map((lang: any) => (
                                                <button
                                                    key={lang.code}
                                                    className="w-full px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2"
                                                    onClick={() => handleLanguageChange(lang.code)}
                                                >
                                                    {lang.icon && (
                                                        <span className="text-lg">{lang.icon}</span>
                                                    )}
                                                    <span>{lang.name}</span>
                                                </button>
                                            ))}
                                        </div>
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            );
                        })()}
                    </div>
                    <Button
                        variant="ghost"
                        size="icon"
                        className="flex h-7 w-7 hover:bg-gray-100 sm:h-8 sm:w-8 md:hidden dark:hover:bg-background"
                        onClick={() => setIsMobileSearchOpen(!isMobileSearchOpen)}
                    >
                        {isMobileSearchOpen ? (
                            <X className="size-3.5 text-gray-600 sm:size-4 dark:text-gray-400" />
                        ) : (
                            <Search className="size-3.5 text-gray-600 sm:size-4 dark:text-gray-400" />
                        )}
                    </Button>
                    <AppearanceToggleTab />
                    {/* Invite People Button - Hidden on small and medium screens */}
                    {/* {can('Platform View Users') && (
                        <Button
                            onClick={() => {
                                toast.warning('Work in progress');
                            }}
                            variant="ghost"
                            size="sm"
                            className="hidden border text-primary lg:inline-flex dark:text-gray-400 dark:hover:text-white"
                        >
                            <span className="hidden xl:inline">Invite People</span>
                            <span className="inline xl:hidden">Invite</span>
                        </Button>
                    )} */}

                    {/* {can('Platform View Roles') && (
                        <Button
                            onClick={() => {
                                toast.warning('Work in progress');
                            }}
                            size="sm"
                            className="hidden rounded-lg bg-brand-secondary px-2 py-1.5 text-xs font-medium text-white hover:bg-orange-600 sm:inline-flex sm:px-3 sm:py-2 sm:text-sm"
                        >
                            <span className="hidden lg:inline">Upgrade</span>
                            <span className="inline lg:hidden">⭐</span>
                        </Button>
                    )} */}
                    {/* Upgrade Button - Hidden on small and medium screens */}

                    {/* Notifications */}
                    <div ref={notificationRef} className="relative" style={{ zIndex: 50 }}>
                        <Button
                            variant="ghost"
                            size="icon"
                            className="relative h-7 w-7 border hover:bg-gray-100 sm:h-8 sm:w-8 dark:hover:bg-gray-800"
                            onClick={() => {
                                setIsNotificationOpen(!isNotificationOpen);
                            }}
                        >
                            <Bell className="size-3.5 text-gray-600 sm:size-4 dark:text-gray-400" />
                            {unreadCount > 0 && (
                                <span className="absolute -top-0.5 -right-0.5 flex h-3.5 min-w-[14px] items-center justify-center rounded-full bg-red-500 text-[9px] font-medium text-white sm:-top-1 sm:-right-1 sm:h-[16px] sm:min-w-[16px] sm:text-[10px]">
                                    {unreadCount > 99 ? '99+' : unreadCount}
                                </span>
                            )}
                        </Button>

                        {isNotificationOpen && (
                            <NotificationBox
                                onClose={() => setIsNotificationOpen(false)}
                                notifications={notifications}
                                onMarkAsRead={handleMarkAsRead}
                            />
                        )}
                    </div>

                    {/* User Avatar */}
                    {auth?.user && (
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-9 w-9 rounded-full p-0.5 sm:p-1">
                                    <Avatar className="h-7 w-7 overflow-hidden rounded-full sm:h-9 sm:w-9">
                                        <AvatarImage src={avatarUrl} alt={auth.user.name} />
                                        <AvatarFallback className="rounded-full text-[10px] font-medium text-brand sm:text-xs">
                                            {getInitials(auth.user.name)}
                                        </AvatarFallback>
                                    </Avatar>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent className="w-56" align="end">
                                <UserMenuContent user={auth.user} />
                            </DropdownMenuContent>
                        </DropdownMenu>
                    )}
                </div>
            </header>

            {/* Mobile Search Bar (renders under header inside right column) */}
            {isMobileSearchOpen && (
                <div className="border-b border-gray-200 bg-background p-3 md:hidden dark:border-gray-700 dark:bg-gray-900">
                    <div className="relative">
                        <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 transform text-gray-400" />
                        <Input
                            type="search"
                            placeholder="Search..."
                            className="h-9 rounded-lg border-gray-200 bg-gray-50 pr-4 pl-10 transition-colors focus:border-orange-500 focus:ring-2 focus:ring-orange-500 sm:h-10 dark:border-gray-700 dark:bg-gray-800"
                            autoFocus
                        />
                    </div>
                </div>
            )}
        </>
    );
}