import AddUser from '@/components/admin/user-management/add-user';
import UpdateStaff from '@/components/admin/user-management/update-staff';
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 { Badge } from '@/components/ui/badge';
import { useTableData } from '@/data/useTableData';
import { TRole } from '@/types/admin/staff-type';
import { SortingState } from '@tanstack/react-table';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const Staff = () => {
  const [page, setPage] = useState(1);
  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, meta, refresh } = useTableData(
    `/admin/staffs?page=${page}`,
  );
  const { data: roles, isLoading: rolesLoading } =
    useTableData<TRole[]>('/admin/roles');
  const { t } = useTranslation();

  return (
    <>
      <PageHeading
        title={t('Manage Staff')}
        description={t('Manage staff accounts and their assigned roles.')}
      />
      <TableBar
        dateFilter={false}
        addButton={<AddUser isStaff roles={roles ?? []} refresh={refresh} />}
      />
      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading || rolesLoading}
        pagination={meta}
        onPageChange={(p) => setPage(p)}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            cell: ({ row }) => String(row.original.id).padStart(2, '0'),
          },
          {
            accessorKey: 'first_name',
            header: t('Full name'),
            cell: ({ row }) => (
              <span>
                {[row.original?.first_name, row.original?.last_name]
                  .filter(Boolean)
                  .join(' ')}
              </span>
            ),
          },
          {
            accessorKey: 'email',
            header: t('Email'),
          },
          {
            accessorKey: 'is_kyc_verified',
            header: t('KYC Status'),
            cell: ({ row }) => (
              <Badge
                variant={
                  row.original?.is_kyc_verified ? 'success' : 'destructive'
                }
              >
                {row.original?.is_kyc_verified
                  ? t('Verified')
                  : t('Unverified')}
              </Badge>
            ),
          },
          {
            accessorKey: 'created_at',
            header: t('Created At'),
            cell: ({ row }) => (
              <span>
                {dayjs(row.original?.created_at).format('MMM DD, YYYY hh:mm A')}
              </span>
            ),
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <UpdateStaff
                  roles={roles ?? []}
                  values={row.original}
                  refresh={refresh}
                />
                <ConfirmDeleteButton
                  url={`/api/admin/staffs/${row.original?.id}`}
                  onSuccess={refresh}
                  description={t(
                    'This will permanently delete this staff member.',
                  )}
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

Staff.title = 'Staff';

export default Staff;