import AdminAction from '@/components/admin/transactions/admin-action';
import AmountBreakdown from '@/components/admin/transactions/amount-breakdown';
import PaymentDetails from '@/components/admin/transactions/payment-details';
import PaymentProof from '@/components/admin/transactions/payment-proof';
import TransactionError from '@/components/admin/transactions/transaction-error';
import TxHeader from '@/components/admin/transactions/tx-header';
import type { Transaction } from '@/components/admin/transactions/types';
import UserCard from '@/components/admin/transactions/user-card';
import Loader from '@/components/common/loader';
import PageHeading from '@/components/common/page-heading';
import { createRequest } from '@/data/request/create-request';
import { useApiSWR } from '@/hooks/useSWR';
import { usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';

const APPROVE_ENDPOINT: Partial<Record<string, string>> = {
  deposit: 'approve-deposit',
  withdrawal: 'approve-withdraw',
};

const DECLINE_ENDPOINT: Partial<Record<string, string>> = {
  deposit: 'decline-deposit',
  withdrawal: 'decline-withdraw',
};

const TransactionDetails = () => {
  const { t } = useTranslation();
  const { transactionId } = usePage<{ transactionId: string }>().props;
  const {
    data: transaction,
    mutate,
    isLoading,
  } = useApiSWR<Transaction>(`/admin/transactions/${transactionId}`);

  const canTakeAction =
    transaction?.status === 'pending' &&
    (transaction?.type === 'deposit' || transaction?.type === 'withdrawal');

  const handleApprove = async () => {
    const endpoint = APPROVE_ENDPOINT[transaction!.type];
    await createRequest({
      url: `/api/admin/transactions/${transaction!.id}/${endpoint}`,
    });
    mutate({ ...transaction!, status: 'completed' });
  };

  const handleReject = async () => {
    const endpoint = DECLINE_ENDPOINT[transaction!.type];
    await createRequest({
      url: `/api/admin/transactions/${transaction!.id}/${endpoint}`,
    });
    mutate({ ...transaction!, status: 'failed' });
  };

  if (isLoading || !transaction) return <Loader />;

  return (
    <>
      <PageHeading
        title={t('Transaction Details')}
        description={t('Viewing transaction {{trx_id}}', {
          trx_id: transaction.trx_id,
        })}
        backButton
      />

      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        <div className="col-span-1 space-y-4 md:col-span-2">
          <TxHeader transaction={transaction} />
          <AmountBreakdown transaction={transaction} />
          <PaymentDetails transaction={transaction} />
          <TransactionError transaction={transaction} />
          {(transaction.type === 'deposit' ||
            transaction.type === 'withdrawal') &&
            transaction.method_type === 'manual' && (
              <PaymentProof transaction={transaction} />
            )}
        </div>

        <div className="space-y-4">
          <UserCard transaction={transaction} />
          {canTakeAction && (
            <AdminAction
              type={transaction.type}
              onApprove={handleApprove}
              onReject={handleReject}
            />
          )}
        </div>
      </div>
    </>
  );
};

TransactionDetails.title = 'Transaction Details';

export default TransactionDetails;