frontend/src/components/validators/DatasetValidator.tsx

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

export default function DatasetValidator({ datasetId }: { datasetId: string }) {
  const { loading, result, validate } = useHFDatasetValidator();

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

  if (!datasetId?.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 Dataset...</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">✅ Dataset Verification Successful</p>
                  <div className="mt-2 space-y-1 text-xs text-green-700">
                    <p>
                      <strong>Author: </strong>
                      {result.datasetInfo.author}
                    </p>
                    <p>
                      <strong>Download: </strong>
                      {result.datasetInfo.downloads.toLocaleString()}
                    </p>
                    {!!result.datasetInfo.task_categories?.length && (
                      <p>
                        <strong>Task: </strong>
                        {result.datasetInfo.task_categories.join(', ')}
                      </p>
                    )}
                    <p>
                      <strong>Description: </strong>
                      {result.datasetInfo.description.slice(0, 100)}...
                    </p>
                  </div>
                  <a
                    href={`https://huggingface.co/datasets/${datasetId}`}
                    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">❌ Dataset Verification Failed</p>
                  <p className="text-xs text-red-700 mt-1">{result.error}</p>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}