import { useState } from 'react';
import { router } from '@inertiajs/react';
import { toast } from 'react-hot-toast';
import Modal from '@/Components/Admin/ui/Modal';

export default function ViewPayment({ isOpen, onClose, payment }) {
    const [updatingStatus, setUpdatingStatus] = useState(false);

    if (!payment) return null;

    const statusOptions = [
        { value: 1, label: 'Pending', color: 'warning' },
        { value: 2, label: 'Completed', color: 'success' },
        { value: 3, label: 'Failed', color: 'danger' },
        { value: 4, label: 'Refunded', color: 'secondary' }
    ];

    const currentStatus = statusOptions.find(s => s.value === payment.status);

    const handleStatusChange = (newStatus) => {
        if (newStatus === payment.status) return;

        setUpdatingStatus(true);
        router.put(`/admin/payments/${payment.id}/status`, 
            { status: newStatus },
            {
                preserveState: true,
                onSuccess: () => {
                    setUpdatingStatus(false);
                    onClose();
                },
                onError: (errors) => {
                    toast.error(errors.status || 'Failed to update status');
                    setUpdatingStatus(false);
                }
            }
        );
    };

    return (
        <Modal isOpen={isOpen} onClose={onClose} title="Payment Details" size="lg">
            <div className="row">
                <div className="col-12">
                    <div className="card mb-3">
                        <div className="card-body">
                            <h5 className="card-title">Payment Information</h5>
                            <div className="row">
                                <div className="col-md-6">
                                    <p><strong>Payment ID:</strong> #{payment.id}</p>
                                    <p><strong>Amount:</strong> ${payment.amount?.toLocaleString()}</p>
                                    <p><strong>Payment Type:</strong> {payment.payment_type_text}</p>
                                    <p><strong>Payment Method:</strong> {payment.payment_method_text}</p>
                                </div>
                                <div className="col-md-6">
                                    <p><strong>Transaction Ref:</strong> {payment.transaction_reference || 'N/A'}</p>
                                    <p><strong>Due Date:</strong> {payment.due_date ? new Date(payment.due_date).toLocaleDateString() : 'N/A'}</p>
                                    <p><strong>Paid At:</strong> {payment.paid_at ? new Date(payment.paid_at).toLocaleString() : 'N/A'}</p>
                                    <p>
                                        <strong>Status:</strong>{' '}
                                        <span className={`badge badge-${currentStatus?.color || 'secondary'}`}>
                                            {currentStatus?.label || 'Unknown'}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="card mb-3">
                        <div className="card-body">
                            <h5 className="card-title">Tenant Information</h5>
                            <p><strong>Name:</strong> {payment.tenant?.name || 'N/A'}</p>
                            <p><strong>Email:</strong> {payment.tenant?.email || 'N/A'}</p>
                            <p><strong>Phone:</strong> {payment.tenant?.phone || 'N/A'}</p>
                        </div>
                    </div>

                    <div className="card mb-3">
                        <div className="card-body">
                            <h5 className="card-title">Landlord Information</h5>
                            <p><strong>Name:</strong> {payment.landlord?.name || 'N/A'}</p>
                            <p><strong>Email:</strong> {payment.landlord?.email || 'N/A'}</p>
                            <p><strong>Phone:</strong> {payment.landlord?.phone || 'N/A'}</p>
                        </div>
                    </div>

                    {payment.receipt && (
                        <div className="card mb-3">
                            <div className="card-body">
                                <h5 className="card-title">Receipt Information</h5>
                                <p><strong>Receipt Number:</strong> {payment.receipt.receipt_number}</p>
                                <p><strong>Issued Date:</strong> {new Date(payment.receipt.issued_date).toLocaleDateString()}</p>
                            </div>
                        </div>
                    )}

                    <div className="card">
                        <div className="card-body">
                            <h5 className="card-title">Update Status</h5>
                            <div className="btn-group" role="group">
                                {statusOptions.map((status) => (
                                    <button
                                        key={status.value}
                                        type="button"
                                        className={`btn btn-${status.color} ${payment.status === status.value ? 'active' : ''}`}
                                        onClick={() => handleStatusChange(status.value)}
                                        disabled={updatingStatus || payment.status === status.value}
                                    >
                                        {status.label}
                                    </button>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
    );
}
