import React, { useEffect, useState } from 'react';
import { Cpu, Loader2 } from 'lucide-react';
import { getAiModelStatus, type AiRuntimeStatus } from '../lib/api';
import { cn } from '../lib/utils';
import { useStore } from '../store/useStore';

interface ModelStatusBadgeProps {
  compact?: boolean;
}

export function ModelStatusBadge({ compact = false }: ModelStatusBadgeProps) {
  const aiModel = useStore((state) => state.aiModel);
  const [status, setStatus] = useState<AiRuntimeStatus | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    setIsLoading(true);
    getAiModelStatus(aiModel)
      .then((data) => {
        if (!cancelled) setStatus(data);
      })
      .catch(() => {
        if (!cancelled) setStatus(null);
      })
      .finally(() => {
        if (!cancelled) setIsLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [aiModel]);

  const model = status?.models.find((item) => item.id === aiModel);
  const ready = Boolean(model?.available);
  const gpuReady = Boolean(status?.gpu.available);
  const label = compact
    ? (gpuReady ? 'GPU' : 'CPU')
    : `${model?.label || aiModel.toUpperCase()} ${ready ? '可用' : '不可用'}`;

  return (
    <div
      className={cn(
        "inline-flex items-center gap-1.5 rounded border font-mono uppercase",
        compact ? "w-8 h-8 justify-center text-[9px]" : "px-2 py-0.5 text-[10px]",
        ready
          ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
          : "bg-amber-500/10 text-amber-400 border-amber-500/20"
      )}
      title={model?.message || 'AI 模型状态读取中'}
    >
      {isLoading ? <Loader2 size={compact ? 12 : 10} className="animate-spin" /> : <Cpu size={compact ? 12 : 10} />}
      <span>{label}</span>
    </div>
  );
}