import React, { useState, useRef, useEffect } from 'react';
import clsx from 'clsx';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '@/store/authStore';
import { useUIStore } from '@/store/uiStore';
import { useLogout } from '@/api/hooks';
import { Avatar } from '@/components/ui/Avatar';
import { SearchDropdown } from '@/components/shared/SearchDropdown';
import { SuggestionBadge } from '@/components/ai/SuggestionBadge';
import { Building, ChevronDown, Menu, Zap, Bot, Layers, Code, Plus } from 'lucide-react';
import { NotificationBell } from '@/components/layout/NotificationBell';
import { useWindowStore } from '@/store/windowStore';
import { usePermission } from '@/hooks/usePermission';

export function TopBar() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { user, currentTenant } = useAuthStore();
  const tenants = user?.tenants || [];
  const { toggleSidebar, toggleMessageSidebar } = useUIStore();
  const logoutMutation = useLogout();
  const minimizedWindows = useWindowStore((s) => s.windows.filter((w) => w.state === 'minimized'));
  const { hasPermission } = usePermission();
  const canAccess = (perm: string): boolean => {
    if (user?.is_system_admin) return true;
    const perms = user?.permissions || [];
    if (perms.length === 0) return true;
    return hasPermission(perm);
  };
  const restoreWindow = useWindowStore((s) => s.restoreWindow);

  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const userRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (userRef.current && !userRef.current.contains(e.target as Node)) setUserMenuOpen(false);
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleLogout = async () => {
    try {
      await logoutMutation.mutateAsync();
    } catch {
      // ignore
    }
    navigate('/login');
  };

  const fullName = user ? `${user.first_name} ${user.last_name}` : '';

  return (
    <header
      className="h-[58px] bg-white border-b border-secondary-200 flex items-center justify-between px-4 sticky top-0 z-20"
      role="banner"
      data-testid="topbar"
    >
      <div className="flex items-center gap-3">
        <button
          onClick={toggleSidebar}
          className="p-2 rounded-md bg-secondary-900 text-secondary-300 hover:bg-secondary-800 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
          aria-label="Seitenleiste ein-/ausklappen"
          aria-expanded={true}
        >
          <Menu className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
        </button>

        {/* Tenant switcher */}
        {tenants && tenants.length > 0 && (
          <div className="relative">
            <button
              className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-secondary-100 min-h-touch text-sm font-medium text-secondary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
              aria-label={t('topbar.switchTenant')}
            >
              <Building className="w-4 h-4 text-secondary-500" aria-hidden="true" strokeWidth={2} />
              {currentTenant?.name || tenants[0]?.name || ''}
              <ChevronDown className="w-3 h-3 text-secondary-400" aria-hidden="true" strokeWidth={2} />
            </button>
          </div>
        )}

        {/* Search */}
        <div className="hidden md:block">
          <SearchDropdown placeholder={t('topbar.search')} />
        </div>
      </div>

      <div className="flex items-center gap-2">
        <NotificationBell />
        {/* Quick Create */}
        {canAccess('contacts:write') && (
          <button
            onClick={() => navigate('/contacts/new')}
            className="flex items-center gap-1.5 bg-primary-600 text-white px-3 py-1.5 rounded-md text-sm font-medium hover:bg-primary-700 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
            aria-label={t('topbar.quickCreate')}
            title={t('topbar.quickCreate', 'Neuer Kontakt')}
          >
            <Plus className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
            <span className="hidden md:inline">{t('topbar.quickCreate', 'Neu')}</span>
          </button>
        )}
        {/* Minimized windows */}
        {minimizedWindows.length > 0 && (
          <div className="flex items-center gap-1.5">
            {minimizedWindows.map((win) => (
              <button
                key={win.id}
                onClick={() => restoreWindow(win.id)}
                className="flex items-center gap-1.5 bg-secondary-100 text-secondary-700 px-3 py-1 rounded-md text-sm hover:bg-secondary-200"
                title={win.title}
              >
                <Layers className="w-3.5 h-3.5" />
                <span className="max-w-32 truncate">{win.title}</span>
              </button>
            ))}
          </div>
        )}
        {/* User menu */}
        <div ref={userRef} className="relative">
          <button
            onClick={() => setUserMenuOpen(!userMenuOpen)}
            className="flex items-center gap-2 p-1 rounded-md hover:bg-secondary-100 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
            aria-label={t('topbar.userMenu')}
            aria-expanded={userMenuOpen}
            aria-haspopup="menu"
          >
            <Avatar name={fullName || 'User'} src={user?.avatar_url} size="sm" />
            <span className="hidden md:block text-sm font-medium text-secondary-700 max-w-24 truncate">
              {user?.first_name || ''}
            </span>
            <ChevronDown className="w-4 h-4 text-secondary-400" aria-hidden="true" strokeWidth={2} />
          </button>
          {userMenuOpen && (
            <div
              className="absolute top-full right-0 mt-1 w-56 bg-white rounded-md shadow-lg border border-secondary-200 py-1 z-50"
              role="menu"
              aria-label={t('topbar.userMenu')}
            >
              <div className="px-3 py-2 border-b border-secondary-100">
                <p className="text-sm font-medium text-secondary-900 truncate">{fullName}</p>
                <p className="text-xs text-secondary-500 truncate">{user?.email}</p>
              </div>
              <button
                onClick={() => { setUserMenuOpen(false); navigate('/profile'); }}
                className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                role="menuitem"
              >
                {t('topbar.profile')}
              </button>
              {canAccess('settings:read') && (
                <button
                  onClick={() => { setUserMenuOpen(false); navigate('/settings'); }}
                  className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                  role="menuitem"
                >
                  {t('topbar.settings')}
                </button>
              )}
              <button
                onClick={() => { setUserMenuOpen(false); navigate('/automation'); }}
                className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 flex items-center gap-2"
                role="menuitem"
              >
                <Zap className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
                {t('nav.automation', 'Automation')}
              </button>
              <button
                onClick={() => { setUserMenuOpen(false); navigate('/agents'); }}
                className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 flex items-center gap-2"
                role="menuitem"
              >
                <Bot className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
                {t('nav.agents', 'Agenten')}
              </button>
              {canAccess('audit:read') && (
                <button
                  onClick={() => { setUserMenuOpen(false); navigate('/audit-log'); }}
                  className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
                  role="menuitem"
                >
                  {t('nav.auditLog')}
                </button>
              )}
              <a
                href="/docs"
                target="_blank"
                rel="noopener noreferrer"
                onClick={() => setUserMenuOpen(false)}
                className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 flex items-center gap-2"
                role="menuitem"
              >
                <Code className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
                {t('settings.apiDocs', 'API Dokumentation')}
              </a>
              <button
                onClick={handleLogout}
                className="w-full text-left px-3 py-2 text-sm text-danger-600 hover:bg-danger-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-danger-500"
                role="menuitem"
              >
                {t('topbar.logout')}
              </button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}