import AppLogo from '@/components/app-logo';
import AppearanceToggleTab from '@/components/appearance-tabs';
import { GlobalSearch } from '@/components/GlobalSearch';
import NotificationBox, { type Notification } from '@/components/notification-box';
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 { useSocketNotifications } from '@/hooks/useSocket';
import { dashboard } from '@/routes';
import { type SharedData } from '@/types';
import { Link, router, usePage } from '@inertiajs/react';
import axios from 'axios';
import { Bell, Languages, Search, User, X } from 'lucide-react';
import { type Dispatch, type SetStateAction, useEffect, useRef, useState } from 'react';

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');

    const toDisplayText = (value: unknown): string => {
        if (typeof value === 'string') return value;

        if (value && typeof value === 'object') {
            const map = value as Record<string, unknown>;
            const candidates = [current_locale || 'us', 'us', 'bd', 'ar'];

            for (const key of candidates) {
                const candidate = map[key];
                if (typeof candidate === 'string' && candidate.trim() !== '') {
                    return candidate;
                }
            }

            for (const candidate of Object.values(map)) {
                if (typeof candidate === 'string' && candidate.trim() !== '') {
                    return candidate;
                }
            }
        }

        return '';
    };

    const safeLanguages = (languages ?? []).filter(
        (lang: any, index: number, arr: any[]) => arr.findIndex((x) => String(x.code) === String(lang.code)) === index,
    );
    const safeRoles = (current_user_roles ?? []).filter(
        (role: any, index: number, arr: any[]) =>
            arr.findIndex((x) => String(x.id) === String(role.id)) === index &&
            role.slug !== 'dev' &&
            Number(role.status ?? 1) === 1,
    );

    // 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 = safeRoles.find((r: any) => 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-background px-2 sm:h-16 sm:px-3 lg:px-4">
                <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>
                                    {safeRoles.map((role: any) => (
                                        <SelectItem key={role.id} value={role.id.toString()}>
                                            {(() => {
                                                const roleName = toDisplayText(role.name);
                                                return roleName ? roleName.charAt(0).toLocaleUpperCase() + roleName.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">
                                    {safeRoles.map((role: any) => (
                                        <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());
                                            }}
                                        >
                                            {(() => {
                                                const roleName = toDisplayText(role.name);
                                                return roleName ? roleName.charAt(0).toLocaleUpperCase() + roleName.slice(1).toLocaleLowerCase() : '';
                                            })()}
                                        </button>
                                    ))}
                                </div>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>

                    {/* Language Switcher - Desktop */}
                    <div className="hidden md:block">
                        {(() => {
                            const currentLang = safeLanguages.find((lang: any) => lang.code === selectedLanguage) || safeLanguages[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>
                                            {safeLanguages
                                                .filter((lang: any) => lang.code !== selectedLanguage)
                                                .map((lang: any, index: number) => (
                                                    <SelectItem key={`${lang.code}-${lang.id ?? index}`} value={lang.code}>
                                                        <div className="flex items-center gap-2">
                                                            {lang.icon && <span className="text-lg">{lang.icon}</span>}
                                                            <span>{toDisplayText(lang.name) || lang.code}</span>
                                                        </div>
                                                    </SelectItem>
                                                ))}
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            );
                        })()}
                    </div>

                    {/* Language Switcher - Mobile */}
                    <div className="md:hidden">
                        {(() => {
                            const currentLang = safeLanguages.find((lang: any) => lang.code === selectedLanguage) || safeLanguages[0];
                            return (
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Button variant="ghost" size="icon" className="relative h-7 w-7 sm:h-8 sm:w-8">
                                            {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">
                                            {safeLanguages
                                                .filter((lang: any) => lang.code !== selectedLanguage)
                                                .map((lang: any, index: number) => (
                                                    <button
                                                        key={`${lang.code}-${lang.id ?? index}`}
                                                        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800"
                                                        onClick={() => handleLanguageChange(lang.code)}
                                                    >
                                                        {lang.icon && <span className="text-lg">{lang.icon}</span>}
                                                        <span>{toDisplayText(lang.name) || lang.code}</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>
            )}
        </>
    );
}