import { DataTableColumnHeader } from '@/components/data-table-column-header';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { UserInfo } from '@/components/user-info';
import { usePermission } from '@/hooks/use-permission';
import userRoutes from '@/routes/user';
import type { User } from '@/types';
import { Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { KeyRound, Pencil, Trash2 } from 'lucide-react';

interface ColumnProps {
    onResetPassword: (user: User) => void;
    onDelete: (user: User) => void;
    onToggleStatus: (user: User) => void;
}

export const getColumns = ({ onResetPassword, onDelete, onToggleStatus }: ColumnProps): ColumnDef<User>[] => [
    {
        accessorKey: "name",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Nama dan Alamat Surel" />
        ),
        meta: { title: "Nama dan Alamat Surel" },
        cell: ({ row }) => {
            const user = row.original;

            return (
                <div className="flex items-center gap-3">
                    <UserInfo user={user} showEmail={true} />
                </div>
            );
        }
    },
    {
        accessorKey: "username",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Nama Pengguna" />
        ),
        meta: { title: "Nama Pengguna" },
    },
    {
        accessorFn: (row) => row.profile?.phone_number,
        id: "phone_number",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Nomor Telepon" />
        ),
        meta: { title: "Nomor Telepon" },
    },
    {
        accessorKey: "is_active",
        header: "Status",
        meta: { title: "Status" },
        cell: ({ row }) => {
            const user = row.original;
            const { hasPermission } = usePermission();

            return (
                <Switch
                    checked={user.is_active}
                    onCheckedChange={() => onToggleStatus(user)}
                    disabled={!hasPermission('ToggleStatus:User')}
                />
            );
        }
    },
    {
        id: "actions",
        header: "Aksi",
        cell: ({ row }) => {
            const user = row.original;
            const { hasPermission } = usePermission();

            return (
                <div className="flex items-center gap-2">
                    {hasPermission('ResetPassword:User') && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button
                                    variant="ghost"
                                    size="icon"
                                    className='text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:hover:bg-blue-950/20'
                                    onClick={() => onResetPassword(user)}
                                >
                                    <KeyRound className="size-4" />
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>Reset Kata Sandi</p>
                            </TooltipContent>
                        </Tooltip>
                    )}
                    {hasPermission('Edit:User') && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Link href={userRoutes.edit(user.id).url}>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className='text-yellow-600 hover:text-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-950/20'
                                    >
                                        <Pencil className="size-4" />
                                    </Button>
                                </Link>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>Ubah</p>
                            </TooltipContent>
                        </Tooltip>
                    )}
                    {hasPermission('Delete:User') && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button
                                    variant="ghost"
                                    size="icon"
                                    className='text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20'
                                    onClick={() => onDelete(user)}
                                >
                                    <Trash2 className="size-4" />
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>Hapus</p>
                            </TooltipContent>
                        </Tooltip>
                    )}
                </div>
            );
        },
        meta: { title: "Aksi" },
    },
];