"use client";

import { LoaderCircle, ShieldCheck, Sparkles } from "lucide-react";
import { useEffect } from "react";

export default function ClientPortalSessionBootstrap({
  slug,
  token,
  loginUrl,
  targetUrl,
}: {
  slug: string;
  token: string;
  loginUrl: string;
  targetUrl: string;
}) {
  useEffect(() => {
    let active = true;

    async function persistSession() {
      try {
        const response = await fetch("/api/client-portal/session/bootstrap", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ slug, token }),
        });
        const payload = (await response.json().catch(() => ({}))) as { error?: string };
        if (!response.ok || payload.error) {
          const nextUrl = new URL(loginUrl, window.location.origin);
          nextUrl.searchParams.set("mode", "login");
          nextUrl.searchParams.set("error", payload.error || "Sessão inválida ou expirada.");
          window.location.replace(nextUrl.toString());
          return;
        }
        window.location.replace(targetUrl);
      } finally {
        if (!active) return;
      }
    }

    persistSession();
    return () => {
      active = false;
    };
  }, [loginUrl, slug, targetUrl, token]);

  return (
    <div className="rounded-[32px] border border-white/70 bg-white/88 px-6 py-10 text-center shadow-[0_24px_60px_rgba(15,23,42,0.1)] backdrop-blur-2xl">
      <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-[22px] border border-zinc-200 bg-zinc-50 text-zinc-700">
        <LoaderCircle className="h-7 w-7 animate-spin" />
      </div>
      <div className="mt-5 text-[11px] font-semibold uppercase tracking-[0.2em] text-zinc-400">
        Acessando sua conta
      </div>
      <div className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-zinc-950">
        Preparando sua area do cliente
      </div>
      <div className="mt-3 text-sm leading-6 text-zinc-600">
        Estamos validando sua sessao e concluindo a entrada com seguranca.
      </div>
      <div className="mt-8 grid gap-3 sm:grid-cols-2">
        <div className="rounded-[24px] border border-zinc-200 bg-zinc-50/80 p-4 text-left">
          <div className="flex items-center gap-3">
            <ShieldCheck className="h-5 w-5 text-zinc-700" />
            <div className="text-sm font-semibold text-zinc-950">Sessao protegida</div>
          </div>
          <div className="mt-2 text-sm text-zinc-500">
            Seu acesso esta sendo autenticado antes do redirecionamento.
          </div>
        </div>
        <div className="rounded-[24px] border border-zinc-200 bg-zinc-50/80 p-4 text-left">
          <div className="flex items-center gap-3">
            <Sparkles className="h-5 w-5 text-zinc-700" />
            <div className="text-sm font-semibold text-zinc-950">Experiencia premium</div>
          </div>
          <div className="mt-2 text-sm text-zinc-500">
            Em instantes voce entra na nova area do cliente.
          </div>
        </div>
      </div>
    </div>
  );
}