import React, { useState } from "react";
import Modal from "react-bootstrap/Modal";
import "react-toastify/dist/ReactToastify.css";
import { Button } from "react-bootstrap";
import Image from "next/image";
import RightIcon from "../../../public/images/right-icon.png";
import CloseIcon from "../../../public/images/close-icon.png";
import PendingIcon from "../../../public/images/pending-icon.png";
import { CheckOut } from "@/services/public";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
interface Props {
  child: {
    rowData: {
      id: string;
      label: string;
    };
  };
  onHide: () => void;
  show: boolean;
  handleCheckoutProccess: any;
}

function CustomerSubscriptionPlansModal({ child, onHide, show, handleCheckoutProccess }: Props) {
  const [hidePlan, setHidePlan] = useState(false);
  const [hoveredPlanIndex, setHoveredPlanIndex] = useState(null);


  const handleCancel = () => {
    onHide();
  };

  const handleSubmit = () => {
    setHidePlan(true)

  };

  const plansarr = [
    {
      name: 'Advance',
      price: '49',
      frequency: 'per month',
      features: ['5 seats', '2 advanced users', 'Cost per seat: $8.80', 'All standard features'],
      type: 'basic',
      colors: {
        default: '#ADD8E6',
      },
      checked:true
    },
    {
      name: 'Pro Plan',
      price: '99',
      frequency: 'per month',
      features: ['15 seats', '5 advanced users', 'Cost per seat: $6.60', 'All standard features'],
      type: 'pro',
      colors: {
        default: '#28A745',
      },
      checked: true

    },
    {
      name: 'Premium',
      price: '399',
      frequency: 'per month',
      features: ['50 seats', '15 advanced users', 'Cost per seat: $8.00', 'All standard features'],
      type: 'premium',
      colors: {
        default: '#FFD700',
      },
      checked: true

    },
  ];
  const getColor = ( plan,index) => {
    return hoveredPlanIndex === index ?"white":plan?.colors?.default;
  };
  function plans(setHidePlans: any, handleCheckoutProccessduo) {
    return <div className="container">
      <div className="text-center">
        <div className="modal-head new_header">
          <h5 className="modal-title"></h5>
          <h3 className="modal-title" style={{ padding: '10px', marginTop: '10px', color: '#3180f3' }}>
            Select your plan!
          </h3>
          <Button type="button" className="btn_close m-0" aria-label="Close" onClick={() => setHidePlans(false)}>
            X
          </Button>
        </div>
      </div>
      <div className="tab-content wow fadeIn" style={{ visibility: 'visible', animationName: 'fadeIn' }}>
        <div role="tabpanel" className="tab-pane fade show active" id="yearly">
          <div className="row justify-content-center">
            {plansarr?.map((plan, index) => (
              <div
                key={index}
                className="col-md-6 col-lg-4 mb-30"
                onMouseEnter={() => setHoveredPlanIndex(index)}
                onMouseLeave={() => setHoveredPlanIndex(null)}
              >
                <div className={`price-item text-center ${plan.type} ${hoveredPlanIndex === index ? 'popular' : ''}`}>
                  <div
                    style={{ backgroundColor: getColor(plan,index) }}
                    className="price-top"
                  >
                    <h4>{plan.name}</h4>
                    <h2 className="mb-0">
                      <sup>$</sup>{plan.price}
                    </h2>
                    <span className="text-capitalize">{plan.frequency}</span>
                  </div>
                  <div className="price-content">
                    <Button
                      style={
                        hoveredPlanIndex === index
                          ? { color: 'black', backgroundColor: 'white', borderColor: 'beige' }
                          : {}
                      }
                      onClick={() => handleCheckoutProccessduo(plan.type)}
                      className="btn btn-custom"
                    >
                      Buy now
                    </Button>
                    <ul className="border-bottom mb-30 mt-md-4 pb-3 text-left">
                      {plan.features.map((feature, idx) => (
                        <li style={{listStyleType:"none"}} key={idx} className={`custom-checkbox ${plan.type}`}>
                          <input checked={true} type="checkbox" id={`checkbox-${index}-${idx}`} />
                          <span></span>
                          <b htmlFor={`checkbox-${index}-${idx}`} className="c-black">{feature}</b>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  }
  return (
    <Modal
      show={show}
      onHide={onHide}
      size="xl"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      backdrop="static"
      keyboard={false}
      className="modal_popup"
    >
      {hidePlan ? plans(setHidePlan, handleCheckoutProccess) :
        <>  <div className="modal-content">
          <div className="modal-head new_header">
            <h5 className="modal-title"></h5>
            <h3 className="modal-title">Upgrade To Premium!</h3>
            <Button
              type="button"
              className="btn_close m-0"
              aria-label="Close"
              onClick={handleCancel}
            >
              X
            </Button>
          </div>
          <div className="modal-body Modal_body">
            <div className="customer_text text-center">
              <p>🏭&nbsp;&nbsp;For Customer</p>
            </div>
            <div className="row g-4 my-md-5 my-3">
              <div className="col-lg-6 mb-3 zoom" >
                <div className="free_plan">
                  <div className="plan_header">
                    <h3>Free Plan</h3>
                    {/* <h3>$0</h3> */}
                  </div>
                  <div className="sepretor my-4"></div>
                  <div className="icons_start">
                    <Image src={PendingIcon}></Image>
                    <p>
                      <span>User Cap:</span> Up to 2 users plus 1 Admin seat.
                    </p>
                  </div>
                  <div className="icons_start">
                    <Image src={PendingIcon}></Image>
                    <p>
                      <span>"My Carriers" Limit:</span> Manage up to 30 carriers in your
                      "My Carriers" list.
                    </p>
                  </div>
                  <div className="icons_start">
                    <Image src={PendingIcon}></Image>
                    <p>
                      <span>Rate Handling:</span> You can enter unlimted quote requests
                      and rates as well as select rates; however, direct sending to
                      clients with pricing markup is not permitted.
                    </p>
                  </div>
                  <div className="icons_start">
                    <Image src={PendingIcon}></Image>
                    <p>
                      <span>Quote Visibility:</span> Rate quote requests are visible
                      only to carriers within your "My Carriers" list.
                    </p>
                  </div>
                  <div className="icons_start">
                    <Image src={CloseIcon}></Image>
                    <p>
                      <span>Aggregate Data:</span> Viewing aggregate data and insights
                      on the rate-quotes page is not available.
                    </p>
                  </div>
                  <Button className="btn btn_plan" onClick={handleCancel}>
                  Cancel
                  </Button>
                </div>
              </div>
              <div className="col-lg-6 mb-3 zoom">
                <div className="free_plan primium_plan">
                  <div className="plan_header ">
                    <h3>Premium Plan</h3>
                    {/* <p>
                      $49<span> / month</span>
                    </p> */}
                  </div>
                  <div className="sepretor my-4"></div>
                  <div className="icons_start">
                    <Image src={RightIcon}></Image>
                    <p>
                      <span>User Expansion:</span> Increase your team with up to 5 users
                      plus 1 Admin seat, with the option to add more, enhancing
                      collaboration and productivity.
                    </p>
                  </div>

                  <div className="icons_start">
                    <Image src={RightIcon}></Image>
                    <p>
                      <span>Enhanced Rate Management:</span>Gain the ability to enter,
                      select, and importantly, send marked-up rates to clients,
                      amplifying your revenue opportunities.
                    </p>
                  </div>
                  <div className="icons_start">
                    <Image src={RightIcon}></Image>
                    <p>
                      <span>Expanded Quote Visibility:</span> Elevate your rate quotes'
                      exposure to all carriers, marked distinctly by color, boosting
                      your negotiation leverage and expanding your carrier network.
                    </p>
                  </div>
                  <div className="icons_start">
                    <Image src={RightIcon}></Image>
                    <p>
                      <span>Access to Aggregate Data:</span> Unveil the power to view
                      aggregate data on rate quotes, offering strategic insights and
                      decision-making support.
                    </p>
                  </div>
                  <Button className="btn btn_primium" onClick={handleSubmit}>
                    Upgrade to Premium
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div></>
      }
  
    </Modal>
  );
}

function CarrierSubscriptionPlansModal({ child, onHide, show, handleCheckoutProccess }: Props) {

  const handleCancel = () => {
    onHide();
  };
  const [hidePlan, setHidePlan] = useState(false);

  const plansarr = [
    {
      name: 'Advance',
      price: '49',
      frequency: 'per month',
      features: ['5 seats', '2 advanced users', 'Cost per seat: $8.80', 'All standard features'],
      type: 'basic',
      colors: {
        default: '#ADD8E6',
      },
      checked: true
    },
    {
      name: 'Pro Plan',
      price: '99',
      frequency: 'per month',
      features: ['15 seats', '5 advanced users', 'Cost per seat: $6.60', 'All standard features'],
      type: 'pro',
      colors: {
        default: '#28A745',
      },
      checked: true

    },
    {
      name: 'Premium',
      price: '399',
      frequency: 'per month',
      features: ['50 seats', '15 advanced users', 'Cost per seat: $8.00', 'All standard features'],
      type: 'premium',
      colors: {
        default: '#FFD700',
      },
      checked: true

    },
  ];
  const getColor = (plan, index) => {
    return hoveredPlanIndex === index ? "white" : plan?.colors?.default;
  };
  const [hoveredPlanIndex, setHoveredPlanIndex] = useState(null);
  function plans(setHidePlans: any, handleCheckoutProccessduo) {
    return <div className="container">
      <div className="text-center">
        <div className="modal-head new_header">
          <h5 className="modal-title"></h5>
          <h3 className="modal-title" style={{ padding: '10px', marginTop: '10px', color: '#3180f3' }}>
            Select your plan!
          </h3>
          <Button type="button" className="btn_close m-0" aria-label="Close" onClick={() => setHidePlans(false)}>
            X
          </Button>
        </div>
      </div>
      <div className="tab-content wow fadeIn" style={{ visibility: 'visible', animationName: 'fadeIn' }}>
        <div role="tabpanel" className="tab-pane fade show active" id="yearly">
          <div className="row justify-content-center">
            {plansarr.map((plan, index) => (
              mappingArr(index, setHoveredPlanIndex, plan, hoveredPlanIndex, getColor, handleCheckoutProccessduo)
            ))}
          </div>
        </div>
      </div>
    </div>
  }

  const handleSubmit = () => {
    setHidePlan(true)
  };

  return (
    <Modal
      show={show}
      onHide={onHide}
      size="xl"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      backdrop="static"
      keyboard={false}
      className="modal_popup"
    >
      {hidePlan ? plans(setHidePlan, handleCheckoutProccess) : <div className="modal-content">
        <div className="modal-head new_header">
         
          <h3 className="customer_text text-center">Upgrade To Premium!</h3>
          <Button
            type="button"
            className="btn_close m-0"
            aria-label="Close"
            onClick={handleCancel}
          >
            X
          </Button>
        </div>
        <div className="modal-body Modal_body">
          <div className="customer_text text-center">
            <p>🚛&nbsp;&nbsp;For Carriers</p>
          </div>
          <div className="row g-4 my-md-5 my-3">
            <div className="col-lg-6 mb-3 zoom">
              <div className="free_plan">
                <div className="plan_header">
                  <h3>Free Plan</h3>
            
                </div>
                <div className="sepretor my-4"></div>
                <div className="icons_start">
                  <Image src={PendingIcon}></Image>
                  <p>
                    <span>User Cap:</span> Up to 2 users plus 1 Admin seat, facilitating basic operational capabilities.
                  </p>
                </div>
                <div className="icons_start">
                  <Image src={PendingIcon}></Image>
                  <p>
                    <span>Gate Aggregate Data:</span> Access to aggregate data and insights on the rate-quotes page is not provided, focusing you on individual negotiations.
                    "My Carriers" list.
                  </p>
                </div>
                <div className="icons_start">
                  <Image src={PendingIcon}></Image>
                  <p>
                    <span>Quote Viewing:</span> Restriction to viewing quotes from customers/brokers who added you to the "My Carriers" list.
                  </p>
                </div>
                <div className="icons_start">
                  <Image src={PendingIcon}></Image>
                  <p>
                    <span>Profile Claim:</span> You can claim your free company profile; however, “verified status” is not provided.
                  </p>
                </div>
                <div className="icons_start">
                  <Image src={CloseIcon}></Image>
                  <p>
                    <span>Public Visibility:</span>Your profile is public, however, your logo remains private and not visible on the public site.
                  </p>
                </div>
                <Button className="btn btn_plan" onClick={handleCancel}>
                Cancel
                </Button>
              </div>
            </div>

            <div className="col-lg-6 mb-3 zoom">
              <div className="free_plan primium_plan">
                <div className="plan_header ">
                  <h3>Premium Plan</h3>
                  <p>
                  </p>
                </div>
                <div className="sepretor my-4"></div>
                <div className="icons_start">
                  <Image src={RightIcon}></Image>
                  <p>
                    <span>User Expansion:</span> Broaden your team with an Admin plus up to 5 users and further additions available, strengthening your operational capacity.
                  </p>
                </div>

                <div className="icons_start">
                  <Image src={RightIcon}></Image>
                  <p>
                    <span>Aggregate Data Viewing:</span>Delve into aggregate data insights on the rate-quotes page, empowering strategic positioning and bid optimization--including accessorial details.
                  </p>
                </div>
                <div className="icons_start">
                  <Image src={RightIcon}></Image>
                  <p>
                    <span>Extended Quote Viewing:</span> Open your opportunities by viewing quotes from all customers/brokers, broadening your business avenues to make new connections.
                  </p>
                </div>
                <div className="icons_start">
                  <Image src={RightIcon}></Image>
                  <p>
                    <span>Profile Verification:</span> (Blue Checkmark) Elevate your trustworthiness by claiming and verifying your profile. Verification accords a checkmark and prioritized placement on the Carriers Page, enhancing your visibility.
                  </p>
                </div>
                <div className="icons_start">
                  <Image src={RightIcon}></Image>
                  <p>
                    <span>Public Site Visibility:</span> Promote your brand with your logo displayed on the public site, broadening your reach and potential client base.
                  </p>
                </div>
                <Button className="btn btn_primium" onClick={handleSubmit}>
                  Upgrade to Premium
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>}
    
      
    </Modal>

  );
}
function mappingArr(index: number, setHoveredPlanIndex: React.Dispatch<React.SetStateAction<null>>, plan: { name: string; price: string; frequency: string; features: string[]; type: string; colors: { default: string; }; checked: boolean; }, hoveredPlanIndex: null, getColor: (plan: any, index: any) => any, handleCheckoutProccessduo: any): JSX.Element {
  return <div
    key={index}
    className="col-md-6 col-lg-4 mb-30"
    onMouseEnter={() => setHoveredPlanIndex(index)}
    onMouseLeave={() => setHoveredPlanIndex(null)}
  >
    <div className={`price-item text-center ${plan.type} ${hoveredPlanIndex === index ? 'popular' : ''}`}>
      <div
        style={{ backgroundColor: getColor(plan, index) }}
        className="price-top"
      >
        <h4>{plan.name}</h4>
        <h2 className="mb-0">
          <sup>$</sup>{plan.price}
        </h2>
        <span className="text-capitalize">{plan.frequency}</span>
      </div>
      <div className="price-content">
        <Button
          style={hoveredPlanIndex === index
            ? { color: 'black', backgroundColor: 'white', borderColor: 'beige' }
            : {}}
          onClick={() => handleCheckoutProccessduo(plan.type)}
          className="btn btn-custom"
        >
          Buy now
        </Button>
        <ul className="border-bottom mb-30 mt-md-4 pb-3 text-left">
          {plan.features.map((feature, idx) => (
            featuresMap(idx, plan, index, feature)
          ))}
        </ul>
      </div>
    </div>
  </div>;
}

function featuresMap(idx: number, plan: { name: string; price: string; frequency: string; features: string[]; type: string; colors: { default: string; }; checked: boolean; }, index: number, feature: string): JSX.Element {
  return <li style={{ listStyleType: "none" }} key={idx} className={`custom-checkbox ${plan.type}`}>
    <input checked={true} type="checkbox" id={`checkbox-${index}-${idx}`} />
    <span></span>
    <b htmlFor={`checkbox-${index}-${idx}`} className="c-black">{feature}</b>
  </li>;
}

function plansFilter(idx: number, plan: { name: string; price: string; frequency: string; features: string[]; type: string; }, feature: string): JSX.Element {
  return <li key={idx}>
    <i className={`zmdi zmdi-${idx < plan.features.length - 1 ? 'check' : 'close'} mr-2`}></i>
    <span className="c-black">{feature}</span>
  </li>;
}

export default function SubscriptionPlansModal(props: any) {
  const { data } = useSession();
 const Router= useRouter()
  const accessToken = data?.user?.image;
  const handleCheckoutProccess = async (plan) => {
    
    let res = await CheckOut(accessToken, plan)
    if (res?.status === "success") {
      Router.push(res?.data?.checkout_url)
    }
  }

  if(props?.userDetails?.group_type === "carriers"){
    return (
      <>
        <CarrierSubscriptionPlansModal
          show={props.modalStatus}
          onHide={() => props?.SetModalStatus(false)}
          child={props?.userDetails}
          handleCheckoutProccess={handleCheckoutProccess}
        />
      </>
    );
  }else{
    return (
      <>
        <CustomerSubscriptionPlansModal
          show={props.modalStatus}
          onHide={() => props?.SetModalStatus(false)}
          child={props?.userDetails}
          handleCheckoutProccess={handleCheckoutProccess}
        />
      </>
    );
  }
}