"use client";

import { useState } from "react";

export function AdminCallButton({ eventSlug }: { eventSlug: string }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [url, setUrl] = useState<string | null>(null);

  async function startCall() {
    setLoading(true);
    setError(null);
    setCopied(false);
    try {
      const response = await fetch("/api/admin/meetings/start", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ eventSlug }),
      });
      const data = await response.json().catch(() => ({}));
      if (!response.ok) {
        setError(data.error || "Der Videoanruf konnte nicht gestartet werden.");
        return;
      }
      setUrl(data.testUrl);
      try {
        await navigator.clipboard.writeText(data.testUrl);
        setCopied(true);
      } catch {
        setError("Der Link wurde erzeugt. Bitte kopiere ihn aus dem Feld.");
      }
    } catch {
      setError("Verbindung fehlgeschlagen.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <span className="inline-flex items-center gap-2">
      <button
        type="button"
        onClick={startCall}
        disabled={loading}
        className="rounded-full bg-anouma-mauve-dark px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-anouma-plum disabled:cursor-wait disabled:opacity-60"
      >
        {loading ? "Test-Link wird erzeugt ..." : copied ? "Test-Link kopiert" : "Videoanruf testen"}
      </button>
      {url && !copied && (
        <input
          type="text"
          readOnly
          value={url}
          aria-label="Test-Link"
          onFocus={(event) => event.currentTarget.select()}
          className="w-56 rounded border border-anouma-taupe/30 bg-white px-2 py-1 text-xs text-anouma-plum"
        />
      )}
      {error && <span className="text-xs text-red-700">{error}</span>}
    </span>
  );
}