import AddRank from '@/components/admin/user-management/add-rank';
import UpdateRank from '@/components/admin/user-management/update-rank';
import ConfirmDeleteButton from '@/components/common/confirm-delete-button';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { TableBar } from '@/components/common/table-bar';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useTableData } from '@/data/useTableData';
import { useCurrency } from '@/hooks/use-currency';
import { useInitials } from '@/hooks/use-initials';
import { Ranking } from '@/types';
import { getImageUrl } from '@/utils/getImageUrl';
import { SortingState } from '@tanstack/react-table';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const Rankings = () => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const { data, isLoading, refresh } =
    useTableData<Ranking[]>('/admin/rankings');

  const getInitials = useInitials();
  const { format } = useCurrency();
  const { t } = useTranslation();

  return (
    <>
      <PageHeading
        title={t('Manage Rankings')}
        description={t(
          'Create and manage ranking badges for user progression.',
        )}
      />
      <TableBar dateFilter={false} addButton={<AddRank refresh={refresh} />} />
      <DataTable
        data={data ?? []}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        structure={[
          {
            accessorKey: 'name',
            header: t('Name'),
            cell: ({ row }) => (
              <div className="flex items-center gap-2">
                <Avatar className="size-8 overflow-hidden rounded-full">
                  <AvatarImage
                    src={getImageUrl(row.original?.badge)}
                    alt={row.original?.badge}
                  />
                  <AvatarFallback className="rounded-lg bg-neutral-200 font-medium text-black dark:bg-neutral-700 dark:text-white">
                    {getInitials(row.original?.name)}
                  </AvatarFallback>
                </Avatar>
                <p>{row.original?.name}</p>
              </div>
            ),
          },
          {
            accessorKey: 'level',
            header: t('Level'),
            cell: ({ row }) => (
              <div>
                {t('Level')} {row.original?.level}
              </div>
            ),
          },
          {
            accessorKey: 'bonus',
            header: t('Bonus'),
            cell: ({ row }) => <div>{format(row.original?.bonus)}</div>,
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <UpdateRank
                  id={row.original?.id}
                  item={row.original}
                  refresh={refresh}
                />
                <ConfirmDeleteButton
                  url={`/api/admin/rankings/${row.original?.id}`}
                  onSuccess={refresh}
                  description={t('This will permanently delete this rank.')}
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

Rankings.title = 'Rankings';

export default Rankings;