"use client";

import { useCallback, useEffect, useState } from "react";

type EmailPolicySettings = {
  duplicateWindowDays?: number;
  duplicateAction?: "warn" | "skip" | "allow";
};

const ACTION_LABELS: Record<"warn" | "skip" | "allow", string> = {
  warn: "إظهار تحذير",
  skip: "تخطي تلقائي",
  allow: "السماح دائماً",
};

export function EmailPolicySettingsClient() {
  const [form, setForm] = useState<EmailPolicySettings>({
    duplicateWindowDays: 7,
    duplicateAction: "warn",
  });
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    const res = await fetch("/api/settings/email-policy");
    const json = (await res.json()) as { data?: EmailPolicySettings; error?: string };
    if (!res.ok) {
      setError(json.error ?? "فشل التحميل");
    } else {
      setForm({
        duplicateWindowDays: json.data?.duplicateWindowDays ?? 7,
        duplicateAction: json.data?.duplicateAction ?? "warn",
      });
    }
    setLoading(false);
  }, []);

  useEffect(() => {
    const timeout = window.setTimeout(() => {
      void load();
    }, 0);
    return () => window.clearTimeout(timeout);
  }, [load]);

  async function save(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setMessage("");
    const res = await fetch("/api/settings/email-policy", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(form),
    });
    const json = (await res.json()) as { error?: string };
    if (!res.ok) {
      setError(json.error ?? "فشل الحفظ");
      return;
    }
    setMessage("تم حفظ سياسة البريد");
    void load();
  }

  if (loading) return <p className="text-sm text-neutral-500">جاري التحميل...</p>;

  return (
    <div className="space-y-4">
      <header>
        <h1 className="text-xl font-bold">سياسة البريد</h1>
        <p className="text-sm text-neutral-500">Email Policy — duplicate send protection</p>
      </header>
      {error ? <p className="text-sm text-red-600">{error}</p> : null}
      {message ? <p className="text-sm text-green-700">{message}</p> : null}
      <form
        onSubmit={(e) => void save(e)}
        className="grid max-w-lg gap-4 rounded border bg-white p-4"
      >
        <label className="block text-sm">
          <span className="font-medium">مدة فحص التكرار قبل الإرسال</span>
          <span className="mt-1 block text-xs text-neutral-500">
            إذا تمت مراسلة نفس البريد خلال هذه المدة، سيظهر تحذير قبل إرسال حملة عادية
            جديدة. القيمة 0 تعطّل التحذير.
          </span>
          <input
            type="number"
            min={0}
            max={365}
            className="mt-2 w-full rounded border px-3 py-2"
            value={form.duplicateWindowDays ?? 7}
            onChange={(e) =>
              setForm({
                ...form,
                duplicateWindowDays: Math.min(
                  365,
                  Math.max(0, Number(e.target.value) || 0)
                ),
              })
            }
          />
        </label>
        <label className="block text-sm">
          <span className="font-medium">إجراء التكرار عند الإرسال</span>
          <select
            className="mt-2 w-full rounded border px-3 py-2"
            value={form.duplicateAction ?? "warn"}
            onChange={(e) =>
              setForm({
                ...form,
                duplicateAction: e.target.value as "warn" | "skip" | "allow",
              })
            }
          >
            {(Object.keys(ACTION_LABELS) as Array<keyof typeof ACTION_LABELS>).map(
              (key) => (
                <option key={key} value={key}>
                  {ACTION_LABELS[key]}
                </option>
              )
            )}
          </select>
        </label>
        <button type="submit" className="rounded bg-[var(--accent)] px-3 py-2 text-sm text-white">
          حفظ
        </button>
      </form>
    </div>
  );
}