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 ViewBooking({ isOpen, onClose, booking }) {
    const [updatingStatus, setUpdatingStatus] = useState(false);

    if (!booking) return null;

    const statusOptions = [
        { value: 1, label: 'Pending', color: 'warning' },
        { value: 2, label: 'Approved', color: 'success' },
        { value: 3, label: 'Rejected', color: 'danger' },
        { value: 4, label: 'Cancelled', color: 'secondary' },
        { value: 5, label: 'Completed', color: 'info' }
    ];

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

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

        setUpdatingStatus(true);
        router.put(`/admin/bookings/${booking.id}/status`, 
            { status: newStatus },
            {
                preserveState: true,
                onSuccess: () => {
                    setUpdatingStatus(false);
                    onClose();
                    // Success toast will be shown by flash message handler in Booking.jsx
                },
                onError: (errors) => {
                    toast.error(errors.status || 'Failed to update status');
                    setUpdatingStatus(false);
                }
            }
        );
    };

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="Booking Details"
            size="lg"
        >
            <div className="row">
                <div className="col-12">
                    <div className="card mb-3">
                        <div className="card-body">
                            <h5 className="card-title">Booking Information</h5>
                            <div className="row">
                                <div className="col-md-6">
                                    <p><strong>Booking ID:</strong> #{booking.id}</p>
                                    <p><strong>Check-In Date:</strong> {new Date(booking.check_in_date).toLocaleDateString()}</p>
                                    <p><strong>Check-Out Date:</strong> {booking.check_out_date ? new Date(booking.check_out_date).toLocaleDateString() : 'N/A'}</p>
                                    <p>
                                        <strong>Status:</strong>{' '}
                                        <span className={`badge badge-${currentStatus?.color || 'secondary'}`}>
                                            {currentStatus?.label || 'Unknown'}
                                        </span>
                                    </p>
                                </div>
                                <div className="col-md-6">
                                    <p><strong>Created:</strong> {new Date(booking.created_at).toLocaleString()}</p>
                                    <p><strong>Updated:</strong> {new Date(booking.updated_at).toLocaleString()}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="card mb-3">
                        <div className="card-body">
                            <h5 className="card-title">Property Details</h5>
                            <p><strong>Property:</strong> {booking.property?.title || 'N/A'}</p>
                            <p><strong>Address:</strong> {booking.property?.address || 'N/A'}</p>
                            <p><strong>Type:</strong> {booking.property?.property_type_name || 'N/A'}</p>
                        </div>
                    </div>

                    <div className="card mb-3">
                        <div className="card-body">
                            <h5 className="card-title">Tenant Information</h5>
                            <p><strong>Name:</strong> {booking.tenant?.name || 'N/A'}</p>
                            <p><strong>Email:</strong> {booking.tenant?.email || 'N/A'}</p>
                            <p><strong>Phone:</strong> {booking.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> {booking.landlord?.name || 'N/A'}</p>
                            <p><strong>Email:</strong> {booking.landlord?.email || 'N/A'}</p>
                            <p><strong>Phone:</strong> {booking.landlord?.phone || 'N/A'}</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} ${booking.status === status.value ? 'active' : ''}`}
                                        onClick={() => handleStatusChange(status.value)}
                                        disabled={updatingStatus || booking.status === status.value}
                                    >
                                        {status.label}
                                    </button>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
    );
}
