"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

interface ChallengeBadgeProps {
  initialCount?: number;
  onNavigate?: () => void;
}

export default function ChallengeBadge({
  initialCount = 0,
  onNavigate,
}: ChallengeBadgeProps) {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    // Récupérer le nombre de défis actifs
    const fetchActiveCount = async () => {
      try {
        const response = await fetch("/api/challenges/active-count");
        const data = await response.json();
        setCount(data.count || 0);
      } catch (error) {
        console.error("Error fetching active challenges count:", error);
      }
    };

    fetchActiveCount();

    // Rafraîchir toutes les 30 secondes
    const interval = setInterval(fetchActiveCount, 30000);

    return () => clearInterval(interval);
  }, []);

  return (
    <Link
      href="/challenges"
      onClick={onNavigate}
      className={`inline-flex items-center gap-1.5 transition text-xs font-normal uppercase tracking-widest ${
        onNavigate ? "py-2" : ""
      }`}
      style={{ color: "var(--foreground)" }}
      onMouseEnter={(e) =>
        (e.currentTarget.style.color = "var(--accent-color)")
      }
      onMouseLeave={(e) =>
        (e.currentTarget.style.color = "var(--foreground)")
      }
      title={
        count > 0
          ? `${count} défi${count > 1 ? "s" : ""} actif${count > 1 ? "s" : ""}`
          : "Défis"
      }
    >
      <span>DÉFIS</span>
      {count > 0 && (
        <span
          className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-full text-[10px] font-bold leading-none"
          style={{
            backgroundColor: "var(--accent)",
            color: "var(--background)",
          }}
        >
          {count > 9 ? "9+" : count}
        </span>
      )}
    </Link>
  );
}