import { useState, useRef, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import { useTutorialOptional } from '../context/TutorialContext'
import { SampleDataMenuItem } from './SampleDataMenuItem'
import { SpeechSettingsMenuItem } from './SpeechSettingsPanel'

type Props = {
  onProfile: () => void
  onAccount: () => void
  onClearData: () => void
}

/**
 * Account menu: hover opens transiently; click pins until click again,
 * menu item action, Escape, or outside click.
 */
export function UserMenu({ onProfile, onAccount, onClearData }: Props) {
  const { user, signOut } = useAuth()
  const tutorial = useTutorialOptional()
  const [hoverOpen, setHoverOpen] = useState(false)
  const [pinned, setPinned] = useState(false)
  const [speechOpen, setSpeechOpen] = useState(false)
  const [sampleDataOpen, setSampleDataOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  const open = pinned || hoverOpen

  const closeAll = () => {
    setPinned(false)
    setHoverOpen(false)
    setSpeechOpen(false)
    setSampleDataOpen(false)
  }

  useEffect(() => {
    if (!open) return

    function onPointerDown(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        closeAll()
      }
    }

    function onKeyDown(e: KeyboardEvent) {
      if (e.key === 'Escape') closeAll()
    }

    document.addEventListener('mousedown', onPointerDown)
    document.addEventListener('keydown', onKeyDown)
    return () => {
      document.removeEventListener('mousedown', onPointerDown)
      document.removeEventListener('keydown', onKeyDown)
    }
  }, [open])

  const label = user ? user.firstName || user.email : 'Guest'

  return (
    <div
      className="user-menu-wrap"
      ref={ref}
      onMouseEnter={() => setHoverOpen(true)}
      onMouseLeave={() => {
        if (!pinned) {
          setHoverOpen(false)
          setSpeechOpen(false)
          setSampleDataOpen(false)
        }
      }}
    >
      <button
        type="button"
        className={`user-menu-trigger${open ? ' user-menu-trigger--open' : ''}`}
        onClick={() => {
          const next = !pinned
          setPinned(next)
          setHoverOpen(next)
          if (!next) {
            setSpeechOpen(false)
            setSampleDataOpen(false)
          }
        }}
        aria-expanded={open}
        aria-haspopup="menu"
        aria-label="Account menu"
      >
        <span className="user-menu-name">{label}</span>
        <span className="user-menu-kebab" aria-hidden title="Menu">
          ⋮
        </span>
      </button>
      {open && (
        <div className="user-dropdown" role="menu">
          <button
            type="button"
            role="menuitem"
            onClick={() => {
              closeAll()
              onProfile()
            }}
          >
            Profile
          </button>
          <button
            type="button"
            role="menuitem"
            onClick={() => {
              closeAll()
              if (user) onAccount()
            }}
            disabled={!user}
            title={!user ? 'Sign in to change account settings' : undefined}
            style={!user ? { opacity: 0.55, cursor: 'not-allowed' } : undefined}
          >
            Account
          </button>
          <button
            type="button"
            role="menuitem"
            onClick={() => {
              closeAll()
              onClearData()
            }}
          >
            Clear User Data
          </button>
          <SampleDataMenuItem
            open={sampleDataOpen}
            onToggle={() => {
              setSampleDataOpen((s) => !s)
              setSpeechOpen(false)
            }}
            onActionComplete={closeAll}
          />
          <div className="user-dropdown-divider" role="presentation" />
          {tutorial && (
            <>
              <button
                type="button"
                role="menuitem"
                onClick={() => {
                  closeAll()
                  tutorial.turnOnTutorial()
                }}
              >
                Turn on Tutorial
              </button>
              <button
                type="button"
                role="menuitem"
                onClick={() => {
                  closeAll()
                  tutorial.removeTutorialButton()
                }}
              >
                Remove Tutorial Button
              </button>
              <div className="user-dropdown-divider" role="presentation" />
            </>
          )}
          <SpeechSettingsMenuItem
            open={speechOpen}
            onToggle={() => {
              setSpeechOpen((s) => !s)
              setSampleDataOpen(false)
            }}
          />
          {user ? (
            <button
              type="button"
              role="menuitem"
              className="danger"
              onClick={() => {
                closeAll()
                signOut()
              }}
            >
              Sign out
            </button>
          ) : (
            <Link
              to="/auth"
              role="menuitem"
              className="user-dropdown-link"
              onClick={closeAll}
              style={{ display: 'block', padding: '0.5rem 1rem', textDecoration: 'none', color: 'inherit' }}
            >
              Sign In / Create Account
            </Link>
          )}
        </div>
      )}
    </div>
  )
}