"use client";

import { useEffect, useState } from "react";
import { TriangleAlert } from "lucide-react";
import { api, type HealthResult } from "@/components/api";

const INSTALL_HINTS: Record<string, string> = {
  sling: "brew install slingdata-io/sling/sling（或参考 https://docs.slingdata.io）",
  atlas: "brew install ariga/tap/atlas（或参考 https://atlasgo.io）",
};

export function HealthBanner() {
  const [health, setHealth] = useState<HealthResult | null>(null);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    api<HealthResult>("/api/health")
      .then(setHealth)
      .catch(() => setFailed(true));
  }, []);

  if (!health) {
    if (!failed) return null;
    return (
      <div className="border-b border-amber-500/40 bg-amber-500/10 px-4 py-2 text-sm text-amber-700 dark:text-amber-400">
        无法获取 CLI 健康状态（/api/health 请求失败）。
      </div>
    );
  }

  const missing = (["sling", "atlas"] as const).filter((k) => !health[k]);
  if (missing.length === 0) return null;

  return (
    <div className="flex items-start gap-2 border-b border-amber-500/40 bg-amber-500/10 px-4 py-2 text-sm text-amber-700 dark:text-amber-400">
      <TriangleAlert className="mt-0.5 size-4 shrink-0" />
      <div className="flex flex-col gap-0.5">
        {missing.map((k) => (
          <span key={k}>
            未检测到 <span className="font-mono font-medium">{k}</span> CLI
            {k === "atlas" ? "（schema 同步不可用）" : "（数据迁移不可用）"}
            ，安装提示：
            <span className="font-mono">{INSTALL_HINTS[k]}</span>
          </span>
        ))}
      </div>
    </div>
  );
}