"use client";

import React, { useState, useEffect } from "react";
import Image from "next/image";

const Projects = () => {
  const [projectsData, setProjectsData] = useState(null);
  const [isDisplayed, setIsDisplayed] = useState(false);

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        const response = await fetch("/assets/data/data.json");
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setProjectsData({
          top: Object.values(data.projects.top),
          bottom: Object.values(data.projects.bottom),
        });
      } catch (error) {
        console.error("Failed to fetch projects data:", error);
      }
    };

    fetchProjects();
  }, []);

  const displayAll = () => {
    setIsDisplayed((prevIsDisplayed) => !prevIsDisplayed);
  };

  if (!projectsData) {
    return (
      <div className="flex justify-center items-center h-screen bg-gray-50">
        <p className="text-xl font-medium text-gray-700">Loading Projects...</p>
      </div>
    );
  }
  const { top: topProjects, bottom: bottomProjects } = projectsData;

  return (
    <section
      id="projectScroll"
      className="w-full flex flex-col items-center justify-center py-20 px-4 md:px-8 bg-gray-50 rounded-lg shadow-inner"
    >
      <h3 className="text-2xl font-poppins text-blue-500 mb-12 font-extrabold">
        Projects
      </h3>

      <div className="w-full max-w-6xl">
        {topProjects.map((project, index) => (
          <div
            key={project.name}
            className={`
              bg-white shadow-xl rounded-xl border border-gray-100 my-12
              flex flex-col items-center justify-center
              md:grid md:grid-cols-2 md:gap-8 p-6
            `}
          >
            {index % 2 === 0 ? (
              <>
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={project.img}
                    alt={`${project.name} thumbnail`}
                    width={500}
                    height={300}
                    className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                  />
                </div>
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {project.name}
                  </h3>
                  <p className="text-gray-600 text-lg mb-5 font-poppins">
                    {project.desc}
                  </p>
                  <div className="flex flex-wrap justify-center md:justify-start gap-4 mb-6">
                    {project.language.map((langIcon, iconIndex) => (
                      <Image
                        key={`${project.name}-lang-${iconIndex}`}
                        src={langIcon}
                        alt="language logo"
                        width={40}
                        height={40}
                        className="rounded-md transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6 shadow-sm"
                      />
                    ))}
                  </div>
                  <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                    {project.link && (
                      <a
                        href={project.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
                      >
                        Code{" "}
                        <i className="fa-brands fa-github ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
                      </a>
                    )}
                    {project.demo && (
                      <a
                        href={project.demo}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
                      >
                        Website{" "}
                        <i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
                      </a>
                    )}
                  </div>
                </div>
              </>
            ) : (
              <>
                <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                  <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                    {project.name}
                  </h3>
                  <p className="text-gray-600 text-lg mb-5 font-poppins">
                    {project.desc}
                  </p>
                  <div className="flex flex-wrap justify-center md:justify-start gap-4 mb-6">
                    {project.language.map((langIcon, iconIndex) => (
                      <Image
                        key={`${project.name}-lang-${iconIndex}`}
                        src={langIcon}
                        alt="language logo"
                        width={40}
                        height={40}
                        className="rounded-md transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6 shadow-sm"
                      />
                    ))}
                  </div>
                  <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                    {project.link && (
                      <a
                        href={project.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
                      >
                        Code{" "}
                        <i className="fa-brands fa-github ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
                      </a>
                    )}
                    {project.demo && (
                      <a
                        href={project.demo}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
                      >
                        Website{" "}
                        <i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
                      </a>
                    )}
                  </div>
                </div>
                <div className="flex justify-center items-center p-4">
                  <Image
                    src={project.img}
                    alt={`${project.name} thumbnail`}
                    width={500}
                    height={300}
                    className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                  />
                </div>
              </>
            )}
          </div>
        ))}
      </div>

      <button
        id="btn-all"
        onClick={displayAll}
        className={`
          my-12 px-6 py-3 h-auto w-auto min-w-[200px] rounded-full
          font-poppins text-xl border-2
          transition-all duration-300 ease-in-out
          ${
            isDisplayed
              ? "bg-blue-500 text-white border-blue-500 shadow-md"
              : "bg-white text-gray-700 border-gray-300 hover:border-blue-500"
          }
          flex items-center justify-center gap-3
        `}
      >
        All projects ?
        <i
          className={`fa-solid fa-toggle-on text-3xl transition-transform duration-300 ${
            isDisplayed ? "rotate-0 text-white" : "rotate-180 text-blue-500"
          }`}
        ></i>
      </button>

      <div
        className={`
          w-full max-w-6xl px-4 md:px-8
          ${
            isDisplayed
              ? "grid place-items-center animate-fade-in-down"
              : "hidden"
          }
        `}
      >
        <div className="w-full bg-white shadow-xl rounded-xl border border-gray-100 p-8 my-12">
          <h3 className="text-3xl font-poppins text-blue-500 mb-10 text-center">
            All projects
          </h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 justify-items-center">
            {bottomProjects.map((project) => (
              <a
                key={project.name}
                href={project.demo || project.link}
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full max-w-xs overflow-hidden rounded-lg shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg"
              >
                <Image
                  src={project.img}
                  alt={project.name}
                  width={300}
                  height={200}
                  className="w-full h-auto object-cover rounded-lg"
                  title={project.name}
                />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Projects;