/**
 * AddAccountModal.tsx
 *
 * @author Descomplicar® Crescimento Digital
 * @link https://descomplicar.pt
 * @copyright 2025 Descomplicar®
 */

import React, { useState } from 'react';
import type { Account } from '../types';
import { GmailIcon } from './icons/GmailIcon';
import { OutlookIcon } from './icons/OutlookIcon';
import { YahooIcon } from './icons/YahooIcon';
import { ImapIcon } from './icons/ImapIcon';
import AddImapAccountForm from './AddImapAccountForm';

interface AddAccountModalProps {
  isOpen: boolean;
  onClose: () => void;
  onAddAccount: (account: Omit<Account, 'id' | 'avatar'>) => void;
}

const AddAccountModal: React.FC<AddAccountModalProps> = ({ isOpen, onClose, onAddAccount }) => {
  const [view, setView] = useState<'providers' | 'imapForm'>('providers');

  if (!isOpen) return null;

  const handleProviderClick = (provider: Account['provider']) => {
    const email = `novo.usuario.${Math.floor(Math.random() * 1000)}@${provider}.com`;
    onAddAccount({ email, provider });
  };
  
  const handleImapConnect = (email: string) => {
    onAddAccount({ email, provider: 'imap' });
  }

  const providers: { name: Account['provider'], icon: React.ReactNode }[] = [
    { name: 'gmail', icon: <GmailIcon className="w-6 h-6" /> },
    { name: 'outlook', icon: <OutlookIcon className="w-6 h-6" /> },
    { name: 'yahoo', icon: <YahooIcon className="w-6 h-6 text-[#6001d2]" /> },
  ];

  return (
    <div
      className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
      aria-modal="true"
      role="dialog"
      onClick={onClose}
    >
      <div
        className="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 w-full max-w-sm transform transition-all"
        role="document"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-semibold text-slate-900 dark:text-white" id="modal-title">
                {view === 'providers' ? 'Conectar nova conta' : 'Conectar Conta IMAP'}
            </h3>
            <button onClick={onClose} className="p-1 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-slate-500">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        
        {view === 'providers' ? (
          <>
            <p className="text-sm text-slate-500 dark:text-slate-400 mb-6">
                Selecione seu provedor de e-mail para conectar sua conta com segurança.
            </p>
            <div className="space-y-3">
              {providers.map(provider => (
                <button
                  key={provider.name}
                  onClick={() => handleProviderClick(provider.name)}
                  className="w-full flex items-center gap-4 p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
                >
                  {provider.icon}
                  <span className="font-medium text-slate-700 dark:text-slate-200 capitalize">
                    Conectar com {provider.name}
                  </span>
                </button>
              ))}
               <button
                  onClick={() => setView('imapForm')}
                  className="w-full flex items-center gap-4 p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
                >
                  <ImapIcon className="w-6 h-6 text-slate-500" />
                  <span className="font-medium text-slate-700 dark:text-slate-200">
                    Conectar via IMAP
                  </span>
                </button>
            </div>
          </>
        ) : (
          <AddImapAccountForm onConnect={handleImapConnect} onBack={() => setView('providers')} />
        )}
      </div>
    </div>
  );
};

export default AddAccountModal;