'use client';

import { useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { User, Settings, LogOut, Moon, Sun, HelpCircle, ChevronDown, MessageSquare } from 'lucide-react';
import { useTheme } from './theme-provider';

interface UserDropdownProps {
    user?: {
        name: string;
        email: string;
        role: string;
    };
    onLogout?: () => void;
    onReportIssue?: () => void;
}

export function UserDropdown({ user, onLogout, onReportIssue }: UserDropdownProps) {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);
    const { resolvedTheme, setTheme } = useTheme();
    const router = useRouter();

    // Close on click outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };

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

    // Get initials from name
    const getInitials = (name: string) => {
        return name
            .split(' ')
            .map((n) => n[0])
            .join('')
            .toUpperCase()
            .slice(0, 2);
    };

    const defaultUser = {
        name: user?.name || 'John Doe',
        email: user?.email || 'john@example.com',
        role: user?.role || 'Admin',
    };

    const menuItems = [
        {
            icon: User,
            label: 'Profile Settings',
            onClick: () => console.log('Profile'),
        },
        {
            icon: resolvedTheme === 'dark' ? Sun : Moon,
            label: resolvedTheme === 'dark' ? 'Light Mode' : 'Dark Mode',
            onClick: () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'),
        },
        {
            icon: Settings,
            label: 'System Settings',
            onClick: () => router.push('/super-admin/settings'),
            hidden: user?.role !== 'SUPER_ADMIN',
        },
        {
            icon: HelpCircle,
            label: 'Help & Documentation',
            onClick: () => console.log('Help'),
        },
        {
            icon: MessageSquare,
            label: 'Report an Issue',
            onClick: onReportIssue || (() => console.log('Report Issue')),
        },
        {
            icon: LogOut,
            label: 'Logout',
            onClick: onLogout || (() => console.log('Logout')),
            className: 'text-rose-600 dark:text-rose-400',
        },
    ];

    return (
        <div className="relative" ref={dropdownRef}>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
            >
                {/* Avatar */}
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-brand to-emerald-600 text-sm font-semibold text-white shadow-md">
                    {getInitials(defaultUser.name)}
                </div>

                {/* User info - hidden on mobile */}
                <div className="hidden text-left md:block">
                    <p className="text-sm font-semibold text-slate-900 dark:text-white">
                        {defaultUser.name}
                    </p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">
                        {defaultUser.role}
                    </p>
                </div>

                <ChevronDown
                    className={`h-4 w-4 text-slate-500 transition-transform dark:text-slate-400 ${isOpen ? 'rotate-180' : ''
                        }`}
                />
            </button>

            {/* Dropdown Menu */}
            {isOpen && (
                <div className="absolute right-0 top-full mt-2 w-64 rounded-lg border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900 animate-slide-in-top z-50">
                    {/* User Info Header */}
                    <div className="border-b border-slate-100 p-4 dark:border-slate-800">
                        <p className="font-semibold text-slate-900 dark:text-white">
                            {defaultUser.name}
                        </p>
                        <p className="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
                            {defaultUser.email}
                        </p>
                        <span className="mt-2 inline-block rounded-full bg-brand/10 px-2 py-0.5 text-xs font-medium text-brand dark:bg-brand/20">
                            {defaultUser.role}
                        </span>
                    </div>

                    {/* Menu Items */}
                    <div className="p-1">
                        {menuItems.map((item, index) => (
                            !item.hidden && (
                            <button
                                key={index}
                                onClick={() => {
                                    item.onClick();
                                    setIsOpen(false);
                                }}
                                className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 ${item.className || 'text-slate-700 dark:text-slate-300'
                                    }`}
                            >
                                <item.icon className="h-4 w-4" />
                                {item.label}
                            </button>
                            )
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}