import React from "react";
import api from "./api";
import styled from "styled-components";
import moment from "moment";

import BoxIcon from "./boxIcon";
import redirectURL from "../../../utils/redirectURL";
import classNames from "classnames";
import useTranslation from "../../../hooks/useTranslation.jsx";
import CustomCarousel from "../components/carousel.jsx";
import wordStore from "../../../mc/wordStore.json";

const SeatIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M7 18V9C7 6.17157 7 4.75736 7.87868 3.87868C8.75736 3 10.1716 3 13 3H13.5C14.9045 3 15.6067 3 16.1111 3.33706C16.3295 3.48298 16.517 3.67048 16.6629 3.88886C17 4.39331 17 5.09554 17 6.5"
      stroke="#FEBF10"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M11 12H7C5.11438 12 4.17157 12 3.58579 12.5858C3 13.1716 3 14.1144 3 16C3 17.8856 3 18.8284 3.58579 19.4142C4.17157 20 5.11438 20 7 20H15"
      stroke="#FEBF10"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M17 6.5L18.5766 7.07887C19.8681 7.55354 20.5138 7.79088 20.8569 8.33246C21.2 8.87404 21.2 9.56246 21.2 10.9393V12.4C21.2 13.8523 21.2 14.5784 20.7892 15.0392C20.3784 15.5 19.7389 15.5 18.46 15.5H17.5C16.6716 15.5 16 16.1716 16 17V20"
      stroke="#FEBF10"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M12 20V21"
      stroke="#FEBF10"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M7 20V21"
      stroke="#FEBF10"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M16 20V21"
      stroke="#FEBF10"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const DatabaseIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <ellipse cx="12" cy="5" rx="8" ry="3" stroke="#00C2C2" strokeWidth="1.5" />
    <path
      d="M20 12C20 13.6569 16.4183 15 12 15C7.58172 15 4 13.6569 4 12"
      stroke="#00C2C2"
      strokeWidth="1.5"
    />
    <path
      d="M20 5V19C20 20.6569 16.4183 22 12 22C7.58172 22 4 20.6569 4 19V5"
      stroke="#00C2C2"
      strokeWidth="1.5"
    />
  </svg>
);

const formatStorageSize = (bytes) => {
  if (!bytes && bytes !== 0) return "0.00";
  const gb = bytes / (1024 * 1024 * 1024);
  if (gb >= 1) return gb.toFixed(2);
  const mb = bytes / (1024 * 1024);
  return `${mb.toFixed(2)}MB`;
};

const EnterpriseRightBar = ({ planState, isPendingDelete }) => {
  const { findText } = useTranslation(wordStore);
  const { coursesData, remainingSlotData, storageSummaryData } = api();

  const courses = coursesData?.data?.results;
  const slotData = remainingSlotData?.data;
  const storageData = storageSummaryData?.data;

  const slotTotal = slotData?.total || 0;
  const slotUsed = slotData?.used || 0;
  const slotPercent =
    slotTotal > 0 ? ((slotUsed / slotTotal) * 100)?.toFixed(2) : 0;

  const storageUsed = storageData?.total_size ?? 0;
  const storageTotal = storageData?.total_storage ?? 0;
  const storagePercent = storageData?.total_percentage?.toFixed(2) ?? 0;

  return (
    <EnterpriseContainer
      className={classNames({
        grace_period: planState === "GRACE PERIOD",
        pending_delete: isPendingDelete,
      })}
    >
      <Banner>
        <h3>{findText("Courses ending soon")}</h3>
        {courses?.length > 0 ? (
          <CustomCarousel
            items={courses}
            autoPlay
            interval={3500}
            renderItem={(course) => (
              <Course key={course?.id}>
                <img src={course?.thumbnail_dict?.url} alt="" />
                <div className="content">
                  <p className="date">
                    <span>{findText("Ends:")}</span>{" "}
                    {moment(course?.end_day).format("MMM DD, YYYY")}
                  </p>
                  <p className="name">{course?.name}</p>
                </div>
              </Course>
            )}
          />
        ) : (
          <EmptyCourse>
            <BoxIcon />
            <p>{findText("There is no course ending in the next 30 days")}</p>
          </EmptyCourse>
        )}
      </Banner>

      <BottomSection>
        <ResourceCard>
          <div className="card-header">
            <div className="icon-wrapper icon-slots">
              <SeatIcon />
            </div>
            <span className="card-title">{findText("Slots")}</span>
          </div>
          <div className="card-body">
            <div className="stats-row">
              <p className="usage">
                <span className="used">{slotUsed}</span>
                <span className="total"> / {slotTotal} </span>
              </p>
              <p className="percent">
                {slotPercent}% {findText("used")}
              </p>
            </div>
            <ProgressTrack>
              <ProgressFill color="#FEBF10" width={slotPercent} />
            </ProgressTrack>
            <OutlineButton
              color="#FEBF10"
              onClick={() => {
                window.location.href = redirectURL("/settings/payment");
              }}
            >
              {findText("Buy slots")}
            </OutlineButton>
          </div>
        </ResourceCard>

        <ResourceCard>
          <div className="card-header">
            <div className="icon-wrapper icon-storage">
              <DatabaseIcon />
            </div>
            <span className="card-title">{findText("Storage")}</span>
          </div>
          <div className="card-body">
            <div className="stats-row">
              <p className="usage">
                <span className="used">{formatStorageSize(storageUsed)}</span>
                <span className="total">
                  {" "}
                  / {formatStorageSize(storageTotal)}
                  {storageTotal >= 1024 * 1024 * 1024 ? "GB" : ""}{" "}
                </span>
              </p>
              <p className="percent">
                {storagePercent}% {findText("used")}
              </p>
            </div>
            <ProgressTrack>
              <ProgressFill color="#00C2C2" width={storagePercent} />
            </ProgressTrack>
            <OutlineButton
              color="#00C2C2"
              onClick={() => {
                window.location.href = redirectURL("/settings/payment");
              }}
            >
              {findText("Upgrade storage")}
            </OutlineButton>
          </div>
        </ResourceCard>
      </BottomSection>
    </EnterpriseContainer>
  );
};
const Banner = styled.div`
  position: relative;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
  h3 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.28px;
    color: #313333;
  }
`;
const EnterpriseContainer = styled.div`
  background: #fff;
  max-width: 232px;
  width: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 30.913px;
  border: 0.773px solid #dfe5e5;
  padding: 20px 18px;
  height: 638px;

  /* GRACE PERIOD AND DEACTIVATED */
  &.grace_period {
    border: 0.773px solid var(--Neutral-20, #dfe5e5);
    background: var(--Neutral-20, #dfe5e5);

    > div {
      border: 0.773px solid var(--Neutral-20, #dfe5e5);
      background: var(--Neutral-20, #dfe5e5);
    }
  }

  &.pending_delete {
    background-color: #dfe5e5;
  }

  .carousel-container {
    position: relative;

    .control-dots {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      bottom: 30;
    }
  }
`;
const BottomSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-top: 20px;
  border-radius: 0 0 30px 30px;
`;
const ResourceCard = styled.div`
  background: #fff;
  border: 1px solid #f5f7f7;
  border-radius: 15px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;

  .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .icon-wrapper {
    width: 40px;
    height: 38px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;

    &.icon-slots {
      background: rgba(254, 191, 16, 0.1);
    }
    &.icon-storage {
      background: #e5f9f9;
    }
  }

  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #4a4d4d;
    flex: 1;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .stats-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px;
  }

  .usage {
    font-size: 14px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    .used {
      font-weight: 600;
      color: #7c8080;
    }
    .total {
      font-weight: 400;
      color: #adb2b2;
    }
  }

  .percent {
    font-size: 14px;
    font-weight: 400;
    color: #adb2b2;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }
`;
const ProgressTrack = styled.div`
  width: 100%;
  height: 10px;
  background: #f5f7f7;
  border-radius: 10px;
  overflow: hidden;
  margin-top: -12px;
`;
const ProgressFill = styled.div`
  height: 100%;
  width: ${(props) => Math.min(props.width || 0, 100)}%;
  background: ${(props) => props.color || "#FEBF10"};
  border-radius: 17px;
  transition: width 0.3s ease;
`;
const OutlineButton = styled.a`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid ${(props) => props.color || "#FEBF10"};
  color: ${(props) => props.color || "#FEBF10"};
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  line-height: 20px;

  &:hover {
    opacity: 0.85;
  }
`;
const Course = styled.div`
  width: 100%;

  border-radius: 18.548px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34.29%, #000 100%);

  > .content {
    position: relative;
    z-index: 2;
    flex: 1;
    height: 132px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    > .date {
      border-radius: 6.183px;
      background: #fff;
      display: flex;
      gap: 4px;
      width: fit-content;
      align-items: center;
      height: 22.758px;
      padding: 3px 10px;
      color: #4a4d4d;
      text-align: center;
      font-size: 12px;
      span {
        color: #f95454;
      }
    }
    > .name {
      color: var(--white, #fff);
      font-size: 14px;
      font-weight: 700;
      width: 99%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  img {
    width: 100%;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    inset: 0;
    object-fit: cover;
  }
`;
const EmptyCourse = styled.div`
  height: 132px;
  width: 100%;
  border-radius: 20px;
  background: #f5f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  > p {
    color: #636666;
    text-align: center;
    width: 100%;
    max-width: 144px;
    margin: 0 auto;
    font-size: 12px;
  }
`;
export const FallbackRightBar = styled.div`
  background: #fff;
  width: 232px;
  max-width: 232px;

  border-radius: 30px;
  height: 638px;
`;
export default EnterpriseRightBar;
