"use client";

import { useEffect, useState } from "react";

interface Settings {
  host: string;
  port: string;
  scheme: string;
  username: string;
  password: string;
  from: string;
  reply_to: string;
}

export default function MailTestPage() {
  const [settings, setSettings] = useState<Settings | null>(null);
  const [defaultTo, setDefaultTo] = useState("");
  const [form, setForm] = useState({ to: "", subject: "SMTP funktioniert", message: "Das ist eine Testmail von toolaro.org über Zoho SMTP." });
  const [status, setStatus] = useState<"idle" | "sending" | "success" | "error">("idle");
  const [msg, setMsg] = useState("");
  const [notFound, setNotFound] = useState(false);

  useEffect(() => {
    fetch("/api/mail-test")
      .then((r) => {
        if (r.status === 404) { setNotFound(true); return null; }
        return r.json();
      })
      .then((data) => {
        if (!data) return;
        setSettings(data.settings);
        setDefaultTo(data.defaultTo);
        setForm((f) => ({ ...f, to: data.defaultTo }));
      })
      .catch(() => setNotFound(true));
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("sending");
    setMsg("");

    try {
      const res = await fetch("/api/mail-test", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json();

      if (data.ok) {
        setStatus("success");
        setMsg(`Testmail wurde an ${form.to} gesendet (${data.ms} ms).`);
      } else {
        setStatus("error");
        setMsg(data.error ?? "Unbekannter Fehler.");
      }
    } catch {
      setStatus("error");
      setMsg("Verbindungsfehler.");
    }
  }

  if (notFound) {
    return (
      <div className="mx-auto max-w-2xl px-4 py-20 text-center">
        <h1 className="text-2xl font-black text-gray-950">404</h1>
        <p className="mt-3 text-gray-500">Mail-Test ist nicht aktiviert. Setze MAIL_TEST_ENABLED=true in .env.local.</p>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-6xl px-4 py-14 pb-28">
      <p className="mb-2 text-xs font-black uppercase tracking-widest text-blue-600">Mail-Test</p>
      <h1 className="text-4xl font-black text-gray-950">
        SMTP sicher <span className="text-blue-600">durchtesten.</span>
      </h1>
      <p className="mt-3 text-lg text-gray-600">
        Prüfe die Zoho-Mailkonfiguration und sende eine echte Testmail.
      </p>

      {status === "success" && (
        <div className="mt-6 flex items-center gap-3 rounded-2xl border border-green-200 bg-green-50 px-5 py-4 font-bold text-green-800">
          ✓ {msg}
        </div>
      )}
      {status === "error" && (
        <div className="mt-6 rounded-2xl border border-red-200 bg-red-50 px-5 py-4 font-bold text-red-800">
          {msg}
        </div>
      )}

      <div className="mt-10 grid grid-cols-1 items-start gap-8 lg:grid-cols-[1.55fr_0.85fr]">
        <div className="rounded-3xl border border-gray-200 bg-white p-10 shadow-sm">
          <h2 className="mb-7 text-2xl font-black text-gray-950">Testmail senden</h2>

          <form onSubmit={handleSubmit}>
            <div className="mb-5">
              <label className="mb-2 block text-[11px] font-black uppercase tracking-widest text-gray-950">Empfänger</label>
              <input
                type="email" required
                value={form.to}
                onChange={(e) => setForm({ ...form, to: e.target.value })}
                className="w-full rounded-2xl border-2 border-gray-100 bg-gray-50 px-4 py-4 text-base font-semibold text-gray-950 outline-none transition focus:border-blue-600 focus:bg-white"
              />
            </div>
            <div className="mb-5">
              <label className="mb-2 block text-[11px] font-black uppercase tracking-widest text-gray-950">Betreff</label>
              <input
                type="text" required
                value={form.subject}
                onChange={(e) => setForm({ ...form, subject: e.target.value })}
                className="w-full rounded-2xl border-2 border-gray-100 bg-gray-50 px-4 py-4 text-base font-semibold text-gray-950 outline-none transition focus:border-blue-600 focus:bg-white"
              />
            </div>
            <div className="mb-6">
              <label className="mb-2 block text-[11px] font-black uppercase tracking-widest text-gray-950">Nachricht</label>
              <textarea
                rows={6} required
                value={form.message}
                onChange={(e) => setForm({ ...form, message: e.target.value })}
                className="w-full rounded-2xl border-2 border-gray-100 bg-gray-50 px-4 py-4 text-base font-semibold text-gray-950 outline-none transition focus:border-blue-600 focus:bg-white"
              />
            </div>
            <button
              type="submit"
              disabled={status === "sending"}
              className="flex w-full items-center justify-center gap-3 rounded-2xl bg-gray-950 py-4 text-base font-black text-white transition hover:bg-blue-600 disabled:opacity-60"
            >
              {status === "sending" ? "Wird gesendet…" : "Testmail senden ✈"}
            </button>
          </form>
        </div>

        <aside className="grid gap-5">
          <div className="rounded-3xl border border-gray-200 bg-white p-8 shadow-sm">
            <h3 className="mb-5 text-xl font-black text-gray-950">Aktive Werte</h3>
            {settings ? (
              Object.entries(settings).map(([k, v]) => (
                <div key={k} className="border-b border-gray-100 py-3 last:border-0">
                  <p className="text-[10px] font-black uppercase tracking-widest text-gray-500">{k}</p>
                  <p className="break-all text-sm font-black text-gray-950">{v}</p>
                </div>
              ))
            ) : (
              <p className="text-sm text-gray-400">Lade…</p>
            )}
          </div>

          <div className="rounded-3xl border border-gray-200 bg-white p-8 shadow-sm">
            <h3 className="mb-5 text-xl font-black text-gray-950">Sicherheitscheck</h3>
            <div className="flex gap-4">
              <span className="mt-1 text-lg">🛡</span>
              <div>
                <p className="font-black text-gray-950">Passwort verborgen</p>
                <p className="mt-1 text-sm leading-relaxed text-gray-500">
                  Die Seite zeigt nur, ob ein Passwort gesetzt ist. Der Wert bleibt in der .env.local.
                </p>
              </div>
            </div>
            <div className="mt-5 flex gap-4">
              <span className="mt-1 text-lg">🔒</span>
              <div>
                <p className="font-black text-gray-950">Nicht öffentlich</p>
                <p className="mt-1 text-sm leading-relaxed text-gray-500">
                  Route ist nur mit MAIL_TEST_ENABLED=true aktiv.
                </p>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}