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

export default function NgO() {
  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 { id: organ_id, name : organ_name } = router.query;
 
  const token = session?.user?.token;

  const skip = !token;
  const {
    data: compaings,
    error,
    isLoading,
    refetch,
  } = useGetAllGuestOrganizationCampaignsQuery(
    { 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);
  }
}, [compaings, currentPage]);

  return (
    <>
      <WebsiteLayout>
        {isLoading ? (
             <div className="spinner-container">
            <Spinner animation="border" className="custom-spinner" />
          </div>
        ):(
        <div>
          <Container fluid>
            <div className="main-sect">
              <Row className="mt-3">
                <Col lg="4">
                  <button type="button" className="btn btn-primary payment w-50" onClick={() => router?.back()}>
                    Go Back
                  </button>
                </Col>
                <Col lg="4">
                  <div className="direct-screen-hed">
                    <img src="/images/direct-logo.png" alt="" />
                    <h2 className="heading">{organ_name}</h2>
                  </div>
                </Col>
                <Col lg="4"></Col>
              </Row>
              <Row className="mt-5">
                <div
                  className="home-dashbaord"
                 
                >
                  {
                  
                  campaigns.map((data : any, index : any) => (
                    <Col key={index} lg="3">
                      <div className="card-box"  onClick={() => router.push(`/guest/guest-campaigns/guest-campaign-detail?id=${data?._id}`)}>
                        <Image src={data?.thumbnail?.thumbnailUrl} className="thumbnail" alt=""   style={{
                                  width: '100%',
                                  height: '300px',
                                }} />
                        <div className="home-title">
                          <h4>{data.title}</h4>
                          <h6>{data.rating}</h6>
                        </div>
                        <p>{data.description}</p>
                        <h5>{data.address}</h5>
                      </div>
                    </Col>
                  ))}
                </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.Header>

      <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>
  );
}