import { 
  useIsConfirmDeleteModalOpen, 
  useSetIsConfirmDeleteModalOpen, 
  useConfirmDeleteConversationName, 
  useConfirmDeleteConversationId 
} from '../../contexts/UIContext';
import { useDeleteConversation } from '../../contexts/ChatContext';
import useRenderTracker from '../../hooks/useRenderTracker';

const ConfirmDeleteModal = () => {

  const isConfirmDeleteModalOpen = useIsConfirmDeleteModalOpen();
  const setIsConfirmDeleteModalOpen = useSetIsConfirmDeleteModalOpen();
  const confirmDeleteConversationName = useConfirmDeleteConversationName();
  const confirmDeleteConversationId = useConfirmDeleteConversationId();
  const deleteConversation = useDeleteConversation();

  useRenderTracker('ConfirmDeleteModal', {
    isConfirmDeleteModalOpen,
    confirmDeleteConversationName,
    confirmDeleteConversationId,
    deleteConversation,
    setIsConfirmDeleteModalOpen,
  });
  
  if (!isConfirmDeleteModalOpen) return null

  const handleDelete = () => {
    if (confirmDeleteConversationId) {
      deleteConversation(confirmDeleteConversationId);
      setIsConfirmDeleteModalOpen(false);
    }
  }

  return (
    <div className="fixed inset-0 flex items-center justify-center p-4 z-50">
        <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={() => setIsConfirmDeleteModalOpen(false)} />
        <div className="bg-background-light dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-md relative z-10 overflow-hidden">
            <div className="flex justify-between items-center p-6 border-b border-gray-200 dark:border-gray-700">
                <h2 className="text-xl font-semibold text-text-light dark:text-text-dark">Delete Conversation?</h2>
            </div>
            <div className="p-6">
                <p className="text-gray-700 dark:text-gray-300">This will delete:</p>
                <p className="text-gray-700 dark:text-gray-300 truncate font-semibold mt-1">{confirmDeleteConversationName}</p>
                <div className="flex justify-end mt-6">
                    <button onClick={() => setIsConfirmDeleteModalOpen(false)} className="mx-2 text-sm text-black dark:text-white rounded-3xl px-4 py-1.5 border border-gray-300 bg-gray-200/35 hover:bg-gray-200/75 dark:bg-background-dark dark:border-gray-600 dark:hover:bg-gray-300/10">Cancel</button>
                    <button onClick={handleDelete} className="bg-red-500 hover:bg-red-600 text-white text-sm px-4 py-1.5 rounded-3xl mx-2">Delete</button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default ConfirmDeleteModal