'use client';

import { useEffect, useState } from 'react';
import { toast } from '@/components/ui/use-toast';

export function RedisCacheStatus() {
  const [status, setStatus] = useState<'loading' | 'connected' | 'error'>('loading');
  
  useEffect(() => {
    // Don't run in production
    if (process.env.NODE_ENV === 'production') {
      return;
    }
    
    const checkRedisStatus = async () => {
      try {
        const response = await fetch('/api/redis/status');
        const data = await response.json();
        
        if (data.ready) {
          setStatus('connected');
          // No need to dynamically import EmailDebug - it's managed by the debug-tool component
        } else {
          setStatus('error');
          toast({
            title: "Redis Connection Issue",
            description: "Redis cache is not responding. Email data may be slow to load.",
            variant: "destructive",
            duration: 5000
          });
        }
      } catch (error) {
        setStatus('error');
      }
    };
    
    checkRedisStatus();
  }, []);
  
  // In development, render a minimal indicator
  if (process.env.NODE_ENV !== 'production' && status !== 'loading') {
    return (
      <div className="fixed top-0 right-0 m-2 z-50">
        <div className={`h-2 w-2 rounded-full ${
          status === 'connected' ? 'bg-green-500' : 'bg-red-500'
        }`}></div>
      </div>
    );
  }
  
  return null;
}