import { usePage, Link, router } from '@inertiajs/react';
import React, { useState, useRef, useEffect } from 'react';
import { PageProps } from '@/types';

export function Topbar({ theme, onThemeToggle, onMenuToggle, sidebarOpen }: { theme: string; onThemeToggle: () => void; onMenuToggle: () => void; sidebarOpen: boolean }) {
    const props = usePage<PageProps>().props as any;
    const { auth, system_settings, unread_notifications } = props;
    const { user, roles } = auth;
    
    const [showDropdown, setShowDropdown] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);
    const [searchQuery, setSearchQuery] = useState('');
    const [searchResults, setSearchResults] = useState<any[]>([]);
    const [isSearching, setIsSearching] = useState(false);
    const searchInputRef = useRef<HTMLInputElement>(null);
    const path = window.location.pathname;

    useEffect(() => {
        function handleClickOutside(event: MouseEvent) {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setShowDropdown(false);
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    // Global Search Logic
    useEffect(() => {
        if (searchQuery.length < 2) {
            setSearchResults([]);
            return;
        }

        const timer = setTimeout(async () => {
            setIsSearching(true);
            try {
                const response = await fetch(`/api/search?query=${encodeURIComponent(searchQuery)}`);
                const data = await response.json();
                setSearchResults(data);
            } catch (error) {
                console.error('Search error:', error);
            } finally {
                setIsSearching(false);
            }
        }, 300);

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

    // Keyboard Shortcuts
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                searchInputRef.current?.focus();
            }
        };
        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }, []);

    const handleLogout = () => {
        router.post('/logout');
    };

    const initials = `${user?.first_name?.charAt(0) || ''}${user?.last_name?.charAt(0) || ''}`.toUpperCase();

    const segments = path.split('/').filter(Boolean);
    const formatSegment = (s: string) =>
        s.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
    const pageTitle = segments.length > 0 ? formatSegment(segments[0]) : 'Dashboard';
    const breadcrumbs = segments.length > 1
        ? segments.map((s, i) => ({ label: formatSegment(s), href: '/' + segments.slice(0, i + 1).join('/') }))
        : null;

    return (
        <header className="h-16 flex items-center justify-between px-6 shrink-0 relative z-30 transition-colors duration-300 bg-transparent">
            {/* Left: Breadcrumb area */}
            <div className="flex items-center gap-6">
                {/* Burger — mobile only */}
                <button
                    onClick={onMenuToggle}
                    className="lg:hidden p-2 rounded-xl bg-white dark:bg-white/5 border border-gray-100 dark:border-white/5 text-gray-500 dark:text-gray-400 hover:text-[#3D4E4B] dark:hover:text-white transition-all"
                    aria-label="Toggle menu"
                >
                    {sidebarOpen ? (
                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    ) : (
                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    )}
                </button>

                <div className="hidden lg:block">
                    <h2 className="text-sm font-bold text-[#3D4E4B] dark:text-white tracking-tight leading-none">{pageTitle}</h2>
                    <div className="flex items-center gap-1.5 text-xs font-semibold text-gray-400 tracking-tight mt-1">
                        <Link href="/dashboard" className="hover:text-[#3D4E4B] dark:hover:text-white transition-colors">
                            {system_settings?.app_name || 'biiproject kit'}
                        </Link>
                        {breadcrumbs ? breadcrumbs.map((crumb, i) => (
                            <React.Fragment key={crumb.href}>
                                <svg className="w-1 h-1 shrink-0" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" /></svg>
                                {i === breadcrumbs.length - 1
                                    ? <span className="text-[#D4A017] font-bold">{crumb.label}</span>
                                    : <Link href={crumb.href} className="hover:text-[#3D4E4B] dark:hover:text-white transition-colors">{crumb.label}</Link>
                                }
                            </React.Fragment>
                        )) : (
                            <>
                                <svg className="w-1 h-1 shrink-0" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" /></svg>
                                <span className="text-[#D4A017] font-bold">{pageTitle}</span>
                            </>
                        )}
                    </div>
                </div>

                {/* Global Search */}
                <div className="relative group ml-4">
                    <div className="relative w-[300px]">
                        <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none group-focus-within:text-[#D4A017] transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                        <input 
                            ref={searchInputRef}
                            type="text" 
                            placeholder="Search anything... (Ctrl+K)" 
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            className="w-full h-10 pl-10 pr-4 rounded-xl border border-gray-100 dark:border-white/5 bg-white dark:bg-white/5 text-xs font-bold text-[#3D4E4B] dark:text-white placeholder-gray-400 focus:outline-none focus:border-[#D4A017] focus:ring-4 focus:ring-[#D4A017]/5 transition-all" 
                        />
                        {isSearching && (
                            <div className="absolute right-3.5 top-1/2 -translate-y-1/2">
                                <div className="w-3.5 h-3.5 border-2 border-[#D4A017] border-t-transparent rounded-full animate-spin" />
                            </div>
                        )}
                    </div>

                    {/* Search Results Dropdown */}
                    {searchResults.length > 0 && (
                        <div className="absolute left-0 right-0 mt-3 bg-white dark:bg-[#232D2B] rounded-2xl shadow-2xl border border-gray-100 dark:border-white/5 overflow-hidden anim-up z-50">
                            <div className="p-2 max-h-[400px] overflow-y-auto custom-scrollbar">
                                {searchResults.map((result, idx) => (
                                    <Link 
                                        key={idx} 
                                        href={result.url} 
                                        onClick={() => setSearchQuery('')}
                                        className="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 dark:hover:bg-white/5 transition-all group"
                                    >
                                        <div className="w-9 h-9 rounded-lg bg-gray-100 dark:bg-white/5 flex items-center justify-center text-gray-400 group-hover:text-[#D4A017] transition-colors shrink-0">
                                            {result.icon === 'user' && <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>}
                                            {result.icon === 'shield' && <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>}
                                            {result.icon === 'clock' && <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>}
                                        </div>
                                        <div>
                                            <div className="text-xs font-bold text-[#3D4E4B] dark:text-white tracking-tight">{result.title}</div>
                                            <div className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-0.5">{result.type} • {result.subtitle}</div>
                                        </div>
                                    </Link>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* Right: Actions Area */}
            <div className="flex items-center gap-3">
                {/* Theme Toggle */}
                <button 
                    onClick={onThemeToggle}
                    className="p-2.5 rounded-xl bg-white dark:bg-white/5 text-gray-400 hover:text-[#D4A017] transition-all border border-gray-100 dark:border-white/5"
                    title={`Switch to ${theme === 'dark' ? 'Light' : 'Dark'} Mode`}
                >
                    {theme === 'dark' ? (
                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707.707M12 5a7 7 0 100 14 7 7 0 000-14z" /></svg>
                    ) : (
                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
                    )}
                </button>

                <Link href="/notifications" className="relative p-2.5 rounded-xl bg-white dark:bg-white/5 text-gray-400 hover:text-[#3D4E4B] dark:hover:text-white transition-all border border-gray-100 dark:border-white/5 flex items-center justify-center">
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                    {unread_notifications > 0 && (
                        <span className="absolute top-1.5 right-1.5 min-w-[1rem] h-4 px-0.5 bg-red-500 rounded-full flex items-center justify-center text-[9px] font-black text-white leading-none">
                            {unread_notifications > 99 ? '99+' : unread_notifications}
                        </span>
                    )}
                </Link>

                <div className="relative" ref={dropdownRef}>
                    <button
                        onClick={() => setShowDropdown(!showDropdown)}
                        className="flex items-center gap-3 p-1.5 rounded-xl bg-white dark:bg-white/5 border border-gray-100 dark:border-white/5 hover:bg-gray-50 dark:hover:bg-white/10 transition-all group"
                    >
                        <div className="w-8 h-8 rounded-lg bg-[#3D4E4B] flex items-center justify-center font-bold text-white text-sm">
                            {user?.avatar_url ? (
                                <img src={user.avatar_url} className="w-full h-full object-cover rounded-lg" />
                            ) : (
                                initials
                            )}
                        </div>
                        <div className="hidden sm:block text-left pr-2">
                            <div className="text-xs font-bold text-[#3D4E4B] dark:text-white leading-none">{user?.first_name}</div>
                            <div className="text-[10px] text-[#D4A017] font-black uppercase tracking-widest mt-1">{roles?.[0]?.replace('-', ' ') || 'User'}</div>
                        </div>
                    </button>

                    {showDropdown && (
                        <div className="absolute right-0 mt-3 w-56 bg-white dark:bg-[#232D2B] rounded-2xl shadow-2xl border border-gray-50 dark:border-white/5 py-2 z-50 anim-up">
                            <div className="px-5 py-3 border-b border-gray-50 dark:border-white/5 mb-1">
                                <div className="text-xs font-black text-[#3D4E4B] dark:text-white tracking-tight">{user?.first_name} {user?.last_name}</div>
                                <div className="text-[10px] text-gray-400 font-bold truncate mt-1 uppercase tracking-widest">{user?.email}</div>
                            </div>
                            <Link href="/profile" className="flex items-center gap-2.5 px-5 py-3 text-xs font-bold text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 transition-all">
                                <svg className="w-4 h-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                                Account Settings
                            </Link>
                            <button onClick={handleLogout} className="w-full flex items-center gap-2.5 px-5 py-3 text-xs font-bold text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 transition-all text-left border-t border-gray-50 dark:border-white/5 mt-1">
                                <svg className="w-4 h-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
                                Sign Out Session
                            </button>
                        </div>
                    )}
                </div>
            </div>
        </header>
    );
}