"use client";

import { useProfile } from "../context/ProfileContext";
import { Hero } from "../sections/Hero";
import { WorkExperience } from "../sections/WorkExperience";
import { ProjectCard } from "../components/ProjectCard";
import { MiniProjectCard } from "../components/MiniProjectCard";
import { ExperienceCard } from "../components/ExperienceCard";
import { ExperienceModal } from "../components/ExperienceModal";
import { MiniProjectModal } from "../components/MiniProjectModal";
import { Navbar } from "../components/Navbar";
import { Footer } from "../sections/Footer";
import { useState } from "react";
import type { Experience } from "../types";

export default function Home() {
  const {
    glowColor, borderStatus, displayMessage, statusMessage,
    rotatingMessages,
    projects, miniProjects, setSelectedMiniProject,
    experiences, setSelectedExperience, realWork,
    selectedMiniProject, selectedExperience
  } = useProfile();

  const [showOldNames, setShowOldNames] = useState(false);
  const oldUsernames = [
    "getspaced (ingame)",
    "Space (alternative)",
    "Space-Banane (2022-2024)",
  ];

  const groupedExperiences = experiences.reduce(
    (acc, exp) => {
      if (!acc[exp.type]) acc[exp.type] = [];
      acc[exp.type].push(exp);
      return acc;
    },
    {} as Record<string, Experience[]>,
  );

  return (
    <>
      <Navbar />
      <div className="space-y-24 pb-20 pt-20">
        <Hero
          glowColor={glowColor}
          borderStatus={borderStatus}
          displayMessage={displayMessage}
          rotatingMessages={rotatingMessages}
          statusMessage={statusMessage}
          showOldNames={showOldNames}
          setShowOldNames={setShowOldNames}
          oldUsernames={oldUsernames}
        />

        <WorkExperience realWork={realWork} />

        <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
          <div className="text-center space-y-4">
            <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
              Featured Projects
            </h2>
            <p className="text-gray-400 max-w-2xl mx-auto">
              A selection of my personal favorites. Many more on my GitHub.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {projects.map((project, index) => (
              <ProjectCard key={index} project={project} />
            ))}
          </div>
        </section>

        <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
          <div className="text-center space-y-4">
            <h2 className="text-3xl font-bold">More Projects</h2>
            <p className="text-gray-400">Smaller projects or tools I've built.</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {miniProjects.map((project, index) => (
              <MiniProjectCard
                key={index}
                project={project}
                onClick={() => setSelectedMiniProject(project)}
              />
            ))}
          </div>
        </section>

        <section className="w-full max-w-6xl mx-auto space-y-12 px-4 pb-20">
          <div className="text-center space-y-4">
            <h2 className="text-3xl font-bold">Skills & Experience</h2>
            <p className="text-gray-400">Things I've worked with over the years.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            {Object.entries(groupedExperiences).map(([type, items]) => (
              <div key={type} className="space-y-6">
                <h3 className="text-xl font-semibold border-l-4 border-blue-500 pl-4 capitalize">
                  {type}
                </h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {items.map((exp, index) => (
                    <ExperienceCard
                      key={index}
                      experience={exp}
                      onClick={() => setSelectedExperience(exp)}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>

      <Footer />

      {selectedMiniProject && (
        <MiniProjectModal
          project={selectedMiniProject}
          onClose={() => setSelectedMiniProject(null)}
        />
      )}
      {selectedExperience && (
        <ExperienceModal
          experience={selectedExperience}
          onClose={() => setSelectedExperience(null)}
        />
      )}
    </>
  );
}