"use client";

import { Suspense, useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { completeSocialCallback } from "@/lib/auth";
import { useAuth } from "@/context/AuthContext";

function CallbackInner() {
  const params = useParams<{ provider: string }>();
  const router = useRouter();
  const { refresh } = useAuth();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const provider = params.provider === "apple" ? "apple" : "google";
    completeSocialCallback(provider)
      .then(async () => {
        await refresh();
        window.location.replace("/");
      })
      .catch((err) => {
        setError(err instanceof Error ? err.message : "Error en el callback de autenticación");
      });
  }, [params.provider, refresh, router]);

  if (error) {
    return (
      <div className="ot-container py-20 max-w-lg text-center">
        <h1 className="font-serif text-4xl">No se pudo completar el acceso</h1>
        <p className="mt-4 text-red-700 text-sm">{error}</p>
        <a href="/account" className="ot-btn mt-8 inline-flex">Volver</a>
      </div>
    );
  }

  return (
    <div className="ot-container py-20 text-center text-ot-muted">
      Confirmando acceso con {params.provider}…
    </div>
  );
}

export default function SocialCallbackPage() {
  return (
    <Suspense fallback={<div className="ot-container py-20 text-center">Cargando…</div>}>
      <CallbackInner />
    </Suspense>
  );
}