import { m } from '@paraglide/messages';
import { CheckCircleIcon, XCircleIcon } from '@phosphor-icons/react';
import { ColumnDef } from '@tanstack/react-table';
import { formatters } from '@utils/formatters';
import { UserWithRole } from 'better-auth/plugins';
import RoleBadge from '../avatar/role-badge';
import BanUserAction from './ban-user-dialog';
import ChangeRoleAction from './change-role-dialog';
import EditUserAction from './edit-user-dialog';
import SetPasswordAction from './set-password-dialog';
import UnbanUserAction from './unban-user-dialog';

export const userColumns: ColumnDef<UserWithRole>[] = [
  {
    accessorKey: 'name',
    header: m.users_page_ui_table_header_name(),
    meta: {
      thClass: 'w-1/6',
      mLabel: m.users_page_ui_table_header_name(),
    },
  },
  {
    accessorKey: 'email',
    header: m.users_page_ui_table_header_email(),
    meta: {
      thClass: 'w-1/6',
      mLabel: m.users_page_ui_table_header_email(),
    },
  },
  {
    accessorKey: 'role',
    header: m.users_page_ui_table_header_role(),
    meta: {
      thClass: 'w-1/6',
      mLabel: m.users_page_ui_table_header_role(),
    },
    cell: ({ row }) => <RoleBadge type={row.original.role} />,
  },
  {
    accessorKey: 'banned',
    header: m.users_page_ui_table_header_banned(),
    meta: {
      thClass: 'w-1/6',
      mLabel: m.users_page_ui_table_header_banned(),
    },
    cell: ({ row }) =>
      row.original.banned ? (
        <CheckCircleIcon size={18} weight="fill" className="text-green-400" />
      ) : (
        <XCircleIcon size={18} weight="fill" className="text-red-400" />
      ),
  },
  {
    accessorKey: 'createdAt',
    header: m.users_page_ui_table_header_created_at(),
    meta: {
      thClass: 'w-1/6',
      mLabel: m.users_page_ui_table_header_created_at(),
    },
    cell: ({ row }) => {
      return formatters.dateTime(new Date(row.original.createdAt));
    },
  },
  {
    id: 'actions',
    meta: {
      thClass: 'w-1/6',
    },
    cell: ({ row }) => {
      return (
        <div className="flex justify-end gap-2 w-full">
          <EditUserAction data={row.original} />
          <SetPasswordAction data={row.original} />
          <ChangeRoleAction data={row.original} />
          {row.original.banned ? (
            <UnbanUserAction data={row.original} />
          ) : (
            <BanUserAction data={row.original} />
          )}
        </div>
      );
    },
  },
];
