import { DownloadCsvButton } from '@/components/admin/download-csv-button';
import AdminTableUser from '@/components/common/admin-table-user';
import ConfirmDeleteButton from '@/components/common/confirm-delete-button';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import TableTransactionAmount from '@/components/common/tabel-transaction-amount';
import { TableBar } from '@/components/common/table-bar';
import TableTransactionType from '@/components/common/table-transaction-type';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useTableData } from '@/data/useTableData';
import QueryBuilder from '@/lib/query-builder';
import { router } from '@inertiajs/react';
import { CaretRightIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const Transactions = () => {
  const builder = QueryBuilder();
  builder.sort('created_at', 'desc');
  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, meta, refresh } = useTableData(
    `/admin/transactions${builder.build()}`,
  );
  dayjs.extend(relativeTime);
  const { t } = useTranslation();

  const handleVariant = (status: string) => {
    switch (status) {
      case 'pending':
        return 'warning';
      case 'completed':
        return 'success';
      case 'failed':
        return 'destructive';
      default:
        return 'default';
    }
  };

  return (
    <>
      <PageHeading
        title={t('Manage Transactions')}
        description={t('View and manage all transactions on the platform.')}
      />
      <TableBar
        builder={builder}
        searchFields={[
          'trx_id',
          'gateway',
          'user.email',
          'user.first_name',
          'user.last_name',
        ]}
        downloadCsvButton={<DownloadCsvButton resource="transactions" />}
      />
      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        pagination={meta}
        onPageChange={(p) => builder.page(p)}
        onLimitChange={(l) => builder.limit(l)}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            cell: ({ row }) => String(row.original.id).padStart(2, '0'),
          },
          {
            accessorKey: 'user',
            header: t('User'),
            cell: ({ row }) => <AdminTableUser user={row.original.user} />,
          },
          {
            accessorKey: 'type',
            header: t('Type'),
            cell: ({ row }) => <TableTransactionType row={row} />,
          },
          {
            accessorKey: 'gateway',
            header: t('Gateway | Transaction'),
            cell: ({ row }) => (
              <div>
                <p className="mb-1 font-semibold text-primary">
                  {row.original.gateway}{' '}
                  <span className="text-sm text-black/50 capitalize">
                    {['deposit', 'withdraw'].includes(row.original.type) &&
                      ' - '}
                    {row.original.method_type}
                  </span>
                </p>
                <p className="text-sm text-black/50">{row.original.trx_id}</p>
              </div>
            ),
          },
          {
            accessorKey: 'amount',
            header: t('Amount'),
            cell: ({ row }) => (
              <TableTransactionAmount transaction={row.original} />
            ),
          },
          {
            accessorKey: 'created_at',
            header: t('Date'),
            cell: ({ row }) => {
              const date = dayjs(row.original.created_at).format(
                'MMM D, YYYY h:mm A',
              );
              return (
                <div>
                  <p className="mb-1">{date}</p>
                  <p className="text-sm text-black/50">
                    {dayjs(row.original.created_at).fromNow()}
                  </p>
                </div>
              );
            },
          },
          {
            accessorKey: 'status',
            header: t('Status'),
            cell: ({ row }) => (
              <Badge
                variant={handleVariant(row.original.status)}
                className="capitalize"
              >
                {row.original.status}
              </Badge>
            ),
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <Button
                  variant="ghostPrimary"
                  onClick={() =>
                    router.visit(`/admin/transactions/${row.original?.id}`)
                  }
                >
                  {t('Details')}
                  <CaretRightIcon weight="bold" className="size-4" />
                </Button>
                <ConfirmDeleteButton
                  url={`/api/admin/transactions/${row.original?.id}`}
                  onSuccess={refresh}
                  description={t(
                    'This will permanently delete this transaction.',
                  )}
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

Transactions.title = 'Transactions';

export default Transactions;