import usersRoutes from '@/actions/App/Http/Controllers/UserController';
import { Button } from '@/components/ui/button';
import { DataTable } from '@/components/ui/data-table';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
} from '@/components/ui/input-group';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { StatusBadge } from '@/components/ui/status-badge';
import { usePermissions } from '@/hooks/use-permissions';
import AppLayout from '@/layouts/app-layout';
import { useFilterParams } from '@/lib/hooks/useFilterParams';
import { toastError, toastLoading, toastSuccess } from '@/lib/toast';
import type {
    Branch,
    BreadcrumbItem,
    PaginatedData,
    User,
    UserFilters,
} from '@/types';
import { Head, router, useForm } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import {
    Activity,
    Edit2,
    MoreHorizontal,
    Plus,
    SearchIcon,
    Trash2,
} from 'lucide-react';
import { useState } from 'react';

interface PageProps {
    users: PaginatedData<User>;
    branches: Branch[];
    roles: Array<{ id: number; name: string }>;
    filters: UserFilters;
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Pengguna',
        href: usersRoutes.index().url,
    },
];

export default function Index({ users, branches, roles, filters }: PageProps) {
    const { can } = usePermissions();
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [showEditModal, setShowEditModal] = useState(false);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [showActivityModal, setShowActivityModal] = useState(false);
    const [selectedUser, setSelectedUser] = useState<User | null>(null);

    // Use filter params hook
    const { updatePage, search } = useFilterParams({
        baseUrl: usersRoutes.index().url,
    });

    const goToNextPage = () => updatePage(users.current_page + 1);
    const goToPrevPage = () => updatePage(users.current_page - 1);

    // Create form
    const createForm = useForm({
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
        phone: '',
        branch_id: '',
        role: '',
    });

    const handleSubmitCreate = (e: React.SubmitEvent) => {
        e.preventDefault();
        createForm.post(usersRoutes.store().url, {
            onStart: () => toastLoading('Menyimpan pengguna...'),
            onSuccess: () => {
                toastSuccess('Pengguna berhasil ditambahkan');
                setShowCreateModal(false);
                createForm.reset();
            },
            onError: (errors) => {
                console.log(errors);
                toastError('Gagal menyimpan pengguna');
            },
        });
    };

    // Edit form
    const editForm = useForm({
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
        phone: '',
        branch_id: '',
        role: '',
    });

    const handleEditUser = (user: User) => {
        setSelectedUser(user);
        editForm.setData({
            name: user.name,
            email: user.email,
            password: '',
            password_confirmation: '',
            phone: user.phone || '',
            branch_id: user.branch_id ? user.branch_id.toString() : '',
            role: user.role,
        });
        setShowEditModal(true);
    };

    const handleSubmitEdit = (e: React.FormEvent) => {
        e.preventDefault();
        if (!selectedUser) return;

        editForm.put(usersRoutes.update({ user: selectedUser.id }).url, {
            onStart: () => toastLoading('Memperbarui pengguna...'),
            onSuccess: () => {
                toastSuccess('Pengguna berhasil diperbarui');
                setShowEditModal(false);
                setSelectedUser(null);
                editForm.reset();
            },
            onError: () => toastError('Gagal memperbarui pengguna'),
        });
    };

    // Delete
    const handleDeleteUser = (user: User) => {
        setSelectedUser(user);
        setShowDeleteModal(true);
    };

    const handleConfirmDelete = () => {
        if (!selectedUser) return;

        router.delete(usersRoutes.destroy({ user: selectedUser.id }).url, {
            onStart: () => toastLoading('Menghapus pengguna...'),
            onSuccess: () => {
                toastSuccess('Pengguna berhasil dihapus');
                setShowDeleteModal(false);
                setSelectedUser(null);
            },
            onError: () => toastError('Gagal menghapus pengguna'),
        });
    };

    // Activity Log
    const handleViewActivity = (user: User) => {
        setSelectedUser(user);
        setShowActivityModal(true);
    };

    const columns: ColumnDef<User>[] = [
        {
            accessorKey: 'name',
            header: 'Nama',
            cell: ({ row }) => (
                <span className="font-medium">{row.getValue('name')}</span>
            ),
        },
        {
            accessorKey: 'email',
            header: 'Email',
            cell: ({ row }) => row.getValue('email'),
        },
        {
            accessorKey: 'role',
            header: 'Role',
            cell: ({ row }) => {
                const role = row.getValue('role');
                let badgeVariant: 'default' | 'secondary' | 'destructive' =
                    'default';

                switch (role) {
                    case 'Administrator':
                        badgeVariant = 'destructive';
                        break;
                    case 'Manager':
                        badgeVariant = 'secondary';
                        break;
                    default:
                        badgeVariant = 'default';
                }

                return (
                    <span
                        className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
                            badgeVariant === 'destructive'
                                ? 'bg-destructive text-destructive-foreground'
                                : badgeVariant === 'secondary'
                                  ? 'bg-secondary text-secondary-foreground'
                                  : 'bg-primary/10 text-primary'
                        }`}
                    >
                        {row.getValue('role')}
                    </span>
                );
            },
        },
        {
            accessorKey: 'branch.name',
            header: 'Cabang',
            cell: ({ row }) => row.original.branch?.name || '-',
        },
        {
            accessorKey: 'phone',
            header: 'Telepon',
            cell: ({ row }) => row.getValue('phone') || '-',
        },
        {
            accessorKey: 'email_verified_at',
            header: 'Status',
            cell: ({ row }) => (
                <StatusBadge
                    type="user"
                    status={
                        row.getValue('email_verified_at')
                            ? 'active'
                            : 'inactive'
                    }
                />
            ),
        },
        {
            id: 'actions',
            cell: ({ row }) => {
                const user = row.original;

                return (
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Buka menu</span>
                                <MoreHorizontal className="h-4 w-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            {can('users.update') && (
                                <DropdownMenuItem
                                    onClick={() => handleEditUser(user)}
                                >
                                    <Edit2 className="mr-2 h-4 w-4" />
                                    Edit
                                </DropdownMenuItem>
                            )}
                            <DropdownMenuItem
                                onClick={() => handleViewActivity(user)}
                            >
                                <Activity className="mr-2 h-4 w-4" />
                                Riwayat Aktivitas
                            </DropdownMenuItem>
                            {can('users.delete') && (
                                <DropdownMenuItem
                                    className="text-destructive"
                                    onClick={() => handleDeleteUser(user)}
                                >
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    Hapus
                                </DropdownMenuItem>
                            )}
                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Pengguna" />

            <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="flex flex-col gap-1">
                        <h1 className="text-2xl font-black">
                            Manajemen Pengguna
                        </h1>
                        <span className="text-sm text-muted-foreground">
                            Kelola akun pengguna sistem dan akses mereka.
                        </span>
                    </div>
                    {can('users.create') && (
                        <Button onClick={() => setShowCreateModal(true)}>
                            <Plus className="mr-2 h-4 w-4" />
                            Tambah Pengguna
                        </Button>
                    )}
                </div>

                {/* Search */}
                <div className="flex flex-col gap-4 md:flex-row md:gap-4">
                    <div className="flex w-full md:w-1/2">
                        <InputGroup className="max-w-md flex-1">
                            <InputGroupInput
                                id="search"
                                placeholder="Cari berdasarkan nama atau email..."
                                defaultValue={filters.search}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter') {
                                        search(e.currentTarget.value);
                                    }
                                }}
                                onBlur={(e) => search(e.currentTarget.value)}
                            />
                            <InputGroupAddon align="inline-start">
                                <SearchIcon className="h-4 w-4" />
                            </InputGroupAddon>
                        </InputGroup>
                    </div>
                </div>

                {/* Table */}
                <DataTable
                    columns={columns}
                    data={users.data}
                    pagination={{
                        currentPage: users.current_page,
                        lastPage: users.last_page,
                        onNext: goToNextPage,
                        onPrev: goToPrevPage,
                    }}
                />
            </div>

            {/* Create Modal */}
            <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
                <DialogContent className="max-w-2xl">
                    <DialogHeader>
                        <DialogTitle>Tambah Pengguna Baru</DialogTitle>
                        <DialogDescription>
                            Isi data pengguna yang akan ditambahkan.
                        </DialogDescription>
                    </DialogHeader>
                    <form onSubmit={handleSubmitCreate}>
                        <div className="grid gap-4 py-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="name">Nama *</Label>
                                    <input
                                        id="name"
                                        name="name"
                                        type="text"
                                        value={createForm.data.name}
                                        onChange={(e) =>
                                            createForm.setData(
                                                'name',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Nama lengkap"
                                    />
                                    {createForm.errors.name && (
                                        <p className="text-sm text-destructive">
                                            {createForm.errors.name}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="email">Email *</Label>
                                    <input
                                        id="email"
                                        name="email"
                                        type="email"
                                        value={createForm.data.email}
                                        onChange={(e) =>
                                            createForm.setData(
                                                'email',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="email@contoh.com"
                                    />
                                    {createForm.errors.email && (
                                        <p className="text-sm text-destructive">
                                            {createForm.errors.email}
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="password">Password *</Label>
                                    <input
                                        id="password"
                                        name="password"
                                        type="password"
                                        value={createForm.data.password}
                                        onChange={(e) =>
                                            createForm.setData(
                                                'password',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Minimal 8 karakter"
                                    />
                                    {createForm.errors.password && (
                                        <p className="text-sm text-destructive">
                                            {createForm.errors.password}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="password_confirmation">
                                        Konfirmasi Password *
                                    </Label>
                                    <input
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        type="password"
                                        value={
                                            createForm.data
                                                .password_confirmation
                                        }
                                        onChange={(e) =>
                                            createForm.setData(
                                                'password_confirmation',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Ulangi password"
                                    />
                                    {createForm.errors
                                        .password_confirmation && (
                                        <p className="text-sm text-destructive">
                                            {
                                                createForm.errors
                                                    .password_confirmation
                                            }
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="phone">Telepon</Label>
                                    <input
                                        id="phone"
                                        name="phone"
                                        type="text"
                                        value={createForm.data.phone}
                                        onChange={(e) =>
                                            createForm.setData(
                                                'phone',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Contoh: 081234567890"
                                    />
                                    {createForm.errors.phone && (
                                        <p className="text-sm text-destructive">
                                            {createForm.errors.phone}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="branch_id">Cabang</Label>
                                    <Select
                                        value={
                                            createForm.data.branch_id as string
                                        }
                                        onValueChange={(value) =>
                                            createForm.setData(
                                                'branch_id',
                                                value,
                                            )
                                        }
                                    >
                                        <SelectTrigger className="w-full">
                                            <SelectValue placeholder="Pilih cabang" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectGroup>
                                                <SelectLabel>
                                                    Cabang
                                                </SelectLabel>
                                                {branches.map((branch) => (
                                                    <SelectItem
                                                        key={branch.id}
                                                        value={branch.id.toString()}
                                                    >
                                                        {branch.name}
                                                    </SelectItem>
                                                ))}
                                            </SelectGroup>
                                        </SelectContent>
                                    </Select>
                                    {createForm.errors.branch_id && (
                                        <p className="text-sm text-destructive">
                                            {createForm.errors.branch_id}
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="role">Role *</Label>
                                <Select
                                    value={createForm.data.role}
                                    onValueChange={(value) =>
                                        createForm.setData('role', value)
                                    }
                                >
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Pilih role" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectLabel>Role</SelectLabel>
                                            {roles.map((role) => (
                                                <SelectItem
                                                    key={role.id}
                                                    value={role.name}
                                                >
                                                    {role.name}
                                                </SelectItem>
                                            ))}
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                                {createForm.errors.role && (
                                    <p className="text-sm text-destructive">
                                        {createForm.errors.role}
                                    </p>
                                )}
                            </div>
                        </div>
                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => {
                                    setShowCreateModal(false);
                                    createForm.reset();
                                }}
                                disabled={createForm.processing}
                            >
                                Batal
                            </Button>
                            <Button
                                type="submit"
                                disabled={createForm.processing}
                            >
                                {createForm.processing
                                    ? 'Menyimpan...'
                                    : 'Simpan'}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>

            {/* Edit Modal */}
            <Dialog open={showEditModal} onOpenChange={setShowEditModal}>
                <DialogContent className="max-w-2xl">
                    <DialogHeader>
                        <DialogTitle>Edit Pengguna</DialogTitle>
                        <DialogDescription>
                            Perbarui data pengguna.
                        </DialogDescription>
                    </DialogHeader>
                    <form onSubmit={handleSubmitEdit}>
                        <div className="grid gap-4 py-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="edit_name">Nama *</Label>
                                    <input
                                        id="edit_name"
                                        name="name"
                                        type="text"
                                        value={editForm.data.name}
                                        onChange={(e) =>
                                            editForm.setData(
                                                'name',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Nama lengkap"
                                    />
                                    {editForm.errors.name && (
                                        <p className="text-sm text-destructive">
                                            {editForm.errors.name}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="edit_email">Email *</Label>
                                    <input
                                        id="edit_email"
                                        name="email"
                                        type="email"
                                        value={editForm.data.email}
                                        onChange={(e) =>
                                            editForm.setData(
                                                'email',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="email@contoh.com"
                                    />
                                    {editForm.errors.email && (
                                        <p className="text-sm text-destructive">
                                            {editForm.errors.email}
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="edit_password">
                                        Password
                                    </Label>
                                    <input
                                        id="edit_password"
                                        name="password"
                                        type="password"
                                        value={editForm.data.password}
                                        onChange={(e) =>
                                            editForm.setData(
                                                'password',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Biarkan kosong jika tidak ingin diubah"
                                    />
                                    {editForm.errors.password && (
                                        <p className="text-sm text-destructive">
                                            {editForm.errors.password}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="edit_password_confirmation">
                                        Konfirmasi Password
                                    </Label>
                                    <input
                                        id="edit_password_confirmation"
                                        name="password_confirmation"
                                        type="password"
                                        value={
                                            editForm.data.password_confirmation
                                        }
                                        onChange={(e) =>
                                            editForm.setData(
                                                'password_confirmation',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Ulangi password"
                                    />
                                    {editForm.errors.password_confirmation && (
                                        <p className="text-sm text-destructive">
                                            {
                                                editForm.errors
                                                    .password_confirmation
                                            }
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="edit_phone">Telepon</Label>
                                    <input
                                        id="edit_phone"
                                        name="phone"
                                        type="text"
                                        value={editForm.data.phone}
                                        onChange={(e) =>
                                            editForm.setData(
                                                'phone',
                                                e.target.value,
                                            )
                                        }
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                                        placeholder="Contoh: 081234567890"
                                    />
                                    {editForm.errors.phone && (
                                        <p className="text-sm text-destructive">
                                            {editForm.errors.phone}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="edit_branch_id">
                                        Cabang
                                    </Label>
                                    <Select
                                        value={
                                            editForm.data.branch_id as string
                                        }
                                        onValueChange={(value) =>
                                            editForm.setData('branch_id', value)
                                        }
                                    >
                                        <SelectTrigger className="w-full">
                                            <SelectValue placeholder="Pilih cabang" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectGroup>
                                                <SelectLabel>
                                                    Cabang
                                                </SelectLabel>
                                                {branches.map((branch) => (
                                                    <SelectItem
                                                        key={branch.id}
                                                        value={branch.id.toString()}
                                                    >
                                                        {branch.name}
                                                    </SelectItem>
                                                ))}
                                            </SelectGroup>
                                        </SelectContent>
                                    </Select>
                                    {editForm.errors.branch_id && (
                                        <p className="text-sm text-destructive">
                                            {editForm.errors.branch_id}
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="edit_role">Role *</Label>
                                <Select
                                    value={editForm.data.role}
                                    onValueChange={(value) =>
                                        editForm.setData('role', value)
                                    }
                                >
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Pilih role" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectLabel>Role</SelectLabel>
                                            {roles.map((role) => (
                                                <SelectItem
                                                    key={role.id}
                                                    value={role.name}
                                                >
                                                    {role.name}
                                                </SelectItem>
                                            ))}
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                                {editForm.errors.role && (
                                    <p className="text-sm text-destructive">
                                        {editForm.errors.role}
                                    </p>
                                )}
                            </div>
                        </div>
                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => {
                                    setShowEditModal(false);
                                    setSelectedUser(null);
                                    editForm.reset();
                                }}
                            >
                                Batal
                            </Button>
                            <Button
                                type="submit"
                                disabled={editForm.processing}
                            >
                                {editForm.processing
                                    ? 'Menyimpan...'
                                    : 'Simpan'}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>

            {/* Delete Modal */}
            <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Hapus Pengguna</DialogTitle>
                        <DialogDescription>
                            Apakah Anda yakin ingin menghapus pengguna ini?
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setShowDeleteModal(false)}
                        >
                            Batal
                        </Button>
                        <Button
                            variant="destructive"
                            onClick={handleConfirmDelete}
                        >
                            Hapus
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            {/* Activity Log Modal */}
            <Dialog
                open={showActivityModal}
                onOpenChange={setShowActivityModal}
            >
                <DialogContent className="max-w-2xl">
                    <DialogHeader>
                        <DialogTitle>Riwayat Aktivitas Pengguna</DialogTitle>
                        <DialogDescription>
                            Menampilkan riwayat aktivitas untuk pengguna.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="py-4">
                        <div className="flex flex-col items-center justify-center space-y-4 py-8 text-center">
                            <Activity className="h-12 w-12 text-muted-foreground" />
                            <h3 className="text-lg font-semibold">
                                Fitur Riwayat Aktivitas
                            </h3>
                            <p className="text-sm text-muted-foreground">
                                Fitur ini akan segera tersedia. Saat ini Anda
                                dapat melihat riwayat aktivitas di log sistem.
                            </p>
                        </div>
                    </div>
                    <DialogFooter>
                        <Button onClick={() => setShowActivityModal(false)}>
                            Tutup
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </AppLayout>
    );
}