import React, { useEffect, useState } from 'react';
import { Card, Col, Container, Nav, Row, Spinner, Tab } from 'react-bootstrap';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import { useRouter } from 'next/router';
import Modal from 'react-bootstrap/Modal';
import { loadStripe } from '@stripe/stripe-js';
import toast from 'react-hot-toast';
import { useSession } from 'next-auth/react';
import { useCreatePaymentIntentMutation } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { Elements } from '@stripe/react-stripe-js';
import PaymentForm from '@/components/PaymentForm/PaymentForm';
import Select from 'react-select';
import { useCreateGuestPaymentIntentMutation } from '@/lib/redux/services/auth.api';

const payment = [
  {
    id: 0,
    price: '$ 25.00',
    Tax: '$2.30',
    Subtotal: '$27.30',
  },
];

export default function DonateToGiven() {
  const [modalShowPaymentCard, setModalShowPaymentCard] = React.useState(false);
  const [amount, setAmount] = useState<any>();
  const [AddCard, setAddCard] = useState(false);
  const [tax, setTax] = useState<any>();
  const [totalAmount, setTotalAmount] = useState<any>();
  const [client_secret, setClient_Secret] = useState('');
  const router: any = useRouter();
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const [paymentIntent, { isLoading: paymentLoading }] = useCreateGuestPaymentIntentMutation();
  const calculateStripeFee = () => {
    if (!amount || isNaN(amount)) {
      setTax(0);
      setTotalAmount(0);
      return;
    }
    const amt = parseFloat(amount || 0);
    const stripeFee = +(amt * 0.029 + 0.3).toFixed(2); 
    const platformFee = +(amt * 0.15).toFixed(2); 
    const totalTax = +(stripeFee + platformFee).toFixed(2);
    const total = +(amt + totalTax).toFixed(2);
    setTax(totalTax);
    setTotalAmount(total);
  };
  const handlePaymnet = async () => {
    try {
      const response = await paymentIntent({
        body: {
          amount: amount,
          type: "single" ,
        },
        token,
      }).unwrap();
      if (response) {
        setClient_Secret(response?.clientSecret);
        setAddCard(true);
        setModalShowPaymentCard(true)
   
      }
    } catch (error: any) {
      toast?.error(error?.data?.error);
    }
  };

  useEffect(() => {
    calculateStripeFee();
  }, [amount]);

 

  return (
    <>
      <WebsiteLayout>
        <div>
          <Container fluid>
            <div className="main-sect">
              <Row className="justify-content-center mt-5">
                <Col lg="10">
                  <Card>
                    <Card.Body>
                      <div className="help-feedback text-center">
                        <h2 className="mt-3 heading text-center">Donate</h2>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis
                          molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla
                          accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
                          Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent
                          taciti sociosqu ad litora torquent per conubia nostra, per inceptos
                          himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante
                          pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor
                          urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit
                          amet lacinia. Aliquam in elementum tellus. Lorem ipsum dolor sit amet,
                          consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a,
                          mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem
                          sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget
                          condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu
                          ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent
                          auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut
                          rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel
                          bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam
                          in elementum tellus.
                        </p>
                        <br />

                        <Row className="justify-content-center mt-5">
                          <Col lg="6">
                            <h4 className="mt-3 mb-3 text-dark text-left">Enter Amount</h4>
                            <div className="donat-amount">
                              <div className="form-group">
                                 <input
                                    type="number"
                                    placeholder="Enter Amount Here"
                                    className="form-control"
                                    value={amount}
                                    onChange={(e: any) => setAmount(e?.target?.value)}
                                  />
                              </div>
                            </div>
                            <div className="donate-btn">
                              <button
                                className="btn btn-primary mt-3 w-50"
                                type="button"
                                onClick={handlePaymnet}
                              >
                              {paymentLoading ? <Spinner size='sm'/> : "Donate Now"}
                              </button>
                            </div>
                          </Col>
                        </Row>
                      </div>
                    </Card.Body>
                  </Card>
                </Col>
              </Row>
            </div>
          </Container>
          <OneTimeDonation
            show={modalShowPaymentCard}
            onHide={() => setModalShowPaymentCard(false)}
            amount={amount}
            client_secret={client_secret}
            setAmount={setAmount}
          />
          {/* <Affiliate show={modalShow} onHide={() => setModalShow(false)} /> */}
        </div>
      </WebsiteLayout>
    </>
  );
}

function OneTimeDonation({ props, onHide, show, client_secret, amount, setAmount }: any) {
  const router: any = useRouter();
  const { data: session }: any = useSession();
  const { id: compaign_id } = router.query;
  const token = session?.user?.token;

  const handlePaymentSuccess = () => {
    onHide();
    setAmount("")
  };

  const stripePromise = loadStripe(`${process.env.NEXT_PUBLIC_STRIPE_PUB_KEY}`);

  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">
          <Row>
            <>
              <h2>Enter Card Details</h2>
              <Elements stripe={stripePromise}>
                <PaymentForm
                  onHide={onHide}
                  client_secret={client_secret}
                  eventPrice={amount}
                  onSuccess={handlePaymentSuccess}
                />
              </Elements>
            </>
          </Row>
        </div>
      </Modal.Body>
    </Modal>
  );
}

function PaymentCard(props: any) {
  const [chat, setChat] = useState(true);
  const [modalShowCongratsCard, setModalShowCongratsCard] = React.useState(false);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        {chat ? (
          <div className="report">
            <h4 className="text-center mb-3 mt-4">Add Card</h4>
            <Row>
              <Col lg={12}>
                <div className="method-box">
                  {payment.map((data, index) => (
                    <div key={index}>
                      <div className="price">
                        <h6>price</h6>
                        <h5>{data?.price}</h5>
                      </div>
                      <div className="price">
                        <h6>Tax</h6>
                        <h5>{data?.Tax}</h5>
                      </div>
                      <div className="price">
                        <h6>SubTotal</h6>
                        <h5>{data?.Subtotal}</h5>
                      </div>
                    </div>
                  ))}
                  <div className="slct-pymnt">
                    <div className="check">
                      <div className="form-group">
                        <img src={'/images/master-card.png'} alt="" />
                        <input type="radio" id="donation" name="scales" value="donation" />
                        <label>**** **** **** 1234</label>
                      </div>
                    </div>
                    <div className="check">
                      <div className="form-group">
                        <img src={'/images/paypal-card.png'} alt="" />
                        <input type="radio" id="donation" name="scales" value="donation" />
                        <label>**** **** **** 1234</label>
                      </div>
                    </div>
                  </div>
                  <div className="slct-pymnt">
                    <div className="check">
                      <div className="form-group">
                        <img src={'/images/visa-card.png'} alt="" />
                        <input type="radio" id="donation" name="scales" value="donation" />
                        <label>**** **** **** 1234</label>
                      </div>
                    </div>
                    <button
                      type="button"
                      className="w-100 btn btn-primary method-btn"
                      onClick={() => {
                        setChat(!chat);
                      }}
                    >
                      <img src={'/images/new-card.svg'} alt="" /> Add New Card
                    </button>
                  </div>
                </div>
                <div className="form-check checkbox mt-3 pb-3">
                  <input
                    type="checkbox"
                    name="chkRemember"
                    id="chkRemember"
                    className="form-check-input"
                  />
                  <span className="form-check-checkmark"></span>
                  <label htmlFor="chkRemember" className="form-check-label">
                    Allow Organization to view your email and name
                  </label>
                </div>
                <button
                  type="button"
                  className="w-50 btn btn-primary"
                  onClick={() => setModalShowCongratsCard(true)}
                >
                  Confirm
                </button>
              </Col>
            </Row>
          </div>
        ) : (
          <>
            <div className="report">
              <h4 className="text-center mb-3 mt-4">Add Card</h4>
              <div className="add-form">
                <div className="form-group">
                  <div className="icon-field">
                    <label htmlFor=""> Card Holder </label>
                    <input type="text" className="form-control" placeholder="John Smith" />
                  </div>
                </div>

                <div className="form-group">
                  <div className="icon-field">
                    <label htmlFor=""> Card Number </label>
                    <input
                      type="number"
                      className="form-control"
                      placeholder="**** **** **** ***4"
                    />
                  </div>
                </div>

                <div className="end-form">
                  <div className="form-group">
                    <div className="icon-field">
                      <label htmlFor=""> Exp Month </label>
                      <input type="number" className="form-control" placeholder="07" />
                    </div>
                  </div>

                  <div className="form-group">
                    <div className="icon-field">
                      <label htmlFor=""> Exp Year </label>
                      <input type="number" className="form-control" placeholder="07" />
                    </div>
                  </div>
                </div>
                <div className="form-group">
                  <div className="icon-field">
                    <label htmlFor=""> CVC </label>
                    <input type="number" className="form-control" placeholder="565" />
                  </div>
                </div>
                <div className="blocked-btn ">
                  <button
                    type="button"
                    className="w-50 btn btn-primary no-user"
                    onClick={() => router.reload()}
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    className="w-50 btn btn-primary unblock-user"
                    onClick={() => router.reload()}
                  >
                    Add Card
                  </button>
                </div>
              </div>
            </div>
          </>
        )}
        <CongratsCard show={modalShowCongratsCard} onHide={() => setModalShowCongratsCard(false)} />
      </Modal.Body>
    </Modal>
  );
}

function CongratsCard(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header></Modal.Header>

      <Modal.Body>
        <div className="report">
          <img src="/images/medal-1.png" alt="" />
          <h4 className="text-center mb-3 mt-4">Congratulation!</h4>
          <h5>
            Payment have done successfully Also, You <br /> have earned a bronze Badge
          </h5>
          <button
            type="button"
            className="btn btn-primary w-50 mt-4"
            onClick={() => router.reload()}
          >
            Go back
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}