"use client"

import { useState } from "react"
import Link from "next/link"
import { Search, Bell, ChevronDown, Settings, LogOut, User, Rocket, Heart, Users, Lightbulb, Clock, CheckCheck, HelpCircle, BarChart3 } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { cn } from "@/lib/utils"

const notifications = [
  {
    id: 1,
    type: "like",
    user: "Rahul Sharma",
    avatar: "RS",
    message: "liked your idea",
    idea: "AI-powered grocery delivery",
    time: "2 min ago",
    read: false,
  },
  {
    id: 2,
    type: "collaboration",
    user: "TechVentures Inc.",
    avatar: "TV",
    message: "wants to collaborate on",
    idea: "Smart farming solution",
    time: "15 min ago",
    read: false,
  },
  {
    id: 3,
    type: "follow",
    user: "Priya Patel",
    avatar: "PP",
    message: "started following you",
    idea: null,
    time: "1 hour ago",
    read: false,
  },
  {
    id: 4,
    type: "idea",
    user: "System",
    avatar: "CI",
    message: "Your idea is trending!",
    idea: "Sustainable packaging startup",
    time: "3 hours ago",
    read: true,
  },
]

const notificationIcons: Record<string, typeof Heart> = {
  like: Heart,
  collaboration: Users,
  follow: User,
  idea: Lightbulb,
}

const notificationColors: Record<string, string> = {
  like: "text-red-400 bg-red-400/10",
  collaboration: "text-primary bg-primary/10",
  follow: "text-violet-400 bg-violet-400/10",
  idea: "text-emerald-400 bg-emerald-400/10",
}

export function Header() {
  const [searchFocused, setSearchFocused] = useState(false)
  const [notificationsOpen, setNotificationsOpen] = useState(false)
  
  const unreadCount = notifications.filter(n => !n.read).length

  return (
    <header className="sticky top-0 z-30 flex h-20 items-center justify-between border-b border-border/50 glass px-4 lg:px-6">
      {/* Spacer for mobile menu button */}
      <div className="w-14 lg:hidden" />
      
      {/* Search Bar */}
      <div className="flex-1 max-w-xl">
        <div
          className={`relative flex items-center rounded-2xl transition-all duration-300 ${
            searchFocused
              ? "bg-secondary ring-2 ring-primary/50"
              : "bg-secondary/50 hover:bg-secondary"
          }`}
        >
          <Search className="ml-4 h-5 w-5 text-muted-foreground" />
          <input
            type="text"
            placeholder="Search ideas, people, or topics..."
            className="w-full bg-transparent px-4 py-3 text-sm text-foreground placeholder-muted-foreground focus:outline-none"
            onFocus={() => setSearchFocused(true)}
            onBlur={() => setSearchFocused(false)}
          />
          <kbd className="mr-3 hidden rounded-lg bg-muted/50 px-2 py-1 text-xs text-muted-foreground sm:inline-block">
            Ctrl+K
          </kbd>
        </div>
      </div>

      {/* Right Section */}
      <div className="flex items-center gap-4 ml-6">
        {/* Notifications */}
        <Popover open={notificationsOpen} onOpenChange={setNotificationsOpen}>
          <PopoverTrigger asChild>
            <button className="relative flex h-11 w-11 items-center justify-center rounded-xl bg-secondary/50 text-muted-foreground hover:bg-secondary hover:text-foreground transition-all">
              <Bell className="h-5 w-5" />
              {unreadCount > 0 && (
                <span className="absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-accent text-[10px] font-bold text-accent-foreground">
                  {unreadCount}
                </span>
              )}
            </button>
          </PopoverTrigger>
          <PopoverContent align="end" className="w-96 p-0 glass glass-border">
            {/* Header */}
            <div className="flex items-center justify-between border-b border-border/50 px-4 py-3">
              <h3 className="font-semibold text-foreground">Notifications</h3>
              <button className="flex items-center gap-1.5 text-xs text-primary hover:underline">
                <CheckCheck className="h-3.5 w-3.5" />
                Mark all read
              </button>
            </div>
            
            {/* Notification List */}
            <div className="max-h-[400px] overflow-y-auto">
              {notifications.map((notification) => {
                const Icon = notificationIcons[notification.type]
                const colorClass = notificationColors[notification.type]
                
                return (
                  <div
                    key={notification.id}
                    className={cn(
                      "flex gap-3 px-4 py-3 hover:bg-secondary/30 cursor-pointer transition-colors border-b border-border/30 last:border-0",
                      !notification.read && "bg-primary/5"
                    )}
                  >
                    {/* User Avatar */}
                    <div className="relative">
                      <Avatar className="h-10 w-10">
                        <AvatarFallback className="bg-secondary text-foreground text-sm font-medium">
                          {notification.avatar}
                        </AvatarFallback>
                      </Avatar>
                      {/* Notification Type Icon */}
                      <div className={cn("absolute -bottom-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full", colorClass)}>
                        <Icon className="h-3 w-3" />
                      </div>
                    </div>
                    
                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <p className="text-sm text-foreground">
                        <span className="font-semibold">{notification.user}</span>{" "}
                        <span className="text-muted-foreground">{notification.message}</span>
                        {notification.idea && (
                          <span className="font-medium text-primary"> {notification.idea}</span>
                        )}
                      </p>
                      <div className="flex items-center gap-1.5 mt-1">
                        <Clock className="h-3 w-3 text-muted-foreground" />
                        <span className="text-xs text-muted-foreground">{notification.time}</span>
                      </div>
                    </div>
                    
                    {/* Unread Indicator */}
                    {!notification.read && (
                      <div className="flex items-center">
                        <div className="h-2 w-2 rounded-full bg-primary" />
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
            
            {/* Footer */}
            <div className="border-t border-border/50 p-3">
              <Link
                href="/notifications"
                className="flex items-center justify-center gap-2 w-full rounded-xl bg-secondary/50 py-2.5 text-sm font-medium text-foreground hover:bg-secondary transition-colors"
                onClick={() => setNotificationsOpen(false)}
              >
                View All Notifications
              </Link>
            </div>
          </PopoverContent>
        </Popover>

        {/* User Profile */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="flex items-center gap-3 rounded-2xl bg-secondary/30 py-2 pl-2 pr-4 hover:bg-secondary/50 transition-all">
              <div className="relative">
                <Avatar className="relative h-10 w-10 ring-2 ring-primary/30">
                  <AvatarImage src="/placeholder-avatar.jpg" alt="User" />
                  <AvatarFallback className="bg-primary text-primary-foreground font-bold">
                    KG
                  </AvatarFallback>
                </Avatar>
              </div>
              <div className="hidden text-left sm:block">
                <p className="text-sm font-semibold text-foreground">Khushoo Gupta</p>
                <p className="text-xs text-muted-foreground">@khushoo</p>
              </div>
              <ChevronDown className="h-4 w-4 text-muted-foreground" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56 glass glass-border">
            <DropdownMenuItem asChild className="gap-3 cursor-pointer">
              <Link href="/profile/individual">
                <User className="h-4 w-4" />
                <span>View Profile</span>
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild className="gap-3 cursor-pointer">
              <Link href="/settings/profile">
                <Settings className="h-4 w-4" />
                <span>Settings</span>
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild className="gap-3 cursor-pointer">
              <Link href="/analytics">
                <BarChart3 className="h-4 w-4" />
                <span>Insights & Analytics</span>
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild className="gap-3 cursor-pointer">
              <Link href="/get-started">
                <Rocket className="h-4 w-4" />
                <span>Get Started Guide</span>
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild className="gap-3 cursor-pointer">
              <Link href="/help">
                <HelpCircle className="h-4 w-4" />
                <span>Help & Support</span>
              </Link>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-3 text-destructive cursor-pointer">
              <LogOut className="h-4 w-4" />
              <span>Log out</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}