"use client";
import React, { useState } from "react";
import { Button, Table } from "react-bootstrap";
import styles from "@/styles/Component/Dashboard/CreditsPurchase.module.scss";
import useFetchData from "@/components/App/useFetchData";
import { SuspenseLoader } from "@/components/App/Loader";
import { useRequest } from "@/components/App/request";
import WorldFormModal from "./components/WorldFormModal";
import ChooseModal from "./components/ChooseModal";

/*
{
    "id": 2,
    "name": "demo test plan",
    "price_id": null,
    "price": 70,
    "credit": 22,
    "expiry": null,
    "expiry_date": null,
    "description": "<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>",
    "status": 1,
    "deleted_at": null,
    "created_at": "2025-02-20T07:30:37.000000Z",
    "updated_at": "2025-02-20T07:31:21.000000Z"
}
    */

interface CreditsPurchaseResponse {
  id: number;
  name: string;
  price_id: number;
  price: number;
  credit: number;
  expiry: number;
  incVAT: number;
  perCredit: number;
}

async function getWorldpayData() {
  return {
    clientKey: "1234567890",
    order: {
      id: 1,
      name: "John Doe"
    }
  };
}

const CreditsPurchase = () => {
  const { request } = useRequest();
  const [selectedPlan, setSelectedPlan] =
    useState<CreditsPurchaseResponse | null>(null);
  const [selectedGateway, setSelectedGateway] = useState<string | null>("stripe");
  const [show, setShow] = useState(false);
  const [open, setOpen] = useState(false);
  const [clientKey, setClientKey] = useState<string | null>(null);
  const [order, setOrder] = useState<object | null>(null);
  const { data, isLoading } = useFetchData<CreditsPurchaseResponse[]>("PLANS");

  const handleBuyNow = async (id: number) => {
    try {
      const res = await request("PURCHASE_PLAN", {
        plan_id: id
      });
      //@ts-expect-error "iNVALID"
      if(typeof window !== "undefined") window.location.href = res.data.url;
    } catch (e) {
      console.log(e);
    }
  };

  const handleProcessPayment = async () => {
    if (selectedGateway === "Worldpay") {
      const data = await getWorldpayData();
      if (data) {
        setClientKey(data?.clientKey);
        setOrder(data?.order);
        setOpen(true);
      } else {
        console.error("Error fetching Worldpay data");
      }
    } else {
      handleBuyNow(selectedPlan?.id);
    }
  };
  const handleClose = () => {
    setShow(false);
  };
  const handlePaymentSelection = (gateway: string) => {
    setSelectedGateway(gateway);
  };
  if (isLoading) return <SuspenseLoader />;
  return (
    <div className={styles.CreditsPurchaseBlock}>
      <h1>Credits Purchase</h1>
      <div className="customTableCard text-center">
        <Table responsive>
          <thead>
            <tr>
              <th>Plans</th>
              <th>Amount</th>
              <th>Inc VAT</th>
              <th>Credit</th>
              <th>Per Credit</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {Array.isArray(data)
              ? data.map((item, index) => (
                  <tr key={index}>
                    <td>{item.name}</td>
                    <td>{`£${item.price}`}</td>
                    <td>{item.incVAT ?? "-"}</td>
                    <td>{item.credit}</td>
                    <td>{item.perCredit ?? "-"}</td>
                    <td>
                      <div className="d-flex align-items-center h-100">
                        <Button
                          className="btn-custom"
                          onClick={() => {
                            setShow(true);
                            setSelectedPlan(item);
                          }}
                        >
                          BUY NOW
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))
              : null}
          </tbody>
        </Table>
      </div>
      <div className={styles.CreditExtra}>
        <p>
          We always encourge to pay via bank transfer (BACS) to our account We
          will give you extra credits for that, which are as follows
        </p>
        <ul className="d-md-flex flex-wrap">
          <li>3 Credit extra for £250</li>
          <li>5 Credit extra for £1000</li>
          <li>10 Credit extra for £2000</li>
          <li>20 Credit extra for £3000</li>
          <li>30 Credit extra for £5000</li>
        </ul>
      </div>

      <ChooseModal
        show={show}
        handleClose={handleClose}
        handlePaymentSelection={handlePaymentSelection}
        selectedGateway={selectedGateway}
        processPayment={handleProcessPayment}
      />
      <WorldFormModal
        open={open}
        setOpen={setOpen}
        clientKey={clientKey}
        order={order}
      />
    </div>
  );
};

export default CreditsPurchase;