import { BackButton } from '@/components';
import BookingInnerCard from '@/components/Cards/BookingInnerCard';
import Modal1 from '@/components/Modal/Modal1';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
import { useSelector } from 'react-redux';
import { useGetSingleRideQuery } from '@/lib/redux/services/user/booking.api';
import MapDirections from '@/components/Map/MapDirections';

const Pending = () => {
  const [cancelBookingModal, setCancelBookingModal] = useState(false);
  const router = useRouter();
  const token = useSelector((state: any) => state?.auth?.token);
  const id = router.query.id as string;

  const { data, isLoading, isError } = useGetSingleRideQuery({ id, token });

  const booking = data?.data;

  // Show loading spinner
  if (isLoading) {
    return (
      <div className="d-flex justify-content-center align-items-center" style={{ height: '60vh' }}>
        <div className="spinner-border text-primary" role="status">
          <span className="visually-hidden">Loading...</span>
        </div>
      </div>
    );
  }

  if (isError) {
    return <p>Error loading booking.</p>;
  }

  return (
    <>
      <div className="d-flex justify-content-between align-items-center">
        <div className="d-flex justify-content-center align-items-center gap-2">
          <BackButton />
          <h3 className="mb-0 pb-0 fw-bold">Pending</h3>
        </div>
        <button
          onClick={() => setCancelBookingModal(true)}
          className="btn btn-feature px-7 py-2"
        >
          Cancel Booking
        </button>
      </div>

      <Row>
        <Col sm={8}>
          <div className="d-flex mt-3 gap-3 align-items-center flex-wrap">
            <BookingInnerCard
              image={<img src="/images/icons/map-with-marker.png" alt="" />}
              title="Pickup Address"
              subTitle={booking?.pick_up?.address || '-'}
            />
            <BookingInnerCard
              image={<img src="/images/icons/map-with-marker.png" alt="" />}
              title="Destination"
              subTitle={booking?.drop_off?.address || '-'}
            />
            <BookingInnerCard
              image={<img src="/images/icons/calendar.png" alt="" />}
              title={`${booking?.time_slot?.start || ''} - ${booking?.time_slot?.end || ''}`}
              subTitle={new Date(booking?.date).toLocaleDateString()}
              isSwapColumn
            />
            <BookingInnerCard
              image={<img src="/images/icons/price.png" alt="" />}
              subTitle={`$${booking?.price?.toFixed(2)} + $0.95 per labor min`}
              title="Price"
              isSwapColumn
            />
            <BookingInnerCard
              image={<img src="/images/icons/delivery.png" alt="" />}
              subTitle="Delivery Type"
              title={booking?.vehicle_category?.name || '-'}
              isSwapColumn
            />
          </div>
        </Col>
      </Row>

      {/* Google Maps Embed */}
      <div className="mt-3">
        <MapDirections origin={booking?.pick_up} destination={booking?.drop_off} />
      </div>

      <Modal1
        show={cancelBookingModal}
        handleClose={() => setCancelBookingModal(false)}
        title="Cancel Booking"
        description="Are you sure you want to cancel booking?"
        handleYesClick={() => router.back()}
      />
    </>
  );
};

export default Pending;