import React, { useEffect, useState } from 'react';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import { useGetAllCompaignsQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { Button, Col, Container, Row, Spinner } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';

export default function Campaign() {
  const [modalShow, setModalShow] = React.useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [campaigns, setCampaigns] = useState<any[]>([]);
  const [hasMore, setHasMore] = useState(true);
  const CampiangsPerPage = 10;

  const router = useRouter();
  const { data: session }: any = useSession();
  const organ_id = session?.user?._id;
  const token = session?.user?.token;
  const skip = !token;

  const {
    data: compaings,
    error,
    isLoading,
    refetch,
  } = useGetAllCompaignsQuery(
    { id: organ_id, token, page: currentPage, limit: CampiangsPerPage },
    { refetchOnMountOrArgChange: true, skip }
  );

  useEffect(() => {
    if (compaings?.data?.allcampaings?.length) {
      const total = compaings.data.totalCampaignsCount;
      const newCampaigns = compaings.data.allcampaings;

      setCampaigns((prev) => {
        if (currentPage === 1) {
          return newCampaigns;
        }
        const existingIds = new Set(prev.map((c) => c._id));
        const filteredNew = newCampaigns.filter((c: any) => !existingIds.has(c._id));
        return [...prev, ...filteredNew];
      });

      const loaded = (currentPage - 1) * CampiangsPerPage + newCampaigns.length;
      setHasMore(loaded < total);
    } else if (currentPage === 1) {
      setCampaigns([]);
      setHasMore(false);
    }
  }, [compaings, currentPage]);

  return (
    <WebsiteLayout>
      {isLoading ? (
        <div className="spinner-container" style={{ height: '70vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <Spinner animation="border" className="custom-spinner" />
        </div>
      ) : (
        <div>
          <Container fluid>
            <div className="main-sect">
              <Row className="mt-3">
                <Col lg={12}>
                  <div className="text-end">
                    <button
                      type="button"
                      className="btn btn-primary"
                      onClick={() => router.push('/organizer/organizer-campaign/add-campaign')}
                    >
                      Add New Campaign
                    </button>
                  </div>
                </Col>
              </Row>

              <Row className="mt-5">
                {campaigns.length === 0 ? (
                  <Col lg={12}>
                     <div className="noData">
                        <h3>No Data Available</h3>
                      </div>
                  </Col>
                ) : (
                  <>
                    <div className="home-dashbaord d-flex flex-wrap">
                      {campaigns.map((data: any, index: any) => (
                        <Col key={index} lg="3">
                          <div
                            className="card-box"
                            onClick={() =>
                              router.push(`/organizer/organizer-campaign/compaign-detail?id=${data?._id}`)
                            }
                          >
                            <Image
                              src={data?.thumbnail?.thumbnailUrl}
                              className="thumbnail"
                              alt=""
                              style={{
                                width: '100%',
                                height: '300px',
                                objectFit: 'cover',
                              }}
                            />
                            <div className="home-title">
                              <h4>{data.title}</h4>
                              <h6>{data.rating}</h6>
                            </div>
                            <p>{data.description}</p>
                            <h5>{data.address}</h5>
                          </div>
                        </Col>
                      ))}
                    </div>

                    {hasMore && (
                      <div className="text-center mt-4">
                        <button
                          className="btn btn-primary"
                          onClick={() => setCurrentPage((prev) => prev + 1)}
                        >
                          {isLoading ? 'Loading...' : 'Show More'}
                        </button>
                      </div>
                    )}
                  </>
                )}
              </Row>
            </div>
          </Container>
        </div>
      )}

      <Likes show={modalShow} onHide={() => setModalShow(false)} />
    </WebsiteLayout>
  );
}

// Heart like modal
function Likes(props: any) {
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="likes-modal"
    >
      <Modal.Header closeButton />
      <Modal.Body>
        <div className="congrats">
          <img src={'/images/congrats.png'} alt="" />
          <h4 className="text-center mb-2">Congratulations</h4>
          <p>It’s a Match</p>
          <div className="likes-btn mt-5">
            <button className="btn btn-primary keep-btn" type="button">
              KEEP SWIPING
            </button>
            <button
              className="btn btn-primary"
              type="button"
              onClick={() => router.push('/Chat')}
            >
              MESSAGE HER
            </button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}