/**
 * Trouve-KA — flux temps réel du bot (footer)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

"use client";

import { useEffect, useState } from "react";

type LiveEvent = {
  at: string;
  url: string;
  domain: string;
  outcome: string;
};

/**
 * Affiche en temps réel le site que TrouveKABot est en train de scraper.
 * Poll /api/live toutes les 4 s; se cache silencieusement si l'API est injoignable.
 */
export function LiveCrawl() {
  const [event, setEvent] = useState<LiveEvent | null>(null);

  useEffect(() => {
    let active = true;
    const tick = async () => {
      try {
        const res = await fetch("/api/live", { cache: "no-store" });
        if (!res.ok) return;
        const data = (await res.json()) as { event: LiveEvent | null };
        if (active && data.event) setEvent(data.event);
      } catch {
        // API injoignable : on garde le dernier événement affiché
      }
    };
    tick();
    const id = setInterval(tick, 4000);
    return () => {
      active = false;
      clearInterval(id);
    };
  }, []);

  if (!event) return null;

  const shortUrl = event.url.replace(/^https?:\/\/(www\.)?/, "").slice(0, 80);

  return (
    <p className="gk-mono mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] tracking-[0.04em] text-[rgba(245,243,238,0.6)]">
      <span className="pulse-dot" aria-hidden="true" />
      <span className="font-bold uppercase tracking-[0.12em] text-lime">
        En ce moment
      </span>
      <span>KA bot scrappe le site suivant :</span>
      <span className="break-all font-bold text-[rgba(245,243,238,0.85)]" title={event.url}>
        {shortUrl}
      </span>
    </p>
  );
}