import { useQuery } from "@tanstack/react-query";
import { getBeastGlobalStatus } from "../../lib/commands";
import { Dialog } from "../ui/Dialog";

interface Props {
  projectName: string;
  onClose: () => void;
}

export function ClaudeConfigModal({ projectName, onClose }: Props) {
  const { data: beast, isLoading } = useQuery({
    queryKey: ["beastGlobalStatus"],
    queryFn: getBeastGlobalStatus,
    staleTime: 10000,
  });

  const modeLabel = beast?.active ? "🔥 狂暴模式" : "🛡️ 普通模式";
  const modeBg = beast?.active
    ? "bg-orange-50 border-orange-200 text-orange-700"
    : "bg-gray-50 border-gray-200 text-gray-600";

  return (
    <Dialog title={`Claude 自主性 · ${projectName}`} onClose={onClose} size="sm">
      <div className="px-6 py-5 space-y-5">

        {isLoading ? (
          <p className="text-sm text-gray-400 text-center py-4">读取中…</p>
        ) : (
          <>
            {/* Beast 安装状态 */}
            <div className="flex items-center justify-between">
              <span className="text-sm font-semibold text-gray-700">Beast</span>
              {beast?.installed ? (
                <span className="text-xs text-green-600 bg-green-50 border border-green-200 rounded-full px-2.5 py-0.5">
                  ● 已安装
                </span>
              ) : (
                <span className="text-xs text-gray-400 bg-gray-50 border border-gray-200 rounded-full px-2.5 py-0.5">
                  ○ 未安装
                </span>
              )}
            </div>

            {/* 当前模式 */}
            <div className={`rounded-xl border px-4 py-3 ${modeBg}`}>
              <p className="text-sm font-semibold">{beast?.installed ? modeLabel : "— 未启用"}</p>
              <p className="text-xs mt-0.5 opacity-70">
                {beast?.active
                  ? "权限全开，危险操作已拦截"
                  : beast?.installed
                  ? "文件修改需确认，Bash 需确认"
                  : "Beast 未安装，使用 Claude Code 默认权限"}
              </p>
            </div>

            {/* Bash 规则状态 */}
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-semibold text-gray-700">Bash 自主性规则</p>
                <p className="text-xs text-gray-400 mt-0.5">~/.claude/CLAUDE.md</p>
              </div>
              {beast?.has_bash_rules ? (
                <span className="text-xs text-green-600 bg-green-50 border border-green-200 rounded-full px-2.5 py-0.5">
                  ● 已注入
                </span>
              ) : (
                <span className="text-xs text-gray-400 bg-gray-50 border border-gray-200 rounded-full px-2.5 py-0.5">
                  ○ 未注入
                </span>
              )}
            </div>

            {/* CLI 操作提示 */}
            <div className="rounded-xl bg-gray-50 border border-gray-100 px-4 py-3 space-y-1.5">
              <p className="text-xs font-semibold text-gray-500 mb-2">在终端管理</p>
              {[
                { cmd: "beast i", desc: "安装 Beast" },
                { cmd: "beast on", desc: "开启狂暴模式 + 注入 Bash 规则" },
                { cmd: "beast off", desc: "切回普通模式 + 移除 Bash 规则" },
                { cmd: "beast s", desc: "查看当前状态" },
              ].map(({ cmd, desc }) => (
                <div key={cmd} className="flex items-center gap-3">
                  <code className="text-xs font-mono text-blue-600 bg-blue-50 rounded px-1.5 py-0.5 shrink-0">
                    {cmd}
                  </code>
                  <span className="text-xs text-gray-400">{desc}</span>
                </div>
              ))}
            </div>
          </>
        )}
      </div>

      <div className="flex justify-end px-6 py-4 border-t border-gray-100">
        <button
          onClick={onClose}
          className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-600 hover:bg-gray-50"
        >
          关闭
        </button>
      </div>
    </Dialog>
  );
}
