import { useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { TimezoneClockBlock } from "../components/TimezoneClockBlock";

export function Hero({
  glowColor,
  borderStatus,
  displayMessage,
  rotatingMessages,
  statusMessage,
  oldUsernames,
  timeGapWarningThreshold = 5,
}: {
  glowColor: string;
  borderStatus: string;
  displayMessage: string;
  rotatingMessages: string[];
  statusMessage: string;
  oldUsernames: string[];
  timeGapWarningThreshold?: number;
}) {
  const router = useRouter();
  const [movementCount, setMovementCount] = useState(0);
  const lastX = useRef<number | null>(null);
  const lastDir = useRef<"left" | "right" | null>(null);
  const lastTime = useRef<number>(0);
  const resetTimeout = useRef<NodeJS.Timeout | null>(null);

  const handleMouseMove = (e: React.MouseEvent) => {
    const currentX = e.clientX;
    const currentTime = Date.now();

    if (lastX.current !== null) {
      const deltaX = currentX - lastX.current;
      const velocity = Math.abs(deltaX) / (currentTime - lastTime.current || 1);
      const direction = deltaX > 0 ? "right" : "left";

      // Thresholds: velocity > 2 (approx 2px/ms) and changed direction
      if (velocity > 2 && direction !== lastDir.current) {
        setMovementCount((prev) => {
          const newCount = prev + 1;
          if (newCount >= 10) {
            // Trigger navigation outside of the state update to avoid React warning
            setTimeout(() => router.push("/admin"), 0);
            return 0;
          }
          return newCount;
        });
        lastDir.current = direction;

        // Reset if no movement for a while
        if (resetTimeout.current) clearTimeout(resetTimeout.current);
        resetTimeout.current = setTimeout(() => setMovementCount(0), 1000);
      }
    }

    lastX.current = currentX;
    lastTime.current = currentTime;
  };

  return (
    <section
      className="mt-16 flex flex-col items-center text-center space-y-6 px-4 sm:mt-20 sm:space-y-8 animate-fade-in"
      data-old-usernames={oldUsernames.join(",")}
    >
      <div className="relative group" onMouseMove={handleMouseMove}>
        <div
          className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
          style={{ backgroundColor: glowColor }}
        ></div>
        <div
          className={`relative h-32 w-32 overflow-hidden rounded-full border-4 bg-black transition-colors duration-500 sm:h-48 sm:w-48 ${borderStatus}`}
        >
          <img
            src="https://cdn.reversed.dev/pictures/20250405_120402.png"
            alt="Space"
            className="h-full w-full scale-110 object-cover transition-transform duration-700 group-hover:scale-125"
          />
        </div>

        {/* Rotating Message Bubble (Left Side) */}
        <div className="absolute -left-4 top-4 hidden -translate-x-full md:block">
          <div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-2xl px-4 py-3 shadow-lg">
            {/* Arrow pointing to profile */}
            <div className="absolute right-0 top-1/2 translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/30"></div>
            <div className="absolute right-0 top-1/2 translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/20"></div>

            <p className="text-sm text-gray-200 whitespace-nowrap font-medium font-mono">
              {displayMessage || rotatingMessages[0]}
            </p>
          </div>
        </div>

        {/* Status Bubble (Right Side) */}
        <div className="absolute -right-4 top-8 hidden translate-x-full md:block">
          <div className="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/20 rounded-2xl px-4 py-3 shadow-lg">
            {/* Arrow pointing to profile */}
            <div className="absolute left-0 top-1/2 -translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/20"></div>
            <div className="absolute left-0 top-1/2 -translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/10"></div>

            <p className="text-sm text-gray-300 whitespace-nowrap">
              Currently{" "}
              <span className="text-white font-semibold">
                {statusMessage}
              </span>
              <br />
              on Discord
            </p>
          </div>
          <p className="text-xs text-gray-400/70 mt-1">
            Data from <a href="https://github.com/Space-Banane/shsf-discord-status" className="text-blue-400 hover:underline">Discord</a> (cached & delayed)
          </p>
        </div>
      </div>

      {/* Name & Description */}
      <div className="space-y-4 max-w-2xl">
        <h1 className="text-4xl font-extrabold leading-tight sm:text-5xl md:text-7xl">
          Hey, I'm{" "}
          <span
            className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 px-2"
            style={{ marginLeft: "0.15em", marginRight: "0.15em" }}
          >
            Space²
          </span>
        </h1>
        <p className="text-base font-light text-gray-400 sm:text-xl md:text-2xl">
          A{" "}
          <span className="line-through decoration-purple-500/50 decoration-2">
            Self-proclaimed
          </span>{" "}
          Developer breaking things to see how they&nbsp;work.
        </p>

        {/* Luna AI Profile Link */}
        <div className="pt-4 flex justify-center">
          <div className="flex flex-wrap items-center justify-center gap-3">
            <a
              href="https://luna.spaceistyping.com"
              target="_blank"
              rel="noopener noreferrer"
              className="group relative flex w-full items-center justify-center gap-3 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-center shadow-lg transition-all duration-300 hover:border-purple-500/50 hover:bg-white/10 hover:shadow-purple-500/10 sm:w-auto"
            >
              <div className="w-3 h-3 rounded-full bg-purple-500" />
              <span className="text-sm font-medium text-gray-300 group-hover:text-white transition-colors">
                <span className="text-purple-400 font-semibold">Luna</span>
              </span>
            </a>

            <a
              href="https://github.com/Space-Banane"
              target="_blank"
              rel="noopener noreferrer"
              className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-gray-400 hover:bg-white/10"
              aria-label="GitHub"
            >
              <svg className="w-6 h-6 text-gray-300 group-hover:text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.71-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.64-1.33-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0112 6.8c.85.004 1.71.115 2.51.338 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.10 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.36.31.68.92.68 1.86 0 1.34-.01 2.42-.01 2.75 0 .26.18.58.69.48A10.01 10.01 0 0022 12c0-5.52-4.48-10-10-10z" />
              </svg>
            </a>

            <a
              href="https://gitea.reversed.dev/space"
              target="_blank"
              rel="noopener noreferrer"
              className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-yellow-400 hover:bg-white/10"
              aria-label="Gitea"
            >
              <img
                src="https://gitea.reversed.dev/assets/img/logo.svg"
                alt="Gitea"
                className="w-6 h-6"
              />
            </a>
          </div>
        </div>

        <TimezoneClockBlock warningThresholdHours={timeGapWarningThreshold} />
      </div>
    </section>
  );
}
