/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./account-card.module.scss";

import { BsCheck2All } from "react-icons/bs";
import { BiSolidEdit } from "react-icons/bi";
import { MdDelete } from "react-icons/md";

import { useState, useEffect } from "react";
import { usePage } from "@inertiajs/react";

import DeleteConfirmationModal from "@/components/admin/Modals/DeleteConfirmationModal";
import CreateAccountTypeModal from "@/components/admin/Modals/CreateAccountTypeModal";

import currencyData from "../../../../data/countries-currencies.json";
import { formatMoneyComplete } from "@/lib/utils/format-money";

interface AccountPlanCardProps {
  current?: boolean;
  onSelect?: () => void;

  plan: {
    id: number;
    name: string;
    description: string;
    price_per_year: number;
    features?: string[];
  };
}

const AccountPlanCard = ({
  plan,
  current = false,
  onSelect,
}: AccountPlanCardProps) => {
  const {
    id,
    name,
    description,
    price_per_year,
    features,
  } = plan;

  const [isAdmin, setIsAdmin] =
    useState(false);

  const [editAccountType, setEditAccountType] =
    useState(false);

  const [deleteAccountType, setDeleteAccountType] =
    useState(false);

  const page = usePage();

  const { appSettings } =
    usePage().props as any;

  const currency = currencyData.find(
    (item) =>
      item.currency_code ===
      appSettings?.base_currency
  );

  useEffect(() => {
    setIsAdmin(
      page?.url?.startsWith(
        "/admin/account-types"
      )
    );
  }, [page?.url]);

  const toggleDeleteModal = () =>
    setDeleteAccountType((prev) => !prev);

  const toggleUpdateAccountType = () =>
    setEditAccountType((prev) => !prev);

  return (
    <>
      {deleteAccountType && (
        <DeleteConfirmationModal
          closeModal={toggleDeleteModal}
          deleteUrl={route(
            "admin_account_types.destroy",
            id
          )}
          title="Delete Account Type"
          description="This account type will no longer be available to users."
        />
      )}

      {editAccountType && (
        <CreateAccountTypeModal
          closeModal={toggleUpdateAccountType}
          type="update"
          accountType={plan}
        />
      )}

      <div
        className={`${styles.acc__card} ${
          current
            ? styles.acc__card__current
            : ""
        }`}
      >
        {current && (
          <div
            className={
              styles.acc__card__badge
            }
          >
            Current Plan
          </div>
        )}

        <div
          className={
            styles.acc__card__header
          }
        >
          <h2>{name}</h2>

          <p>{description}</p>
        </div>

        <div
          className={
            styles.acc__card__price
          }
        >
          <h1>
            {currency?.currency_symbol}
            {formatMoneyComplete(
              price_per_year
            )}
          </h1>

          <span>per year</span>
        </div>

        {!isAdmin && (
          <button
            disabled={current}
            onClick={onSelect}
            className={
              current
                ? styles.acc__card__currentBtn
                : styles.acc__card__upgradeBtn
            }
          >
            {current
              ? "Current Plan"
              : `Choose ${name}`}
          </button>
        )}

        <div
          className={
            styles.acc__card__features
          }
        >
          {features?.map(
            (
              feature,
              index
            ) => (
              <p key={index}>
                <BsCheck2All />
                {feature}
              </p>
            )
          )}
        </div>

        {isAdmin && (
          <div
            className={
              styles.acc__card__actions
            }
          >
            <button
              onClick={
                toggleUpdateAccountType
              }
              className={
                styles.acc__card__edit
              }
            >
              <BiSolidEdit />
              Update
            </button>

            <button
              onClick={
                toggleDeleteModal
              }
              className={
                styles.acc__card__delete
              }
            >
              <MdDelete />
              Delete
            </button>
          </div>
        )}
      </div>
    </>
  );
};

export default AccountPlanCard;