'use client'

import { usePathname, useRouter } from 'next/navigation'
import { signOut } from 'next-auth/react'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Menu, LogOut, Settings, User as UserIcon, Monitor } from 'lucide-react'
import Link from 'next/link'
import { MobileNav } from './mobile-nav'
import { useState } from 'react'

interface Profile {
  fullName: string | null
  company: string | null
  role: string | null
}

interface AuthUser {
  id: string
  email: string
  name: string
}

interface DashboardHeaderProps {
  user: AuthUser
  profile: Profile | null
}

const pageTitles: Record<string, string> = {
  '/dashboard': 'Overview',
  '/dashboard/machines': 'Machines',
  '/dashboard/connect': 'Quick Connect',
  '/dashboard/sessions': 'Session History',
  '/dashboard/settings': 'Settings',
  '/dashboard/admin': 'Admin',
  '/download': 'Download Agent',
}

export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [mobileNavOpen, setMobileNavOpen] = useState(false)

  const handleSignOut = async () => {
    await signOut({ redirect: false })
    router.push('/auth/login')
  }

  const displayName = profile?.fullName || user.name || user.email?.split('@')[0]
  const title = pageTitles[pathname] || 'Dashboard'

  return (
    <>
      <header className="flex h-16 items-center justify-between gap-4 px-6 border-b border-border/50 bg-card/50">
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            className="lg:hidden"
            onClick={() => setMobileNavOpen(true)}
          >
            <Menu className="h-5 w-5" />
            <span className="sr-only">Open menu</span>
          </Button>

          <Link href="/dashboard" className="flex items-center gap-2 lg:hidden">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
              <Monitor className="h-4 w-4 text-primary-foreground" />
            </div>
          </Link>

          <h1 className="text-lg font-semibold hidden sm:block">{title}</h1>
        </div>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary text-sm font-medium">
                {displayName?.charAt(0)?.toUpperCase() || 'U'}
              </div>
              <span className="hidden sm:inline-block text-sm">{displayName}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <div className="px-2 py-1.5">
              <p className="text-sm font-medium">{displayName}</p>
              <p className="text-xs text-muted-foreground">{user.email}</p>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild>
              <Link href="/dashboard/settings" className="cursor-pointer">
                <UserIcon className="mr-2 h-4 w-4" />
                Profile
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <Link href="/dashboard/settings" className="cursor-pointer">
                <Settings className="mr-2 h-4 w-4" />
                Settings
              </Link>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer text-destructive">
              <LogOut className="mr-2 h-4 w-4" />
              Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </header>

      <MobileNav
        open={mobileNavOpen}
        onClose={() => setMobileNavOpen(false)}
        profile={profile}
      />
    </>
  )
}