import InvoicePDF from '@/components/Invoice/Invoice';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import { useGetOragnizerTransactionsQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import {
  useGetUserTransactionByIdQuery,
  useGetUserTransactionsQuery,
} from '@/lib/redux/services/Userflow/UserDashboard.api';
import { PDFDownloadLink } from '@react-pdf/renderer';
import moment from 'moment';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import { Card, Col, Container, Dropdown, Row, Spinner } from 'react-bootstrap';
import Modal from 'react-bootstrap/Modal';
import Select from 'react-select';

const invoice = [
  {
    id: 0,
    name: 'David Muller',
    email: 'abcd123@gmail.com',
    Donation: '#123454',
    Receipt: 'Receipt',
    Received: '14 August 2023',
    amount: '$1200',
    Processing: '$100',
    TaxDeductible: '$100',
    Total: '$1290',
    Subtotal: '$27.30',
  },
];

const options = [
  { value: 'Uk', label: 'Uk' },
  { value: 'America', label: 'America' },
];

const options_1 = [
  { value: 'America', label: 'America' },
  { value: 'Turkey', label: 'Turkey' },
];

const customStyles = {
  control: (provided: any) => ({
    ...provided,
    borderRadius: '85px',
    border: '1px solid #C3C3C3',
    padding: '6px 16px 8px 40px',
    background: 'rgba(255, 255, 255, 0.50)',
    // fontSize: "16px", // Adjust the font size as needed
    '@media (max-width: 768px)': {
      width: '100%',
      marginLeft: '0',
      fontSize: '16px', // Adjust the font size for smaller screens
    },
  }),

  indicatorSeparator: () => ({ display: 'none' }),
};

export default function History() {
  const [modalShow2, setModalShow2] = React.useState(false);
  const [transactionId, setTransactionId] = useState('');
  const [visibleCount, setVisibleCount] = useState(8);
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const router = useRouter();

  const {
    data: history,
    isLoading,
    refetch,
    isFetching,
  } = useGetOragnizerTransactionsQuery({
    start: startDate ?? '',
    end: endDate ?? '',
    token,
  });

  const transactions = history?.data?.transactions || [];

  const handleShowMore = () => {
    setVisibleCount((prev) => prev + 6); // show 6 more items each time
  };

  useEffect(() => {
    refetch();
  }, [startDate, endDate]);

  return (
    <>
      <WebsiteLayout>
        <div className="order-history">
          {isFetching ? (
            <div className="spinner-container">
              <Spinner animation="border" className="custom-spinner" />
            </div>
          ) : (
            <Container fluid>
              <div className="main-sect">
                <Row>
                  <Col lg={4}>
                    <div className="right-side">
                      <div className="slct-locate">
                        {/* From Date */}
                        <div className="form-group">
                          <div className="icon-field slect">
                            <input
                              type="date"
                              value={startDate}
                              onChange={(e) => setStartDate(e.target.value)}
                              className="form-control"
                            />
                            <img src={'/images/sidbar-icon/calendar.svg'} className="icon" alt="" />
                          </div>
                        </div>

                        {/* To Date */}
                        <div className="form-group">
                          <div className="icon-field slect">
                            <input
                              type="date"
                              value={endDate}
                              onChange={(e) => setEndDate(e.target.value)}
                              className="form-control"
                            />
                            <img src={'/images/sidbar-icon/calendar.svg'} className="icon" alt="" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </Col>

                  <Col lg={4}>
                    <div className="history">
                      <div className="sub-head">
                        <h4>Total Donations Sent</h4>
                        <h5>$ {history?.data?.totalDonations}</h5>
                      </div>
                    </div>
                  </Col>
                  <Col lg={4}>
                    <div className="right-side">
                      <div className="sub-right">
                        <Dropdown className="list-down profile-down" align="end">
                          <Dropdown.Toggle id="dropdown-autoclose-inside">
                            <div className="sort">
                              <img src={'/images/sidbar-icon/element-3.svg'} alt="" />
                            </div>
                          </Dropdown.Toggle>
                          <Dropdown.Menu>
                            <Dropdown.Item href="#">
                              <div className="link" onClick={() => router.reload()}>
                                <Link href={''}>
                                  <img src={'/images/sidbar-icon/element-3.svg'} alt="" />
                                  Grid list
                                </Link>
                              </div>
                            </Dropdown.Item>
                            <Dropdown.Item href="#">
                              <div
                                className="link"
                                onClick={() => router.push('/organizer/history/list-view')}
                              >
                                <Link href={''}>
                                  <img src={'/images/sidbar-icon/element-2.svg'} alt="" />
                                  List View
                                </Link>
                              </div>
                            </Dropdown.Item>
                          </Dropdown.Menu>
                        </Dropdown>

                        <Dropdown className="list-down profile-down" align="end">
                          <Dropdown.Toggle id="dropdown-autoclose-inside">
                            <div className="sort">
                              <h3>Sort By</h3>
                              <img src={'/images/sidbar-icon/down.svg'} alt="" />
                            </div>
                          </Dropdown.Toggle>
                          <Dropdown.Menu>
                            <Dropdown.Item href="#">
                              <div className="link" onClick={() => router.reload()}>
                                <Link href={''}>Highest to Lowest</Link>
                              </div>
                            </Dropdown.Item>
                            <Dropdown.Item href="#">
                              <div className="link">
                                <Link href={''}>Oldest to Newest</Link>
                              </div>
                            </Dropdown.Item>
                          </Dropdown.Menu>
                        </Dropdown>
                      </div>
                    </div>
                  </Col>
                </Row>

                <Row className="mt-4">
                  {transactions.length === 0 ? (
                    <Col lg="12" className="text-center">
                      <h6>No donations to show</h6>
                    </Col>
                  ) : (
                    transactions.slice(0, visibleCount).map((data: any, index: any) => (
                      <Col lg="6" key={index}>
                        <div
                          className="notify"
                          onClick={() => {
                            setModalShow2(true);
                            setTransactionId(data?._id);
                          }}
                        >
                          <div className="usrname">
                            <div className="avatar">
                              <img src={data.donor?.image?.mediaUrl} alt=""  style={{
                                borderRadius: "50%"
                              }}/>
                              <h4>{data?.donor?.name}</h4>
                              <p>{data?.donor?.bio}</p>
                            </div>
                            <span>
                              <p>{moment(data?.createdAt).format('L')}</p>
                              <h5>${data?.metadata?.totalAmount?.toFixed(2)}</h5>
                            </span>
                          </div>
                          <p>{data?.metadata?.description}</p>
                        </div>
                      </Col>
                    ))
                  )}
                </Row>

                {transactions.length > visibleCount && (
                  <div className="text-center mt-4 mb-4">
                    <button className="btn btn-primary" onClick={handleShowMore}>
                      Show More
                    </button>
                  </div>
                )}
              </div>
            </Container>
          )}

          <InvoiceModal
            show={modalShow2}
            onHide={() => setModalShow2(false)}
            transactionId={transactionId}
          />
        </div>
      </WebsiteLayout>
    </>
  );
}

function InvoiceModal({ props, show, onHide, transactionId }: any) {
  const [modalShowTopup, setModalShowTopup] = React.useState(false);
  const router = useRouter();
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const {
    data: singleTrnsaction,
    isLoading,
    refetch,
  } = useGetUserTransactionByIdQuery({
    id: transactionId,
    token,
  });

  console.log(singleTrnsaction, 'single');
  return (
    <Modal
      {...props}
      show={show}
      onHide={onHide}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header></Modal.Header>

      <Modal.Body>
        <div className="report">
          <Row className="">
            <div className="home-dashbaord">
              <Col lg="12">
                <Card className="card-box-delivery">
                  <Card.Body>
                    <div className="deliver-ship">
                      <h4>Invoice</h4>
                      <div className="recipte">
                        <h5>Name</h5>
                        <h5>{singleTrnsaction?.data?.donor?.name}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Email</h5>
                        <h5>{singleTrnsaction?.data?.donor?.email}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Donation ID</h5>
                        <h5>{singleTrnsaction?.data?.donationId?.slice(0, 25)}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Receipt No</h5>
                        <span>{singleTrnsaction?.data?.receipt?.slice(0, 15)}</span>
                      </div>

                      <div className="recipte">
                        <h5>Donation Received</h5>
                        <span> {moment(singleTrnsaction?.data?.donationReceived).format('L')}</span>
                      </div>
                      <div className="recipte">
                        <h5>Donation Amount </h5>
                        <span>${singleTrnsaction?.data?.donationAmount}</span>
                      </div>
                      <div className="recipte">
                        <h5>Processing Fees</h5>
                        <span>${singleTrnsaction?.data?.processingFees}</span>
                      </div>
                      <div className="recipte">
                        <h5>Tax Deductible Amount</h5>
                        <span>${singleTrnsaction?.data?.taxDeductibleAmount}</span>
                      </div>
                      <div className="recipte">
                        <h5>Subtotal (incl.VAT)</h5>
                        <span>${singleTrnsaction?.data?.subtotal}</span>
                      </div>
                    </div>
                  </Card.Body>
                </Card>
                {singleTrnsaction?.data && (
                  <PDFDownloadLink
                    document={<InvoicePDF transaction={singleTrnsaction.data} />}
                    fileName={`Invoice_${singleTrnsaction.data.donationId}.pdf`}
                    style={{
                      textDecoration: 'none',
                      padding: '20px 30px',
                      color: '#fff',
                      background: 'linear-gradient(92deg, #008a9c -7.97%, #08bfa4 103.59%)',
                      border: 'none',
                      borderRadius: '30px',
                      cursor: 'pointer',
                      display: 'inline-block',
                      marginTop: '10px',
                    
                    }}
                  >
                    {({ loading }) => (loading ? 'Generating PDF...' : 'Download Invoice')}
                  </PDFDownloadLink>
                )}
              </Col>

              <Topup show={modalShowTopup} onHide={() => setModalShowTopup(false)} />
            </div>
          </Row>
        </div>
      </Modal.Body>
    </Modal>
  );
}

function Topup(props: any) {
  const [modalShowReportpost, setModalShowReportpost] = React.useState(false);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton onClick={() => router.reload()}></Modal.Header>

      <Modal.Body>
        <div className="report">
          <img src={'/images/tick.svg'} alt="" />
          <h4 className="heading mb-4 mt-2"> Download Successfully </h4>
          <p>
            The Invoice have been download <br /> successfully.
          </p>
          {/* <div className="blocked-btn">
            <button
              type="button"
              className="w-100 btn btn-primary mt-2 unblock-user"
              onClick={() => router.reload()}
            >
              Okay
            </button>
          </div> */}
        </div>
      </Modal.Body>
    </Modal>
  );
}