'use client'

import { Menu, Search, Bell, ChevronRight } from 'lucide-react'
import { useAos, type ViewId } from '@/store/aos'
import { ThemeToggle } from '@/components/theme-toggle'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

const TITLES: Record<ViewId, { title: string; crumb: string }> = {
  dashboard: { title: 'Dashboard', crumb: 'Übersicht' },
  reporting: { title: 'Reporting', crumb: 'Übersicht / Reporting' },
  crm: { title: 'CRM', crumb: 'Vertrieb / CRM' },
  leads: { title: 'Leads Finder', crumb: 'Vertrieb / Leads' },
  estimates: { title: 'Angebote', crumb: 'Vertrieb / Angebote' },
  projects: { title: 'Projekte', crumb: 'Lieferung / Projekte' },
  support: { title: 'Support', crumb: 'Lieferung / Tickets' },
  licenses: { title: 'Lizenzen', crumb: 'Betrieb / Lizenzen' },
  contracts: { title: 'Verträge', crumb: 'Betrieb / Verträge' },
  expenses: { title: 'Ausgaben', crumb: 'Betrieb / Ausgaben' },
  finance: { title: 'Finanzen', crumb: 'Betrieb / Finanzen' },
  accounting: { title: 'Buchhaltung', crumb: 'Betrieb / Buchhaltung' },
  audit: { title: 'Audit-Protokoll', crumb: 'Betrieb / Audit' },
  settings: { title: 'Erweiterungen', crumb: 'System / Module' },
  setup: { title: 'Setup-Wizard', crumb: 'System / Setup' },
}

export function TopBar() {
  const { view, setSidebarOpen, setCommandOpen } = useAos()
  const meta = TITLES[view]
  const crumbParts = meta.crumb.split(' / ')

  return (
    <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border bg-background/80 px-4 backdrop-blur-md md:px-6">
      <Button
        variant="ghost"
        size="icon"
        className="md:hidden"
        onClick={() => setSidebarOpen(true)}
        aria-label="Menü öffnen"
      >
        <Menu className="size-5" />
      </Button>

      {/* Breadcrumb */}
      <div className="flex min-w-0 items-center gap-1.5 text-sm">
        <span className="hidden text-muted-foreground sm:inline">{crumbParts[0]}</span>
        {crumbParts.length > 1 && (
          <>
            <ChevronRight className="hidden size-3.5 text-muted-foreground/50 sm:inline" />
            <span className="truncate font-medium">{crumbParts[1]}</span>
          </>
        )}
      </div>

      <div className="ml-auto flex items-center gap-1.5">
        <Button
          variant="ghost"
          size="sm"
          className="hidden gap-2 text-muted-foreground md:flex"
          onClick={() => setCommandOpen(true)}
        >
          <Search className="size-3.5" />
          <span className="text-xs">Suchen</span>
        </Button>

        <ThemeToggle />

        <Button variant="ghost" size="icon" className="relative" aria-label="Benachrichtigungen">
          <Bell className="size-4" />
          <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-foreground" />
        </Button>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="gap-2 px-1.5">
              <Avatar className="size-8">
                <AvatarFallback className="bg-primary text-primary-foreground text-xs">MB</AvatarFallback>
              </Avatar>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuLabel className="flex flex-col">
              <span className="text-sm font-medium">Max Brandt</span>
              <span className="text-xs text-muted-foreground">max@nordlicht.digital</span>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="flex items-center justify-between">
              <span>Rolle</span>
              <Badge variant="outline" className="text-[10px]">Owner</Badge>
            </DropdownMenuItem>
            <DropdownMenuItem>Profil</DropdownMenuItem>
            <DropdownMenuItem>Sitzungen</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-muted-foreground">Abmelden</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}