'use client'

import { Menu, Search, Bell, ChevronRight } from 'lucide-react'
import { useAos, type ViewId } from '@/store/aos'
import { ThemeToggle } from '@/components/theme-toggle'
import { LocaleSwitcher } from './locale-switcher'
import { NotificationsBell } from './notifications-bell'
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' },
  calendar: { title: 'Fristen', crumb: 'Übersicht / Fristen' },
  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' },
  timesheet: { title: 'Zeiterfassung', crumb: 'Lieferung / Zeiterfassung' },
  support: { title: 'Support', crumb: 'Lieferung / Tickets' },
  licenses: { title: 'Lizenzen', crumb: 'Betrieb / Lizenzen' },
  agency: { title: 'Reseller', crumb: 'Betrieb / Reseller' },
  reseller_portal: { title: 'Reseller-Portal', crumb: 'Betrieb / Reseller-Portal' },
  instances: { title: 'Instanzen', crumb: 'Betrieb / Instanzen' },
  contracts: { title: 'Verträge', crumb: 'Betrieb / Verträge' },
  expenses: { title: 'Ausgaben', crumb: 'Betrieb / Ausgaben' },
  finance: { title: 'Finanzen', crumb: 'Betrieb / Finanzen' },
  recurring: { title: 'Wiederkehrende Rechnungen', crumb: 'Betrieb / Wiederkehrend' },
  accounting: { title: 'Buchhaltung', crumb: 'Betrieb / Buchhaltung' },
  finanzamt: { title: 'Finanzamt', crumb: 'Betrieb / Finanzamt' },
  audit: { title: 'Audit-Protokoll', crumb: 'Betrieb / Audit' },
  data: { title: 'Datenverwaltung', crumb: 'Betrieb / Daten' },
  kb: { title: 'Wissensdatenbank', crumb: 'Wissen / KB' },
  api: { title: 'API & Webhooks', crumb: 'System / API' },
  settings: { title: 'Erweiterungen', crumb: 'System / Module' },
  settings_global: { title: 'Einstellungen', crumb: 'System / Einstellungen' },
  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 />
        <LocaleSwitcher />

        <NotificationsBell />

        <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"
              onSelect={async (e) => {
                e.preventDefault()
                await fetch('/api/auth/logout', { method: 'POST' })
                window.location.href = '/login'
              }}
            >
              Abmelden
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}