"use client";
// Bouton de connexion au compte de démonstration (un clic, aucun mot de passe).
import { useRouter } from "next/navigation";
import { useState } from "react";
import { PlayCircle } from "lucide-react";
import { Spinner } from "@/components/ui";

export function DemoButton({ className }: { className?: string }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function go() {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/auth/demo", { method: "POST" });
      const d = await res.json();
      if (!res.ok) return setError(d.error ?? "Démo indisponible.");
      router.push("/chat");
      router.refresh();
    } catch {
      setError("Impossible de joindre le serveur.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <span className={className}>
      <button
        onClick={go}
        disabled={loading}
        className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl border border-dashed border-brand-400 text-brand-700 dark:text-brand-300 font-semibold text-[13.5px] hover:bg-brand-50 dark:hover:bg-brand-900/30 transition-colors disabled:opacity-60 w-full sm:w-auto"
      >
        {loading ? <Spinner /> : <PlayCircle size={16} />}
        Essayer le compte démo (deux cours)
      </button>
      {error && <span className="block text-[12px] text-red-600 dark:text-red-400 mt-1.5">{error}</span>}
    </span>
  );
}