// File: src/pages/Home/IndexPage.jsx

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import HealthService from "../../services/API/HealthService";

/**
 * IndexPage - Home page for MaplePress
 *
 * Modern landing page with improved design and health status monitoring
 */
function IndexPage() {
  const navigate = useNavigate();
  const [healthStatus, setHealthStatus] = useState({
    checking: true,
    healthy: false,
    responseTime: null,
  });

  // Check backend health on mount
  useEffect(() => {
    let isMounted = true;

    const checkBackendHealth = async () => {
      try {
        const status = await HealthService.getDetailedStatus();

        if (isMounted) {
          setHealthStatus({
            checking: false,
            healthy: status.healthy,
            responseTime: status.responseTimeMs,
          });
        }
      } catch (error) {
        if (isMounted) {
          setHealthStatus({
            checking: false,
            healthy: false,
            responseTime: null,
          });
        }
      }
    };

    // Initial check
    checkBackendHealth();

    // Re-check every 30 seconds
    const intervalId = setInterval(checkBackendHealth, 30000);

    return () => {
      isMounted = false;
      clearInterval(intervalId);
    };
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
      {/* Health Status Badge - Fixed position top right */}
      <div className="fixed top-4 right-4 z-50">
        {healthStatus.checking ? (
          <div className="bg-white rounded-full px-4 py-2 shadow-lg flex items-center gap-2 border border-gray-200">
            <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"></div>
            <span className="text-sm font-medium text-gray-600">
              Checking status...
            </span>
          </div>
        ) : healthStatus.healthy ? (
          <div className="bg-white rounded-full px-4 py-2 shadow-lg flex items-center gap-2 border border-green-200">
            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
            <span className="text-sm font-medium text-gray-700">
              All systems operational
            </span>
            {healthStatus.responseTime && (
              <span className="text-xs text-gray-500">
                ({healthStatus.responseTime}ms)
              </span>
            )}
          </div>
        ) : (
          <div className="bg-white rounded-full px-4 py-2 shadow-lg flex items-center gap-2 border border-red-200">
            <div className="w-2 h-2 bg-red-500 rounded-full"></div>
            <span className="text-sm font-medium text-gray-700">
              Service unavailable
            </span>
          </div>
        )}
      </div>

      {/* Hero Section */}
      <div className="container mx-auto px-4 py-16 md:py-24">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <div className="text-center mb-16">
            <div className="inline-block mb-6">
              <div className="flex items-center gap-3 bg-white px-6 py-3 rounded-full shadow-lg">
                <span className="text-4xl">🍁</span>
                <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-indigo-600 to-blue-600 bg-clip-text text-transparent">
                  MaplePress
                </h1>
              </div>
            </div>
            <h2 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
              Cloud Services for
              <br />
              <span className="bg-gradient-to-r from-indigo-600 to-blue-600 bg-clip-text text-transparent">
                WordPress Sites
              </span>
            </h2>
            <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
              Supercharge your WordPress with cloud-powered search, analytics,
              and processing. Keep your site fast while adding powerful
              features.
            </p>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
              <button
                onClick={() => navigate("/register")}
                className="group relative w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-600 to-blue-600
                         text-white font-semibold rounded-xl shadow-lg hover:shadow-xl
                         transform hover:-translate-y-0.5 transition-all duration-200"
              >
                <span className="relative z-10">Get Started Free</span>
                <div
                  className="absolute inset-0 bg-gradient-to-r from-indigo-700 to-blue-700 rounded-xl opacity-0
                              group-hover:opacity-100 transition-opacity"
                ></div>
              </button>
              <button
                onClick={() => navigate("/login")}
                className="w-full sm:w-auto px-8 py-4 bg-white text-gray-700 font-semibold rounded-xl
                         border-2 border-gray-200 hover:border-indigo-300 hover:bg-gray-50
                         shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200"
              >
                Sign In
              </button>
            </div>

            {/* Trust Badge */}
            <p className="text-sm text-gray-500">
              Open source • No credit card required • Free tier available
            </p>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-3 gap-8 mb-16">
            {/* Feature 1 */}
            <div
              className="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl
                          transform hover:-translate-y-1 transition-all duration-200"
            >
              <div
                className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-blue-500 rounded-2xl
                            flex items-center justify-center text-3xl mb-6 shadow-lg
                            group-hover:scale-110 transition-transform"
              >
                🔍
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-3">
                Cloud-Powered Search
              </h3>
              <p className="text-gray-600 leading-relaxed">
                Lightning-fast search with advanced filtering, powered by cloud
                infrastructure. Offload processing from your WordPress server.
              </p>
            </div>

            {/* Feature 2 */}
            <div
              className="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl
                          transform hover:-translate-y-1 transition-all duration-200"
            >
              <div
                className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl
                            flex items-center justify-center text-3xl mb-6 shadow-lg
                            group-hover:scale-110 transition-transform"
              >
                📊
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-3">
                Analytics & Insights
              </h3>
              <p className="text-gray-600 leading-relaxed">
                Deep insights into content performance, search patterns, and
                user behavior. Make data-driven decisions.
              </p>
            </div>

            {/* Feature 3 */}
            <div
              className="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl
                          transform hover:-translate-y-1 transition-all duration-200"
            >
              <div
                className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl
                            flex items-center justify-center text-3xl mb-6 shadow-lg
                            group-hover:scale-110 transition-transform"
              >
                ⚡
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-3">
                Peak Performance
              </h3>
              <p className="text-gray-600 leading-relaxed">
                Keep your WordPress site blazing fast by offloading heavy tasks
                to the cloud. Better experience for your users.
              </p>
            </div>
          </div>

          {/* How it Works */}
          <div className="bg-white rounded-3xl p-8 md:p-12 shadow-xl mb-16">
            <h3 className="text-3xl font-bold text-gray-900 text-center mb-12">
              Simple Setup in 3 Steps
            </h3>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="text-center">
                <div
                  className="w-16 h-16 bg-indigo-100 text-indigo-600 rounded-full
                              flex items-center justify-center text-2xl font-bold mx-auto mb-4"
                >
                  1
                </div>
                <h4 className="font-semibold text-gray-900 mb-2">
                  Create Account
                </h4>
                <p className="text-sm text-gray-600">
                  Sign up in seconds and create your organization
                </p>
              </div>
              <div className="text-center">
                <div
                  className="w-16 h-16 bg-indigo-100 text-indigo-600 rounded-full
                              flex items-center justify-center text-2xl font-bold mx-auto mb-4"
                >
                  2
                </div>
                <h4 className="font-semibold text-gray-900 mb-2">
                  Install Plugin
                </h4>
                <p className="text-sm text-gray-600">
                  Add our WordPress plugin and connect your site
                </p>
              </div>
              <div className="text-center">
                <div
                  className="w-16 h-16 bg-indigo-100 text-indigo-600 rounded-full
                              flex items-center justify-center text-2xl font-bold mx-auto mb-4"
                >
                  3
                </div>
                <h4 className="font-semibold text-gray-900 mb-2">Go Live</h4>
                <p className="text-sm text-gray-600">
                  Enable cloud features and enjoy better performance
                </p>
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="text-center">
            <p className="text-gray-500 mb-2">
              Part of the{" "}
              <span className="font-semibold">Maple Open Technologies</span>{" "}
              open-source software suite
            </p>
            <p className="text-sm text-gray-400">
              Built with ❤️ for the WordPress community
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default IndexPage;
