import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import useAddOn from '@/hooks/use-addons';
import { cn } from '@/lib/utils';
import { router } from '@inertiajs/react';
import { ArrowLeft, Loader2, Mail, MoreVertical, Pencil, Plus, Search, Star, Trash, X } from 'lucide-react';
import { useCallback, useState } from 'react';
import { toast } from 'sonner';
import { route } from 'ziggy-js';
import { UserDetails } from './UserDetails';
import UserForm from './UserForm';

type ServerErrors = Record<string, string>;

export interface User {
    id?: string | number;
    uid?: string | number;
    name: string;
    email: string;
    phone?: string;
    location?: string;
    company?: string;
    avatar?: string;
    lastUser?: string;
    favorite?: boolean;
    group?: string;
    status?: number;
}

const groupColors: Record<string, string> = {
    Clients: 'bg-blue-50 text-blue-700 border-blue-200',
    Team: 'bg-green-50 text-green-700 border-green-200',
    Partners: 'bg-purple-50 text-purple-700 border-purple-200',
    Vendors: 'bg-amber-50 text-amber-700 border-amber-200',
    Prospects: 'bg-cyan-50 text-cyan-700 border-cyan-200',
};

// Mock users data for the sidebar
const mockUsers: User[] = Array.from({ length: 15 }).map((_, i) => ({
    id: String(i + 1),
    name: [
        'Veronica Lueilwitz',
        'Sheryl Bins',
        'Marianne Thompson',
        'Cassandra Goodwin',
        'Samantha Ward',
        'Ruben Sporer',
        'Allison Corkery',
        'Lila Schmeler',
        'Judith Rohan',
        'Kayla Greenfelder',
    ][i % 10],
    email: `user${i + 1}@example.com`,
    phone: ['398-719-0220', '1-445-949-8764', '(788) 569-2095', '(904) 679-9183'][i % 4],
    location: ['New York', 'San Francisco', 'Chicago', 'Boston', 'Seattle'][i % 5],
    company: ['Acme Inc.', 'TechCorp', 'GlobalServices', 'NextLevel', 'InnovateCo'][i % 5],
    lastUser: ['2 days ago', '1 week ago', 'Yesterday', '3 hours ago', '1 month ago'][i % 5],
    favorite: i % 4 === 0,
    group: ['Clients', 'Team', 'Partners', 'Vendors', 'Prospects'][i % 5],
}));

type ActiveTab = 'all' | 'favorites' | 'recent';
type GroupFilter = 'all' | 'clients' | 'team' | 'partners' | 'vendors' | 'prospects';

interface UserAddOnSidebarProps {
    title?: string;
    onClose?: () => void;
    mode?: 'list' | 'add' | 'edit' | 'details';
    initialUser?: User;
    module?: 'user' | 'inventory' | 'company' | 'user' | ''; // Deprecated: use storeRouteName and updateRouteName instead
    storeRouteName?: string; // e.g., 'user.user.store'
    updateRouteName?: string; // e.g., 'user.user.update'
    refreshUsers?: () => void;
    appName?: string;
    customerTypeSetting?: 'company' | 'individual' | 'both';
    ApiRoute?: string;
}

export function UserAddOnSidebar({
    title /* = 'Users',*/,
    onClose,
    mode = 'list',
    initialUser,
    module = '',
    storeRouteName,
    updateRouteName,
    refreshUsers,
    appName = 'main',
    customerTypeSetting = 'both',
}: UserAddOnSidebarProps) {
    const { addOnClose } = useAddOn();

    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<ActiveTab>('all');
    const [groupFilter, setGroupFilter] = useState<GroupFilter>('all');

    const [sidebarMode, setSidebarMode] = useState<'list' | 'add' | 'edit' | 'details'>(mode);
    const [users, setUsers] = useState<User[]>(mockUsers);
    const [activeUser, setActiveUser] = useState<User | null>(initialUser ?? null);
    const [isLoadingUser, setIsLoadingUser] = useState(false);
    const [serverErrors, setServerErrors] = useState<ServerErrors>({});

    // Fetch full user details for editing (includes manager, assigned_users)
    const fetchUserDetails = async (user: User) => {
        if (!user.id && !user.uid) return user;

        setIsLoadingUser(true);
        try {
            const userId = user.uid || user.id;
            const response = await fetch(route('users.show', { user: userId }), {
                headers: {
                    Accept: 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            });

            if (response.ok) {
                const data = await response.json();
                // The response might be wrapped in a 'user' property or be the user directly
                return data.user || data;
            }
        } catch (error) {
            console.error('Failed to fetch user details:', error);
        } finally {
            setIsLoadingUser(false);
        }
        return user;
    };

    // Handler to enter edit mode with full user data
    const handleEditUser = async (user: User) => {
        const fullUser = await fetchUserDetails(user);
        setActiveUser(fullUser);
        setSidebarMode('edit');
    };

    const getPostRoute = () => {
        // New explicit route approach (preferred)
        if (storeRouteName) return route(storeRouteName);

        // Fallback to legacy module-based approach
        if (!module) return route('users.store');
        if (module === 'company') return route('user.company.store');
        return route(`${module}.customer.store`);
    };

    const handleUserSubmit = useCallback(
        (payload: any) => {
            // Clear previous errors
            setServerErrors({});

            if (sidebarMode === 'add') {
                // Core required fields
                const newUser = {
                    name: payload.name || '',
                    email: payload.email || '',
                    phone: payload.phone || '',
                    is_login: payload.is_login || false,
                    password: payload.password || '',
                    app_name: payload.app_name || appName || 'main',
                    contact_owner: payload.contact_owner ?? null,
                    type: payload.type ?? 1,
                    category: payload.category ?? 2, // 2 = Customer
                    status: payload.status ?? 1, // Use ?? to allow 0 (inactive) status
                };
                // @ts-ignore
                router.post(getPostRoute(), newUser, {
                    onSuccess: () => {
                        // Notify global listeners to refresh
                        try {
                            refreshUsers?.();
                        } catch {}
                        addOnClose();
                    },
                    onError: (errors: Record<string, string>) => {
                        setServerErrors(errors);
                        const firstError = Object.values(errors)[0];
                        toast.error(firstError || 'Error creating user');
                        console.error('Error creating user:', errors);
                    },
                });
            } else if (sidebarMode === 'edit' && activeUser) {
                const updatedUser = {
                    name: payload.name || activeUser.name || '',
                    email: payload.email || '',
                    phone: payload.phone || '',
                    is_login: payload.is_login || false,
                    password: payload.password || '',
                    app_name: payload.app_name || appName || 'main',
                    contact_owner: payload.contact_owner ?? null,
                    type: payload.type ?? 1,
                    category: payload.category ?? 2, // 2 = Customer
                    status: payload.status ?? 1, // Use ?? to allow 0 (inactive) status
                };
                console.log('🚀 ~ updateRouteName ~ updateRouteName:', updateRouteName);
                // @ts-ignore
                router.put(updateRouteName, updatedUser, {
                    onSuccess: () => {
                        // Notify global listeners to refresh
                        try {
                            refreshUsers?.();
                        } catch {}
                        addOnClose();
                    },
                    onError: (errors: Record<string, string>) => {
                        setServerErrors(errors);
                        const firstError = Object.values(errors)[0];
                        toast.error(firstError || 'Error updating user');
                        console.error('Error updating user:', errors);
                    },
                });
            }
        },
        [sidebarMode, activeUser, module],
    );
    const getFilteredUsers = () => {
        let filtered = users;

        // Apply tab filter
        switch (activeTab) {
            case 'favorites':
                filtered = users.filter((user) => user.favorite);
                break;
            case 'recent':
                filtered = [...users]
                    .sort((a, b) => {
                        // Simple sorting logic for recent users based on lastUser
                        const aRecent = a.lastUser?.includes('hour') || a.lastUser?.includes('day') || false;
                        const bRecent = b.lastUser?.includes('hour') || b.lastUser?.includes('day') || false;

                        if (aRecent && !bRecent) return -1;
                        if (!aRecent && bRecent) return 1;
                        return 0;
                    })
                    .slice(0, 5);
                break;
            case 'all':
            default:
                filtered = users;
                break;
        }

        // Apply group filter
        if (groupFilter !== 'all') {
            filtered = filtered.filter((user) => {
                const group = user.group?.toLowerCase() || '';
                return group === groupFilter;
            });
        }

        // Apply search filter
        if (searchQuery) {
            filtered = filtered.filter(
                (user) =>
                    user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                    user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
                    (user.company && user.company.toLowerCase().includes(searchQuery.toLowerCase())) ||
                    (user.phone && user.phone.toLowerCase().includes(searchQuery.toLowerCase())),
            );
        }

        return filtered;
    };

    const filteredUsers = getFilteredUsers();

    const getInitials = (name: string) => {
        return name
            .split(' ')
            .map((part) => part.charAt(0))
            .join('')
            .toUpperCase()
            .substring(0, 2);
    };

    return (
        <div className="flex h-full w-full flex-col bg-card">
            <div className="flex items-center justify-between border-b px-2 py-3">
                <div className="flex items-center gap-3 px-1">
                    {sidebarMode !== 'list' && (
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                                if (sidebarMode === 'edit') {
                                    addOnClose();
                                    return;
                                }
                                setSidebarMode('list');
                            }}
                            className="h-8 w-8 p-0"
                        >
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    )}
                    <h2 className="text-xl font-semibold tracking-tight">
                        {sidebarMode === 'add'
                            ? 'Add ' + ' ' + title
                            : sidebarMode === 'edit'
                              ? 'Edit ' + ' ' + title
                              : sidebarMode === 'details'
                                ? 'Contact Details'
                                : title}
                    </h2>
                    {sidebarMode === 'list' && (
                        <Button
                            size="sm"
                            variant="outline"
                            onClick={() => {
                                setSidebarMode('add');
                                setActiveUser(null);
                            }}
                            className="size-5 rounded-full"
                        >
                            <Plus className="h-3 w-3" />
                        </Button>
                    )}
                </div>
                <div className="flex items-center gap-4">
                    {sidebarMode === 'list' && (
                        <div className="relative">
                            <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                            <input
                                type="text"
                                placeholder="Search..."
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                                className="h-8 w-36 rounded-md border border-input bg-transparent pr-3 pl-8 text-sm"
                            />
                        </div>
                    )}
                    <Button variant="ghost" size="sm" onClick={addOnClose} className="size-6 rounded-full border">
                        <X className="h-3 w-3" />
                    </Button>
                </div>
            </div>

            {sidebarMode === 'list' && (
                <div className="border-b px-4">
                    <div className="flex gap-6">
                        {[
                            { key: 'all', label: 'All' },
                            { key: 'favorites', label: 'Favorites' },
                            { key: 'recent', label: 'Recent' },
                        ].map(({ key, label }) => (
                            <button
                                key={key}
                                onClick={() => setActiveTab(key as ActiveTab)}
                                className={cn(
                                    'relative py-3 text-sm font-medium transition-colors',
                                    activeTab === key
                                        ? 'text-foreground after:absolute after:right-0 after:bottom-0 after:left-0 after:h-0.5 after:bg-foreground'
                                        : 'text-muted-foreground hover:text-foreground',
                                )}
                            >
                                {label}
                            </button>
                        ))}
                    </div>
                </div>
            )}

            <div className="flex-1 overflow-auto px-2">
                {isLoadingUser ? (
                    <div className="flex h-52 flex-col items-center justify-center">
                        <Loader2 className="h-6 w-6 animate-spin text-primary" />
                        <p className="mt-4 text-sm text-muted-foreground">Loading user details...</p>
                    </div>
                ) : sidebarMode === 'add' || sidebarMode === 'edit' ? (
                    <UserForm
                        mode={sidebarMode === 'add' ? 'add' : 'edit'}
                        initialUser={activeUser}
                        onSubmitUser={handleUserSubmit}
                        onCancel={() => {
                            setSidebarMode('list');
                            setActiveUser(null);
                            setServerErrors({});
                        }}
                        title={title}
                        appName={appName}
                        serverErrors={serverErrors}
                        customerTypeSetting={customerTypeSetting}
                    />
                ) : sidebarMode === 'details' && activeUser ? (
                    <UserDetails user={activeUser} mode="sidebar" />
                ) : filteredUsers.length === 0 ? (
                    <div className="flex h-52 flex-col items-center justify-center">
                        <div className="rounded-full bg-primary/10 p-3">
                            <Search className="h-6 w-6 text-primary" />
                        </div>
                        <p className="mt-4 text-sm font-medium">No users found</p>
                    </div>
                ) : (
                    <div className="space-y-3">
                        {filteredUsers.map((user) => (
                            <div
                                key={user.id}
                                className="group relative flex cursor-pointer items-center gap-3 border-b bg-card px-1 pb-2 hover:bg-accent/40"
                                onClick={() => {
                                    setActiveUser(user);
                                    setSidebarMode('details');
                                }}
                            >
                                <Avatar className="h-10 w-10">
                                    {user.avatar ? (
                                        <AvatarImage src={user.avatar} alt={user.name} />
                                    ) : (
                                        <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
                                    )}
                                </Avatar>

                                <div className="min-w-0 flex-1">
                                    <div className="flex items-center justify-between">
                                        <h3 className="truncate text-sm font-medium">{user.name}</h3>
                                        <div className="flex items-center justify-between">
                                            {user.group && (
                                                <div className="">
                                                    <span
                                                        className={cn(
                                                            'inline-block rounded-md border px-2 py-0.5 text-xs',
                                                            groupColors[user.group] || 'bg-muted',
                                                        )}
                                                    >
                                                        {user.group}
                                                    </span>
                                                </div>
                                            )}
                                            <div className="pl-2">{user.favorite && <Star className="h-3 w-3 fill-amber-500 text-amber-500" />}</div>

                                            <DropdownMenu>
                                                <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                                                    <Button variant="ghost" size="sm" className="h-6 w-6 opacity-0 group-hover:opacity-100">
                                                        <MoreVertical className="h-3 w-3" />
                                                    </Button>
                                                </DropdownMenuTrigger>
                                                <DropdownMenuContent align="end">
                                                    <DropdownMenuItem
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            setUsers((prev) =>
                                                                prev.map((u) => (u.id === user.id ? { ...u, favorite: !u.favorite } : u)),
                                                            );
                                                        }}
                                                    >
                                                        <Star className="mr-2 h-4 w-4" />
                                                        {user.favorite ? 'Remove from favorites' : 'Add to favorites'}
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            handleEditUser(user);
                                                        }}
                                                    >
                                                        <Pencil className="mr-2 h-4 w-4" />
                                                        Edit
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            setUsers((prev) => prev.filter((u) => u.id !== user.id));
                                                        }}
                                                        className="text-destructive focus:text-destructive"
                                                    >
                                                        <Trash className="mr-2 h-4 w-4" />
                                                        Delete
                                                    </DropdownMenuItem>
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        </div>
                                    </div>

                                    <div className="flex flex-col text-xs text-muted-foreground">
                                        <div className="flex items-center gap-1">
                                            <Mail className="h-3 w-3" />
                                            <span className="truncate">{user.email}</span>
                                        </div>
                                        {/* <div className="flex items-baseline gap-2">
                                            <Button className="w-20 py-0" variant="outline" size={'sm'}>
                                                Mail
                                            </Button>
                                            <Button className="w-20" variant="outline" size={'sm'}>
                                                Message
                                            </Button>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}

export default UserAddOnSidebar;