// HomePage.js
import React from 'react';

const HomePage = ({ onNavigate, isLoggedIn, onLogout }) => {
  const buttonStyle = (enabled) =>
    enabled
      ? "w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
      : "w-full sm:w-auto bg-gray-400 text-gray-700 font-bold py-3 px-6 rounded-lg cursor-not-allowed opacity-50";

  const codeAssistantButtonStyle = (enabled) =>
    enabled
      ? "w-full sm:w-auto bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
      : "w-full sm:w-auto bg-gray-400 text-gray-700 font-bold py-3 px-6 rounded-lg cursor-not-allowed opacity-50";

  const handleAuthNavigate = (page) => {
    if (isLoggedIn) {
      onNavigate(page);
    }
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4">
      <div className="bg-white dark:bg-gray-800 p-8 sm:p-12 rounded-lg shadow-xl text-center max-w-2xl w-full">
        <h1 className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-4">
          Welcome to Cortex AI! 🧠
        </h1>
        <p className="text-lg text-gray-700 dark:text-gray-300 mb-8">
          The on-premise AI platform for seamless, secure, and intelligent workflows.
          Leverage advanced RAG, VectorDB, and TTS/STT features in a single powerful hub.
        </p>

        {/* New section for Coding Assistant highlights */}
        <div className="mt-8 mb-8 text-left bg-gray-200 dark:bg-gray-700 p-6 rounded-lg">
          <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
            Supercharge Your Coding with AI 🤖
          </h2>
          <p className="text-gray-600 dark:text-gray-400">
            Our powerful AI assistant goes beyond simple chat. It can <strong>access your local directory</strong>, <strong>navigate your file system</strong>, and <strong>understand and parse your files</strong>. Get instant, intelligent answers to your coding questions directly from your codebase.
          </p>
        </div>

        <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
          <button
            onClick={() => handleAuthNavigate("voice-chat")}
            className={buttonStyle(isLoggedIn)}
            disabled={!isLoggedIn}
          >
            Start Voice Chat 🔊
          </button>
          <button
            onClick={() => handleAuthNavigate("coding-assistant")}
            className={codeAssistantButtonStyle(isLoggedIn)}
            disabled={!isLoggedIn}
          >
            Code Assistant 💻
          </button>
          {isLoggedIn ? (
            <button
              onClick={onLogout}
              className="w-full sm:w-auto bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50"
            >
              Log Out 🔒
            </button>
          ) : (
            <button
              onClick={() => onNavigate("login")}
              className="w-full sm:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50"
            >
              Log In 🔐
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default HomePage;