import React, { useEffect, useState, useContext } from "react";
import { motion } from "framer-motion";
import { fetchData } from "../../api";
import "./Home.css";
import { proflie_picture } from "../../assets/index";
import { LoadingContext } from "../utils/LoadingContext";

const Home = ({ isVisible, introData }) => {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [error, setError] = useState(null);
  const { isLoading } = useContext(LoadingContext); // Use the global loading state

  // Update the time every second
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000); // Update every second

    // Cleanup the interval on component unmount
    return () => clearInterval(interval);
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!introData.socials) return <div>No recent intro data found</div>;

  // Format date and time
  const formattedTime = currentTime.toLocaleTimeString();
  const formattedDate = currentTime.toLocaleDateString();

  return (
    <div
      className="relative min-h-screen flex flex-col items-center pt-36 lg:pt-48 pb-16 sm:pb-8 md:pb-24 lg:pb-60 text-white"
      id="home"
    >
      {/* ProfileContainer with animation */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={
          isVisible ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }
        }
        transition={{
          duration: 0.6,
          type: "spring",
          stiffness: 300,
          damping: 25,
        }}
        className="w-full flex flex-col justify-center mb-8 md:mb-16 flex-grow"
      >
        <div className="flex flex-col items-center justify-center">
          <motion.img
            src={proflie_picture}
            alt="Nuno Teixeira"
            className="w-44 h-44 lg:w-60 lg:h-60 rounded-full border-4 border-orange-500 mb-6"
            initial={{ opacity: 0, y: -50 }}
            animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -50 }}
            transition={{ duration: 0.6 }}
          />

          {/* Description and Introduction */}
          <div className="text-center">
            <motion.h1
              className="text-3xl md:text-4xl lg:text-5xl font-bold px-3"
              initial={{ opacity: 0, x: -100 }}
              animate={
                isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: -100 }
              }
              transition={{ duration: 0.5 }}
            >
              Hello, my name is Nuno Teixeira, <br /> I'm a{" "}
              <motion.span
                initial={{ color: "#ffffff" }}
                animate={
                  isVisible ? { color: "#f97316" } : { color: "#ffffff" }
                }
                transition={{
                  duration: 0.5,
                  delay: 0.5,
                  ease: "easeInOut",
                }}
              >
                Game Programmer
              </motion.span>
            </motion.h1>

            <motion.p
              className="text-lg md:text-[1.35rem] max-w-4xl mt-4 px-3"
              initial={{ opacity: 0, x: 100 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              A portuguese game developer who loves coding video games.
            </motion.p>
          </div>
        </div>
      </motion.div>

      {/* Social Media Icons Container */}
      <motion.div
        className="social-container flex justify-center items-center space-x-6 gap-x-3 flex-wrap mb-16"
        initial={{ opacity: 0 }}
        animate={isVisible ? { opacity: 1 } : { opacity: 0 }}
        transition={{ duration: 0.8, delay: 1 }} // Staggered delay for social media
      >
        {introData.socials.map((social, index) => (
          <motion.a
            key={social.name}
            href={social.url}
            target="_blank"
            rel="noopener noreferrer"
            whileHover={{
              scale: 1.4,
              transition: { duration: 0.08, ease: "linear" },
            }}
            animate={{
              scale: 1,
              opacity: 1,
              transition: {
                duration: 0.08,
                ease: "linear",
              },
            }}
          >
            <img
              src={social.logo}
              alt={social.name}
              className=" w-12 lg:w-16"
            />
          </motion.a>
        ))}
      </motion.div>

      {/* Clock */}
      <motion.div
        className="clock-container relative bottom-4 md:bottom-10 text-center w-full mt-10"
        initial={{ opacity: 0 }}
        animate={isVisible ? { opacity: 1 } : { opacity: 0 }}
        transition={{ duration: 1, delay: 1.2 }} // Stagger clock animation
      >
        <h2 className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text animate-rainbow">
          {formattedTime}
        </h2>
        <p className="text-xl md:text-2xl font-semibold text-gray-300">
          {formattedDate}
        </p>
      </motion.div>
    </div>
  );
};

export default Home;