"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

const sections = [
  { id: "home", label: "Ana Sayfa" },
  { id: "about", label: "Hakkımda" },
  { id: "achievements", label: "Başarılarım" },
];

export function PageIndicator() {
  const [activeSection, setActiveSection] = useState(0);
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  useEffect(() => {
    const scrollContainer = document.getElementById("scroll-container");
    if (!scrollContainer) return;

    const handleScroll = () => {
      const scrollPosition = scrollContainer.scrollTop;
      const windowHeight = window.innerHeight;

      sections.forEach((section, index) => {
        const element = document.getElementById(section.id);
        if (element) {
          const rect = element.getBoundingClientRect();
          const elementTop = rect.top;
          
          // If element is in the middle of the viewport
          if (elementTop <= windowHeight / 2 && elementTop > -windowHeight / 2) {
            setActiveSection(index);
          }
        }
      });
    };

    scrollContainer.addEventListener("scroll", handleScroll);
    handleScroll(); // Initial check

    return () => {
      scrollContainer.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const scrollToSection = (index: number) => {
    const section = document.getElementById(sections[index].id);
    if (section) {
      section.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <div className="fixed right-6 top-1/2 -translate-y-1/2 z-[100] hidden lg:flex">
      <div className="flex flex-col gap-8 items-center">
        {sections.map((section, index) => (
          <motion.button
            key={section.id}
            onClick={() => scrollToSection(index)}
            onHoverStart={() => setHoveredIndex(index)}
            onHoverEnd={() => setHoveredIndex(null)}
            className="flex items-center justify-center group relative"
            whileHover={{ scale: 1.2 }}
            whileTap={{ scale: 0.9 }}
          >
            {/* Active Line */}
            <AnimatePresence>
              {activeSection === index && (
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0 }}
                  className="absolute -left-8 w-6 h-[1px] bg-white"
                />
              )}
            </AnimatePresence>

            {/* Dot */}
            <motion.div
              className={`rounded-full ${
                activeSection === index
                  ? "bg-white"
                  : hoveredIndex === index
                  ? "bg-white/60"
                  : "bg-white/30"
              }`}
              animate={{
                width: activeSection === index ? 12 : hoveredIndex === index ? 10 : 8,
                height: activeSection === index ? 12 : hoveredIndex === index ? 10 : 8,
              }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            />
          </motion.button>
        ))}
      </div>
    </div>
  );
}
