"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { AlertTriangle, WifiOff } from "lucide-react";
import { api, type Health } from "@/lib/api";
import { useMotionOK } from "@/lib/motion";

/**
 * System health, for everyone.
 *
 * This check already existed but lived inside the admin panel, so a regular
 * user whose every request was failing saw nothing but a growing pile of red
 * pills. "Reachable but not logged in" is the important case: the container is
 * up and healthy, so no other signal reports a problem, yet every search
 * returns nothing.
 */
export function StatusBanner() {
  const [h, setH] = React.useState<Health | null>(null);
  const ok = useMotionOK();

  React.useEffect(() => {
    let live = true;
    const poll = async () => {
      try {
        const r = await api.health();
        if (live) setH(r);
      } catch {
        /* a 401 here just means the poll outlived the session */
      }
    };
    void poll();
    const t = setInterval(poll, 20000);
    return () => {
      live = false;
      clearInterval(t);
    };
  }, []);

  const problem = !h
    ? null
    : h.slskd !== 200
      ? {
          icon: WifiOff,
          text: "Can't reach slskd — nothing will download until it's back.",
        }
      : h.logged_in === false
        ? {
            icon: AlertTriangle,
            text: "slskd is running but not signed in to Soulseek — searches will return nothing.",
          }
        : h.library_writable === false
          ? { icon: AlertTriangle, text: "The music library isn't writable — imports will fail." }
          : null;

  return (
    <AnimatePresence>
      {problem && (
        <motion.div
          role="status"
          initial={ok ? { height: 0, opacity: 0 } : false}
          animate={{ height: "auto", opacity: 1 }}
          exit={ok ? { height: 0, opacity: 0 } : { opacity: 0 }}
          className="overflow-hidden"
        >
          <div className="flex items-center gap-2 border-b border-warn/30 bg-warn/10 px-4 py-2 text-callout text-warn">
            <problem.icon className="h-4 w-4 shrink-0" />
            <span className="clamp1">{problem.text}</span>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}