"use client";

import { useProfile } from "../context/ProfileContext";
import { Hero } from "../sections/Hero";
import { WorkExperience } from "../sections/WorkExperience";
import { Uptime } from "../sections/Uptime";
import { Activity } from "../sections/Activity";
import { Affiliates } from "../sections/Affiliates";
import { AgentSkills } from "../sections/AgentSkills";
import { ProjectCard } from "../components/ProjectCard";
import { MiniProjectCard } from "../components/MiniProjectCard";
import { ExperienceModal } from "../components/ExperienceModal";
import { MiniProjectModal } from "../components/MiniProjectModal";
import { Navbar } from "../components/Navbar";
import { Footer } from "../sections/Footer";
import { TechStack } from "../sections/TechStack";
import { TypingRoomIntro } from "../components/TypingRoomIntro";
import { useCallback, useEffect, useState } from "react";
import { SkillsExperience } from "@/sections/SkillsExperience";

const ENABLE_PAGE_ANIMATION = false;

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

  const [showTypingIntro, setShowTypingIntro] = useState(ENABLE_PAGE_ANIMATION);
  const oldUsernames = [
    "getspaced (ingame)",
    "Space (alternative)",
    "Space-Banane (2022-2024)",
  ];

  useEffect(() => {
    // keep intro visible on every full page load; no-op here
  }, []);

  const handleIntroFinish = useCallback(() => {
    setShowTypingIntro(false);
  }, []);

  return (
    <>
      {ENABLE_PAGE_ANIMATION && (
        <TypingRoomIntro active={showTypingIntro} onFinish={handleIntroFinish} />
      )}
      {!showTypingIntro && (
        <>
          <Navbar />
          <div className="space-y-20 pb-16 pt-16 sm:space-y-24 sm:pb-20 sm:pt-20">
            <Hero
              glowColor={glowColor}
              borderStatus={borderStatus}
              displayMessage={displayMessage}
              rotatingMessages={rotatingMessages}
              statusMessage={statusMessage}
              oldUsernames={oldUsernames}
            />


            <WorkExperience realWork={realWork} />

            <Uptime />

            <Activity />

            <AgentSkills />

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

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

            <Affiliates />

            <TechStack />

            <SkillsExperience
              experiences={experiences}
              onSelectExperience={setSelectedExperience}
            />
          </div>

          <Footer />

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