import { ColumnDef } from "@tanstack/react-table";
import { UserActionsMenu } from "../components/UserActionsMenu";
import { UserStatusBadge } from "../components/UserStatusBadge";
import { AdminUser } from "../../../../../hooks/features/admin/users/useUsersFetch";
import { convertDateStringToDate } from "../../../../../utils/helper";
import { UserImage } from "../../../../ui/CustomImage";

export const userColumns: ColumnDef<AdminUser>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => {
      const user = row.original;

      return (
        <div className="flex items-center gap-3">
          {user.profilePicture ? (
            <div className="h-8 w-8 overflow-hidden rounded-full shrink-0">
              <UserImage
                src={user.profilePicture}
                alt={user.name}
                className="h-full w-full object-cover"
              />
            </div>
          ) : (
            <div className="flex h-8 w-8 min-w-8 items-center justify-center rounded-full bg-slate-200 text-xs font-bold text-slate-700">
              {user.name.charAt(0).toUpperCase()}
            </div>
          )}
          <span className="font-medium text-slate-900">{user.name}</span>
        </div>
      );
    },
  },

  {
    accessorKey: "email",
    header: "Email",
    enableSorting: true,
    cell: ({ row }) => <span className="">{row.original.email}</span>,
  },

  {
    accessorKey: "phone",
    header: "Phone Number",
    cell: ({ row }) => (
      <span className="">
        {row.original.dialCode} {row.original.mobileNumber}
      </span>
    ),
  },

  {
    accessorKey: "registeredOn",
    header: "Registered On",
    cell: ({ row }) => (
      <span className="">
        {convertDateStringToDate(row.original.createdAt)}
      </span>
    ),
  },

  {
    accessorKey: "totalSpent",
    header: "Total Spent",
    cell: ({ row }) => <span className="">{row.original.totalSpent}</span>,
  },

  {
    accessorKey: "creditBalance",
    header: "Credit Balance",
    cell: ({ row }) => <span className="">{row.original.walletBalance}</span>,
  },

  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <UserStatusBadge
        status={row.original.isActive ? "Active" : "Inactive"}
        key={row.original.uuid}
      />
    ),
  },

  {
    id: "actions",
    header: "Actions",
    enableSorting: false,
    cell: ({ row }) => {
      const user = row.original;
      return <UserActionsMenu user={user} />;
    },
  },
];