// components/AlgoliaStatus.tsx
import React, { useState, useEffect } from 'react';
import { Search, CheckCircle, XCircle, Clock } from 'lucide-react';
import { algoliasearch } from 'algoliasearch';
interface AlgoliaStatusProps {
className?: string;
}
const AlgoliaStatus: React.FC<AlgoliaStatusProps> = ({ className = '' }) => {
const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'connected' | 'error'>('connecting');
const [availableIndices, setAvailableIndices] = useState<string[]>([]);
const [error, setError] = useState<string>('');
useEffect(() => {
const checkConnection = async () => {
try {
const appId = import.meta.env.VITE_ALGOLIA_APP_ID || 'demo_app_id';
const apiKey = import.meta.env.VITE_ALGOLIA_API_KEY || 'demo_api_key';
const client = algoliasearch(appId, apiKey);
// Test connection by listing indices
const { items } = await client.listIndices();
setAvailableIndices(items.map(index => index.name));
setConnectionStatus('connected');
setError('');
} catch (err) {
console.error('Algolia connection error:', err);
setConnectionStatus('error');
setError(err instanceof Error ? err.message : 'Connection failed');
}
};
checkConnection();
}, []);
const getStatusIcon = () => {
switch (connectionStatus) {
case 'connecting':
return <Clock className="text-yellow-400 animate-pulse" size={16} />;
case 'connected':
return <CheckCircle className="text-green-400" size={16} />;
case 'error':
return <XCircle className="text-red-400" size={16} />;
}
};
const getStatusText = () => {
switch (connectionStatus) {
case 'connecting':
return 'Connecting to Algolia...';
case 'connected':
return 'Connected to Algolia';
case 'error':
return `Connection Error: ${error}`;
}
};
const getStatusColor = () => {
switch (connectionStatus) {
case 'connecting':
return 'border-yellow-500/30 bg-yellow-900/20';
case 'connected':
return 'border-green-500/30 bg-green-900/20';
case 'error':
return 'border-red-500/30 bg-red-900/20';
}
};
return (
<div className={`p-4 rounded-lg border ${getStatusColor()} ${className}`}>
<div className="flex items-center space-x-2 mb-3">
<Search size={18} className="text-gray-400" />
<h3 className="text-sm font-semibold text-white">Algolia Status</h3>
</div>
<div className="space-y-3">
{/* Connection Status */}
<div className="flex items-center space-x-2">
{getStatusIcon()}
<span className="text-sm text-gray-300">{getStatusText()}</span>
</div>
{/* Available Indices */}
{connectionStatus === 'connected' && availableIndices.length > 0 && (
<div>
<h4 className="text-xs font-medium text-gray-400 mb-2">Available Indices:</h4>
<div className="flex flex-wrap gap-1">
{availableIndices.map((index) => (
<span
key={index}
className="px-2 py-1 bg-blue-600/30 text-blue-200 rounded text-xs font-mono"
>
{index}
</span>
))}
</div>
</div>
)}
{/* Configuration Info */}
<div className="text-xs text-gray-500 space-y-1">
<div>App ID: <span className="font-mono text-gray-400">{import.meta.env.VITE_ALGOLIA_APP_ID || 'Not configured'}</span></div>
</div>
</div>
</div>
);
};
export default AlgoliaStatus;
