import React, { useState, useEffect } from 'react';
import { CreditCard, DollarSign, Calendar, CheckCircle, XCircle } from 'lucide-react';

export default function PaymentHistory() {
  const [payments, setPayments] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('all');

  useEffect(() => {
    fetchPayments();
  }, [filter]);

  const fetchPayments = async () => {
    setLoading(true);
    try {
      const filterExpr = filter !== 'all' ? `result=${filter}` : undefined;
      const result = await window.mcp.callTool('clover_list_payments', {
        filter: filterExpr,
        expand: 'cardTransaction,refunds',
        limit: 50,
      });
      setPayments(result.payments || []);
    } catch (error) {
      console.error('Failed to fetch payments:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 bg-gray-50 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-900 mb-6">Payment History</h1>

      <div className="bg-white rounded-lg shadow p-6 mb-6">
        <select
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="px-4 py-2 border border-gray-300 rounded-lg"
        >
          <option value="all">All Payments</option>
          <option value="SUCCESS">Successful</option>
          <option value="FAIL">Failed</option>
          <option value="VOIDED">Voided</option>
        </select>
      </div>

      {loading ? (
        <div className="text-center py-12 text-gray-500">Loading payments...</div>
      ) : (
        <div className="space-y-4">
          {payments.map((payment) => (
            <div key={payment.id} className="bg-white rounded-lg shadow p-6">
              <div className="flex items-start justify-between">
                <div className="flex items-start gap-4">
                  <div className={`p-3 rounded-full ${
                    payment.result === 'SUCCESS' ? 'bg-green-100' : 'bg-red-100'
                  }`}>
                    {payment.result === 'SUCCESS' ? (
                      <CheckCircle className="w-6 h-6 text-green-600" />
                    ) : (
                      <XCircle className="w-6 h-6 text-red-600" />
                    )}
                  </div>
                  <div>
                    <p className="font-semibold text-lg">
                      ${(payment.amount / 100).toFixed(2)}
                    </p>
                    <p className="text-sm text-gray-600">
                      Payment ID: {payment.id}
                    </p>
                    {payment.cardTransaction && (
                      <p className="text-sm text-gray-600">
                        {payment.cardTransaction.cardType} •••• {payment.cardTransaction.last4}
                      </p>
                    )}
                    <p className="text-sm text-gray-500">
                      {new Date(payment.createdTime).toLocaleString()}
                    </p>
                  </div>
                </div>
                <div className="text-right">
                  <span className={`px-3 py-1 rounded-full text-sm ${
                    payment.result === 'SUCCESS'
                      ? 'bg-green-100 text-green-800'
                      : 'bg-red-100 text-red-800'
                  }`}>
                    {payment.result}
                  </span>
                  {payment.refunds && payment.refunds.length > 0 && (
                    <p className="text-sm text-red-600 mt-2">
                      {payment.refunds.length} refund(s)
                    </p>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
