'use client'

import { useEffect, useState } from 'react'
import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'

export default function HeaderIdentity() {
  const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null)
  const [buildNumber, setBuildNumber] = useState<string | null>(null)
  const [open, setOpen] = useState(false)

  useEffect(() => {
    const token = getToken()
    if (!token) {
      setIdentity(null)
      setBuildNumber(null)
      return
    }
    const load = async () => {
      try {
        const baseUrl = getApiBase()
        const response = await authFetch(`${baseUrl}/auth/me`)
        if (!response.ok) {
          clearToken()
          setIdentity(null)
          return
        }
        const data = await response.json()
        if (data?.username) {
          setIdentity({ username: data.username, role: data.role })
        }
        const siteResponse = await fetch(`${baseUrl}/site/public`)
        if (siteResponse.ok) {
          const siteInfo = await siteResponse.json()
          if (siteInfo?.buildNumber) {
            setBuildNumber(siteInfo.buildNumber)
          }
        }
      } catch (err) {
        console.error(err)
        setIdentity(null)
      }
    }
    void load()
  }, [])

  if (!identity) {
    return null
  }

  const label = `${identity.username}${identity.role ? ` (${identity.role})` : ''}`
  const initial = identity.username.slice(0, 1).toUpperCase()
  const signOut = () => {
    clearToken()
    if (typeof window !== 'undefined') {
      window.location.href = '/login'
    }
  }

  return (
    <div className="signed-in-menu">
      <button
        type="button"
        className="avatar-button"
        onClick={() => setOpen((prev) => !prev)}
        aria-haspopup="true"
        aria-expanded={open}
        title={label}
      >
        {initial}
      </button>
      {open && (
        <div className="signed-in-dropdown">
          <div className="signed-in-header">Signed in as {label}</div>
          <div className="signed-in-actions">
            <a href="/profile" onClick={() => setOpen(false)}>
              My profile
            </a>
            <a href="/changelog" onClick={() => setOpen(false)}>
              Changelog
            </a>
            <button type="button" className="signed-in-signout" onClick={signOut}>
              Sign out
            </button>
          </div>
          {buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null}
        </div>
      )}
    </div>
  )
}