'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';

interface Account {
  id: number | string;
  name: string;
  email: string;
  color: string;
  folders?: string[];
}

interface DebugViewProps {
  accounts: Account[];
  selectedAccount: Account | null;
  mailboxes: string[];
}

export default function DebugView({ accounts, selectedAccount, mailboxes }: DebugViewProps) {
  const [isOpen, setIsOpen] = useState(false);
  
  if (!isOpen) {
    return (
      <Button
        className="fixed bottom-4 right-4 bg-red-600 hover:bg-red-700 text-white z-50"
        onClick={() => setIsOpen(true)}
      >
        Debug
      </Button>
    );
  }
  
  return (
    <div className="fixed inset-0 bg-black/80 z-50 overflow-auto flex flex-col p-4">
      <div className="bg-white rounded-lg p-4 mb-4 max-w-3xl mx-auto w-full">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-bold">Debug View</h2>
          <Button variant="outline" onClick={() => setIsOpen(false)}>Close</Button>
        </div>
        
        <div className="grid grid-cols-2 gap-4">
          <div>
            <h3 className="text-lg font-semibold mb-2">Accounts ({accounts.length})</h3>
            <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[300px]">
              {JSON.stringify(accounts, null, 2)}
            </pre>
          </div>
          
          <div>
            <h3 className="text-lg font-semibold mb-2">Selected Account</h3>
            <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[300px]">
              {selectedAccount ? JSON.stringify(selectedAccount, null, 2) : 'None'}
            </pre>
          </div>
        </div>
        
        <div className="mt-4">
          <h3 className="text-lg font-semibold mb-2">Mailboxes ({mailboxes?.length || 0})</h3>
          <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[150px]">
            {JSON.stringify(mailboxes, null, 2)}
          </pre>
        </div>
      </div>
    </div>
  );
}