"use client";

import { useEffect, useState } from "react";
import { Avatar } from "@/components/avatar";
import { createClient } from "@/lib/supabase/client";
import type { ProfileRow } from "./page";

function computeSecondsLeft(expiresAt: string | null): number {
  if (!expiresAt) return 0;
  return Math.max(0, Math.round((new Date(expiresAt).getTime() - Date.now()) / 1000));
}

function formatCountdown(seconds: number): string {
  const minutes = Math.floor(seconds / 60);
  const remainder = seconds % 60;
  return `${minutes}:${remainder.toString().padStart(2, "0")}`;
}

// Volontairement discret (une barre compacte, pas une grande carte) : ce
// n'est pas le sujet principal de la page projetée, juste un rappel présent.
export function GardienBar({
  isJudge,
  holder,
  expiresAt,
}: {
  isJudge: boolean;
  holder: ProfileRow | null;
  expiresAt: string | null;
}) {
  const [secondsLeft, setSecondsLeft] = useState(() => computeSecondsLeft(expiresAt));
  const [rerolling, setRerolling] = useState(false);

  useEffect(() => {
    const supabase = createClient();
    let firedForThisExpiry = false;

    function tick() {
      const remaining = computeSecondsLeft(expiresAt);
      setSecondsLeft(remaining);
      if (remaining <= 0 && !firedForThisExpiry) {
        firedForThisExpiry = true;
        supabase.rpc("reroll_gardien", { p_force: false });
      }
    }

    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [expiresAt]);

  async function handleForceReroll() {
    setRerolling(true);
    const supabase = createClient();
    await supabase.rpc("reroll_gardien", { p_force: true });
    setRerolling(false);
  }

  return (
    <div className="flex flex-wrap items-center justify-center gap-2 self-center rounded-full border border-gold/30 bg-ink-2/60 px-3 py-1.5 text-xs">
      <span className="text-marble/60">Gardien du Silence :</span>
      {holder ? (
        <span key={holder.id} className="animate-podium-rise flex items-center gap-1.5">
          <Avatar pseudo={holder.pseudo} avatarUrl={holder.avatar_url} size="xs" />
          <span className="font-medium text-marble">{holder.pseudo}</span>
        </span>
      ) : (
        <span className="text-marble/50">personne</span>
      )}
      {expiresAt && <span className="font-heading text-gold-bright">{formatCountdown(secondsLeft)}</span>}
      {isJudge && (
        <button
          type="button"
          onClick={handleForceReroll}
          disabled={rerolling}
          className="rounded-full border border-gold/30 px-2 py-0.5 text-[0.65rem] text-marble/70 hover:bg-gold/10 disabled:opacity-50"
        >
          {rerolling ? "…" : "Changer"}
        </button>
      )}
    </div>
  );
}