import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useSiteStatus } from "@settings/contexts/SiteStatusContext";
import { WarningIcon, CancelIcon } from "@app/assets/images/icons";
import Button from "@app/components/button/Button";
import "./access-lost-banner-styles.scss";

/**
 * Dismissible banner shown across the admin app when the platform reports
 * the linked Instagram account's token has died (account-settings.notification.error
 * === 'ACCESS_LOST'). Mirrors DisabledBanner: dismissal is
 * scoped to the current access-lost episode and reappears if access is lost
 * again after being dismissed, since `accessLostSince` resets on every new
 * episode.
 */
const AccessLostBanner = () => {
  const { isAccessLost, accessLostSince } = useSiteStatus();
  const [dismissed, setDismissed] = useState(false);
  const navigate = useNavigate();
  const localization = sfsyncI18n.data;

  useEffect(() => {
    setDismissed(false);
  }, [accessLostSince]);

  if (!isAccessLost || dismissed) {
    return null;
  }

  return (
    <div className="sfsync-accessLostBanner">
      <div className="sfsync-accessLostBanner-content">
        {WarningIcon}
        <div className="sfsync-accessLostBanner-text">
          <span className="sfsync-accessLostBanner-title">
            {localization.access_lost_banner_title}
          </span>
          <span className="sfsync-accessLostBanner-message">
            {localization.access_lost_banner_message}
          </span>
        </div>
      </div>
      <div className="sfsync-accessLostBanner-actions">
        <Button
          text={localization.reconnect_account}
          onClickHandler={() => navigate("/dashboard/overview")}
        />
        <button
          type="button"
          className="sfsync-accessLostBanner-dismiss"
          aria-label={localization.dismiss}
          onClick={() => setDismissed(true)}
        >
          {CancelIcon}
        </button>
      </div>
    </div>
  );
};

export default AccessLostBanner;