import styles from "./pricing.module.css";
import { useGetSubscriptionPlans, useGetUserSubscription } from "../api";
import { SpinnerOverlay } from "../../../components/ui/spinner";
import { ISubscriptionPlan } from "../../../types/global-types";
import { useGlobalContext } from "app/components/providers/global-context";
import { CheckIcon } from "app/components/icons";
import { useSubscribeToPlan } from "../api/mutations";
import { useState } from "react";
import { Modal, ProgressBar } from "@shopify/polaris";

interface IRenderedPlan {
  planId: string;
  subscriptionPlanId?: string;
  name: string;
  description: string;
  monthlyPrice: number;
  features: { text: string }[];
  recommended: boolean;
  contactLink: boolean;
}

export default function Pricing() {
  // const [paymentLink, setPaymentLink] = useState<string | null>(null);
  // const [isModalOpen, setIsModalOpen] = useState(false);
  const { agent } = useGlobalContext();

  const { data: subscriptionPlans, isLoading, error } = useGetSubscriptionPlans();
  const { data: userSubscription } = useGetUserSubscription(agent?.workspace_id || '');
  const subscribeToPlan = useSubscribeToPlan();

  const formatPrice = (monthlyPrice: number) => {
    return `$${monthlyPrice.toFixed(2)}`;
  };

  const getPricePeriod = () => {
    return "/month";
  };

  const handleSubscribeToPlan = (planId: string, subscriptionPlanId: string) => {
    if (!agent) {
      console.error("Agent or workspaceId is missing");
      return;
    }
    subscribeToPlan.mutate(
      { subscriptionPlanId, workspaceId: agent.workspace_id, planId },
      {
        onSuccess: (data) => {
          if (data.payment_link) {
            // Open payment page in a new tab
            window.open(data.payment_link, "_blank");
          }
        },
      }
    );

    //  subscribeToPlan.mutate({ subscriptionPlanId, workspaceId: agent.workspace_id, planId },{onSuccess: (data) => {
    //     setPaymentLink(data.payment_link);
    //     setIsModalOpen(true);
    //   }});
  };

  if (isLoading) {
    return (
      <div className={styles.pricingContainer}>
        <SpinnerOverlay />
      </div>
    );
  }

  if (error) {
    return (
      <div className={styles.pricingContainer}>
        <p>Error loading plans. Please try again.</p>
      </div>
    );
  }

  const plansList = Array.isArray(subscriptionPlans) ? subscriptionPlans : (subscriptionPlans as any)?.data || [];

  const plansToRender = plansList.map((plan: ISubscriptionPlan) => ({
      planId: plan.plan_id,
      subscriptionPlanId: plan._id,
      name: plan.name,
      description: plan.description || "",
      monthlyPrice: plan.amount,
      features: plan.benefits ? plan.benefits.map((benefit: string) => ({ text: benefit })) : [],
      recommended: plan.name === "Silver Plan", // Example: mark Silver as recommended
      contactLink: plan.amount > 50, // Example: contact for higher plans
    }));

  return (
    <div className={styles.pricingContainer}>
      {userSubscription && (
        <div className={styles.usageContainer}>
          <h3>Your Current Usage & Benefits</h3>
          <div className={styles.usageList}>
            <div className={styles.usageItem}>
              <p><strong>Chat Limit:</strong> {userSubscription.chat_token_limit_left.toLocaleString()} / {userSubscription.benifites.chat_token_limit.toLocaleString()}</p>
              <ProgressBar progress={(userSubscription.chat_token_limit_left / userSubscription.benifites.chat_token_limit) * 100} tone="primary" />
            </div>
            {/* <div className={styles.usageItem}>
              <p><strong>Voice Duration:</strong> {userSubscription.voice_duration_limit_left} / {userSubscription.benifites.voice_duration_limit} minutes</p>
              <ProgressBar progress={(userSubscription.voice_duration_limit_left / userSubscription.benifites.voice_duration_limit) * 100} tone="primary" />
            </div>
            <div className={styles.usageItem}>
              <p><strong>Tele Duration:</strong> {userSubscription.tele_duration_limit_left} / {userSubscription.benifites.tele_duration_limit} minutes</p>
              <ProgressBar progress={(userSubscription.tele_duration_limit_left / userSubscription.benifites.tele_duration_limit) * 100} tone="primary" />
            </div>
            <div className={styles.usageItem}>
              <p><strong>Knowledgebase:</strong> {userSubscription.knowledgebase_limit_left} / {userSubscription.benifites.knowledgebase_limit}</p>
              <ProgressBar progress={(userSubscription.knowledgebase_limit_left / userSubscription.benifites.knowledgebase_limit) * 100} tone="primary" />
            </div>
            <div className={styles.usageItem}>
              <p><strong>Agents:</strong> {userSubscription.agent_limit_left} / {userSubscription.benifites.agent_limit}</p>
              <ProgressBar progress={(userSubscription.agent_limit_left / userSubscription.benifites.agent_limit) * 100} tone="primary" />
            </div>
            <div className={styles.usageItem}>
              <p><strong>Workspace Members:</strong> {userSubscription.workspace_member_limit_left} / {userSubscription.benifites.workspace_member_limit}</p>
              <ProgressBar progress={(userSubscription.workspace_member_limit_left / userSubscription.benifites.workspace_member_limit) * 100} tone="primary" />
            </div> */}
          </div>
          {/* <div className={styles.benefitsGrid}>
            <h4>Plan Benefits</h4>
            <div className={styles.benefitItem}>
              <strong>Chat Limit:</strong> {userSubscription.benifites.chat_token_limit.toLocaleString()}
            </div>
            <div className={styles.benefitItem}>
              <strong>Tele Duration Limit:</strong> {userSubscription.benifites.tele_duration_limit} minutes
            </div>
            <div className={styles.benefitItem}>
              <strong>Voice Duration Limit:</strong> {userSubscription.benifites.voice_duration_limit} minutes
            </div>
            <div className={styles.benefitItem}>
              <strong>Knowledgebase Limit:</strong> {userSubscription.benifites.knowledgebase_limit}
            </div>
            <div className={styles.benefitItem}>
              <strong>Agent Limit:</strong> {userSubscription.benifites.agent_limit}
            </div>
            <div className={styles.benefitItem}>
              <strong>Workspace Member Limit:</strong> {userSubscription.benifites.workspace_member_limit}
            </div>
          </div> */}
        </div>
      )}
      <div className={styles.cardsContainer}>
        {plansToRender.map((plan: IRenderedPlan, index: number) => (
          <div key={index} className={styles.card}>
            {plan.recommended && <div className={styles.recommendedBadge}>Recommended</div>}
            <h3 className={styles.cardTitle}>{plan.name}</h3>
            <p className={styles.cardDescription}>{plan.description}</p>
            <div className={styles.priceContainer}>
              <span className={styles.price}>{formatPrice(plan.monthlyPrice)}</span>
              <span className={styles.pricePeriod}>{getPricePeriod()}</span>
            </div>
            {plan.planId === userSubscription?.plan_id ? (
              <>
                <button
                  disabled
                  className={styles.currentPlanButton}
                >
                  Current Plan
                </button>
                <div style={{ height: "16px" }}></div>
              </>
            ) : (
              <button
                onClick={() => handleSubscribeToPlan(plan.planId, plan.subscriptionPlanId as string)}
                className={`${styles.ctaButton} ${plan.recommended ? styles.primary : styles.secondary
                  }`}
              >
                Subscribe
              </button>

            )}
            <div className={styles.features}>
              {plan.features.map((feature: { text: string }, featureIndex: number) => (
                <div key={featureIndex} className={styles.feature}>
                  <CheckIcon styles={styles} />
                  <span className={styles.featureText}>{feature.text}</span>
                </div>
              ))}
            </div>
            {plan.contactLink && (
              <a href="#contact" className={styles.contactLink}>
                Contact us for better deals
              </a>
            )}
          </div>
        ))}
      </div>

      {/* <Modal
        open={isModalOpen}
        onClose={() => {
          setIsModalOpen(false);
          setPaymentLink(null);
        }}
        title="Complete Payment"
        size="large"
      >
        {paymentLink && (
          <iframe
            src={paymentLink}
            style={{ width: '100%', height: '600px', border: 'none' }}
            title="Payment"
          />
        )}
      </Modal> */}
    </div>
  );
}