import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import {
  CheckCircleIcon,
  CircleNotchIcon,
  XCircleIcon,
} from '@phosphor-icons/react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import type { TxType } from './types';

type Props = {
  type: TxType;
  onApprove: () => Promise<void>;
  onReject: () => Promise<void>;
};

export default function AdminAction({ type, onApprove, onReject }: Props) {
  const { t } = useTranslation();
  const [pending, setPending] = useState<'approve' | 'reject' | null>(null);

  const ACTION_LABEL: Partial<
    Record<TxType, { approve: string; reject: string; description: string }>
  > = {
    deposit: {
      approve: t('Approve Deposit'),
      reject: t('Decline Deposit'),
      description: t(
        'This deposit is pending manual review. Approve or decline it after verifying the payment proof.',
      ),
    },
    withdrawal: {
      approve: t('Approve Withdrawal'),
      reject: t('Decline Withdrawal'),
      description: t(
        'This withdrawal is pending manual review. Approve it to process the payout or decline to refund the amount.',
      ),
    },
  };

  const labels = ACTION_LABEL[type];

  if (!labels) return null;

  const handleApprove = async () => {
    setPending('approve');
    try {
      await onApprove();
    } finally {
      setPending(null);
    }
  };

  const handleReject = async () => {
    setPending('reject');
    try {
      await onReject();
    } finally {
      setPending(null);
    }
  };

  return (
    <div className="rounded-2xl border border-black/5 bg-white p-5">
      <h3 className="mb-1 text-xs font-semibold tracking-widest text-black/30 uppercase">
        {t('Admin Action')}
      </h3>
      <Separator className="mb-4" />
      <p className="mb-4 text-sm text-black/50">{labels.description}</p>
      <div className="flex gap-3">
        <Button
          className="flex-1 gap-2 border-success/30 bg-success/5 text-success hover:bg-success/10"
          variant="outline"
          disabled={pending !== null}
          onClick={handleApprove}
        >
          {pending === 'approve' ? (
            <CircleNotchIcon weight="bold" className="size-4 animate-spin" />
          ) : (
            <CheckCircleIcon weight="bold" className="size-4" />
          )}
          {labels.approve}
        </Button>
        <Button
          className="flex-1 gap-2 border-destructive/30 bg-destructive/5 text-destructive hover:bg-destructive/10"
          variant="outline"
          disabled={pending !== null}
          onClick={handleReject}
        >
          {pending === 'reject' ? (
            <CircleNotchIcon weight="bold" className="size-4 animate-spin" />
          ) : (
            <XCircleIcon weight="bold" className="size-4" />
          )}
          {labels.reject}
        </Button>
      </div>
    </div>
  );
}