import React, { useState, useEffect } from "react";
import { X } from "lucide-react";
import type { AppSettings, EmailAlertLog } from "../types";
interface Props {
  isOpen: boolean;
  onClose: () => void;
  settings: AppSettings;
  onSaveSettings: (s: AppSettings) => Promise<void>;
  alertLogs: EmailAlertLog[];
  onSendTestEmail: (
    recipient: string,
  ) => Promise<{ success: boolean; message: string }>;
}
export function EmailSettingsModal({
  isOpen,
  onClose,
  settings,
  onSaveSettings,
  alertLogs,
  onSendTestEmail,
}: Props) {
  const [draft, setDraft] = useState(settings),
    [error, setError] = useState(""),
    [feedback, setFeedback] = useState(""),
    [busy, setBusy] = useState(false),
    [tab, setTab] = useState<"settings" | "logs">("settings");
  useEffect(() => {
    if (isOpen) {
      setDraft(settings);
      setError("");
      setFeedback("");
    }
  }, [isOpen]);
  if (!isOpen) return null;
  const set = <K extends keyof AppSettings>(key: K, value: AppSettings[K]) =>
    setDraft((s) => ({ ...s, [key]: value }));
  async function save(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setError("");
    try {
      await onSaveSettings(draft);
      onClose();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function test() {
    setBusy(true);
    setError("");
    try {
      if (draft.adminEmail !== settings.adminEmail)
        throw new Error("Simpan alamat emel dahulu sebelum ujian.");
      setFeedback((await onSendTestEmail(draft.adminEmail)).message);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  const labels = {
    sent: "Diterima SMTP",
    pending: "Dalam queue / cuba semula",
    failed: "Gagal dihantar",
    disabled: "SMTP belum disediakan",
  };
  return (
    <div className="fixed inset-0 z-50 bg-slate-950/80 flex items-center justify-center p-4">
      <div className="w-full max-w-2xl rounded-2xl bg-slate-900 border border-slate-700 max-h-[90vh] overflow-auto p-6 space-y-4">
        <div className="flex justify-between">
          <h2 className="font-bold">Tetapan pemantauan & emel</h2>
          <button aria-label="Tutup" onClick={onClose}>
            <X />
          </button>
        </div>
        <div className="flex gap-4 text-sm">
          <button onClick={() => setTab("settings")} className="text-blue-300">
            Tetapan
          </button>
          <button onClick={() => setTab("logs")} className="text-blue-300">
            Log emel ({alertLogs.length})
          </button>
        </div>
        {tab === "settings" ? (
          <form onSubmit={save} className="space-y-4">
            <label className="block text-sm">
              Emel penerima
              <input
                required
                type="email"
                value={draft.adminEmail}
                onChange={(e) => set("adminEmail", e.target.value)}
                className="block w-full p-2 mt-1 rounded-lg border border-slate-700 bg-slate-800"
              />
            </label>
            <label className="block text-sm">
              Jadual server
              <select
                value={draft.autoCheckIntervalMinutes}
                onChange={(e) =>
                  set("autoCheckIntervalMinutes", Number(e.target.value))
                }
                className="block w-full p-2 mt-1 rounded-lg bg-slate-800"
              >
                {[0, 1, 5, 15, 30].map((n) => (
                  <option key={n} value={n}>
                    {n ? `Setiap ${n} minit` : "Manual sahaja"}
                  </option>
                ))}
              </select>
              <span className="text-xs text-slate-400">
                Semakan berjalan walaupun browser ditutup, selagi server portal
                berjalan.
              </span>
            </label>
            <label className="block text-sm">
              Kegagalan berturut-turut sebelum buka insiden
              <select
                value={draft.failureThreshold}
                onChange={(e) =>
                  set("failureThreshold", Number(e.target.value))
                }
                className="block w-full p-2 mt-1 rounded-lg bg-slate-800"
              >
                {[1, 2, 3, 4, 5].map((n) => (
                  <option key={n} value={n}>
                    {n} semakan
                  </option>
                ))}
              </select>
            </label>
            {(
              [
                ["autoEmailAlerts", "Emel automatik untuk insiden"],
                ["recoveryAlerts", "Emel apabila website pulih"],
                [
                  "alertOnWarning",
                  "Emel amaran SSL / respons / REST (sekali bagi setiap jenis sehari)",
                ],
                [
                  "soundAlerts",
                  "Bunyi apabila insiden baharu muncul di dashboard",
                ],
              ] as const
            ).map(([key, label]) => (
              <label key={key} className="flex gap-3 text-sm">
                <input
                  type="checkbox"
                  checked={draft[key]}
                  onChange={(e) => set(key, e.target.checked)}
                />
                {label}
              </label>
            ))}
            {error && (
              <p role="alert" className="text-sm text-red-300">
                {error}
              </p>
            )}
            {feedback && (
              <p role="status" className="text-sm text-slate-300">
                {feedback}
              </p>
            )}
            <div className="flex gap-3">
              <button
                disabled={busy}
                className="bg-blue-600 px-4 py-2 rounded-lg text-sm disabled:opacity-50"
              >
                {busy ? "Memproses..." : "Simpan tetapan"}
              </button>
              <button
                type="button"
                disabled={busy}
                onClick={test}
                className="bg-slate-800 px-4 py-2 rounded-lg text-sm"
              >
                Uji SMTP
              </button>
            </div>
          </form>
        ) : (
          <div className="space-y-3">
            {!alertLogs.length && (
              <p className="text-slate-400 text-sm">Belum ada notifikasi.</p>
            )}
            {alertLogs.map((log) => (
              <div
                key={log.id}
                className="border border-slate-700 rounded-lg p-3 text-sm"
              >
                <div className="flex flex-wrap justify-between gap-2">
                  <strong>{log.siteName}</strong>
                  <span
                    className={
                      log.status === "sent"
                        ? "text-emerald-300"
                        : log.status === "failed"
                          ? "text-red-300"
                          : "text-amber-300"
                    }
                  >
                    {labels[log.status]}
                  </span>
                </div>
                <p className="text-slate-400 mt-1">
                  {log.errorType} · {log.recipient}
                </p>
                <p className="text-xs text-slate-500 mt-1">
                  {new Date(log.sentAt).toLocaleString("ms-MY", {
                    timeZone: "Asia/Kuala_Lumpur",
                  })}{" "}
                  · Cubaan: {log.attempts || 0}
                </p>
                {log.deliveryError && (
                  <p className="text-xs text-red-300 mt-1">
                    {log.deliveryError}
                  </p>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}