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';

const robotIcon = (className: string) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2a4 4 0 014 4v1h1a3 3 0 013 3v6a3 3 0 01-3 3h-1v1a4 4 0 01-4 4H8a4 4 0 01-4-4v-1H3a3 3 0 01-3-3V10a3 3 0 013-3h1V6a4 4 0 014-4z M9 10h.01M15 10h.01M9 15h6" />
  </svg>
);

const bellIcon = (className: string) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
  </svg>
);

const chevronRightIcon = (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
);

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);
      }
    })();
  }, []);

  // 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"
      >
        <button
          onClick={() => { setAISidebarTab('chat'); 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"
          aria-label="KI Assistent öffnen"
          title="KI Assistent"
        >
          {robotIcon('w-5 h-5 text-secondary-600')}
        </button>
        <button
          onClick={() => { setAISidebarTab('notifications'); 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={t('topbar.notifications')}
          title={t('topbar.notifications')}
        >
          {bellIcon('w-5 h-5 text-secondary-600')}
          {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" data-testid="notification-list">
          <ul className="flex-1 overflow-y-auto py-1" role="list">
            {notifications.length === 0 && (
              <li className="px-4 py-3 text-sm text-secondary-400">Keine Benachrichtigungen</li>
            )}
            {notifications.map((msg, i) => (
              <li key={i} className="flex items-center justify-between px-4 py-2 hover:bg-secondary-50 cursor-pointer text-sm text-secondary-700 group">
                <span className="flex-1 truncate">{msg}</span>
                <button
                  className="ml-2 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"
                  aria-label="Benachrichtigung löschen"
                  onClick={() => removeNotification(i)}
                >
                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </li>
            ))}
          </ul>
        </div>
      );
    }
    // 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 tabBar = (
    <div className="flex border-b border-secondary-200" role="tablist">
      <button
        onClick={() => setAISidebarTab('proactive')}
        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
          aiSidebarTab === 'proactive'
            ? 'text-primary-600 border-primary-500'
            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
        }`}
        role="tab"
        aria-selected={aiSidebarTab === 'proactive'}
        aria-label="Proaktiv"
        data-testid="ai-sidebar-tab-proactive"
      >
        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
        </svg>
        Proaktiv
      </button>
      <button
        onClick={() => setAISidebarTab('chat')}
        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
          aiSidebarTab === 'chat'
            ? 'text-primary-600 border-primary-500'
            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
        }`}
        role="tab"
        aria-selected={aiSidebarTab === 'chat'}
        aria-label="KI Chat"
        data-testid="ai-sidebar-tab-chat"
      >
        {robotIcon('w-4 h-4')}
        KI Chat
      </button>
      <button
        onClick={() => setAISidebarTab('notifications')}
        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
          aiSidebarTab === 'notifications'
            ? 'text-primary-600 border-primary-500'
            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
        }`}
        role="tab"
        aria-selected={aiSidebarTab === 'notifications'}
        aria-label={t('topbar.notifications')}
        data-testid="ai-sidebar-tab-notifications"
      >
        {bellIcon('w-4 h-4')}
        <span className="truncate">{t('topbar.notifications')}</span>
        {notifications.length > 0 && (
          <span className="ml-1 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center flex-shrink-0">
            {notifications.length}
          </span>
        )}
      </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"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            <span className="text-sm font-medium">Zurück</span>
          </button>
          <span className="text-sm font-medium text-secondary-700 ml-2">KI Assistent</span>
        </div>
        {tabBar}
        <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">
          <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
            <span className="text-sm font-medium text-secondary-700">
              {aiSidebarTab === 'notifications' ? t('topbar.notifications') : 'KI Assistent'}
            </span>
            <button
              onClick={toggleAISidebar}
              className="p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
              title="Einklappen"
              aria-label="KI Assistent einklappen"
            >
              {chevronRightIcon}
            </button>
          </div>
          {tabBar}
          <div className="flex-1 overflow-hidden">
            {renderTabContent()}
          </div>
        </div>
      </ResizablePanel>
    </>
  );
}