import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
import { authFetch } from "../lib/apiFetch";
import { API_BASE_URL } from "../config";
import { useAuth } from "./AuthContext";

export interface ServiceStatus {
  status: "healthy" | "degraded";
  message: string | null;
  checkedAt: string;
}

interface ServiceStatusContextValue {
  /** null until the first check resolves — treated as healthy for rendering purposes (no banner) until we actually know otherwise. */
  serviceStatus: ServiceStatus | null;
  refreshServiceStatus: () => Promise<void>;
  isRefreshing: boolean;
}

const ServiceStatusContext = createContext<ServiceStatusContextValue | null>(null);

export function ServiceStatusProvider({ children }: { children: React.ReactNode }) {
  const { user } = useAuth();
  const [serviceStatus, setServiceStatus] = useState<ServiceStatus | null>(null);
  const [isRefreshing, setIsRefreshing] = useState(false);

  const refreshServiceStatus = useCallback(async () => {
    setIsRefreshing(true);
    try {
      const res = await authFetch(`${API_BASE_URL}/service-status`);
      if (res.ok) setServiceStatus(await res.json());
    } catch {
      // best-effort — if the status check itself can't be reached, leave
      // whatever we last knew in place rather than guessing
    } finally {
      setIsRefreshing(false);
    }
  }, []);

  useEffect(() => {
    if (user) {
      refreshServiceStatus();
    } else {
      setServiceStatus(null);
    }
  }, [user, refreshServiceStatus]);

  return (
    <ServiceStatusContext.Provider value={{ serviceStatus, refreshServiceStatus, isRefreshing }}>
      {children}
    </ServiceStatusContext.Provider>
  );
}

export function useServiceStatus() {
  const ctx = useContext(ServiceStatusContext);
  if (!ctx) throw new Error("useServiceStatus must be used within a ServiceStatusProvider");
  return ctx;
}