"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useCurrentUser } from "../../user-context";

interface GoogleConfig {
  clientId: string;
  redirectUri: string;
  clientSecretSet: boolean;
}

export default function AdminConfigPage() {
  const router = useRouter();
  const me = useCurrentUser();

  const [cfg, setCfg] = useState<GoogleConfig | null>(null);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<{ type: "ok" | "err"; text: string } | null>(null);
  const [saving, setSaving] = useState(false);

  const [clientId, setClientId] = useState("");
  const [clientSecret, setClientSecret] = useState("");
  const [redirectUri, setRedirectUri] = useState("");

  useEffect(() => {
    if (me.role !== "super_admin") {
      router.replace("/dashboard");
      return;
    }
    fetch("/backend/config", { credentials: "include" })
      .then((res) => {
        if (!res.ok) throw new Error("forbidden");
        return res.json();
      })
      .then((data) => {
        setCfg(data.google);
        setClientId(data.google.clientId ?? "");
        setRedirectUri(data.google.redirectUri ?? "");
      })
      .catch(() => setMessage({ type: "err", text: "Impossible de charger la configuration." }))
      .finally(() => setLoading(false));
  }, [me.role, router]);

  async function save(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);
    setSaving(true);
    try {
      const body: Record<string, string> = { clientId, redirectUri };
      if (clientSecret) body.clientSecret = clientSecret; // sinon on garde l'existant
      const res = await fetch("/backend/config/google", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify(body),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setMessage({ type: "err", text: data.error ?? "Échec de l'enregistrement." });
        return;
      }
      setCfg(data.google);
      setClientSecret("");
      setMessage({ type: "ok", text: "Configuration enregistrée." });
    } catch {
      setMessage({ type: "err", text: "Erreur réseau." });
    } finally {
      setSaving(false);
    }
  }

  if (loading) return <div className="text-zinc-500">Chargement…</div>;

  return (
    <div className="mx-auto w-full max-w-2xl">
      <h1 className="mb-2 text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">Configuration</h1>
      <p className="mb-6 text-sm text-zinc-500 dark:text-zinc-400">
        Réglages des connexions externes. Réservé au Super Admin.
      </p>

      {message && (
        <p
          className={
            "mb-4 rounded-lg px-3 py-2 text-sm " +
            (message.type === "ok"
              ? "bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300"
              : "bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300")
          }
          role="alert"
        >
          {message.text}
        </p>
      )}

      <form
        onSubmit={save}
        className="flex flex-col gap-4 rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950"
      >
        <div>
          <h2 className="text-base font-medium text-black dark:text-zinc-50">Connexion Google (OAuth)</h2>
          <p className="mt-1 text-xs text-zinc-500">
            Depuis Google Cloud Console → Identifiants → ID client OAuth (application Web).
          </p>
        </div>

        <label className="flex flex-col gap-1 text-sm font-medium text-zinc-700 dark:text-zinc-300">
          ID client
          <input
            value={clientId}
            onChange={(e) => setClientId(e.target.value)}
            placeholder="xxxxxxxx.apps.googleusercontent.com"
            className="rounded-lg border border-zinc-300 px-3 py-2 text-sm font-normal dark:border-zinc-700 dark:bg-black"
          />
        </label>

        <label className="flex flex-col gap-1 text-sm font-medium text-zinc-700 dark:text-zinc-300">
          Code secret du client
          <input
            type="password"
            value={clientSecret}
            onChange={(e) => setClientSecret(e.target.value)}
            placeholder={cfg?.clientSecretSet ? "•••••••• (défini — laisser vide pour conserver)" : "Saisir le secret"}
            className="rounded-lg border border-zinc-300 px-3 py-2 text-sm font-normal dark:border-zinc-700 dark:bg-black"
          />
        </label>

        <label className="flex flex-col gap-1 text-sm font-medium text-zinc-700 dark:text-zinc-300">
          URI de redirection
          <input
            value={redirectUri}
            onChange={(e) => setRedirectUri(e.target.value)}
            className="rounded-lg border border-zinc-300 px-3 py-2 text-sm font-normal dark:border-zinc-700 dark:bg-black"
          />
          <span className="text-xs font-normal text-zinc-500">
            À déclarer à l&apos;identique dans Google Cloud Console.
          </span>
        </label>

        <button
          type="submit"
          disabled={saving}
          className="self-start rounded-lg bg-black px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 disabled:opacity-60 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
        >
          {saving ? "Enregistrement…" : "Enregistrer"}
        </button>
      </form>
    </div>
  );
}