'use client';

import React, { useEffect, useRef } from 'react';
import backgroundImg from '../../assets/images/modalBg.png';
import { Icons } from '@/components/icons';
import { useRouter } from 'next/navigation';
import apis from '@/utils/apis';
import { Button } from './button';

interface LogoutDialogProps {
  isOpen: boolean;
  onClose: () => void;
}

export function LogoutDialog({ isOpen, onClose }: LogoutDialogProps) {
  const router = useRouter();
  const modalRef = useRef<HTMLDivElement>(null);

  const handleLogout = async () => {
    try {
      const apiRes = await apis.Auth.logout();
      if (apiRes) {
        sessionStorage.clear();
        router.replace('/auth/login');
      }
    } catch (error: any) {
      if (error?.status === 401) {
        sessionStorage.clear();
        router.replace('/auth/login');
      }
    } finally {
      onClose();
    }
  };

  // Detect click outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        modalRef.current &&
        !modalRef.current.contains(event.target as Node)
      ) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
      <div
        ref={modalRef}
        className="relative h-[300px] w-[500px] rounded-lg bg-cover bg-center shadow-lg"
        style={{
          backgroundImage: `url(${backgroundImg.src})`,
        }}
      >
        <div className="absolute -top-14 right-[205px]">
          <Icons.LogoutItem />
        </div>

        <div className="mt-[20%] flex h-[70%] w-full flex-col items-center justify-center gap-4">
          <div className="flex flex-col items-center justify-center px-4 text-center">
            <span className="text-[22px] font-[600] text-[#121212]">
              Log out
            </span>
            <span className="text-[16px] font-[400] text-[#999999] mt-1">
              Are you sure you want to sign out your app?
            </span>
          </div>

<div className="mt-4 flex w-full flex-row justify-between gap-2 px-4">
  <Button
    variant="theme"
    className="w-[50%] h-[48px] bg-red-600 text-white hover:bg-red-600"
    onClick={onClose}
  >
    Cancel
  </Button>

  <Button
    variant="theme"
    className="w-[50%] h-[48px]"
    onClick={handleLogout}
  >
    Sign Out
  </Button>
</div>


        </div>
      </div>
    </div>
  );
}

export default LogoutDialog;