"use client";

import { useEffect } from "react";
import { useSession } from "next-auth/react";
import { clearAuthCookies } from "@/lib/session";

export function SignOutHandler() {
  const { data: session } = useSession();

  useEffect(() => {
    const handleSignOut = async () => {
      try {
        // First, clear all auth-related cookies to ensure we break any local sessions
        clearAuthCookies();
        
        // Get Keycloak logout URL
        if (process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER) {
          console.log('Preparing complete Keycloak logout');
          
          // Create a proper Keycloak logout URL with all required parameters for front-channel logout
          const keycloakBaseUrl = process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER;
          const logoutEndpoint = `${keycloakBaseUrl}/protocol/openid-connect/logout`;
          
          // Create form for POST logout (more reliable)
          const form = document.createElement('form');
          form.method = 'POST';
          form.action = logoutEndpoint;
          
          // Add id_token_hint if available
          if (session?.accessToken) {
            const tokenInput = document.createElement('input');
            tokenInput.type = 'hidden';
            tokenInput.name = 'id_token_hint';
            tokenInput.value = session.accessToken;
            form.appendChild(tokenInput);
          }
          
          // Add client_id parameter - CRITICAL for proper logout
          const clientIdInput = document.createElement('input');
          clientIdInput.type = 'hidden';
          clientIdInput.name = 'client_id';
          clientIdInput.value = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'lab';
          form.appendChild(clientIdInput);
          
          // Add post_logout_redirect_uri pointing to our logged out page
          const redirectInput = document.createElement('input');
          redirectInput.type = 'hidden';
          redirectInput.name = 'post_logout_redirect_uri';
          redirectInput.value = `${window.location.origin}/loggedout`;
          form.appendChild(redirectInput);
          
          // Add logout_hint=server to explicitly request server-side session cleanup
          const logoutHintInput = document.createElement('input');
          logoutHintInput.type = 'hidden';
          logoutHintInput.name = 'logout_hint';
          logoutHintInput.value = 'server';
          form.appendChild(logoutHintInput);
          
          // Append to body and submit
          document.body.appendChild(form);
          console.log('Submitting Keycloak logout form with server-side logout');
          form.submit();
        } else {
          console.log('No Keycloak configuration found, performing simple redirect');
          window.location.href = '/loggedout';
        }
      } catch (error) {
        console.error('Error during logout:', error);
        window.location.href = '/loggedout';
      }
    };

    // Add a slight delay to ensure useSession has loaded
    const timer = setTimeout(() => {
      handleSignOut();
    }, 100);
    
    return () => clearTimeout(timer);
  }, [session]);

  return (
    <div className="w-full h-full flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-2xl font-bold">Logging out...</h2>
        <p className="text-gray-500 mt-2">Please wait while we sign you out completely.</p>
      </div>
    </div>
  );
}