import React from 'react';
import { Button } from '../ui/Button';
import { Card } from '../ui/Card';
import type { Transaction } from '../../types';
import { FiCheckCircle, FiXCircle, FiClock, FiAlertCircle } from 'react-icons/fi';

interface TransactionStatusProps {
  transaction: Transaction;
  onNewTransaction?: () => void;
}

export const TransactionStatus: React.FC<TransactionStatusProps> = ({
  transaction,
  onNewTransaction,
}) => {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(amount);
  };

  const getStatusConfig = () => {
    switch (transaction.status) {
      case 'approved':
        return {
          icon: FiCheckCircle,
          title: 'Transaction Approved',
          message: 'Your transaction has been successfully processed and approved.',
          color: 'text-green-600',
          bgColor: 'bg-green-50',
          borderColor: 'border-green-200',
          iconColor: 'text-green-600',
        };
      case 'rejected':
        return {
          icon: FiXCircle,
          title: 'Transaction Rejected',
          message: transaction.rejectionReason || 'Your transaction has been flagged as suspicious and rejected.',
          color: 'text-red-600',
          bgColor: 'bg-red-50',
          borderColor: 'border-red-200',
          iconColor: 'text-red-600',
        };
      case 'suspicious':
        return {
          icon: FiAlertCircle,
          title: 'Under Review',
          message: 'Your transaction is being reviewed for suspicious activity. You will be notified once the review is complete.',
          color: 'text-yellow-600',
          bgColor: 'bg-yellow-50',
          borderColor: 'border-yellow-200',
          iconColor: 'text-yellow-600',
        };
      default:
        return {
          icon: FiClock,
          title: 'Transaction Pending',
          message: 'Your transaction is being processed. Please wait for confirmation.',
          color: 'text-blue-600',
          bgColor: 'bg-blue-50',
          borderColor: 'border-blue-200',
          iconColor: 'text-blue-600',
        };
    }
  };

  const statusConfig = getStatusConfig();
  const Icon = statusConfig.icon;

  return (
    <div className="w-full max-w-2xl mx-auto">
      <Card className={`p-8 ${statusConfig.bgColor} ${statusConfig.borderColor}`}>
        <div className="text-center mb-6">
          <div className="flex justify-center mb-4">
            <div className={`w-16 h-16 rounded-full ${statusConfig.bgColor} border-2 ${statusConfig.borderColor} flex items-center justify-center`}>
              <Icon className={`w-8 h-8 ${statusConfig.iconColor}`} />
            </div>
          </div>
          <h2 className={`text-2xl md:text-3xl font-bold ${statusConfig.color} mb-2`}>
            {statusConfig.title}
          </h2>
          <p className="text-gray-600 text-sm md:text-base">
            {statusConfig.message}
          </p>
        </div>

        <div className="bg-white rounded-lg p-6 mb-6">
          <div className="space-y-4">
            <div className="flex justify-between items-center pb-4 border-b border-gray-200">
              <span className="text-gray-600">Transaction ID</span>
              <span className="font-mono text-sm font-medium text-gray-800">
                {transaction.id}
              </span>
            </div>

            <div className="flex justify-between items-center pb-4 border-b border-gray-200">
              <span className="text-gray-600">Amount</span>
              <span className="text-xl font-bold text-gray-800">
                {formatCurrency(transaction.amount)}
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
              <div>
                <p className="text-sm text-gray-600 mb-1">Recipient</p>
                <p className="font-medium text-gray-800">{transaction.recipient}</p>
              </div>

              {transaction.recipientEmail && (
                <div>
                  <p className="text-sm text-gray-600 mb-1">Email</p>
                  <p className="font-medium text-gray-800">{transaction.recipientEmail}</p>
                </div>
              )}

              <div>
                <p className="text-sm text-gray-600 mb-1">Account Type</p>
                <p className="font-medium text-gray-800 capitalize">
                  {transaction.accountType}
                </p>
              </div>

              <div>
                <p className="text-sm text-gray-600 mb-1">Status</p>
                <p className="font-medium text-gray-800 capitalize">
                  {transaction.status}
                </p>
              </div>

              {transaction.description && (
                <div className="md:col-span-2">
                  <p className="text-sm text-gray-600 mb-1">Description</p>
                  <p className="font-medium text-gray-800">{transaction.description}</p>
                </div>
              )}
            </div>
          </div>
        </div>

        {onNewTransaction && (
          <div className="text-center">
            <Button
              variant="primary"
              size="lg"
              onClick={onNewTransaction}
            >
              Create New Transaction
            </Button>
          </div>
        )}
      </Card>
    </div>
  );
};