"use client";
import { useState } from "react";

export function TestButtons() {
  const [mail, setMail] = useState("test@example.de");
  const [chatId, setChatId] = useState("");
  const [result, setResult] = useState("");

  async function testMail() {
    setResult("…");
    const res = await fetch("/api/settings/test-mail", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ to: mail }),
    });
    const data = await res.json().catch(() => ({}));
    setResult(res.ok ? "Test-Mail versendet." : `Fehler: ${data.error ?? res.status}`);
  }

  async function testTelegram() {
    setResult("…");
    const res = await fetch("/api/settings/test-telegram", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ chatId }),
    });
    const data = await res.json().catch(() => ({}));
    setResult(res.ok ? "Test-Telegram versendet." : `Fehler: ${data.error ?? res.status}`);
  }

  return (
    <section className="rounded-card border border-line bg-white p-5">
      <h2 className="text-[15px] font-semibold tracking-tight">Versand testen</h2>
      <div className="mt-3 grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="mail" className="block text-[13px] font-semibold">E-Mail-Empfänger</label>
          <input
            id="mail"
            value={mail}
            onChange={(e) => setMail(e.target.value)}
            className="mt-1.5 h-11 w-full rounded-field border border-line bg-white px-3.5 text-sm text-ink"
          />
          <button
            type="button"
            onClick={testMail}
            className="mt-2 h-10 w-full rounded-field bg-brand-600 text-sm font-semibold text-white transition-colors hover:bg-brand-700 active:scale-[0.99]"
          >
            Test-Mail senden
          </button>
        </div>
        <div>
          <label htmlFor="chatId" className="block text-[13px] font-semibold">Telegram-Chat-ID</label>
          <input
            id="chatId"
            value={chatId}
            onChange={(e) => setChatId(e.target.value)}
            className="mt-1.5 h-11 w-full rounded-field border border-line bg-white px-3.5 text-sm text-ink"
          />
          <button
            type="button"
            onClick={testTelegram}
            className="mt-2 h-10 w-full rounded-field bg-brand-600 text-sm font-semibold text-white transition-colors hover:bg-brand-700 active:scale-[0.99]"
          >
            Test-Telegram senden
          </button>
        </div>
      </div>
      {result && <p role="status" className="mt-3 text-sm text-muted">{result}</p>}
    </section>
  );
}