'use client'

import { cn } from '@/lib/utils'
import { Moon, Sun, User, LogOut, Activity } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useRouter } from 'next/navigation'
import { useBusiness } from '@/components/providers/BusinessProvider'
import { createClient } from '@/lib/supabase/client'
import { Button } from '@/components/ui/Button'
import { NotificationBell } from '@/components/layout/NotificationBell'
import { useState, useRef, useEffect } from 'react'

export function Header() {
  const { resolvedTheme, setTheme } = useTheme()
  const router = useRouter()
  const { business, setBusiness } = useBusiness()
  const [mounted, setMounted] = useState(false)
  const [showUserMenu, setShowUserMenu] = useState(false)
  const userMenuRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    setMounted(true)
    function handleClickOutside(event: MouseEvent) {
      if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
        setShowUserMenu(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  async function handleSignOut() {
    try {
      await createClient()?.auth.signOut()
    } catch {
      /* session already gone */
    }
    setBusiness(null)
    setShowUserMenu(false)
    router.push('/login')
    router.refresh()
  }

  return (
    <header className="sticky top-0 z-30 h-16 border-b border-gray-200 bg-white/80 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900/80">
      <div className="flex h-full items-center justify-between px-4 lg:px-6">
        <div className="flex items-center gap-4">
          <Activity className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />
          <h1 className="text-xl font-bold text-gray-900 dark:text-white">IMBARAGA</h1>
          {business?.businessName && (
            <span className="hidden md:inline-flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
              <span className="mx-1 text-gray-300 dark:text-gray-600">/</span>
              {business.businessName}
            </span>
          )}
          <span className="hidden sm:block text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300">
            AI-Powered Business Operations
          </span>
        </div>

        <div className="flex items-center gap-3">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
            aria-label="Toggle theme"
          >
            {mounted && resolvedTheme === 'dark'
              ? <Sun className="h-5 w-5" />
              : <Moon className="h-5 w-5" />}
          </Button>

          <NotificationBell />

          <div className="relative" ref={userMenuRef}>
            <Button variant="ghost" size="sm" onClick={() => setShowUserMenu(!showUserMenu)} className="gap-2">
              <div className="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300">
                {business?.userName?.charAt(0).toUpperCase() || 'U'}
              </div>
              <span className="hidden md:block text-sm font-medium text-gray-700 dark:text-gray-300">
                {business?.userName || 'User'}
              </span>
            </Button>

            {showUserMenu && (
              <div className="absolute right-0 mt-2 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800">
                <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                  <p className="text-sm font-medium text-gray-900 dark:text-white">{business?.userName}</p>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{business?.userEmail}</p>
                  {business?.businessName && (
                    <p className="text-xs font-medium text-indigo-600 dark:text-indigo-400 mt-1">{business.businessName}</p>
                  )}
                </div>
                <Button variant="ghost" className="w-full justify-start" onClick={() => {
                  setShowUserMenu(false)
                  router.push('/dashboard/profile')
                }}>
                  <User className="h-4 w-4 mr-2" />
                  Profile
                </Button>
                <Button variant="ghost" className="w-full justify-start text-red-600 hover:text-red-700" onClick={handleSignOut}>
                  <LogOut className="h-4 w-4 mr-2" />
                  Sign out
                </Button>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  )
}