import React from 'react';
import { 
  useIsRateLimitModalOpen, 
  useSetIsRateLimitModalOpen, 
  useSetIsLoginModalOpen 
} from '../../contexts/UIContext';
import useRenderTracker from '../../hooks/useRenderTracker';
import { useAuth } from '../../contexts/AuthContext';

const RateLimitModal: React.FC = () => {
  const isRateLimitModalOpen = useIsRateLimitModalOpen();
  const setIsRateLimitModalOpen = useSetIsRateLimitModalOpen();
  const setIsLoginModalOpen = useSetIsLoginModalOpen();
  const { isLoggedIn } = useAuth();

  useRenderTracker('RateLimitModal', {
    isRateLimitModalOpen,
    setIsRateLimitModalOpen,
    setIsLoginModalOpen,
    isLoggedIn,
  });

  if (!isRateLimitModalOpen) return null;

  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={() => setIsRateLimitModalOpen(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">
            {isLoggedIn ? "Sorry..." : "Continue Your Conversation"}
          </h2>
        </div>
        <div className="p-8 space-y-6">
          <p className="text-gray-700 dark:text-gray-300">
            {isLoggedIn ? "You've hit the chat limit right now. Please try again later." : "You've reached the message limit for guests. Create a free account to continue chatting. Your current conversations will be saved to your new account."}
          </p>
          {!isLoggedIn ? (
            <button
              onClick={() => {
                setIsRateLimitModalOpen(false);
                setIsLoginModalOpen(true);
              }}
            className="w-full py-3 px-4 rounded-lg shadow-md shadow-black/5 dark:shadow-lg dark:shadow-gray-800/35 dark:border-gray-700/75 bg-gray-100 border border-gray-400/30 dark:bg-gray-600/10 text-gray-900 dark:text-gray-100 hover:shadow-none dark:hover:shadow-none duration-100"
          >
              Create Free Account
            </button>
          ) : (
            <button
              onClick={() => {
                setIsRateLimitModalOpen(false);
              }}
            className="w-full py-3 px-4 rounded-lg shadow-md shadow-black/5 dark:shadow-lg dark:shadow-gray-800/35 dark:border-gray-700/75 bg-gray-100 border border-gray-400/30 dark:bg-gray-600/10 text-gray-900 dark:text-gray-100 hover:shadow-none dark:hover:shadow-none duration-100"
          >
            Ok
          </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default RateLimitModal;