"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export function NewsletterAdminForm({
  defaultEmail,
}: {
  defaultEmail: string;
}) {
  const [form, setForm] = useState({
    subject: "",
    preheader: "",
    contentText: "",
    scheduledAt: "",
    testEmail: defaultEmail,
  });
  const [status, setStatus] = useState("");
  const [busy, setBusy] = useState<string | null>(null);

  async function submit(action: "draft" | "test" | "schedule" | "send-now") {
    setBusy(action);
    setStatus("");
    try {
      const res = await fetch("/api/admin/newsletter/campaigns", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, action }),
      });
      const data = await res.json();
      setStatus(data.message ?? data.error ?? "Aktion abgeschlossen.");
    } catch {
      setStatus("Aktion fehlgeschlagen.");
    } finally {
      setBusy(null);
    }
  }

  async function runDue() {
    setBusy("run-due");
    setStatus("");
    try {
      const res = await fetch("/api/admin/newsletter/run-due", {
        method: "POST",
      });
      const data = await res.json();
      setStatus(data.ok ? `Fällige Kampagnen geprüft: ${data.processed}` : data.error ?? "Fehler beim Prüfen.");
    } catch {
      setStatus("Fällige Kampagnen konnten nicht geprüft werden.");
    } finally {
      setBusy(null);
    }
  }

  return (
    <section className="rounded-2xl border bg-white p-6 shadow-sm">
      <h2 className="text-xl font-black text-gray-950">Newsletter erstellen</h2>
      <p className="mt-2 text-sm leading-6 text-gray-600">
        Schreibe den Inhalt als Klartext. Absätze werden automatisch in eine saubere HTML-Mail umgewandelt.
        Jede echte Newsletter-Mail enthält automatisch einen Abmeldelink.
      </p>

      <div className="mt-6 grid gap-4">
        <label className="grid gap-2 text-sm font-bold text-gray-800">
          Betreff
          <input
            value={form.subject}
            onChange={(e) => setForm({ ...form, subject: e.target.value })}
            className="rounded-lg border px-3 py-3 font-normal"
            placeholder="Neue Toolaro Tools im Mai"
          />
        </label>
        <label className="grid gap-2 text-sm font-bold text-gray-800">
          Vorschautext
          <input
            value={form.preheader}
            onChange={(e) => setForm({ ...form, preheader: e.target.value })}
            className="rounded-lg border px-3 py-3 font-normal"
            placeholder="Kurztext, der in vielen Mailprogrammen neben dem Betreff erscheint"
          />
        </label>
        <label className="grid gap-2 text-sm font-bold text-gray-800">
          Inhalt
          <textarea
            value={form.contentText}
            onChange={(e) => setForm({ ...form, contentText: e.target.value })}
            className="min-h-[260px] rounded-lg border px-3 py-3 font-normal leading-6"
            placeholder={"Hallo,\n\nheute gibt es neue Tools, Verbesserungen und Premium-Updates...\n\nViele Grüße\nToolaro"}
          />
        </label>
        <div className="grid gap-4 md:grid-cols-2">
          <label className="grid gap-2 text-sm font-bold text-gray-800">
            Test-E-Mail
            <input
              value={form.testEmail}
              onChange={(e) => setForm({ ...form, testEmail: e.target.value })}
              className="rounded-lg border px-3 py-3 font-normal"
              placeholder="mail@example.com"
            />
          </label>
          <label className="grid gap-2 text-sm font-bold text-gray-800">
            Versandzeitpunkt
            <input
              type="datetime-local"
              value={form.scheduledAt}
              onChange={(e) => setForm({ ...form, scheduledAt: e.target.value })}
              className="rounded-lg border px-3 py-3 font-normal"
            />
          </label>
        </div>
      </div>

      <div className="mt-6 flex flex-wrap gap-3">
        <Button type="button" variant="outline" onClick={() => submit("draft")} disabled={Boolean(busy)}>
          {busy === "draft" ? "Speichere..." : "Entwurf speichern"}
        </Button>
        <Button type="button" variant="outline" onClick={() => submit("test")} disabled={Boolean(busy)}>
          {busy === "test" ? "Sende Test..." : "Testmail senden"}
        </Button>
        <Button type="button" variant="outline" onClick={() => submit("schedule")} disabled={Boolean(busy)}>
          {busy === "schedule" ? "Plane..." : "Planen"}
        </Button>
        <Button type="button" onClick={() => submit("send-now")} disabled={Boolean(busy)}>
          {busy === "send-now" ? "Sende..." : "Jetzt senden"}
        </Button>
        <Button type="button" variant="outline" onClick={runDue} disabled={Boolean(busy)}>
          {busy === "run-due" ? "Prüfe..." : "Fällige geplante senden"}
        </Button>
      </div>

      {status && <p className="mt-5 rounded-lg border bg-gray-50 p-3 text-sm font-semibold text-gray-700">{status}</p>}
    </section>
  );
}