"use client"

import Link from "next/link"
import WaveEffect from "./components/WaveEffect"
import { useState, useCallback } from "react"

export default function Home() {
  const [triggerWave, setTriggerWave] = useState(false)
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [activeButton, setActiveButton] = useState<string | null>(null)

  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
    const rect = e.currentTarget.getBoundingClientRect()
    setMousePosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 })
    setTriggerWave(true)
  }, [])

  const handleMouseLeave = useCallback(() => {
    setTriggerWave(false)
    // We're not resetting the activeButton here to keep the color consistent
  }, [])

  return (
    <div className="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 overflow-hidden">
      <WaveEffect
        color={activeButton === "school" ? "173, 216, 230" : "230, 230, 250"}
        triggerWave={triggerWave}
        mousePosition={mousePosition}
      />
      <h1 className="text-4xl md:text-6xl font-bold text-white mb-8 text-center z-10">🤓️👆</h1>
      <div className="flex flex-col md:flex-row gap-4 z-10">
        <Link href="https://blackhao0426.web.illinois.edu" target="_blank" rel="noopener noreferrer">
          <button
            className="px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg shadow-md hover:bg-blue-100 transition duration-300 ease-in-out transform hover:scale-105"
            onMouseEnter={(e) => {
              handleMouseEnter(e)
              setActiveButton("school")
            }}
            onMouseLeave={handleMouseLeave}
          >
            School Page
          </button>
        </Link>
        <Link href="/archive">
          <button
            className="px-8 py-4 bg-white text-purple-600 font-semibold rounded-lg shadow-md hover:bg-purple-100 transition duration-300 ease-in-out transform hover:scale-105"
            onMouseEnter={(e) => {
              handleMouseEnter(e)
              setActiveButton("archive")
            }}
            onMouseLeave={handleMouseLeave}
          >
            Personal Archive
          </button>
        </Link>
      </div>
    </div>
  )
}