"use client";

import { useEffect, useState } from "react";
import { useI18n } from "../../components/I18nProvider";

type SiteSettings = {
  requireLoginForContactDetails: boolean;
};

export default function AdminSettingsPage() {
  const { t } = useI18n();
  const [settings, setSettings] = useState<SiteSettings | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    async function load() {
      setLoading(true);
      setError(null);
      try {
        const meRes = await fetch("/api/auth/me", { cache: "no-store" });
        const me = await meRes.json();
        if (me.user?.role !== "ADMIN") {
          setError(t("adminRequired"));
          setLoading(false);
          return;
        }

        setIsAdmin(true);
        const res = await fetch("/api/admin/settings", { cache: "no-store" });
        const data = await res.json();
        if (!res.ok) {
          setError(data.error || "Failed to load settings");
        } else {
          setSettings(data.settings);
        }
      } catch (err) {
        console.error(err);
        setError("Failed to load settings");
      } finally {
        setLoading(false);
      }
    }

    load();
  }, [t]);

  async function save(next: Partial<SiteSettings>) {
    if (!isAdmin) return;
    setSaving(true);
    setMessage(null);
    setError(null);
    try {
      const res = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(next),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "Failed to save settings");
      } else {
        setSettings(data.settings);
        setMessage(t("settingsSaved"));
      }
    } catch (err) {
      console.error(err);
      setError("Failed to save settings");
    } finally {
      setSaving(false);
    }
  }

  function toggleRequireLoginForContactDetails() {
    if (!settings) return;
    save({
      requireLoginForContactDetails: !settings.requireLoginForContactDetails,
    });
  }

  return (
    <main className="panel" style={{ maxWidth: 960, margin: "40px auto" }}>
      <h1>{t("adminSettingsTitle")}</h1>
      <p>{t("adminSettingsLead")}</p>
      {loading ? <p>{t("loading")}</p> : null}
      {message ? <p style={{ color: "green" }}>{message}</p> : null}
      {error ? <p style={{ color: "red" }}>{error}</p> : null}

      {!loading && settings ? (
        <div style={{ display: "grid", gap: 16, marginTop: 16 }}>
          <section
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-start",
              border: "1px solid #e5e7eb",
              borderRadius: 12,
              padding: 16,
              background:
                "linear-gradient(135deg, rgba(14,165,233,0.08), rgba(30,64,175,0.08))",
            }}
          >
            <div style={{ maxWidth: 520 }}>
              <h2 style={{ margin: "0 0 8px" }}>
                {t("settingContactVisibilityTitle")}
              </h2>
              <p style={{ margin: 0, color: "#475569" }}>
                {t("settingContactVisibilityHelp")}
              </p>
            </div>
            <label
              style={{
                display: "flex",
                alignItems: "center",
                gap: 10,
                fontWeight: 600,
              }}
            >
              <input
                type="checkbox"
                checked={settings.requireLoginForContactDetails}
                onChange={toggleRequireLoginForContactDetails}
                disabled={saving}
              />
              <span>{t("settingRequireLoginForContact")}</span>
            </label>
          </section>
        </div>
      ) : null}
    </main>
  );
}