frontend/src/components/validators/ModelValidator.tsx

// src/components/validators/ModelValidator.tsx
import { useEffect } from 'react';
import { Loader, CheckCircle, XCircle, ExternalLink } from 'lucide-react';
import { useHFModelValidator } from '../../hooks/useHFValidators';

export default function ModelValidator({
  modelId,
  type,
}: {
  modelId: string;
  type: 'language' | 'scorer';
}) {
  const { loading, result, validate } = useHFModelValidator();

  useEffect(() => {
    validate(modelId, type);
  }, [modelId, type, validate]);

  if (!modelId?.includes('/')) return null;

  return (
    <div className="mt-3">
      {loading && (
        <div className="flex items-center gap-2 p-3 bg-yellow-50 rounded-lg">
          <Loader className="w-4 h-4 text-yellow-600 animate-spin" />
          <span className="text-sm text-yellow-800">Validating Model...</span>
        </div>
      )}

      {!!result && !loading && (
        <div className={`p-3 rounded-lg ${result.isValid ? 'bg-green-50' : 'bg-red-50'}`}>
          <div className="flex items-start gap-2">
            {result.isValid ? (
              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5" />
            ) : (
              <XCircle className="w-4 h-4 text-red-600 mt-0.5" />
            )}
            <div className="flex-1">
              {result.isValid ? (
                <>
                  <p className="text-sm font-medium text-green-800">✅ Model Verification Sucessful</p>
                  <div className="mt-2 space-y-1 text-xs text-green-700">
                    <p>
                      <strong>Author: </strong>
                      {result.modelInfo.author}
                    </p>
                    <p>
                      <strong>Download: </strong>
                      {result.modelInfo.downloads.toLocaleString()}
                    </p>
                    {!!result.modelInfo.pipeline_tag && (
                      <p>
                        <strong>Task: </strong>
                        {result.modelInfo.pipeline_tag}
                      </p>
                    )}
                  </div>
                  <a
                    href={`https://huggingface.co/${modelId}`}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 mt-2"
                  >
                    <ExternalLink className="w-3 h-3" />
                    <span>View on Hugging Face</span>
                  </a>
                </>
              ) : (
                <>
                  <p className="text-sm font-medium text-red-800">❌ Model Verification Failed</p>
                  <p className="text-xs text-red-700 mt-1">{result.error}</p>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}