import React, { useEffect, useState } from "react";
import DefaulHeader2 from "../../components/header/DefaulHeader2";
import MobileMenu from "../../components/header/MobileMenu";
import Breadcrumb from "../../components/common/Breadcrumb";
import Seo from "../../components/common/Seo";
import DashboardSidebar from "../../components/header/DashboardSidebar";
import SidebarHeader from "../../components/header/mobile-sidebar/SidebarHeader";
import useGetSubscriptionHistory from "../../utils/hooks/useGetSubscriptionHistory";
import { useCheckSubscriptionStatus } from "../../utils/hooks/useCheckSubscriptionStatus";
import { AxiosResponse } from "axios";

const subscriptionHistory = () => {
  const [getIsSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [subscriptionHistory, setSubscriptionHistory] = useState<any>([]);

  useEffect(() => {
    checkSubscriptionStatus();
  }, []);

  const checkSubscriptionStatus = async () => {
    const response = await useCheckSubscriptionStatus();
    const { data } = response as AxiosResponse<SubscriptionResponse>;
    const hasActiveSubscription = data.has_active_subscription;
    if (hasActiveSubscription) {
      setIsSubscribed(true);
    }
  };

  useEffect(() => {
    const fetchHistory = async () => {
      try {
        const response = await useGetSubscriptionHistory();
        setSubscriptionHistory(response);
      } catch (error) {
        console.log("Error fetching subscription history:", error);
      }
    };

    fetchHistory();
  }, []);

  return (
    <>
      <Seo pageTitle="Subscription History" />
      {/* Seo end */}

      <span className="header-span"></span>

      {/* End Login Popup Modal */}

      <DefaulHeader2 />
      {/* End Header with upload cv btn */}

      <MobileMenu />
      {/* End MobileMenu */}

      <div className="d-flex">
        <DashboardSidebar
          getIsSidebarOpen={getIsSidebarOpen}
          setIsSidebarOpen={setIsSidebarOpen}
        />

        <div className="flex-grow-1 p-4" style={{ marginLeft: "300px" }}>
          <h3 className="mb-4">Active plan</h3>

          <table className="table table-bordered mb-5">
            <thead className="table-primary">
              <tr>
                <th scope="col">ID</th>
                <th scope="col">Name</th>
                <th scope="col">Price</th>
                <th scope="col">Validity</th>
              </tr>
            </thead>
            <tbody>
              {isSubscribed ? (
                <tr>
                  <th scope="row">1</th>
                  <td>Jobrator Plus</td>
                  <td>NGN 199</td>
                  <td>30 days</td>
                </tr>
              ) : (
                <tr>
                  <th scope="row">1</th>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
              )}
            </tbody>
          </table>

          <h3 className="mb-4">Subscription History</h3>

          {/* <table className="table table-bordered">
            <thead className="table-primary">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Purchased At</th>
                <th>Expiry Date</th>
                <th>Price</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              <tr className="table-success">
                <th scope="row">1</th>
                <td>Mark</td>
                <td>2025-01-01</td>
                <td>2026-01-01</td>
                <td>$100</td>
                <td>Active</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>2025-02-01</td>
                <td>2026-02-01</td>
                <td>$150</td>
                <td>Expired</td>
              </tr>
              <tr className="table-danger">
                <th scope="row">3</th>
                <td>John</td>
                <td>2025-03-01</td>
                <td>2026-03-01</td>
                <td>$200</td>
                <td>Pending</td>
              </tr>
            </tbody>
          </table> */}
          <table className="table table-bordered">
            <thead className="table-primary">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Purchased At</th>
                <th>Expiry Date</th>
                <th>Price</th>
                <th>Order ID</th>
                <th>Transaction ID</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {[...subscriptionHistory]?.reverse().map((item: any) => (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.plan.name}</td>
                  <td>{item.purchaseDate.split("T")[0]}</td>
                  <td>{item.expiryDate.split("T")[0]}</td>
                  <td>{item.plan.currentPrice}</td>
                  <td>{item.orderId}</td>
                  <td>{item.transactionId}</td>
                  <td>{item.status}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

export default subscriptionHistory;