"use client";

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

interface GoogleStatus {
  configured: boolean;
  connected: boolean;
  account?: {
    email: string;
    scopes: string[];
    connectedAt: string;
    lastRefreshAt: string | null;
  } | null;
}

const FEEDBACK: Record<string, { type: "ok" | "err"; text: string }> = {
  connected: { type: "ok", text: "Compte Google connecté avec succès." },
  denied: { type: "err", text: "Connexion refusée côté Google." },
  norefresh: { type: "err", text: "Aucun jeton de rafraîchissement reçu. Réessayez en autorisant l'accès." },
  error: { type: "err", text: "Une erreur est survenue pendant la connexion à Google." },
};

export default function SettingsPage() {
  return (
    <Suspense fallback={<div className="text-zinc-500">Chargement…</div>}>
      <SettingsContent />
    </Suspense>
  );
}

function SettingsContent() {
  const params = useSearchParams();
  const router = useRouter();
  const me = useCurrentUser();

  useEffect(() => {
    if (me.role !== "super_admin") router.replace("/dashboard");
  }, [me.role, router]);
  const [status, setStatus] = useState<GoogleStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const feedbackKey = params.get("google");
  const feedback = feedbackKey ? FEEDBACK[feedbackKey] : null;

  const loadStatus = useCallback(async () => {
    const res = await fetch("/backend/google/status", { credentials: "include" });
    if (res.ok) setStatus(await res.json());
  }, []);

  useEffect(() => {
    loadStatus().finally(() => setLoading(false));
  }, [loadStatus]);

  function connect() {
    // Navigation réelle (et non fetch) pour suivre la redirection vers Google.
    window.location.href = "/backend/google/oauth/start";
  }

  async function disconnect() {
    if (!window.confirm("Déconnecter votre compte Google ?")) return;
    await fetch("/backend/google/disconnect", { method: "POST", credentials: "include" });
    await loadStatus();
  }

  return (
    <div className="mx-auto w-full max-w-2xl">
      <h1 className="mb-6 text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">Paramètres</h1>

      {feedback && (
        <p
          className={
            "mb-4 rounded-lg px-3 py-2 text-sm " +
            (feedback.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"
        >
          {feedback.text}
        </p>
      )}

      <section className="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
        <h2 className="text-base font-medium text-black dark:text-zinc-50">Compte Google</h2>
        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
          Connectez votre compte Google pour accéder à votre agenda et à votre boîte mail.
        </p>

        <div className="mt-4">
          {loading ? (
            <p className="text-sm text-zinc-500">Chargement…</p>
          ) : !status?.configured ? (
            <p className="rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:bg-amber-950 dark:text-amber-300">
              La connexion Google n&apos;est pas encore configurée côté serveur.
            </p>
          ) : status.connected && status.account ? (
            <div className="flex flex-col gap-3">
              <div className="text-sm text-zinc-700 dark:text-zinc-300">
                ✅ Connecté : <strong>{status.account.email}</strong>
              </div>
              <button
                onClick={disconnect}
                className="self-start rounded-lg border border-red-300 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 dark:border-red-900 dark:hover:bg-red-950"
              >
                Déconnecter Google
              </button>
            </div>
          ) : (
            <button
              onClick={connect}
              className="rounded-lg bg-black px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
            >
              Connecter mon compte Google
            </button>
          )}
        </div>
      </section>
    </div>
  );
}