import { Transaction, TxStatus } from '@/components/admin/transactions/types';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import TableTransactionAmount from '@/components/common/tabel-transaction-amount';
import { TableBarDefault } from '@/components/common/table-bar-default';
import TableTransactionType from '@/components/common/table-transaction-type';
import { Badge } from '@/components/ui/badge';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { useTableData } from '@/data/useTableData';
import QueryBuilder from '@/lib/query-builder';
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';

dayjs.extend(relativeTime);

const STATUS_VARIANT: Record<TxStatus, 'warning' | 'success' | 'destructive'> =
  {
    pending: 'warning',
    completed: 'success',
    failed: 'destructive',
  };

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

  const transactions = items as Transaction[];

  return (
    <div className="space-y-6">
      <PageHeading
        title={t('My Transactions')}
        description={t('Your complete transaction history.')}
        variant="default"
      />

      <Card className="gap-0 rounded-2xl p-0 dark:border-white/8">
        <TableBarDefault
          title=""
          builder={builder}
          dateFilter={false}
          resource=""
          searchFields={['trx_id', 'gateway']}
        />
        <Separator className="bg-black/6 dark:bg-white/6" />
        <DataTable
          data={transactions}
          rounded={false}
          sorting={sorting}
          setSorting={setSorting}
          isLoading={isLoading}
          shadow={false}
          pagination={meta}
          onPageChange={(p) => builder.page(p)}
          onLimitChange={(l) => builder.limit(l)}
          structure={[
            {
              accessorKey: 'trx_id',
              header: t('Trx ID'),
              cell: ({ row }) => {
                const tx = row.original as Transaction;
                return (
                  <span className="text-black/40 dark:text-white/40">
                    {tx.trx_id}
                  </span>
                );
              },
            },
            {
              accessorKey: 'type',
              header: t('Type'),
              cell: ({ row }) => <TableTransactionType row={row} />,
            },
            {
              accessorKey: 'gateway',
              header: t('Gateway'),
              cell: ({ row }) => {
                const tx = row.original as Transaction;
                return (
                  <div>
                    <p className="text-sm font-medium">{tx.gateway}</p>
                    <p className="text-xs text-black/40 capitalize dark:text-white/40">
                      {tx.method_type}
                    </p>
                  </div>
                );
              },
            },
            {
              accessorKey: 'amount',
              header: t('Amount'),
              cell: ({ row }) => (
                <TableTransactionAmount transaction={row.original} />
              ),
            },
            {
              accessorKey: 'status',
              header: t('Status'),
              cell: ({ row }) => {
                const tx = row.original as Transaction;
                return (
                  <Badge
                    variant={STATUS_VARIANT[tx.status]}
                    className="capitalize"
                  >
                    {tx.status}
                  </Badge>
                );
              },
            },
            {
              accessorKey: 'created_at',
              header: t('Date'),
              cell: ({ row }) => {
                const tx = row.original as Transaction;
                return (
                  <div>
                    <p className="text-sm">
                      {dayjs(tx.created_at).format('MMM D, YYYY')}
                    </p>
                    <p className="text-xs text-black/40 dark:text-white/40">
                      {dayjs(tx.created_at).fromNow()}
                    </p>
                  </div>
                );
              },
            },
          ]}
        />
      </Card>
    </div>
  );
};

Transactions.title = 'Transaction History';

export default Transactions;