"use client";

import { useHealth } from "@/lib/use-health";
import { openSettings } from "@/lib/ui-events";
import { Button } from "@/components/ui";

/**
 * Tells the user when they need to add (or fix) their own Ollama API key.
 * Renders nothing in local-daemon / server-key setups.
 */
export function ApiKeyBanner() {
  const { health, loading } = useHealth();
  if (!health || loading) return null;
  if (health.authMode !== "user-key") return null;

  const rejected = health.keyAccepted === false;
  if (!health.needsKey && !rejected) return null;

  return (
    <div
      role="status"
      className={
        rejected
          ? "glass-panel animate-rise flex flex-wrap items-center gap-3 rounded-[1.35rem] p-4 text-sm text-rose-900 dark:text-rose-100"
          : "glass-panel animate-rise flex flex-wrap items-center gap-3 rounded-[1.35rem] p-4 text-sm text-frost-900 dark:text-frost-50"
      }
    >
      <span aria-hidden className="text-xl">
        🔑
      </span>
      <p className="min-w-48 flex-1">
        <span className="font-bold">
          {rejected ? "Your Ollama API key was rejected." : "Add your Ollama API key to generate decks."}
        </span>{" "}
        <span className="font-normal">
          Create one at{" "}
          <a
            className="font-semibold underline underline-offset-2"
            href="https://ollama.com/settings/keys"
            target="_blank"
            rel="noreferrer"
          >
            ollama.com/settings/keys
          </a>{" "}
          and paste it in settings. It stays in this browser — the server never stores it.
        </span>
      </p>
      <Button size="sm" onClick={openSettings}>
        Add API key
      </Button>
    </div>
  );
}