import { Textarea } from '@/components';
import BookingInnerCard from '@/components/Cards/BookingInnerCard';
import CustomModal from '@/components/CustomModal';
import Button from '@/components/ui/Button';
import PageHeader from '@/components/ui/PageHeader';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Col, Form, Row } from 'react-bootstrap';
import { Rating } from 'react-simple-star-rating';
import { useGetSingleRideQuery } from '@/lib/redux/services/user/booking.api';
import { useSelector } from 'react-redux';
import MapDirections from '@/components/Map/MapDirections';

const Pending = () => {
  const [cancelBookingModal, setCancelBookingModal] = useState<boolean>(false);

  const router = useRouter();
  const [rating, setRating] = useState(0);
  const token = useSelector((state: any) => state?.auth?.token);
  const bookingId = router.query.id as string;
  const { data, isLoading, isError } = useGetSingleRideQuery({ id: bookingId, token });
  const booking = data?.data;

  // Catch Rating value
  const handleRating = (rate: number) => {
    setRating(rate);
    // other logic
  };

  // Optional callback functions
  const onPointerEnter = () => console.log('Enter');
  const onPointerLeave = () => console.log('Leave');
  const onPointerMove = (value: number, index: number) => console.log(value, index);

  // 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 || !booking) {
    return <p>Error loading booking data.</p>;
  }

  return (
    <>
      <div className="d-flex justify-content-between align-items-center">
        <PageHeader title="In-progress" isShowBackButton />
        <Button
          className="btn btn-feature"
          onClick={() => router.push('/user/booking-overview/service-provider/')}
        >
          Contact Service Provider
        </Button>
      </div>

      <Row>
        <Col sm={12} lg={10}>
          <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="" />}
              title="Price"
              subTitle={`$${(booking.price / 100).toFixed(2)}`}
              isSwapColumn
            />

            <BookingInnerCard
              image={<img src="/images/icons/delivery.png" alt="" />}
              title={booking.vehicle_category?.name || 'Delivery Type'}
              subTitle="Delivery Type"
              isSwapColumn
            />
          </div>
        </Col>
      </Row>

      <h5 className="mb-0 my-5 fs-6 text-primary-color fw-bold text-center">
        ***Delivery is in-progress***
      </h5>

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

      <CustomModal
        isCloseBtn
        show={cancelBookingModal}
        handleClose={() => setCancelBookingModal(false)}
      >
        <div className="position-relative p-3">
          <h3 className="text-center position-relative modal-title fw-bolder">
            Submit a Review
          </h3>

          <div className="text-center">
            <Rating
              onClick={handleRating}
              onPointerEnter={onPointerEnter}
              onPointerLeave={onPointerLeave}
              onPointerMove={onPointerMove}
              size={39}
            />
          </div>

          <Form.Group className="mt-3">
            <Form.Label className="ps-3">Review</Form.Label>
            <Textarea placeholder="Write a review..." />
          </Form.Group>

          <div className="text-center">
            <Button
              onClick={() => router.push('/user/booking-overview')}
              className="mt-3 btn btn-feature UrbanistRegular"
              size="md"
            >
              Submit
            </Button>
          </div>
        </div>
      </CustomModal>
    </>
  );
};

export default Pending;