leocrm/frontend/src/components/layout/AISidebar.tsx

import React, { useState, useEffect } from 'react';
import { ChatWindow } from '@/components/ai/ChatWindow';
import { ResizablePanel } from '@/components/ui/ResizablePanel';
import { SuggestionList } from '@/components/ai/SuggestionSidebar';
import { createSession, fetchSessions } from '@/api/ai';
import { useUIStore } from '@/store/uiStore';
import { useTranslation } from 'react-i18next';
import { useUsers, useGroups } from '@/api/hooks';
import { Avatar } from '@/components/ui/Avatar';
import { Bell, Bot, ChevronLeft, ChevronRight, Lightbulb, MessageSquare, Users, X } from 'lucide-react';

const robotIcon = (className: string) => (
  <Bot className={className} aria-hidden="true" strokeWidth={2} />
);

const bellIcon = (className: string) => (
  <Bell className={className} aria-hidden="true" strokeWidth={2} />
);

const bulbIcon = (className: string) => (
  <Lightbulb className={className} aria-hidden="true" strokeWidth={2} />
);

const teamIcon = (className: string) => (
  <Users className={className} aria-hidden="true" strokeWidth={2} />
);

const chatBubbleIcon = (className: string) => (
  <MessageSquare className={className} aria-hidden="true" strokeWidth={2} />
);

const chevronRightIcon = (
  <ChevronRight className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
);

interface TabDef {
  key: 'proactive' | 'chat' | 'notifications' | 'team' | 'chatroom';
  label: string;
  icon: (cls: string) => React.ReactNode;
  testId: string;
}

function TeamPanel() {
  const { data: usersData, isLoading: usersLoading } = useUsers();
  const { data: groupsData, isLoading: groupsLoading } = useGroups();
  const users: any[] = usersData?.items || [];
  const groups: any[] = groupsData?.items || [];

  return (
    <div className="flex flex-col h-full overflow-y-auto p-3 gap-3" data-testid="team-panel">
      <div>
        <h3 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide mb-2">Mitarbeiter</h3>
        {usersLoading ? (
          <p className="text-sm text-secondary-400">Laden...</p>
        ) : users.length === 0 ? (
          <p className="text-sm text-secondary-400">Keine Mitarbeiter</p>
        ) : (
          <div className="space-y-1">
            {users.map((u) => (
              <div key={u.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-secondary-50 transition-colors">
                <div className="relative flex-shrink-0">
                  <Avatar name={u.name} size="sm" />
                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-white bg-secondary-300" aria-label="offline" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-secondary-700 truncate">{u.name}</p>
                  <p className="text-xs text-secondary-400 truncate">{u.email}</p>
                </div>
                <span className="text-xs text-secondary-400">{u.role}</span>
              </div>
            ))}
          </div>
        )}
      </div>
      <div>
        <h3 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide mb-2">Gruppen</h3>
        {groupsLoading ? (
          <p className="text-sm text-secondary-400">Laden...</p>
        ) : groups.length === 0 ? (
          <p className="text-sm text-secondary-400">Keine Gruppen</p>
        ) : (
          <div className="space-y-1">
            {groups.map((g) => (
              <div key={g.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-secondary-50 transition-colors">
                <div className="w-8 h-8 rounded-full bg-secondary-200 flex items-center justify-center flex-shrink-0">
                  <Users className="w-4 h-4 text-secondary-500" aria-hidden="true" strokeWidth={2} />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-secondary-700 truncate">{g.name}</p>
                  {g.description && <p className="text-xs text-secondary-400 truncate">{g.description}</p>}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function ChatPanel() {
  return (
    <div className="flex flex-col h-full" data-testid="chat-panel">
      <div className="flex-1 overflow-y-auto p-3">
        <p className="text-sm text-secondary-400 text-center py-8">Chat-Sidebar - Coming Soon</p>
      </div>
    </div>
  );
}

export function AISidebar() {
  const { t } = useTranslation();
  const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab, notifications, removeNotification } = useUIStore();
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        const sessions = await fetchSessions(true);
        if (sessions.length > 0) {
          setSessionId(sessions[0].id);
        } else {
          const session = await createSession({ is_sidebar: true, title: 'Sidebar Chat' });
          setSessionId(session.id);
        }
      } catch (e) {
        console.error('AISidebar init error:', e);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const tabs: TabDef[] = [
    { key: 'chat', label: 'KI Chat', icon: robotIcon, testId: 'ai-sidebar-tab-chat' },
    { key: 'proactive', label: 'Live KI', icon: bulbIcon, testId: 'ai-sidebar-tab-proactive' },
    { key: 'notifications', label: t('topbar.notifications'), icon: bellIcon, testId: 'ai-sidebar-tab-notifications' },
    { key: 'team', label: 'Team', icon: teamIcon, testId: 'ai-sidebar-tab-team' },
    { key: 'chatroom', label: 'Chat', icon: chatBubbleIcon, testId: 'ai-sidebar-tab-chatroom' },
  ];

  const activeTab = tabs.find((tab) => tab.key === aiSidebarTab) || tabs[0];

  // Collapsed: narrow icon strip (desktop only, hidden on mobile)
  if (aiSidebarCollapsed) {
    return (
      <div
        className="hidden md:flex flex-shrink-0 w-12 flex-col items-center border-l border-secondary-200 bg-white py-3 gap-2"
        data-testid="ai-sidebar-collapsed"
      >
        {tabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => { setAISidebarTab(tab.key); toggleAISidebar(); }}
            className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 relative"
            aria-label={tab.label}
            title={tab.label}
            data-testid={tab.testId}
          >
            {tab.icon('w-5 h-5 text-secondary-600')}
            {tab.key === 'notifications' && notifications.length > 0 && (
              <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
                {notifications.length}
              </span>
            )}
          </button>
        ))}
      </div>
    );
  }

  const renderTabContent = () => {
    if (aiSidebarTab === 'proactive') {
      return <SuggestionList />;
    }
    if (aiSidebarTab === 'notifications') {
      return (
        <div className="flex flex-col h-full overflow-y-auto p-3 gap-2" data-testid="notification-list">
          {notifications.length === 0 && (
            <p className="text-sm text-secondary-400 text-center py-4">Keine Benachrichtigungen</p>
          )}
          {notifications.map((msg, i) => (
            <div key={i} className="flex items-start justify-between gap-2 px-3 py-2 rounded-lg border border-secondary-200 bg-secondary-50 hover:border-secondary-300 hover:bg-secondary-100 transition-colors text-sm text-secondary-700 group">
              <span className="flex-1 leading-snug">{msg}</span>
              <button
                className="p-1 rounded text-secondary-300 hover:text-danger-600 hover:bg-danger-50 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5"
                aria-label="Benachrichtigung löschen"
                onClick={() => removeNotification(i)}
              >
                <X className="w-3.5 h-3.5" aria-hidden="true" strokeWidth={2} />
              </button>
            </div>
          ))}
        </div>
      );
    }
    if (aiSidebarTab === 'team') {
      return <TeamPanel />;
    }
    if (aiSidebarTab === 'chatroom') {
      return <ChatPanel />;
    }
    // chat tab
    if (loading) {
      return (
        <div className="flex items-center justify-center h-full text-sm text-secondary-400">Laden...</div>
      );
    }
    if (sessionId) {
      return <ChatWindow sessionId={sessionId} compact className="h-full" />;
    }
    return (
      <div className="flex items-center justify-center h-full text-sm text-red-500">
        Session konnte nicht erstellt werden
      </div>
    );
  };

  const iconStrip = (
    <div className="flex items-center gap-1 px-2 h-[58px] border-b border-secondary-200" role="tablist">
      {tabs.map((tab) => (
        <button
          key={tab.key}
          onClick={() => setAISidebarTab(tab.key)}
          className={`p-2 rounded-md min-h-touch min-w-touch flex items-center justify-center transition-colors relative ${
            aiSidebarTab === tab.key
              ? 'bg-primary-100 text-primary-600'
              : 'text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700'
          }`}
          role="tab"
          aria-selected={aiSidebarTab === tab.key}
          aria-label={tab.label}
          data-testid={tab.testId}
        >
          {tab.icon('w-5 h-5')}
          {tab.key === 'notifications' && notifications.length > 0 && (
            <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
              {notifications.length}
            </span>
          )}
        </button>
      ))}
      <div className="flex-1" />
      <button
        onClick={toggleAISidebar}
        className="p-1.5 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center"
        title="Einklappen"
        aria-label="KI Assistent einklappen"
      >
        {chevronRightIcon}
      </button>
    </div>
  );

  // Expanded: Mobile = full width overlay, Desktop = resizable panel
  return (
    <>
      {/* Mobile: full width overlay with back button */}
      <div
        className="md:hidden fixed inset-0 z-50 bg-white flex flex-col"
        data-testid="ai-sidebar-mobile"
      >
        <div className="h-14 flex items-center gap-2 px-3 border-b border-secondary-200">
          <button
            onClick={toggleAISidebar}
            className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
            aria-label="Zurück"
            data-testid="ai-sidebar-back"
          >
            <ChevronLeft className="w-5 h-5" aria-hidden="true" strokeWidth={2} />
            <span className="text-sm font-medium">Zurück</span>
          </button>
        </div>
        {iconStrip}
        <div className="px-3 py-2 border-b border-secondary-200">
          <span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
        </div>
        <div className="flex-1 overflow-hidden">
          {renderTabContent()}
        </div>
      </div>

      {/* Desktop: resizable panel */}
      <ResizablePanel
        initialWidth={320}
        minWidth={240}
        maxWidth={600}
        handleSide="left"
        className="hidden md:flex border-l border-secondary-200 bg-white"
        data-testid="ai-sidebar-pane"
      >
        <div className="h-full flex flex-col">
          {iconStrip}
          <div className="px-3 py-2 border-b border-secondary-200">
            <span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
          </div>
          <div className="flex-1 overflow-hidden">
            {renderTabContent()}
          </div>
        </div>
      </ResizablePanel>
    </>
  );
}