"use client";
import React, { useEffect, useState } from 'react';
import Cookies from 'js-cookie';
import { useRouter } from 'next/navigation';

function Logout() {
  const [isVisible, setIsVisible] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const handleClose = () => setIsVisible(false);

    window.addEventListener("closeLogoutModal", handleClose);

    return () => {
      window.removeEventListener("closeLogoutModal", handleClose);
    };
  }, []);

  const handleLogout = () => {
    Cookies.remove("Snapta_auth_token");
    Cookies.remove("USERID");
    Cookies.remove("user_id");

    // Close modal before redirect
    window.dispatchEvent(new Event("closeLogoutModal"));

    router.push('/SignIn');
  };

  if (!isVisible) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-black/50">
      <div className="bg-[var(--modal-color)] py-2 rounded-2xl shadow-xl w-full max-w-[420px] md:max-w-[550px] mx-4 text-center border border-[var(--border-color)] overflow-hidden">
        
        <p className="text-lg text-[var(--text-primary)] font-semibold -mb-1">
          Logout
        </p>

        {/* Added border-b and padding to match reference style */}
        <p className="text-[var(--text-secondary)]  p-4 border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_07%)]">
          Are you sure you want to Logout your Account?
        </p>

        {/* Adjusted buttons with px-10/px-12 and font-medium to match reference */}
        <div className="flex gap-4 p-3 justify-center -mb-1 mt-1 ">
          <button 
            className="px-12 py-2 border rounded-xl border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] font-medium text-[var(--text-primary)] hover:opacity-80 "
            onClick={() => {
              window.dispatchEvent(new Event("closeLogoutModal"));
            }}
          >
            Cancel
          </button>

          <button 
            className="px-12 py-2 text-white font-medium rounded-xl bg-gradient-custom hover:opacity-90  min-w-[100px]"
            onClick={handleLogout}
          >
            Logout
          </button>
        </div>
      </div>
    </div>
  );
}

export default Logout;