"use client";

import { usePathname } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";

const TOP_BAR_HEIGHT = 3;
const MAX_PERCENT = 90;
const COMPLETE_PERCENT = 100;
const TICK_MS = 50;
const INCREMENT = 2;
const COMPLETE_DURATION = 200;

export function TopProgressBar() {
  const pathname = usePathname();
  const [visible, setVisible] = useState(false);
  const [percent, setPercent] = useState(0);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const completeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const prevPathnameRef = useRef(pathname);

  const clearTimers = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
    if (completeTimeoutRef.current) {
      clearTimeout(completeTimeoutRef.current);
      completeTimeoutRef.current = null;
    }
  }, []);

  const startProgress = useCallback(() => {
    clearTimers();
    setVisible(true);
    setPercent(0);
    timerRef.current = setInterval(() => {
      setPercent((p) => {
        if (p >= MAX_PERCENT) {
          if (timerRef.current) {
            clearInterval(timerRef.current);
            timerRef.current = null;
          }
          return MAX_PERCENT;
        }
        return Math.min(p + INCREMENT, MAX_PERCENT);
      });
    }, TICK_MS);
  }, [clearTimers]);

  const completeProgress = useCallback(() => {
    clearTimers();
    setPercent(COMPLETE_PERCENT);
    completeTimeoutRef.current = setTimeout(() => {
      setVisible(false);
      setPercent(0);
      completeTimeoutRef.current = null;
    }, COMPLETE_DURATION);
  }, [clearTimers]);

  // Start bar when user clicks an internal link
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      const target = (e.target as Element).closest("a");
      if (!target?.href) return;
      try {
        const url = new URL(target.href);
        if (url.origin === window.location.origin && url.pathname !== pathname) {
          startProgress();
        }
      } catch {
        // ignore invalid URLs
      }
    };
    document.addEventListener("click", handleClick, true);
    return () => document.removeEventListener("click", handleClick, true);
  }, [pathname, startProgress]);

  // Complete bar when pathname changes (route loaded)
  useEffect(() => {
    if (prevPathnameRef.current !== pathname) {
      prevPathnameRef.current = pathname;
      if (visible) completeProgress();
    }
  }, [pathname, visible, completeProgress]);

  useEffect(() => {
    return clearTimers;
  }, [clearTimers]);

  if (!visible) return null;

  return (
    <div
      className="fixed left-0 right-0 z-[9999] overflow-hidden bg-transparent"
      style={{ height: TOP_BAR_HEIGHT }}
      aria-hidden
    >
      <div
        className="h-full bg-primary transition-[width] duration-150 ease-out"
        style={{ width: `${percent}%` }}
      />
    </div>
  );
}