'use client'

import {useState, useRef, useEffect} from 'react'
import {useRouter} from 'next/navigation'

export default function ProfileDropdown() {
    const [open, setOpen] = useState(false)
    const dropdownRef = useRef<HTMLDivElement>(null)
    const router = useRouter()

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setOpen(false)
            }
        }

        document.addEventListener('mousedown', handleClickOutside)
        return () => document.removeEventListener('mousedown', handleClickOutside)
    }, [])

    const handleLogout = async () => {
        try {
            await fetch('/logout', {method: 'POST'})
            router.push('/') // Or a dedicated post-logout landing page
        } catch (e) {
            console.error('Logout failed', e)
        }
    }

    return (
        <div className="relative" ref={dropdownRef}>
            <button
                onClick={() => setOpen(!open)}
                className="text-white font-medium px-4 py-2 hover:bg-zinc-800 rounded"
            >
                Profil ▾
            </button>

            {open && (
                <div className="absolute right-0 mt-2 w-40 bg-white shadow-lg rounded z-50">
                    <button
                        onClick={handleLogout}
                        className="block w-full text-left px-4 py-2 text-sm text-zinc-800 hover:bg-zinc-100"
                    >
                        Logout
                    </button>
                </div>
            )}
        </div>
    )
}