import { auth, signOut } from '@/auth'
import { LogOut, Search, Bell, Menu, Settings, User, Activity, ShoppingBag } from 'lucide-react'
import { Button, buttonVariants } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import Link from 'next/link'
import Image from 'next/image'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuGroup,
} from "@/components/ui/dropdown-menu"
import { prisma } from '@/lib/prisma'
import { cn } from '@/lib/utils'
import { MobileMenu } from './MobileMenu'
import { getSiteSettings } from '@/app/dashboard/settings/actions'

export async function Header() {
  const session = await auth()
  const role = session?.user?.role
  const userImage = session?.user?.image
  const settings = await getSiteSettings()

  // Fetch fresh data from DB to avoid stale session issues
  let connectedEmail = (session?.user as any)?.connectedEmail
  if (session?.user?.id) {
    const dbUser = await prisma.user.findUnique({
      where: { id: session.user.id },
      select: { connectedEmail: true }
    })
    connectedEmail = dbUser?.connectedEmail
  }

  // Fetch recent notifications (latest 5 orders)
  const recentOrders = await prisma.order.findMany({
    where: role === 'STAFF' ? { userId: session?.user?.id } : {},
    orderBy: { createdAt: 'desc' },
    take: 5,
    include: { user: true }
  })

  return (
    <>
    {!connectedEmail && (
      <div className="bg-amber-100 dark:bg-amber-900/30 border-b border-amber-200 dark:border-amber-800 px-4 py-3 flex items-center justify-between z-50 animate-in slide-in-from-top duration-300">
        <div className="flex items-center text-amber-800 dark:text-amber-200 text-sm font-medium">
          <span className="flex h-5 w-5 rounded-full bg-amber-500 items-center justify-center text-white mr-3 shrink-0">!</span>
          <span>Action Required: You must connect a Gmail address in your Settings to request or approve Purchase Orders.</span>
        </div>
        <Link href="/dashboard/settings">
          <Button variant="outline" size="sm" className="bg-amber-50 dark:bg-amber-950 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-200 hover:bg-amber-200 dark:hover:bg-amber-800">
            Fix Now
          </Button>
        </Link>
      </div>
    )}
    <header className="h-16 border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-md flex items-center justify-between px-4 sm:px-6 sticky top-0 z-40">
      <div className="flex items-center flex-1">
        <MobileMenu 
          role={role} 
          siteName={settings.siteName} 
          siteLogo={settings.siteLogo} 
          picWhatsapp={settings.picWhatsapp}
          picEmail={settings.picEmail}
        />
        <div className="hidden sm:flex items-center bg-gray-100 dark:bg-gray-800 rounded-md px-3 py-1.5 w-64 border border-transparent focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-all group">
          <Search className="h-4 w-4 text-gray-400 mr-2 group-focus-within:text-primary" />
          <input 
            type="text" 
            placeholder="Search orders..." 
            className="bg-transparent border-none focus:outline-none text-sm w-full"
          />
        </div>
      </div>
      
      <div className="flex items-center space-x-4">
        {/* Notifications Dropdown */}
        <DropdownMenu>
          <DropdownMenuTrigger className={cn(
            buttonVariants({ variant: 'ghost', size: 'icon' }),
            "relative group hover:bg-muted rounded-full transition-all cursor-pointer"
          )}>
            <Bell className="h-5 w-5 text-gray-600 dark:text-gray-300 group-hover:text-primary" />
            <span className="absolute top-2 right-2 h-2.5 w-2.5 rounded-full bg-red-500 border-2 border-white dark:border-gray-900 animate-pulse"></span>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-80 p-0 shadow-2xl border-border/50">
            <div className="p-4 border-b border-border/50 bg-muted/20">
              <div className="flex justify-between items-center">
                <h3 className="text-sm font-black uppercase tracking-widest text-foreground flex items-center gap-2">
                  <Activity className="w-4 h-4 text-primary" /> Notifications
                </h3>
                <Badge variant="secondary" className="bg-primary/10 text-primary border-none text-[10px] font-black px-2 py-0.5">
                  New
                </Badge>
              </div>
            </div>
            <div className="max-h-[400px] overflow-y-auto">
              {recentOrders.length > 0 ? (
                recentOrders.map((order) => (
                  <Link key={order.id} href={`/dashboard/orders/${order.id}`}>
                    <DropdownMenuItem className="p-4 cursor-pointer focus:bg-muted/50 border-b border-border/10 last:border-0">
                      <div className="flex gap-4 items-start">
                        <div className={cn(
                          "h-10 w-10 rounded-xl flex items-center justify-center shrink-0 shadow-sm",
                          order.status === 'PENDING' ? 'bg-amber-100 text-amber-600' :
                          order.status === 'APPROVED' ? 'bg-blue-100 text-blue-600' :
                          order.status === 'REJECTED' ? 'bg-red-100 text-red-600' :
                          'bg-emerald-100 text-emerald-600'
                        )}>
                          <ShoppingBag className="h-5 w-5" />
                        </div>
                        <div className="space-y-1 overflow-hidden">
                          <p className="text-sm font-black tracking-tight leading-none">{order.poNumber}</p>
                          <p className="text-[11px] text-muted-foreground font-medium line-clamp-1">
                            {order.status === 'PENDING' ? `New order request from ${order.user.name}` : `Order status changed to ${order.status}`}
                          </p>
                          <p className="text-[10px] text-muted-foreground/60 font-bold uppercase tracking-tighter pt-1">
                            {new Date(order.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                          </p>
                        </div>
                      </div>
                    </DropdownMenuItem>
                  </Link>
                ))
              ) : (
                <div className="p-10 text-center space-y-2">
                  <Bell className="h-8 w-8 text-muted-foreground/20 mx-auto" />
                  <p className="text-xs font-bold text-muted-foreground uppercase tracking-widest">No notifications yet</p>
                </div>
              )}
            </div>
            <Link href="/dashboard/orders">
              <div className="p-3 bg-muted/20 text-center border-t border-border/50 hover:bg-muted/30 transition-colors">
                <span className="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground">View All Orders</span>
              </div>
            </Link>
          </DropdownMenuContent>
        </DropdownMenu>
        
        {/* User Profile Dropdown */}
        <div className="border-l pl-4 dark:border-gray-700 flex items-center">
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center outline-none hover:bg-gray-50 dark:hover:bg-gray-800 p-1 pr-2 rounded-full transition-colors cursor-pointer group">
                <div className="hidden md:block mr-3 text-right">
                  <p className="text-sm font-semibold leading-tight group-hover:text-primary transition-colors">{session?.user?.name}</p>
                  <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest opacity-60">{role?.replace(/_/g, ' ')}</p>
                </div>
                <div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold shadow-sm border border-primary/20 overflow-hidden relative">
                  {userImage ? (
                    <Image src={userImage} alt="Avatar" fill className="object-cover" />
                  ) : (
                    session?.user?.name?.charAt(0).toUpperCase() || 'U'
                  )}
                </div>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56 p-1">
              <DropdownMenuLabel className="px-2 py-2">
                <p className="text-xs font-black uppercase tracking-widest text-muted-foreground opacity-60">Account</p>
              </DropdownMenuLabel>
              <DropdownMenuGroup>
                <Link href="/dashboard/settings">
                  <DropdownMenuItem className="cursor-pointer py-2.5">
                    <User className="mr-2 h-4 w-4 text-muted-foreground" />
                    <span className="font-bold">Profile & Settings</span>
                  </DropdownMenuItem>
                </Link>
              </DropdownMenuGroup>
              <DropdownMenuSeparator />
              <form action={async () => {
                'use server'
                await signOut({ redirectTo: '/login' })
              }}>
                <button type="submit" className="w-full">
                  <DropdownMenuItem className="text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950/30 cursor-pointer py-2.5">
                    <LogOut className="mr-2 h-4 w-4" />
                    <span className="font-bold">Log out</span>
                  </DropdownMenuItem>
                </button>
              </form>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
    </>
  )
}