import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import styled from "styled-components";
import Button from "../button";
import gracePeriodImg from "./modal/img/gracePeriodImage.png";
import warning from "../../assets/images/warning_avatar.png";
import moment from "moment";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const routes = [
  {
    path: "dashboard",
    title: "Dashboard",
  },
  {
    path: "reports",
    title: "Reports",
  },
  {
    path: "courses",
    title: "Courses",
  },
  {
    path: "manage-teams",
    title: "Manage Teams",
  },
  {
    path: "msg/messages",
    title: "Messages",
  },
  {
    path: "announcements",
    title: "Announcements",
  },
  {
    path: "file-manager",
    title: "File Manager",
  },
];
const GracePeriod = ({
  getCurrentSubscriptionData,
  handleCurrentSubscription,
  gracePeriod,
  stateType,
  findText,
}) => {
  const location = useLocation();
  const getTitleFromPath = (path) => {
    const route = routes.find((route) => path.includes(route.path));
    return route?.title || "Dashboard";
  };
  const pageTitle = getTitleFromPath(location.pathname);
  useEffect(() => {
    handleCurrentSubscription();
  }, []);
  const [timeLeft, setTimeLeft] = useState("...");
  useEffect(() => {
    const updateCountdown = () => {
      const gracePeriodEnd = getCurrentSubscriptionData?.data?.grace_period_end;
      if (!gracePeriodEnd) {
        setTimeLeft("...");
        return;
      }
      const now = moment();
      const expiry = moment(gracePeriodEnd);
      const duration = moment.duration(expiry.diff(now));
      if (duration.asSeconds() <= 0) {
        setTimeLeft("0h - 0m - 0s");
        clearInterval(intervalId); // Stop the countdown when grace period ends
        return;
      }
      const days = Math.floor(duration.asDays());
      const hours = duration.hours();
      const minutes = duration.minutes();
      const seconds = duration.seconds();
      setTimeLeft(
        `${days > 0 ? `${days}d - ` : ""}${hours}h - ${minutes}m - ${seconds}s`,
      );
    };
    const intervalId = setInterval(updateCountdown, 1000);
    updateCountdown(); // Call immediately to prevent 1s delay
    return () => clearInterval(intervalId);
  }, [getCurrentSubscriptionData?.data?.grace_period_end]);
  return (
    <GracePeriodWrapper>
      <h1>{pageTitle}</h1>
      {stateType === 1 ? (
        <div
          className="grace_period_body"
          style={{
            display: "flex",
            flexFlow: "column wrap",
            justifyContent: "center",
            alignItems: "center",
            gap: 20,
            height: "100%",
          }}
        >
          <img src={warning} alt="" />
          <h2>{findText("Your subscription to Learngual has expired")}</h2>
          <p
            dangerouslySetInnerHTML={{
              __html: findText(
                "Your students and instructors will no longer {br1} be able to access your courses after {br2} {span}",
                {
                  br1: `<br>`,
                  br2: `<br>`,
                  span: `<span style="fontWeight: 700; color: red;">${timeLeft}</span>`,
                },
              ),
            }}
          ></p>
          <div
            onClick={() => {
              window.location.href = "/settings/payment";
            }}
          >
            <Button
              text={findText("Renew subscription")}
              styles={{
                height: "35px",
                padding: "4px 20px",
                fontSize: "14px",
              }}
            />
          </div>
        </div>
      ) : (
        <>
          <Expire>
            <h4>{findText("Your subscription to Learngual has expired")}</h4>
            <h5>
              {findText(
                "You don’t have an active plan, renew your subscription to gain full access to your account.",
              )}
            </h5>

            <div
              onClick={() => {
                window.location.href = "/settings/payment";
              }}
            >
              <Button
                text={findText("Choose plan")}
                styles={{
                  height: "35px",
                  padding: "4px 20px",
                  fontSize: "14px",
                }}
              />
            </div>
          </Expire>
          <div className="gracePeriod_account">
            <img
              src={gracePeriodImg}
              alt=""
              style={{
                width: "100px",
              }}
            />
            <div className="content">
              <p>{findText("Sorry, you can’t access your account")}</p>
            </div>
          </div>
        </>
      )}
      {/* {gracePeriod && (
        <Expire>
          <h4>Your subscription to Learngual has expired</h4>
          <h5>
            You don’t have an active plan, renew your subscription to gain full
            access to your account.
          </h5>
           <div
            onClick={() => {
              window.location.href = "/settings/payment";
            }}
          >
            <Button
              text="Choose plan"
              styles={{
                height: "35px",
                padding: "4px 20px",
                fontSize: "14px",
              }}
            />
          </div>
        </Expire>
       )}
       <div className="gracePeriod_account">
        <img
          src={gracePeriodImg}
          alt=""
          style={{
            width: "100px",
          }}
        />
        <div className="content">
          <p>Sorry, you can’t access your account</p>
        </div>
       </div> */}

      {/* <SubscriptionExpiredModal
        subscriptionExpiredModalIsOpen={subscriptionExpiredModalIsOpen}
        setSubscriptionExpiredModalIsOpen={setSubscriptionExpiredModalIsOpen}
        getCurrentSubscriptionData={getCurrentSubscriptionData}
       /> */}
    </GracePeriodWrapper>
  );
};
const GracePeriodWrapper = styled.div`
  height: 500px;

  h1 {
    margin-top: 0px;
    margin-bottom: 20px;
    color: #313333;
    font-size: 24px;
  }
  .grace_period_body {
    background: white;
    border-radius: 30px;
    h2 {
      font-weight: 700;
      font-size: 20px;
      line-height: 100%;
      letter-spacing: 2%;
      text-align: center;
      color: rgba(249, 84, 84, 1);
    }
    p {
      text-align: center;
    }
  }

  .gracePeriod_account {
    border-radius: 30.67px;
    background: var(--white, #fff);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 670px;
    flex-shrink: 0;
    position: relative;

    img {
      position: absolute;
      top: 120px;
      left: 46%;
    }

    .content {
      z-index: 2;
      border-radius: 15px;
      background: var(--Neutral-10, #f5f7f7);
      display: flex;
      justify-content: center;
      align-items: center;
      display: inline-flex;
      padding: 30px 18px;
      flex-direction: column;
      align-items: center;
      gap: 30px;

      p {
        color: var(--Neutral-90, #313333);
        text-align: center;
        font-feature-settings:
          "salt" on,
          "liga" off;
        font-family: Nunito;
        font-size: 25px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%; /* 30px */
        width: 306px;
      }
    }
  }
`;
const Expire = styled.div`
  border-radius: 25px;
  background: rgba(249, 84, 84, 0.1);
  display: flex;
  padding: 15px 26px;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;

  h4 {
    color: #f95454;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 5px;
  }

  h5 {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    margin-bottom: 10px;
  }
`;
export default GracePeriod;
