import { Button, Chip, Tooltip, Dropdown, DropdownTrigger, DropdownPopover, DropdownMenu, DropdownItem } from '@heroui/react';
import { Moon, Sun, ChevronDown, LogOut, Settings } from 'lucide-react';
import { useTheme } from '../../hooks/useTheme';
import { useApp } from '../../context/AppContext';
import { AppAvatar } from '../shared/AppAvatar';

const navLabels: Record<string, string> = {
  overview: 'Übersicht',
  tickets: 'Ticketsystem',
  supportlogin: 'Support Login',
  automod: 'Automod',
  welcome: 'Willkommen',
  dynamicvoice: 'Dynamic Voice',
  birthday: 'Birthday',
  reactionroles: 'Reaction Roles',
  statuspage: 'Statuspage',
  serverstats: 'Server Stats',
  register: 'Registrierung',
  music: 'Musik',
  settings: 'Einstellungen',
  modules: 'Module',
  events: 'Events',
  admin: 'Admin',
};

export function Header() {
  const { dark, toggle } = useTheme();
  const { guildName, statusMessage } = useHeaderData();
  const { user, handleLogout, setSection, section } = useApp();

  return (
    <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex items-center gap-3 min-w-0">
        <div className="flex items-center gap-1.5 text-sm text-muted min-w-0">
          <button className="hover:text-foreground transition-colors" onClick={() => setSection('overview')}>
            Dashboard
          </button>
          {section !== 'overview' && (
            <>
              <span>/</span>
              <span className="text-accent font-semibold truncate">{navLabels[section] || section}</span>
            </>
          )}
        </div>
      </div>

      <div className="flex items-center gap-2 shrink-0">
        {statusMessage && (
          <Chip size="sm" variant="soft" color="accent" className="max-w-[220px]">
            <span className="truncate">{statusMessage}</span>
          </Chip>
        )}

        <Tooltip>
          <Tooltip.Trigger>
            <Button isIconOnly size="sm" variant="ghost" onPress={toggle}>
              {dark ? <Sun size={16} /> : <Moon size={16} />}
            </Button>
          </Tooltip.Trigger>
          <Tooltip.Content placement="bottom">{dark ? 'Helles Design' : 'Dunkles Design'}</Tooltip.Content>
        </Tooltip>

        <Dropdown>
          <DropdownTrigger className="inline-flex h-9 items-center gap-2 rounded-3xl px-3 text-sm font-medium hover:bg-default-hover">
            <AppAvatar name={user?.username} size="sm" className="size-6" />
            <span className="hidden sm:inline text-sm">{user?.username}</span>
            <ChevronDown size={14} />
          </DropdownTrigger>
          <DropdownPopover placement="bottom end">
            <DropdownMenu aria-label="User Menu">
              <DropdownItem key="settings" onAction={() => setSection('settings')}>
                <Settings size={14} /> Einstellungen
              </DropdownItem>
              <DropdownItem key="logout" variant="danger" onAction={handleLogout}>
                <LogOut size={14} /> Abmelden
              </DropdownItem>
            </DropdownMenu>
          </DropdownPopover>
        </Dropdown>
      </div>
    </div>
  );
}

function useHeaderData() {
  const { guildInfo, guilds, currentGuildId, statusMessage } = useApp();
  const selectedGuild = guilds.find((g) => g.id === currentGuildId);
  return {
    guildName: guildInfo?.name || selectedGuild?.name || 'Dashboard',
    statusMessage,
  };
}