"use client";

import { useCallback, useEffect, useState } from "react";
import { useBrand } from "@/components/providers/brand-provider";
import { LocalhostAppUrlWarning } from "@/components/email-templates/localhost-app-url-warning";

type MailboxOption = {
  _id: string;
  name: string;
  email: string;
  isDefault: boolean;
};

type SmtpSource = "env" | "mailbox";

export function EmailTestClient() {
  const { brand } = useBrand();
  const [smtpSource, setSmtpSource] = useState<SmtpSource>("env");
  const [mailboxId, setMailboxId] = useState("");
  const [mailboxes, setMailboxes] = useState<MailboxOption[]>([]);
  const [mailboxesError, setMailboxesError] = useState("");
  const [to, setTo] = useState("");
  const [subject, setSubject] = useState(`اختبار بريد من ${brand.platformName}`);
  const [htmlContent, setHtmlContent] = useState(
    `<p>هذه رسالة اختبار من ${brand.platformName}.</p>`
  );
  const [textContent, setTextContent] = useState(`هذه رسالة اختبار من ${brand.platformName}.`);
  const [result, setResult] = useState<string | null>(null);
  const [loading, setLoading] = useState<"" | "verify" | "send">("");

  const loadMailboxes = useCallback(async () => {
    setMailboxesError("");
    const res = await fetch("/api/email/mailboxes");
    const json = (await res.json()) as { data?: MailboxOption[]; error?: string };
    if (!res.ok) {
      setMailboxes([]);
      setMailboxesError(json.error ?? "Could not load mailboxes");
      return;
    }
    const list = json.data ?? [];
    setMailboxes(list);
    const defaultBox = list.find((m) => m.isDefault) ?? list[0];
    if (defaultBox) setMailboxId(defaultBox._id);
  }, []);

  useEffect(() => {
    if (smtpSource !== "mailbox") return;
    const timeout = window.setTimeout(() => {
      void loadMailboxes();
    }, 0);
    return () => window.clearTimeout(timeout);
  }, [smtpSource, loadMailboxes]);

  function queryParams(): string {
    if (smtpSource === "mailbox" && mailboxId) {
      return `source=mailbox&mailboxId=${encodeURIComponent(mailboxId)}`;
    }
    return "source=env";
  }

  function payload() {
    return {
      source: smtpSource,
      mailboxId: smtpSource === "mailbox" ? mailboxId : undefined,
      to,
      subject,
      htmlContent,
      textContent,
    };
  }

  async function verifySmtp() {
    if (smtpSource === "mailbox" && !mailboxId) {
      setResult("اختر صندوق بريد أولاً.");
      return;
    }
    setLoading("verify");
    setResult(null);
    const res = await fetch(`/api/email/verify-smtp?${queryParams()}`);
    const json = await res.json();
    setLoading("");
    if (!res.ok) {
      setResult(`فشل التحقق: ${json.error ?? json.message ?? "خطأ"}`);
      return;
    }
    setResult(`SMTP (${smtpSource}): ${json.message}`);
  }

  async function send() {
    if (smtpSource === "mailbox" && !mailboxId) {
      setResult("اختر صندوق بريد أولاً.");
      return;
    }
    setLoading("send");
    setResult(null);
    const res = await fetch("/api/email/test-send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload()),
    });
    const json = await res.json();
    setLoading("");
    if (!res.ok) {
      setResult(`فشل الإرسال: ${json.error ?? "خطأ"}`);
      return;
    }
    setResult(`تم الإرسال بنجاح (${smtpSource}). providerMessageId: ${json.providerMessageId ?? "n/a"}`);
  }

  return (
    <div className="space-y-6">
      <section className="rounded-lg border border-neutral-200 bg-white p-5">
        <h1 className="text-2xl font-bold">اختبار البريد SMTP</h1>
        <p className="mt-2 text-sm text-neutral-600">
          تحقق من SMTP أو أرسل رسالة اختبار باستخدام إعدادات البيئة (.env) أو صندوق بريد محفوظ.
        </p>

        <div className="mt-3">
          <LocalhostAppUrlWarning />
        </div>

        <div className="mt-4 grid max-w-md gap-3">
          <label className="block text-sm">
            مصدر SMTP
            <select
              className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
              value={smtpSource}
              onChange={(e) => setSmtpSource(e.target.value as SmtpSource)}
            >
              <option value="env">Environment (.env)</option>
              <option value="mailbox">Mailbox</option>
            </select>
          </label>

          {smtpSource === "mailbox" ? (
            <label className="block text-sm">
              Mailbox
              <select
                className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
                value={mailboxId}
                onChange={(e) => setMailboxId(e.target.value)}
              >
                <option value="">— اختر —</option>
                {mailboxes.map((m) => (
                  <option key={m._id} value={m._id}>
                    {m.name} ({m.email}){m.isDefault ? " · default" : ""}
                  </option>
                ))}
              </select>
              {mailboxesError ? (
                <p className="mt-1 text-xs text-amber-700">{mailboxesError}</p>
              ) : null}
            </label>
          ) : null}
        </div>

        <button
          type="button"
          onClick={() => void verifySmtp()}
          disabled={loading !== ""}
          className="mt-4 rounded border border-neutral-300 px-4 py-2 text-sm disabled:opacity-50"
        >
          {loading === "verify" ? "جاري التحقق..." : "تحقق من SMTP"}
        </button>
      </section>

      <section className="rounded-lg border border-neutral-200 bg-white p-5">
        <h2 className="text-lg font-semibold">إرسال بريد اختبار</h2>
        <div className="mt-4 grid gap-3">
          <input
            className="rounded border border-neutral-300 px-3 py-2 text-sm"
            placeholder="to@example.com"
            value={to}
            onChange={(e) => setTo(e.target.value)}
          />
          <input
            className="rounded border border-neutral-300 px-3 py-2 text-sm"
            placeholder="subject"
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
          />
          <textarea
            className="min-h-[120px] rounded border border-neutral-300 px-3 py-2 text-sm"
            value={htmlContent}
            onChange={(e) => setHtmlContent(e.target.value)}
          />
          <textarea
            className="min-h-[80px] rounded border border-neutral-300 px-3 py-2 text-sm"
            value={textContent}
            onChange={(e) => setTextContent(e.target.value)}
          />
          <button
            type="button"
            onClick={() => void send()}
            disabled={loading !== "" || !to || !subject}
            className="w-fit rounded bg-[var(--accent)] px-4 py-2 text-sm text-white disabled:opacity-50"
          >
            {loading === "send" ? "جاري الإرسال..." : "إرسال اختبار"}
          </button>
        </div>
      </section>

      {result ? (
        <section className="rounded-lg border border-neutral-200 bg-white p-4 text-sm">{result}</section>
      ) : null}
    </div>
  );
}