'use client'

import { useState, useEffect } from 'react'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { Menu, Search, StickyNote, Tag, Moon, Sun, X, Bell, Trash2, Archive } from 'lucide-react'
import Link from 'next/link'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { cn } from '@/lib/utils'
import { useLabels } from '@/context/LabelContext'
import { LabelManagementDialog } from './label-management-dialog'
import { LabelFilter } from './label-filter'

interface HeaderProps {
  selectedLabels?: string[]
  selectedColor?: string | null
  onLabelFilterChange?: (labels: string[]) => void
  onColorFilterChange?: (color: string | null) => void
}

export function Header({
  selectedLabels = [],
  selectedColor = null,
  onLabelFilterChange,
  onColorFilterChange
}: HeaderProps = {}) {
  const [searchQuery, setSearchQuery] = useState('')
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
  const pathname = usePathname()
  const router = useRouter()
  const searchParams = useSearchParams()
  const { labels } = useLabels()

  const currentLabels = searchParams.get('labels')?.split(',').filter(Boolean) || []
  const currentSearch = searchParams.get('search') || ''
  const currentColor = searchParams.get('color') || ''

  useEffect(() => {
    setSearchQuery(currentSearch)
  }, [currentSearch])

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') || 'light'
    applyTheme(savedTheme)
  }, [])

  const applyTheme = (newTheme: string) => {
    setTheme(newTheme as any)
    localStorage.setItem('theme', newTheme)
    
    // Remove all theme classes first
    document.documentElement.classList.remove('dark')
    document.documentElement.removeAttribute('data-theme')

    if (newTheme === 'dark') {
      document.documentElement.classList.add('dark')
    } else if (newTheme !== 'light') {
      document.documentElement.setAttribute('data-theme', newTheme)
      if (newTheme === 'midnight') {
         document.documentElement.classList.add('dark')
      }
    }
  }

  const handleSearch = (query: string) => {
    setSearchQuery(query)
    const params = new URLSearchParams(searchParams.toString())
    if (query.trim()) {
      params.set('search', query)
    } else {
      params.delete('search')
    }
    router.push(`/?${params.toString()}`)
  }

  const removeLabelFilter = (labelToRemove: string) => {
    const newLabels = currentLabels.filter(l => l !== labelToRemove)
    const params = new URLSearchParams(searchParams.toString())
    if (newLabels.length > 0) {
      params.set('labels', newLabels.join(','))
    } else {
      params.delete('labels')
    }
    router.push(`/?${params.toString()}`)
  }

  const removeColorFilter = () => {
    const params = new URLSearchParams(searchParams.toString())
    params.delete('color')
    router.push(`/?${params.toString()}`)
  }

  const clearAllFilters = () => {
    setSearchQuery('')
    router.push('/')
  }

  const handleFilterChange = (newLabels: string[]) => {
    const params = new URLSearchParams(searchParams.toString())
    if (newLabels.length > 0) {
      params.set('labels', newLabels.join(','))
    } else {
      params.delete('labels')
    }
    router.push(`/?${params.toString()}`)
  }

  const handleColorChange = (newColor: string | null) => {
    const params = new URLSearchParams(searchParams.toString())
    if (newColor) {
      params.set('color', newColor)
    } else {
      params.delete('color')
    }
    router.push(`/?${params.toString()}`)
  }

  const NavItem = ({ href, icon: Icon, label, active }: any) => (
    <Link
      href={href}
      onClick={() => setIsSidebarOpen(false)}
      className={cn(
        "flex items-center gap-3 px-4 py-3 rounded-r-full text-sm font-medium transition-colors mr-2",
        active 
          ? "bg-amber-100 text-amber-900 dark:bg-amber-900/30 dark:text-amber-100" 
          : "hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-700 dark:text-gray-300"
      )}
    >
      <Icon className={cn("h-5 w-5", active && "fill-current")} />
      {label}
    </Link>
  )

  const hasActiveFilters = currentLabels.length > 0 || !!currentSearch || !!currentColor

  return (
    <>
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex flex-col transition-all duration-200">
        <div className="flex h-16 items-center px-4 gap-4 shrink-0">
          
          <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="-ml-2 md:hidden">
                <Menu className="h-6 w-6" />
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-[280px] sm:w-[320px] p-0 pt-4">
              <SheetHeader className="px-4 mb-4">
                <SheetTitle className="flex items-center gap-2 text-xl font-normal text-amber-500">
                  <StickyNote className="h-6 w-6" />
                  Memento
                </SheetTitle>
              </SheetHeader>
              <div className="flex flex-col gap-1 py-2">
                <NavItem 
                  href="/" 
                  icon={StickyNote} 
                  label="Notes" 
                  active={pathname === '/' && !hasActiveFilters} 
                />
                <NavItem 
                  href="/reminders" 
                  icon={Bell} 
                  label="Reminders" 
                  active={pathname === '/reminders'} 
                />
                
                <div className="my-2 px-4 flex items-center justify-between">
                  <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Labels</span>
                  <LabelManagementDialog />
                </div>
                
                {labels.map(label => (
                  <NavItem
                    key={label.id}
                    href={`/?labels=${encodeURIComponent(label.name)}`}
                    icon={Tag}
                    label={label.name}
                    active={currentLabels.includes(label.name)}
                  />
                ))}

                <div className="my-2 border-t border-gray-200 dark:border-zinc-800" />
                
                <NavItem 
                  href="/archive" 
                  icon={Archive} 
                  label="Archive" 
                  active={pathname === '/archive'} 
                />
                <NavItem 
                  href="/trash" 
                  icon={Trash2} 
                  label="Trash" 
                  active={pathname === '/trash'} 
                />
              </div>
            </SheetContent>
          </Sheet>

          <Link href="/" className="flex items-center gap-2 mr-4">
            <StickyNote className="h-7 w-7 text-amber-500" />
            <span className="font-medium text-xl hidden sm:inline-block text-gray-600 dark:text-gray-200">
              Memento
            </span>
          </Link>

          <div className="flex-1 max-w-2xl relative">
            <div className="relative group">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 group-focus-within:text-gray-600 dark:group-focus-within:text-gray-200 transition-colors" />
              <Input
                placeholder="Search"
                className="pl-10 pr-12 h-11 bg-gray-100 dark:bg-zinc-800/50 border-transparent focus:bg-white dark:focus:bg-zinc-900 focus:border-gray-200 dark:focus:border-zinc-700 shadow-none transition-all"
                value={searchQuery}
                onChange={(e) => handleSearch(e.target.value)}
              />
              {searchQuery && (
                <button 
                  onClick={() => handleSearch('')}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
                >
                  <X className="h-4 w-4" />
                </button>
              )}
            </div>
            <div className="absolute right-0 top-0 h-full flex items-center pr-2">
              <LabelFilter
                selectedLabels={currentLabels}
                selectedColor={currentColor || null}
                onFilterChange={handleFilterChange}
                onColorChange={handleColorChange}
              />
            </div>
          </div>

          <div className="flex items-center gap-1 sm:gap-2">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                  {theme === 'light' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => applyTheme('light')}>Light</DropdownMenuItem>
                <DropdownMenuItem onClick={() => applyTheme('dark')}>Dark</DropdownMenuItem>
                <DropdownMenuItem onClick={() => applyTheme('midnight')}>Midnight</DropdownMenuItem>
                <DropdownMenuItem onClick={() => applyTheme('sepia')}>Sepia</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>

        {hasActiveFilters && (
          <div className="px-4 pb-3 flex items-center gap-2 overflow-x-auto border-t border-gray-100 dark:border-zinc-800 pt-2 bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm animate-in slide-in-from-top-2">
            {currentSearch && (
              <Badge variant="secondary" className="flex items-center gap-1 h-7 whitespace-nowrap pl-2 pr-1">
                Search: {currentSearch}
                <button onClick={() => handleSearch('')} className="ml-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full p-0.5">
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
            {currentColor && (
              <Badge variant="secondary" className="flex items-center gap-1 h-7 whitespace-nowrap pl-2 pr-1">
                <div className={cn("w-3 h-3 rounded-full border border-black/10", `bg-${currentColor}-500`)} />
                Color: {currentColor}
                <button onClick={removeColorFilter} className="ml-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full p-0.5">
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
            {currentLabels.map(label => (
              <Badge key={label} variant="secondary" className="flex items-center gap-1 h-7 whitespace-nowrap pl-2 pr-1">
                <Tag className="h-3 w-3" />
                {label}
                <button onClick={() => removeLabelFilter(label)} className="ml-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full p-0.5">
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
            
            <Button 
              variant="ghost" 
              size="sm" 
              onClick={clearAllFilters}
              className="h-7 text-xs text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20 whitespace-nowrap ml-auto"
            >
              Clear all
            </Button>
          </div>
        )}
      </header>
    </>
  )
}