/**
 * This is a debugging component that provides troubleshooting tools
 * for the email loading process in the Courrier application.
 * 
 * NOTE: This component should only be used during development for debugging purposes.
 * It's kept in the codebase for future reference but won't render in production.
 */
'use client';

import { Button } from '@/components/ui/button';
import { RefreshCw, AlertCircle, CheckCircle } from 'lucide-react';

interface LoadingFixProps {
  loading: boolean;
  isLoadingInitial: boolean;
  setLoading: (value: boolean) => void;
  setIsLoadingInitial: (value: boolean) => void;
  setEmails: (emails: any[]) => void;
  loadEmails: () => void;
  emails: any[];
}

export function LoadingFix({
  loading,
  isLoadingInitial,
  setLoading,
  setIsLoadingInitial,
  setEmails,
  loadEmails,
  emails
}: LoadingFixProps) {
  // Don't render anything in production mode
  if (process.env.NODE_ENV === 'production') {
    return null;
  }
  
  const forceResetLoadingStates = () => {
    console.log('[DEBUG] Force resetting loading states to false');
    // Force both loading states to false
    setLoading(false);
    setIsLoadingInitial(false);
  };

  const forceTriggerLoad = () => {
    console.log('[DEBUG] Force triggering a new email load');
    setLoading(true);
    setTimeout(() => {
      loadEmails();
    }, 100);
  };

  const resetEmailState = () => {
    console.log('[DEBUG] Resetting email state to empty array');
    setEmails([]);
    setTimeout(() => {
      forceTriggerLoad();
    }, 100);
  };

  return (
    <div className="fixed bottom-4 right-4 z-50 p-4 bg-white shadow-lg rounded-lg border border-gray-200">
      <div className="text-sm font-medium mb-2">Debug Tools</div>
      <div className="flex flex-col gap-2">
        <div className="flex items-center text-xs">
          <span className="inline-block w-28">Loading State:</span>
          {loading ? (
            <span className="text-yellow-500 flex items-center">
              <AlertCircle className="h-3 w-3 mr-1" /> Active
            </span>
          ) : (
            <span className="text-green-500 flex items-center">
              <CheckCircle className="h-3 w-3 mr-1" /> Inactive
            </span>
          )}
        </div>
        <div className="flex items-center text-xs">
          <span className="inline-block w-28">Initial Loading:</span>
          {isLoadingInitial ? (
            <span className="text-yellow-500 flex items-center">
              <AlertCircle className="h-3 w-3 mr-1" /> Active
            </span>
          ) : (
            <span className="text-green-500 flex items-center">
              <CheckCircle className="h-3 w-3 mr-1" /> Inactive
            </span>
          )}
        </div>
        <div className="flex items-center text-xs">
          <span className="inline-block w-28">Emails Loaded:</span>
          <span className={emails.length > 0 ? "text-green-500" : "text-red-500"}>
            {emails.length}
          </span>
        </div>
        <Button 
          variant="outline" 
          size="sm" 
          className="text-xs h-8" 
          onClick={forceResetLoadingStates}
        >
          Reset Loading States
        </Button>
        <Button 
          variant="outline" 
          size="sm" 
          className="text-xs h-8" 
          onClick={forceTriggerLoad}
        >
          Force Reload Emails
        </Button>
        <Button 
          variant="outline" 
          size="sm" 
          className="text-xs h-8" 
          onClick={resetEmailState}
        >
          Reset Email State
        </Button>
      </div>
    </div>
  );
}