"use client";

import { useState } from "react";

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

  async function createTestCall() {
    setLoading(true);
    setCopied(false);
    setError(null);
    try {
      const response = await fetch("/api/admin/meetings/test", {
        method: "POST",
        credentials: "include",
      });
      const data = (await response.json().catch(() => ({}))) as { testUrl?: string; error?: string };
      if (!response.ok || !data.testUrl) {
        setError(data.error || "Der Test-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 (
    <div className="anouma-custom-nav-action">
      <button
        type="button"
        onClick={() => void createTestCall()}
        disabled={loading}
        className="anouma-custom-nav-button"
      >
        {loading ? "Test-Link wird erzeugt ..." : copied ? "Test-Link kopiert" : "Videoanruf testen"}
      </button>
      {url && (
        <input
          type="text"
          readOnly
          value={url}
          aria-label="Test-Videoanruf-Link"
          onFocus={(event) => event.currentTarget.select()}
          className="anouma-custom-nav-input"
        />
      )}
      {error && <p className="anouma-custom-nav-error">{error}</p>}
    </div>
  );
}