// 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,
} 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';

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 (
    <>
      <DashboardLayout>
        {userLoading ? (
          <div className="spinner-container">
            <Spinner animation="border" className="custom-spinner" />
          </div>
        ) : (
          <>
            <div className="back-link">
              <img
                src={'/images/sidbar-icon/arrow-left.svg'}
                onClick={() => router.back()}
                alt=""
              />
              <h2 className="heading text-dark pb-3 mb-0">Reported History</h2>
            </div>
            <Tab.Container id="left-tabs-example" defaultActiveKey="1">
              <Row className="mb-3">
                <Col lg="8">
                  <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="7">
                              {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>

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

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