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 { createSession, fetchSessions } from '@/api/ai';
import { useUIStore } from '@/store/uiStore';

export function AISidebar() {
  const { aiSidebarCollapsed, toggleAISidebar } = 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"
        data-testid="ai-sidebar-collapsed"
      >
        <button
          onClick={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"
        >
          <svg className="w-5 h-5 text-secondary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </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>
        <div className="flex-1 overflow-hidden">
          {loading ? (
            <div className="flex items-center justify-center h-full text-sm text-secondary-400">Laden...</div>
          ) : sessionId ? (
            <ChatWindow sessionId={sessionId} compact className="h-full" />
          ) : (
            <div className="flex items-center justify-center h-full text-sm text-red-500">
              Session konnte nicht erstellt werden
            </div>
          )}
        </div>
      </div>

      {/* Desktop: resizable panel */}
      <ResizablePanel
        initialWidth={320}
        minWidth={240}
        maxWidth={600}
        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">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"
            >
              <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>
            </button>
          </div>
          <div className="flex-1 overflow-hidden">
            {loading ? (
              <div className="flex items-center justify-center h-full text-sm text-secondary-400">Laden...</div>
            ) : sessionId ? (
              <ChatWindow sessionId={sessionId} compact className="h-full" />
            ) : (
              <div className="flex items-center justify-center h-full text-sm text-red-500">
                Session konnte nicht erstellt werden
              </div>
            )}
          </div>
        </div>
      </ResizablePanel>
    </>
  );
}