import { BackButton, Text } from '@/components';
import Calendar from '@/components/Calendar';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { Col, Modal, Row, Spinner } from 'react-bootstrap';
import { useMediaQuery } from 'react-responsive';
import styles from './index.module.scss';
import { useGetVehicleListQuery } from '@/lib/redux/services/general/category.api';
import { useDispatch, useSelector } from 'react-redux';
import { setBookingVehicleCategory } from '@/lib/redux/slices/booking.slice';
import { RootState } from '@/lib/redux/store';

const VechileCategory = () => {
  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const dispatch = useDispatch();

  const router = useRouter();
  const isTablet = useMediaQuery({ query: '(max-width: 992px)' });

  const { data, isLoading, isError } = useGetVehicleListQuery({});

  const selectedVehicleId = useSelector(
    (state: RootState) => state.bookingJourney.vehicle_category
  );

  useEffect(() => {
    const simpleLayout = document.getElementById('simple-layout');
    if (simpleLayout) {
      simpleLayout.classList.add('vechile-category');
    }
  }, []);

  const handleDateSelect = (date: Date) => {
    setSelectedDate(date);
    setIsCalendarOpen(false);
  };

  const vehicles = data?.data || [];

  return (
    <>
      <div className="d-flex justify-content-center pt-sm-4 pt-2 mt-4 mt-sm-2 align-items-center">
        {isTablet && <BackButton />}
        <span className="mb-0 fs-17 fw-bolder">Vechile Category</span>
      </div>

      <Row className="w-100 justify-content-center">
        <Col md={10}>
          <Row className="justify-content-center gy-4 mt-5">
            {isLoading ? (
              <div
                className="d-flex justify-content-center align-items-center"
                style={{ height: '200px' }}
              >
                <Spinner animation="border" variant="primary" />
              </div>
            ) : isError ? (
              <p className="text-danger text-center">Error loading vehicle categories.</p>
            ) : (
              vehicles.map((item: any, index: number) => (
                <Col lg={6} key={item._id || index}>
                  <div
                    onClick={() => {
                      dispatch(setBookingVehicleCategory(item._id));
                      router.push('/auth/date-and-time');
                    }}
                    className={`vechile-category-card cursor-pointer p-3 ps-sm-5 d-flex flex-column gap-2 justify-content-center align-items-start ${
                      selectedVehicleId === item._id ? 'active' : ''
                    }`}
                  >
                    <img
                      src={`${process.env.NEXT_PUBLIC_MEDIA_URL}${item.image?.file}`}
                      className="img-fluid"
                      alt={item.name}
                    />
                    <div className="d-flex justify-content-start gap-3 align-items-center">
                      <h2 className="fs-4 fw-bold">{item.name}</h2>
                      <div className="vechile-category-badge">
                        <span>{item.no_of_movers} Mover{item.no_of_movers > 1 ? 's' : ''}</span>
                      </div>
                    </div>
                    <p className="para text-light-grey-2 lh-1">{item.description}</p>
                    <div className="vechile-category-divider"></div>
                    <Row>
                      <Col md={4}>
                        <div className="d-flex flex-column justify-content-center align-items-center">
                          <Text className="text-light-grey-2 mb-0 pb-0" size="13px">
                            Max load weight
                          </Text>
                          <Text weight={700} size="22px">
                            {item.max_load_weight} lbs
                          </Text>
                        </div>
                      </Col>
                      <Col md={4}>
                        <div className="d-flex flex-column justify-content-center align-items-center">
                          <Text className="text-light-grey-2 mb-0 pb-0" size="13px">
                            Avg size moving box
                          </Text>
                          <Text weight={700} size="22px">
                            {item.number_of_boxes} boxes
                          </Text>
                        </div>
                      </Col>
                      <Col md={4}>
                        <div className="d-flex flex-column justify-content-center align-items-center">
                          <Text className="text-light-grey-2 mb-0 pb-0" size="13px">
                            Longest dimension
                          </Text>
                          <Text weight={700} size="22px">
                            {item.vehicle_length}ft
                          </Text>
                        </div>
                      </Col>
                    </Row>
                  </div>
                </Col>
              ))
            )}
          </Row>
        </Col>
      </Row>

      <Modal
        isOpen={isCalendarOpen}
        onClose={() => setIsCalendarOpen(false)}
        title="Select Date"
        className={styles.calendarModal}
      >
        <Calendar
          onDateSelect={handleDateSelect}
          selectedDate={selectedDate || undefined}
          minDate={new Date()}
        />
      </Modal>
    </>
  );
};

export default VechileCategory;