// import Dashboard_Chart from "@/components/Chart/Dashboard_Chart";
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import Link from 'next/link';
import React, { useState } from 'react';
import {
  Button,
  Card,
  Col,
  ListGroup,
  Dropdown,
  Nav,
  Row,
  Tab,
  Table,
  Spinner,
  Container,
} from 'react-bootstrap';
// import TimeTable from "@/components/Table/TimeTable";
// import ProfilePictureUpload from "@/components/Form/ProfilePictureUpload";
// import Password from "@/components/Form/Password";
import Modal from 'react-bootstrap/Modal';
import Image from 'react-bootstrap/Image';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
import { useRouter } from 'next/router';
import { ChatAccordian } from '@/components/ChatAccordian/ChatAccordian';
import { useSession } from 'next-auth/react';
import { useGetAllUserReportsQuery } from '@/lib/redux/services/Userflow/UserDashboard.api';
import Progressbar from '@/components/Progressbar/progressbar';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';

export default function ReportedHistory() {
  const router = useRouter();
  const [currentPage, setCurrentPage] = useState(1);
  const ReportsPerPage = 10;
  const [modalShow3, setModalShow3] = React.useState(false);
  const [reason, setReason] = useState('');
  const [description, setDescription] = useState('');
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  console.log('qwert', token);
  const skip = !token;

  const {
    data: ReportUser,
    error,
    isLoading: userLoading,
  } = useGetAllUserReportsQuery(
    { token, page: currentPage, limit: ReportsPerPage },
    { refetchOnMountOrArgChange: true, skip }
  );

  console.log('ReportUser', ReportUser);

  const totalPages = ReportUser?.data?.totalCount
    ? Math.ceil(ReportUser?.data?.totalCount / ReportsPerPage)
    : 1;

  const handlePageChange = (newPage: any) => {
    if (newPage > 0 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

  return (
    <>
      <WebsiteLayout>
        {userLoading ? (
          <div className="spinner-container">
            <Spinner animation="border" className="custom-spinner" />
          </div>
        ) : (
          <>
            <Container fluid>
              <div className="main-sect">
                <Row className="mt-5">
                  <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">
                      <h2 className="heading mb-0">Reported History</h2>
                    </div>
                  </Col>
                  <Col lg="4"></Col>
                </Row>
                <Tab.Container id="left-tabs-example" defaultActiveKey="1">
                  <Row className="mb-3 justify-content-center">
                    <Col lg="12">
                      <div className="mb-lg-4 mb-2 report-tab">
                        <Nav variant="pills" className="d-flex">
                          <Nav.Item className="me-2">
                            <Nav.Link eventKey="1">Content</Nav.Link>
                          </Nav.Item>
                          <Nav.Item>
                            <Nav.Link eventKey="2">User</Nav.Link>
                          </Nav.Item>
                        </Nav>
                      </div>
                    </Col>
                  </Row>
                  <Tab.Content>
                    <Tab.Pane eventKey="1">
                      <Row>
                        {ReportUser?.data.reportModel?.map((data: any, index: any) =>
                          data?.reportType === 'Thread' ? (
                            <>
                              <div className="home-dashbaord">
                                <Col key={index} lg="4">
                                  {data?.reportthreadId?.threadType === 'thread' && (
                                    <>
                                      <div
                                        className="card-box"
                                        onClick={() => {
                                          setModalShow3(true);
                                          setReason(data?.reason);
                                          setDescription(data?.reasondescription);
                                        }}
                                      >
                                        <div className="home-title">
                                          <div className="avatar">
                                            <img
                                              src={data?.reportthreadId?.userId?.image?.mediaUrl}
                                              alt=""
                                              style={{
                                                width: '60px',
                                                height: '60px',
                                                borderRadius: '50%',
                                              }}
                                            />
                                            <h4>{data?.reportthreadId?.userId?.name}</h4>
                                          </div>
                                        </div>

                                        <Image
                                          src={`${data?.reportthreadId?.media?.mediaUrl}`}
                                          className="thumbnail"
                                          alt=""
                                          style={{
                                            height: '400px',
                                            objectFit: 'cover',
                                          }}
                                        />
                                      </div>
                                    </>
                                  )}

                                  {data?.reportthreadId?.threadType === 'poll' && (
                                    <>
                                      <div
                                        className="card-box"
                                        onClick={() => {
                                          setModalShow3(true);
                                          setReason(data?.reason);
                                          setDescription(data?.reasondescription);
                                        }}
                                      >
                                        <div className="home-title">
                                          <div className="avatar">
                                            <img
                                              src={data?.reportthreadId?.userId?.image?.mediaUrl}
                                              alt=""
                                              style={{
                                                width: '60px',
                                                height: '60px',
                                                borderRadius: '50%',
                                              }}
                                            />
                                            <h4>{data?.reportthreadId?.userId?.name}</h4>
                                          </div>
                                        </div>

                                        <h4>{data?.reportthreadId?.pollid?.title}</h4>
                                        {data?.reportthreadId?.pollid?.options.map(
                                          (e: any, index: any) => {
                                            return (
                                              <div key={index}>
                                                <p>{e}</p>
                                              </div>
                                            );
                                          }
                                        )}
                                        {data?.reportthreadId.responseOfPoll?.map(
                                          (result: any, index: any) =>
                                            result?.result?.map((e: any, index: any) => {
                                              return (
                                                <div className="progressmain" key={index}>
                                                  <Progressbar
                                                    percentage={e?.percentage}
                                                    label={`${e?.percentage.toFixed(2)}%  `}
                                                  />
                                                </div>
                                              );
                                            })
                                        )}
                                      </div>
                                    </>
                                  )}
                                  {data?.reportthreadId?.threadType === 'discussion' && (
                                    <div
                                      className="card-box"
                                      onClick={() => {
                                        setModalShow3(true);
                                        setReason(data?.reason);
                                        setDescription(data?.reasondescription);
                                      }}
                                    >
                                      <div className="home-title">
                                        <div className="avatar">
                                          <img
                                            src={
                                              data?.reportthreadId?.organizationId?.image?.mediaUrl
                                            }
                                            alt=""
                                            style={{
                                              width: '60px',
                                              height: '60px',
                                              borderRadius: '50%',
                                            }}
                                          />
                                          <h4>{data?.reportthreadId?.organizationId?.name}</h4>
                                        </div>
                                      </div>
                                      <div className="discussiontitle">
                                        <p>Discussion :</p>

                                        <p>{data?.reportthreadId?.discussionid?.title}</p>
                                      </div>
                                    </div>
                                  )}
                                </Col>
                                <Col key={index} lg="4">
                                  {data?.reportthreadId?.threadType === 'thread' && (
                                    <>
                                      <div
                                        className="card-box"
                                        onClick={() => {
                                          setModalShow3(true);
                                          setReason(data?.reason);
                                          setDescription(data?.reasondescription);
                                        }}
                                      >
                                        <div className="home-title">
                                          <div className="avatar">
                                            <img
                                              src={data?.reportthreadId?.userId?.image?.mediaUrl}
                                              alt=""
                                              style={{
                                                width: '60px',
                                                height: '60px',
                                                borderRadius: '50%',
                                              }}
                                            />
                                            <h4>{data?.reportthreadId?.userId?.name}</h4>
                                          </div>
                                        </div>

                                        <Image
                                          src={`${data?.reportthreadId?.media?.mediaUrl}`}
                                          className="thumbnail"
                                          alt=""
                                          style={{
                                            height: '400px',
                                            objectFit: 'cover',
                                          }}
                                        />
                                      </div>
                                    </>
                                  )}

                                  {data?.reportthreadId?.threadType === 'poll' && (
                                    <>
                                      <div
                                        className="card-box"
                                        onClick={() => {
                                          setModalShow3(true);
                                          setReason(data?.reason);
                                          setDescription(data?.reasondescription);
                                        }}
                                      >
                                        <div className="home-title">
                                          <div className="avatar">
                                            <img
                                              src={data?.reportthreadId?.userId?.image?.mediaUrl}
                                              alt=""
                                              style={{
                                                width: '60px',
                                                height: '60px',
                                                borderRadius: '50%',
                                              }}
                                            />
                                            <h4>{data?.reportthreadId?.userId?.name}</h4>
                                          </div>
                                        </div>

                                        <h4>{data?.reportthreadId?.pollid?.title}</h4>
                                        {data?.reportthreadId?.pollid?.options.map(
                                          (e: any, index: any) => {
                                            return (
                                              <div key={index}>
                                                <p>{e}</p>
                                              </div>
                                            );
                                          }
                                        )}
                                        {data?.reportthreadId.responseOfPoll?.map(
                                          (result: any, index: any) =>
                                            result?.result?.map((e: any, index: any) => {
                                              return (
                                                <div className="progressmain" key={index}>
                                                  <Progressbar
                                                    percentage={e?.percentage}
                                                    label={`${e?.percentage.toFixed(2)}%  `}
                                                  />
                                                </div>
                                              );
                                            })
                                        )}
                                      </div>
                                    </>
                                  )}
                                  {data?.reportthreadId?.threadType === 'discussion' && (
                                    <div
                                      className="card-box"
                                      onClick={() => {
                                        setModalShow3(true);
                                        setReason(data?.reason);
                                        setDescription(data?.reasondescription);
                                      }}
                                    >
                                      <div className="home-title">
                                        <div className="avatar">
                                          <img
                                            src={
                                              data?.reportthreadId?.organizationId?.image?.mediaUrl
                                            }
                                            alt=""
                                            style={{
                                              width: '60px',
                                              height: '60px',
                                              borderRadius: '50%',
                                            }}
                                          />
                                          <h4>{data?.reportthreadId?.organizationId?.name}</h4>
                                        </div>
                                      </div>
                                      <div className="discussiontitle">
                                        <p>Discussion :</p>

                                        <p>{data?.reportthreadId?.discussionid?.title}</p>
                                      </div>
                                    </div>
                                  )}
                                </Col>
                                <Col key={index} lg="4">
                                  {data?.reportthreadId?.threadType === 'thread' && (
                                    <>
                                      <div
                                        className="card-box"
                                        onClick={() => {
                                          setModalShow3(true);
                                          setReason(data?.reason);
                                          setDescription(data?.reasondescription);
                                        }}
                                      >
                                        <div className="home-title">
                                          <div className="avatar">
                                            <img
                                              src={data?.reportthreadId?.userId?.image?.mediaUrl}
                                              alt=""
                                              style={{
                                                width: '60px',
                                                height: '60px',
                                                borderRadius: '50%',
                                              }}
                                            />
                                            <h4>{data?.reportthreadId?.userId?.name}</h4>
                                          </div>
                                        </div>

                                        <Image
                                          src={`${data?.reportthreadId?.media?.mediaUrl}`}
                                          className="thumbnail"
                                          alt=""
                                          style={{
                                            height: '400px',
                                            objectFit: 'cover',
                                          }}
                                        />
                                      </div>
                                    </>
                                  )}

                                  {data?.reportthreadId?.threadType === 'poll' && (
                                    <>
                                      <div
                                        className="card-box"
                                        onClick={() => {
                                          setModalShow3(true);
                                          setReason(data?.reason);
                                          setDescription(data?.reasondescription);
                                        }}
                                      >
                                        <div className="home-title">
                                          <div className="avatar">
                                            <img
                                              src={data?.reportthreadId?.userId?.image?.mediaUrl}
                                              alt=""
                                              style={{
                                                width: '60px',
                                                height: '60px',
                                                borderRadius: '50%',
                                              }}
                                            />
                                            <h4>{data?.reportthreadId?.userId?.name}</h4>
                                          </div>
                                        </div>

                                        <h4>{data?.reportthreadId?.pollid?.title}</h4>
                                        {data?.reportthreadId?.pollid?.options.map(
                                          (e: any, index: any) => {
                                            return (
                                              <div key={index}>
                                                <p>{e}</p>
                                              </div>
                                            );
                                          }
                                        )}
                                        {data?.reportthreadId.responseOfPoll?.map(
                                          (result: any, index: any) =>
                                            result?.result?.map((e: any, index: any) => {
                                              return (
                                                <div className="progressmain" key={index}>
                                                  <Progressbar
                                                    percentage={e?.percentage}
                                                    label={`${e?.percentage.toFixed(2)}%  `}
                                                  />
                                                </div>
                                              );
                                            })
                                        )}
                                      </div>
                                    </>
                                  )}
                                  {data?.reportthreadId?.threadType === 'discussion' && (
                                    <div
                                      className="card-box"
                                      onClick={() => {
                                        setModalShow3(true);
                                        setReason(data?.reason);
                                        setDescription(data?.reasondescription);
                                      }}
                                    >
                                      <div className="home-title">
                                        <div className="avatar">
                                          <img
                                            src={
                                              data?.reportthreadId?.organizationId?.image?.mediaUrl
                                            }
                                            alt=""
                                            style={{
                                              width: '60px',
                                              height: '60px',
                                              borderRadius: '50%',
                                            }}
                                          />
                                          <h4>{data?.reportthreadId?.organizationId?.name}</h4>
                                        </div>
                                      </div>
                                      <div className="discussiontitle">
                                        <p>Discussion :</p>

                                        <p>{data?.reportthreadId?.discussionid?.title}</p>
                                      </div>
                                    </div>
                                  )}
                                </Col>
                              </div>
                            </>
                          ) : (
                            ''
                          )
                        )}

                        <div className="pagination">
                          <Button
                            onClick={() => handlePageChange(currentPage - 1)}
                            disabled={currentPage === 1}
                          >
                            Previous
                          </Button>
                          {Array.from({ length: totalPages }, (_, index) => (
                            <Button
                              key={index + 1}
                              variant={index + 1 === currentPage ? 'primary' : 'outline-primary'}
                              onClick={() => handlePageChange(index + 1)}
                            >
                              {index + 1}
                            </Button>
                          ))}
                          <Button
                            onClick={() => handlePageChange(currentPage + 1)}
                            disabled={currentPage === totalPages}
                          >
                            Next
                          </Button>
                        </div>
                      </Row>
                    </Tab.Pane>
                    <Tab.Pane eventKey="2">
                      <Row>
                        <Col lg={7}>
                          {ReportUser?.data?.reportModel?.map((data: any, index: number) =>
                            data?.reportType === 'Comment' ? (
                              <div
                                key={index}
                                className="block-user"
                                onClick={() => {
                                  setModalShow3(true);
                                  setReason(data?.reason);
                                  setDescription(data?.reasondescription);
                                }}
                              >
                                <div className="client-block">
                                  <img
                                    src={
                                      data?.reportCommentId?.threadId?.organizationId?.image
                                        ?.mediaUrl
                                    }
                                    alt=""
                                    style={{
                                      width: '60px',
                                      height: '60px',
                                      borderRadius: '50%',
                                    }}
                                  />
                                  <h5>{data?.reportCommentId?.threadId?.organizationId?.name}</h5>
                                </div>
                              </div>
                            ) : (
                              ''
                            )
                          )}
                        </Col>
                      </Row>
                    </Tab.Pane>
                  </Tab.Content>
                </Tab.Container>
              </div>
            </Container>

            <Reason
              show={modalShow3}
              onHide={() => setModalShow3(false)}
              reason={reason}
              description={description}
            />
          </>
        )}
      </WebsiteLayout>
    </>
  );
}

function Reason({ reason, description, props, show, onHide }: any) {
  return (
    <Modal
      show={show}
      onHide={onHide}
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-3 mt-2">Reason</h4>
          <h5 className="text-dark mb-3">{reason}</h5>
          <p className="text-centre">{description}</p>
        </div>
      </Modal.Body>
    </Modal>
  );
}