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

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

export const getColumns = ({ onResetPassword, onDelete }: 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" },
    },
    {
        id: "actions",
        header: "Aksi",
        cell: ({ row }) => {
            const user = row.original;

            return (
                <div className="flex items-center gap-2">
                    <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>
                    <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>
                    <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" },
    },
];