'use client';

import { EmailDebug } from '../components/debug/EmailDebug';
import { useEffect, useState } from 'react';
import { toast } from '@/components/ui/use-toast';
import { Button } from '@/components/ui/button';
import { AlertTriangle } from 'lucide-react';

export default function EmailDebugTool() {
  const [isVisible, setIsVisible] = useState(false);
  
  useEffect(() => {
    // Check if we have any accounts-related issue by looking for accounts div in the DOM
    const checkAccounts = () => {
      const accountsElements = document.querySelectorAll('.accounts-dropdown');
      const foldersElements = document.querySelectorAll('.folder-item');
      
      if (accountsElements.length === 0 || foldersElements.length === 0) {
        console.log('No accounts or folders found in DOM, showing quick fix button');
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };
    
    // Check after a delay to allow the UI to render
    const timer = setTimeout(checkAccounts, 3000);
    return () => clearTimeout(timer);
  }, []);
  
  const handleQuickFix = async () => {
    try {
      // Force reload the page with a special param to trigger the fix
      window.location.href = '/courrier?fix=folders&t=' + Date.now();
    } catch (error) {
      console.error('Error applying quick fix:', error);
    }
  };
  
  if (process.env.NODE_ENV === 'production') {
    return null;
  }

  // Show the quick fix button if necessary
  if (isVisible) {
    return (
      <div className="fixed bottom-4 left-4 z-50">
        <Button
          size="sm"
          variant="destructive"
          className="bg-red-600 hover:bg-red-700 text-white shadow-lg flex items-center gap-1"
          onClick={handleQuickFix}
        >
          <AlertTriangle className="h-4 w-4" />
          <span>Quick Fix Folders</span>
        </Button>
      </div>
    );
  }
  
  return <EmailDebug />;
}