import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@admin/components/ui/alert-dialog';
import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Button } from '@admin/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@admin/components/ui/table';
import { usersData } from '@admin/data/static';
import { User } from '@admin/types';
import { Link, router } from '@inertiajs/react';
import { Eye, MoreHorizontal, Pencil, Send, Trash } from 'lucide-react';
import { useState } from 'react';
import { SendEmailModal } from '../modals/sendEmailModal';
import { UserModal } from '../modals/UserModal';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
import { useModal } from '../ui/modal';
// import { usersData } from '@admin/data/static';

const RecentUserLists = () => {
    const [selectedUserForEmail, setSelectedUserForEmail] = useState<User | null>(null);
    const [selectedUserForEdit, setSelectedUserForEdit] = useState<User | null>(null);
    const { isOpen: isEmailModalOpen, openModal: openEmailModal, closeModal: closeEmailModal } = useModal();
    const { isOpen: isUserModalOpen, openModal: openUserModal, closeModal: closeUserModal } = useModal();

    const handleDeleteUser = (userId: number | string) => {
        // router.delete(route('users.destroy', userId));

        console.log('🚀 ~ handleDeleteUser ~ userId:', userId);
    };

    const handleSendEmail = (user: User) => {
        setSelectedUserForEmail(user);
        openEmailModal();
    };

    const handleEditUser = (user: User) => {
        setSelectedUserForEdit(user);
        openUserModal();
    };

    const handleRowClick = (user: User) => {
        // router.visit(route('users.show', user.id));
    };
    const tableData = usersData.map((u) => ({
        ...u,
        email_verified_at: (u as any).email_verified_at || null,
        created_at: (u as any).created_at || null,
        updated_at: (u as any).updated_at || null,
    }));

    return (
        <div className="h-full">
            <Card className="flex h-full w-full flex-col px-0">
                <CardHeader className="mb-4 border-b px-5 pb-4">
                    <div className="flex items-start justify-between">
                        <div>
                            <CardTitle className="text-lg font-semibold">Recent Users</CardTitle>
                            <CardDescription className="text-text-gray">Shows the list of user recently added to the system</CardDescription>
                        </div>
                    </div>
                </CardHeader>
                <CardContent className="flex-grow px-0">
                    <div className="h-full">
                        <div className="h-full w-full">
                            <div className="h-full overflow-x-auto">
                                <Table className="min-w-full">
                                    <TableHeader className="bg-card">
                                        <TableRow className="border-b">
                                            <TableHead className="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
                                                Avatar
                                            </TableHead>
                                            <TableHead className="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
                                                Name
                                            </TableHead>
                                            <TableHead className="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
                                                Email
                                            </TableHead>
                                            <TableHead className="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase">
                                                Phone
                                            </TableHead>
                                            <TableHead className="px-4 py-3 text-left text-right text-xs font-medium tracking-wider text-gray-500 uppercase">
                                                Actions
                                            </TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody className="divide divide-y bg-card">
                                        {tableData.length ? (
                                            tableData.map((user) => (
                                                <TableRow
                                                    key={user.id}
                                                    className={`cursor-pointer transition-colors hover:bg-gray-50`}
                                                    onClick={(e) => {
                                                        // Don't navigate when clicking interactive controls
                                                        if (
                                                            e.target instanceof HTMLElement &&
                                                            (e.target.closest('button') ||
                                                                e.target.closest('a') ||
                                                                e.target.closest('[role="checkbox"]') ||
                                                                e.target.closest('.dropdown-menu'))
                                                        ) {
                                                            return;
                                                        }
                                                        handleRowClick(user as unknown as User);
                                                    }}
                                                >
                                                    <TableCell className="px-4 py-4">
                                                        <div className="flex items-center gap-3">
                                                            <Avatar className="h-10 w-10">
                                                                <AvatarImage src={user.avatar} />
                                                                <AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>
                                                            </Avatar>
                                                        </div>
                                                    </TableCell>
                                                    <TableCell className="px-4 py-4">
                                                        <div className="text-sm font-semibold">{user.name}</div>
                                                    </TableCell>
                                                    <TableCell className="px-4 py-4">
                                                        <div className="text-sm break-all text-muted-foreground">{user.email}</div>
                                                    </TableCell>
                                                    <TableCell className="px-4 py-4">
                                                        <div className="text-sm">{user.phone}</div>
                                                    </TableCell>
                                                    <TableCell className="px-4 py-4">
                                                        <div className="flex justify-end">
                                                            <DropdownMenu>
                                                                <DropdownMenuTrigger asChild>
                                                                    <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
                                                                        <span className="sr-only">Open menu</span>
                                                                        <MoreHorizontal className="h-4 w-4" />
                                                                    </Button>
                                                                </DropdownMenuTrigger>
                                                                <DropdownMenuContent align="end" className="w-48">
                                                                    <DropdownMenuItem asChild>
                                                                        <Link href={route('users.show', user.id)} className="flex items-center">
                                                                            <Eye className="mr-2 h-4 w-4 text-blue-500" />
                                                                            View Details
                                                                        </Link>
                                                                    </DropdownMenuItem>
                                                                    <DropdownMenuItem
                                                                        className="flex cursor-pointer items-center"
                                                                        onClick={() => handleEditUser?.(user as unknown as User)}
                                                                    >
                                                                        <Pencil className="mr-2 h-4 w-4 text-success" />
                                                                        Edit User
                                                                    </DropdownMenuItem>
                                                                    <DropdownMenuItem
                                                                        className="flex cursor-pointer items-center"
                                                                        onClick={() => handleSendEmail?.(user as unknown as User)}
                                                                    >
                                                                        <Send className="mr-2 h-4 w-4 text-blue-500" />
                                                                        Send Email
                                                                    </DropdownMenuItem>
                                                                    <DropdownMenuSeparator />

                                                                    <AlertDialog>
                                                                        <AlertDialogTrigger asChild>
                                                                            <DropdownMenuItem
                                                                                className="flex items-center text-red-600 focus:bg-red-50 focus:text-red-600"
                                                                                onSelect={(e) => e.preventDefault()}
                                                                            >
                                                                                <Trash className="mr-2 h-4 w-4" />
                                                                                Delete User
                                                                            </DropdownMenuItem>
                                                                        </AlertDialogTrigger>
                                                                        <AlertDialogContent>
                                                                            <AlertDialogHeader>
                                                                                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                                                                                <AlertDialogDescription>
                                                                                    This action cannot be undone. This will permanently delete the
                                                                                    user "{user.name}".
                                                                                </AlertDialogDescription>
                                                                            </AlertDialogHeader>
                                                                            <AlertDialogFooter>
                                                                                <AlertDialogCancel>Cancel</AlertDialogCancel>
                                                                                <AlertDialogAction
                                                                                    onClick={() => handleDeleteUser(user.id)}
                                                                                    className="bg-red-600 hover:bg-red-700"
                                                                                >
                                                                                    Delete
                                                                                </AlertDialogAction>
                                                                            </AlertDialogFooter>
                                                                        </AlertDialogContent>
                                                                    </AlertDialog>
                                                                </DropdownMenuContent>
                                                            </DropdownMenu>
                                                        </div>
                                                    </TableCell>
                                                </TableRow>
                                            ))
                                        ) : (
                                            <TableRow>
                                                <TableCell colSpan={5} className="h-24 text-center text-gray-600">
                                                    No results.
                                                </TableCell>
                                            </TableRow>
                                        )}
                                    </TableBody>
                                </Table>
                            </div>
                        </div>
                    </div>
                </CardContent>
            </Card>
            <SendEmailModal
                open={isEmailModalOpen}
                onOpenChange={closeEmailModal}
                selectedUser={selectedUserForEmail}
                onSuccess={() => {
                    setSelectedUserForEmail(null);
                    // Optionally show a success message
                }}
            />
            <UserModal
                open={isUserModalOpen}
                onOpenChange={closeUserModal}
                user={selectedUserForEdit}
                roles={[
                    {
                        id: 1,
                        name: 'admin',
                        slug: 'admin',
                        access_level: null,
                        guard_name: 'web',
                        created_at: '2025-09-30T04:25:09.000000Z',
                        updated_at: '2025-09-30T04:25:09.000000Z',
                    },
                    {
                        id: 2,
                        name: 'user',
                        slug: 'user',
                        access_level: null,
                        guard_name: 'web',
                        created_at: '2025-09-30T04:25:09.000000Z',
                        updated_at: '2025-09-30T04:25:09.000000Z',
                    },
                ]}
                onSuccess={() => {
                    setSelectedUserForEdit(null);
                    router.reload();
                }}
            />
        </div>
    );
};

export default RecentUserLists;