import React from "react";
import { useServiceWorker } from "../hooks/useServiceWorker";
import styles from "./ServiceWorkerStatus.module.css";

interface ServiceWorkerStatusProps {
  className?: string;
}

export const ServiceWorkerStatus: React.FC<ServiceWorkerStatusProps> = ({
  className = "",
}) => {
  const {
    isSupported,
    isRegistered,
    isOffline,
    isInIframe,
    cacheSize,
    loading,
    error,
    updateServiceWorker,
    clearCache,
    getCacheSize,
  } = useServiceWorker();

  if (!isSupported) {
    return (
      <div
        className={`${styles["sw-status"]} ${styles["sw-status--unsupported"]} ${className}`}
      >
        <p>⚠️ Service Workers not supported in this browser</p>
      </div>
    );
  }

  return (
    <div
      className={`${styles["sw-status"]} ${
        isOffline ? styles["sw-status--offline"] : styles["sw-status--online"]
      } ${className}`}
    >
      <div className={styles["sw-status__header"]}>
        <h3>📡 Service Worker Status</h3>
        <div className={styles["sw-status__indicators"]}>
          <span
            className={`${styles.indicator} ${
              isRegistered
                ? styles["indicator--success"]
                : styles["indicator--warning"]
            }`}
          >
            {isRegistered ? "✅ Registered" : "❌ Not Registered"}
          </span>
          <span
            className={`${styles.indicator} ${
              isOffline
                ? styles["indicator--warning"]
                : styles["indicator--success"]
            }`}
          >
            {isOffline ? "📴 Offline" : "🌐 Online"}
          </span>
          {isInIframe && (
            <span
              className={`${styles.indicator} ${styles["indicator--info"]}`}
            >
              🖼️ In iFrame
            </span>
          )}
        </div>
      </div>

      {error && (
        <div className={styles["sw-status__error"]}>
          <p>❌ Error: {error}</p>
        </div>
      )}

      <div className={styles["sw-status__info"]}>
        <p>📦 Cached Items: {cacheSize}</p>
        {isOffline && (
          <p className={styles["sw-status__offline-notice"]}>
            🔒 App running offline from cache
          </p>
        )}
      </div>

      <div className={styles["sw-status__controls"]}>
        <button
          onClick={updateServiceWorker}
          disabled={loading || !isRegistered}
          className={`${styles["sw-button"]} ${styles["sw-button--primary"]}`}
        >
          {loading ? "⏳" : "🔄"} Update SW
        </button>

        <button
          onClick={getCacheSize}
          disabled={loading || !isRegistered}
          className={`${styles["sw-button"]} ${styles["sw-button--secondary"]}`}
        >
          {loading ? "⏳" : "📊"} Refresh Cache Info
        </button>

        <button
          onClick={clearCache}
          disabled={loading || !isRegistered}
          className={`${styles["sw-button"]} ${styles["sw-button--danger"]}`}
        >
          {loading ? "⏳" : "🗑️"} Clear Cache
        </button>
      </div>
    </div>
  );
};
