import { Head, router, useForm, usePage } from '@inertiajs/react';
import {
    Edit2,
    KeyRound,
    Mail,
    Plus,
    Search,
    Shield,
    Trash2,
    UserCheck,
    UserCog,
    Users,
    X,
} from 'lucide-react';
import * as React from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import type { Column } from '@/components/ui/data-table';
import { DataTable } from '@/components/ui/data-table';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

interface WorkspaceUser {
    id: number;
    name: string;
    email: string;
    role: string;
    created_at: string;
}

interface PaginatedUsers {
    data: WorkspaceUser[];
    current_page: number;
    last_page: number;
    total: number;
}

interface UsersIndexProps {
    users: PaginatedUsers;
    filters: {
        search?: string;
    };
}

export default function UsersIndex({ users, filters }: UsersIndexProps) {
    const page = usePage();
    const currentUser = (page.props.auth as any)?.user;
    const isCurrentUserOwner = currentUser?.role === 'client' || currentUser?.role === 'owner';

    const [search, setSearch] = React.useState(filters.search || '');
    const [addEditOpen, setAddEditOpen] = React.useState(false);
    const [editingUser, setEditingUser] = React.useState<WorkspaceUser | null>(null);

    const form = useForm({
        name: '',
        email: '',
        password: '',
        role: isCurrentUserOwner ? 'client' : 'staff',
    });

    React.useEffect(() => {
        if (editingUser) {
            form.setData({
                name: editingUser.name,
                email: editingUser.email,
                password: '',
                role: editingUser.role,
            });
        } else {
            form.setData({
                name: '',
                email: '',
                password: '',
                role: isCurrentUserOwner ? 'client' : 'staff',
            });
        }
        form.clearErrors();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [editingUser, addEditOpen]);

    const handleSearchSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        router.get(
            '/dashboard/users',
            { search: search || undefined },
            { preserveState: true },
        );
    };

    const handleSaveUser = (e: React.FormEvent) => {
        e.preventDefault();

        if (editingUser) {
            form.put(`/dashboard/users/${editingUser.id}`, {
                onSuccess: () => {
                    toast.success('Pengguna berhasil diperbarui!');
                    setAddEditOpen(false);
                    setEditingUser(null);
                },
            });
        } else {
            form.post('/dashboard/users', {
                onSuccess: () => {
                    toast.success('Pengguna baru berhasil ditambahkan!');
                    setAddEditOpen(false);
                },
            });
        }
    };

    const handleDeleteUser = (user: WorkspaceUser) => {
        if (user.id === currentUser?.id) {
            toast.error('Anda tidak dapat menghapus akun Anda sendiri.');
            return;
        }

        if (
            confirm(
                `Apakah Anda yakin ingin menghapus pengguna "${user.name}" (${user.email}) dari workspace?`,
            )
        ) {
            router.delete(`/dashboard/users/${user.id}`, {
                onSuccess: () => {
                    toast.success('Pengguna berhasil dihapus.');
                },
            });
        }
    };

    const columns: Column<WorkspaceUser>[] = [
        {
            header: 'Pengguna',
            accessorKey: 'name',
            className: 'font-semibold',
            cell: (row) => (
                <div className="flex items-center gap-3 text-left">
                    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300">
                        <span className="text-xs font-bold uppercase">
                            {row.name.substring(0, 2)}
                        </span>
                    </div>
                    <div className="flex flex-col">
                        <div className="flex items-center gap-2">
                            <span className="font-semibold text-foreground">
                                {row.name}
                            </span>
                            {row.id === currentUser?.id && (
                                <span className="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
                                    Anda
                                </span>
                            )}
                        </div>
                        <span className="flex items-center gap-1 text-xs text-muted-foreground">
                            <Mail className="h-3 w-3" />
                            {row.email}
                        </span>
                    </div>
                </div>
            ),
        },
        {
            header: 'Peran (Role)',
            accessorKey: 'role',
            cell: (row) => {
                const isOwner = row.role === 'client' || row.role === 'owner';
                const isAdmin = row.role === 'admin';
                return (
                    <div className="flex items-center gap-1.5">
                        <Shield className={`h-3.5 w-3.5 ${isOwner ? 'text-amber-500' : isAdmin ? 'text-indigo-500' : 'text-zinc-400'}`} />
                        <span className="font-medium text-xs capitalize text-foreground/90">
                            {isOwner ? 'Owner / Workspace Client' : isAdmin ? 'Administrator' : 'Staff / Operator'}
                        </span>
                    </div>
                );
            },
        },
        {
            header: 'Terdaftar',
            accessorKey: 'created_at',
            className: 'text-xs text-muted-foreground font-mono',
        },
        {
            header: 'Aksi',
            className: 'text-right',
            cell: (row) => {
                const isRowOwner = row.role === 'client' || row.role === 'owner';
                const canManageRow = isCurrentUserOwner || !isRowOwner;

                return (
                    <div className="flex justify-end gap-1">
                        <Button
                            size="sm"
                            variant="ghost"
                            className="h-8 w-8 p-0 hover:bg-zinc-100 dark:hover:bg-zinc-800 disabled:opacity-30"
                            title={!canManageRow ? 'Admin tidak dapat mengubah data akun Owner' : 'Ubah data pengguna'}
                            disabled={!canManageRow}
                            onClick={() => {
                                setEditingUser(row);
                                setAddEditOpen(true);
                            }}
                        >
                            <Edit2 className="h-4 w-4 text-zinc-500" />
                        </Button>
                        <Button
                            size="sm"
                            variant="ghost"
                            className="h-8 w-8 p-0 text-rose-600 hover:bg-rose-50 hover:text-rose-700 disabled:opacity-30 dark:hover:bg-rose-950/20"
                            title={
                                row.id === currentUser?.id
                                    ? 'Tidak dapat menghapus akun sendiri'
                                    : !canManageRow
                                      ? 'Admin tidak dapat menghapus akun Owner'
                                      : 'Hapus pengguna'
                            }
                            disabled={row.id === currentUser?.id || !canManageRow}
                            onClick={() => handleDeleteUser(row)}
                        >
                            <Trash2 className="h-4 w-4" />
                        </Button>
                    </div>
                );
            },
        },
    ];

    return (
        <>
            <Head title="Manajemen Pengguna" />

            <div className="flex flex-col gap-6 text-left">
                {/* Header Section */}
                <div className="flex flex-col gap-4 border-b pb-5 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <div className="flex items-center gap-2 text-xs font-bold tracking-widest text-primary uppercase">
                            <UserCog className="h-4 w-4" />
                            <span>Akses Workspace</span>
                        </div>
                        <h1 className="mt-2 text-2xl font-black tracking-tight text-zinc-950 dark:text-white">
                            Manajemen Pengguna & Tim
                        </h1>
                        <p className="mt-1 text-sm text-muted-foreground">
                            Kelola hak akses anggota tim yang dapat masuk dan mengoperasikan workspace proyek ini.
                        </p>
                    </div>

                    <div className="flex gap-2 self-start sm:self-auto">
                        <Button
                            className="gap-2 bg-emerald-600 text-white hover:bg-emerald-700"
                            onClick={() => {
                                setEditingUser(null);
                                setAddEditOpen(true);
                            }}
                        >
                            <Plus className="h-4 w-4" />
                            <span>Tambah Pengguna</span>
                        </Button>
                    </div>
                </div>

                {/* Filter and Search */}
                <form
                    onSubmit={handleSearchSubmit}
                    className="flex flex-col gap-3 sm:flex-row"
                >
                    <div className="relative flex-1">
                        <Search className="absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" />
                        <Input
                            placeholder="Cari berdasarkan nama atau alamat email pengguna..."
                            className="pl-9"
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                    </div>

                    <Button
                        type="submit"
                        variant="secondary"
                        className="gap-1.5"
                    >
                        Cari
                    </Button>

                    {search && (
                        <Button
                            type="button"
                            variant="ghost"
                            className="gap-1 px-2"
                            onClick={() => {
                                setSearch('');
                                router.get(
                                    '/dashboard/users',
                                    {},
                                    { preserveState: true },
                                );
                            }}
                        >
                            <X className="h-4 w-4" />
                            <span>Reset</span>
                        </Button>
                    )}
                </form>

                {/* Users Table */}
                <Card className="overflow-hidden p-0">
                    <DataTable
                        columns={columns}
                        data={users.data}
                        pagination={{
                            currentPage: users.current_page,
                            lastPage: users.last_page,
                            total: users.total,
                            onPageChange: (page) => {
                                router.get(
                                    '/dashboard/users',
                                    { page, search: search || undefined },
                                    { preserveState: true },
                                );
                            },
                        }}
                        emptyMessage="Belum ada pengguna lain di workspace ini. Klik 'Tambah Pengguna' untuk menambahkan anggota tim."
                    />
                </Card>
            </div>

            {/* Modal Add / Edit User */}
            <Dialog open={addEditOpen} onOpenChange={setAddEditOpen}>
                <DialogContent className="sm:max-w-[480px]">
                    <DialogHeader>
                        <DialogTitle>
                            {editingUser
                                ? 'Ubah Informasi Pengguna'
                                : 'Tambah Pengguna Baru'}
                        </DialogTitle>
                        <DialogDescription>
                            {editingUser
                                ? 'Perbarui informasi profil dan peran akses pengguna dalam workspace ini.'
                                : 'Berikan kredensial akses untuk anggota tim yang akan bergabung ke workspace ini.'}
                        </DialogDescription>
                    </DialogHeader>

                    <form
                        onSubmit={handleSaveUser}
                        className="space-y-4 py-2 text-left"
                    >
                        <div className="grid gap-2">
                            <Label htmlFor="user-name">Nama Lengkap *</Label>
                            <Input
                                id="user-name"
                                required
                                value={form.data.name}
                                onChange={(e) => form.setData('name', e.target.value)}
                                placeholder="Contoh: Ahmad Fauzi"
                            />
                            {form.errors.name && (
                                <p className="text-xs text-rose-500">
                                    {form.errors.name}
                                </p>
                            )}
                        </div>

                        <div className="grid gap-2">
                            <Label htmlFor="user-email">Alamat Email *</Label>
                            <Input
                                id="user-email"
                                type="email"
                                required
                                value={form.data.email}
                                onChange={(e) => form.setData('email', e.target.value)}
                                placeholder="nama@perusahaan.com"
                            />
                            {form.errors.email && (
                                <p className="text-xs text-rose-500">
                                    {form.errors.email}
                                </p>
                            )}
                        </div>

                        <div className="grid gap-2">
                            <Label htmlFor="user-role">Peran & Hak Akses *</Label>
                            <Select
                                value={form.data.role}
                                onValueChange={(val) => form.setData('role', val)}
                            >
                                <SelectTrigger id="user-role">
                                    <SelectValue placeholder="Pilih peran pengguna" />
                                </SelectTrigger>
                                <SelectContent>
                                    {isCurrentUserOwner && (
                                        <SelectItem value="client">
                                            Owner / Workspace Client (Akses Penuh)
                                        </SelectItem>
                                    )}
                                    <SelectItem value="admin">
                                        Administrator
                                    </SelectItem>
                                    <SelectItem value="staff">
                                        Staff / Operator
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                            {form.errors.role && (
                                <p className="text-xs text-rose-500">
                                    {form.errors.role}
                                </p>
                            )}
                        </div>

                        <div className="grid gap-2">
                            <Label htmlFor="user-password">
                                {editingUser
                                    ? 'Kata Sandi Baru (Kosongkan jika tidak diubah)'
                                    : 'Kata Sandi *'}
                            </Label>
                            <Input
                                id="user-password"
                                type="password"
                                required={!editingUser}
                                value={form.data.password}
                                onChange={(e) => form.setData('password', e.target.value)}
                                placeholder={
                                    editingUser
                                        ? 'Minimal 8 karakter (opsional)'
                                        : 'Minimal 8 karakter'
                                }
                            />
                            {form.errors.password && (
                                <p className="text-xs text-rose-500">
                                    {form.errors.password}
                                </p>
                            )}
                        </div>

                        <DialogFooter className="pt-3">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setAddEditOpen(false)}
                            >
                                Batal
                            </Button>
                            <Button
                                type="submit"
                                disabled={form.processing}
                                className="bg-emerald-600 text-white hover:bg-emerald-700"
                            >
                                {form.processing
                                    ? 'Menyimpan...'
                                    : editingUser
                                      ? 'Perbarui Pengguna'
                                      : 'Tambah Pengguna'}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
}

UsersIndex.layout = (page: any) => page;