'use client';

import { useState, useEffect } from 'react';

/**
 * Debug component to show Redis connection status
 * Only visible in development mode
 */
export function RedisCacheStatus() {
  const [status, setStatus] = useState<'connected' | 'error' | 'loading'>('loading');
  const [lastCheck, setLastCheck] = useState<string>('');
  
  useEffect(() => {
    async function checkRedis() {
      try {
        setStatus('loading');
        const response = await fetch('/api/redis/status');
        const data = await response.json();
        setStatus(data.status);
        setLastCheck(new Date().toLocaleTimeString());
      } catch (e) {
        setStatus('error');
        setLastCheck(new Date().toLocaleTimeString());
      }
    }
    
    checkRedis();
    const interval = setInterval(checkRedis, 30000); // Check every 30 seconds
    return () => clearInterval(interval);
  }, []);
  
  // Only show in development mode
  if (process.env.NODE_ENV !== 'development') {
    return null;
  }
  
  return (
    <div className="fixed bottom-4 left-4 text-xs bg-gray-800/80 text-white p-2 rounded shadow-md z-50">
      <div className="flex items-center gap-2">
        <div className={`w-2 h-2 rounded-full ${
          status === 'connected' ? 'bg-green-500' : 
          status === 'loading' ? 'bg-yellow-500' : 'bg-red-500'
        }`}></div>
        <span>Redis: {status}</span>
        <span className="opacity-60">({lastCheck})</span>
      </div>
    </div>
  );
}