"use client";

import React, { useState, useEffect } from "react";
import { toast } from "react-toastify";
import { useRouter } from "next/navigation";
import { useQRCode } from "next-qrcode";
import { createManagementSubscriptionSession, getSubscriptions } from "@/app/actions";


function AccountContent({ user }) {
  const router = useRouter();
  const { Canvas } = useQRCode();

  const [subscription, setSubscription] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      if (!user) {
        setLoading(false);
        return;
      }
      try {
        setLoading(true);
        const subscriptions = await getSubscriptions();
        if (subscriptions.length > 0) {
          setSubscription(subscriptions[0]);
        }
        setLoading(false);
      } catch (err) {
        setLoading(false);
      }
    })();
  }, [user]);

  const manageSubscription = async () => {
    try {
      const managementSession = await createManagementSubscriptionSession();
      router.push(managementSession.url);
    } catch (error) {
      if (error instanceof Error) {
        toast.error(error.message, {
          position: "bottom-left",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "colored",
        });
      }
    }
  };

  return loading ? (
    <div className="flex flex-col"></div>
  ) : (
    <div className="flex flex-col">
      <div className="max-w-6xl mx-auto mb-12 h-full w-full px-6">
        <div className="w-full bg-base-200 p-8 rounded text-base-content">
          <h3 className="font-accent text-xl text-secondary mb-2">
            Your Subscription
          </h3>
          {subscription && subscription.status !== "canceled" ? (
            <>
              <h2 className="text-3xl mb-3 font-heading font-bold">
                {subscription?.product?.name}
              </h2>
              <p className="text-lg mb-4">
                {subscription.product?.description}
              </p>
              <button
                onClick={manageSubscription}
                className="btn btn-sm text-base-content capitalize !rounded-md bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8"
              >
                Manage Subscription
              </button>
            </>
          ) : (
            <>
              <p className="text-lg text-base-content mb-4">
                {"You haven’t upgraded your workflow yet"}
              </p>
              <div className="flex flex-row gap-2 flex-wrap">
                <button
                  onClick={() => router.push("/pricing")}
                  className="btn btn-sm btn-neutral text-primary-content capitalize bg-gradient-to-r from-primary to-secondary border-none"
                >
                  Upgrade
                </button>
                <button
                  onClick={manageSubscription}
                  className="btn btn-sm btn-secondary text-primary-content capitalize border-none"
                >
                  Manage Purchases
                </button>
                <button
                  onClick={() =>
                    document.getElementById("password-reset-modal")?.click()
                  }
                  className="btn btn-sm btn-secondary md:ml-auto text-primary-content capitalize border-none"
                >
                  Reset Password
                </button>
                <button
                  onClick={() =>
                    document.getElementById("email-change-modal")?.click()
                  }
                  className="btn btn-sm btn-secondary text-primary-content capitalize border-none"
                >
                  Change Email
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default AccountContent;