"use client";

import { useActionState } from "react";
import { Button } from "@/components/ui";
import { useI18n } from "@/i18n/i18n-provider";
import { runSmtpTestAction, type SmtpTestState } from "./actions";

export function SmtpTestPanel() {
  const { t } = useI18n();
  const s = t.adminEmailTestPage;
  const [state, formAction, isPending] = useActionState<SmtpTestState>(runSmtpTestAction, null);

  return (
    <div className="max-w-2xl">
      <form action={formAction}>
        <Button type="submit" disabled={isPending}>
          {isPending ? s.running : s.button}
        </Button>
      </form>

      <div aria-live="polite" className="mt-8">
        {state && "rateLimited" in state ? (
          <p className="text-sm text-red-700 dark:text-red-300">Zu viele Tests. Bitte warte ein paar Minuten.</p>
        ) : null}
        {state && "ok" in state && state.ok ? (
          <p className="border border-heading/30 bg-forest/5 px-5 py-4 text-sm text-heading">{s.success(state.to)}</p>
        ) : null}
        {state && "ok" in state && !state.ok && !state.configured ? (
          <div className="space-y-2 border border-red-300 px-5 py-4 text-sm text-red-700 dark:text-red-300">
            <p>{s.notConfigured}</p>
            <p className="font-mono text-xs">
              {s.missingLabel}: {state.missing.join(", ")}
            </p>
          </div>
        ) : null}
        {state && "ok" in state && !state.ok && state.configured ? (
          <div className="space-y-5 border border-red-300 px-5 py-5 text-sm">
            <p className="font-serif text-xl text-red-700 dark:text-red-300">{s.failureHeading}</p>
            <div>
              <p className="text-xs tracking-wide-caps text-ink/60">{s.causeLabel}</p>
              <p className="mt-1 leading-relaxed text-ink/85">{state.diagnosis.hint}</p>
            </div>
            <div>
              <p className="text-xs tracking-wide-caps text-ink/60">{s.detailLabel}</p>
              <p className="mt-1 break-words font-mono text-xs text-ink/80">{state.diagnosis.detail || "—"}</p>
            </div>
            <div>
              <p className="text-xs tracking-wide-caps text-ink/60">{s.configLabel}</p>
              <p className="mt-1 break-words font-mono text-xs text-ink/80">
                {state.authMode === "oauth2" ? s.authModeOAuth : s.authModePassword} · SMTP_HOST={state.host} · SMTP_USER={state.user} · SMTP_FROM={state.from}
              </p>
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
}