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

const HomePage = ({ onNavigate, isLoggedIn }) => {
  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 h-full overflow-y-auto 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 Swarm Control 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 Workflows with Swarm Control 🤖
          </h2>
          <p className="text-gray-600 dark:text-gray-400">
            Our powerful orchestrator is enhanced with a library of <strong>Skills</strong> and <strong>System Prompts</strong>. Get instant, intelligent answers to your questions and leverage a distributed mesh to solve complex tasks.
          </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("swarm-control")}
            className={codeAssistantButtonStyle(isLoggedIn)}
            disabled={!isLoggedIn}
          >
            Swarm Control 💻
          </button>
          {!isLoggedIn && (
            <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;