/**
 * WorkspaceInput -- Prompt input with @file autocomplete, attachment bar,
 * voice toggle (generic audio capture hook), and data source selection.
 */

import React, { useState, useCallback, useRef, useEffect } from 'react';
import { ProviderMultiSelect } from '../../../components/ProviderSelector';
import type { ProviderSelection } from '../../../components/ProviderSelector';
import { getPageIcon } from '../../../config/pageRegistry';
import { useVoiceStream } from '../../../hooks/useSpeechAudioCapture';
import api from '../../../api';
import type { WorkspaceFile, DataSource, FeatureDataSource } from './useWorkspace';

import { useLanguage } from '../../../providers/language/LanguageContext';
import { useVoiceCatalog } from '../../../contexts/VoiceCatalogContext';

interface PendingFile {
  fileId: string;
  fileName: string;
  itemType?: 'file' | 'folder';
}

interface TreeItemDrop {
  id: string;
  type: 'file' | 'folder';
  name: string;
}

interface WorkspaceInputProps {
  instanceId: string;
  onSend: (prompt: string, fileIds?: string[], dataSourceIds?: string[], featureDataSourceIds?: string[], options?: { requireNeutralization?: boolean }) => void;
  isProcessing: boolean;
  onStop: () => void;
  files: WorkspaceFile[];
  dataSources: DataSource[];
  featureDataSources?: FeatureDataSource[];
  pendingFiles?: PendingFile[];
  onRemovePendingFile?: (fileId: string) => void;
  onFileUploadClick?: () => void;
  uploading?: boolean;
  providerSelection?: ProviderSelection;
  onProviderSelectionChange?: (selection: ProviderSelection) => void;
  isMobile?: boolean;
  onTreeItemsDrop?: (items: TreeItemDrop[]) => void;
  onFeatureSourceDrop?: (params: { featureInstanceId: string; featureCode: string; tableName?: string; objectKey: string; label: string; fieldName?: string }) => void;
  onDataSourceDrop?: (params: { connectionId: string; sourceType: string; path: string; label: string; displayPath?: string }) => void;
  pendingAttachDsId?: string;
  onPendingAttachDsConsumed?: () => void;
  pendingAttachFdsId?: string;
  onPendingAttachFdsConsumed?: () => void;
  onPasteAsFile?: (file: File) => void;
  draftAppend?: string;
  onDraftAppendConsumed?: () => void;
  /**
   * Per-chat attachment persistence. When the parent loads a workflow, it
   * passes the IDs the backend has stored for that chat plus a nonce that
   * increments on every load. The chip-bar is then rehydrated, dropping
   * any IDs that no longer resolve against the available sources.
   *
   * `workflowId` is needed so that "x" detachments can be persisted via a
   * PATCH call without waiting for the next sendMessage round-trip.
   */
  workflowId?: string | null;
  loadedAttachedDataSourceIds?: string[];
  loadedAttachedFeatureDataSourceIds?: string[];
  loadedNonce?: number;
}

export const WorkspaceInput: React.FC<WorkspaceInputProps> = ({ instanceId,
  onSend,
  isProcessing,
  onStop,
  files,
  dataSources,
  featureDataSources = [],
  pendingFiles = [],
  onRemovePendingFile,
  onFileUploadClick,
  uploading = false,
  providerSelection,
  onProviderSelectionChange,
  isMobile = false,
  onTreeItemsDrop,
  onFeatureSourceDrop,
  onDataSourceDrop,
  pendingAttachDsId,
  onPendingAttachDsConsumed,
  pendingAttachFdsId,
  onPendingAttachFdsConsumed,
  onPasteAsFile,
  draftAppend,
  onDraftAppendConsumed,
  workflowId,
  loadedAttachedDataSourceIds,
  loadedAttachedFeatureDataSourceIds,
  loadedNonce,
}) => {
  const { t } = useLanguage();
  const { languages: voiceCatalogLanguages } = useVoiceCatalog();
  const [prompt, setPrompt] = useState('');
  const [showAutocomplete, setShowAutocomplete] = useState(false);
  const [autocompleteFilter, setAutocompleteFilter] = useState('');
  const [treeDropOver, setTreeDropOver] = useState(false);
  const [voiceActive, setVoiceActive] = useState(false);
  const [voiceLanguage, setVoiceLanguage] = useState('de-DE');
  const [showLangPicker, setShowLangPicker] = useState(false);
  const _sttPrefsLoaded = useRef(false);
  const [attachedFileIds, setAttachedFileIds] = useState<string[]>([]);
  const [attachedDataSourceIds, setAttachedDataSourceIds] = useState<string[]>([]);
  const [attachedFeatureDataSourceIds, setAttachedFeatureDataSourceIds] = useState<string[]>([]);
  const [neutralizeActive, setNeutralizeActive] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (draftAppend) {
      setPrompt(prev => prev + (prev ? '\n' : '') + draftAppend);
      onDraftAppendConsumed?.();
    }
  }, [draftAppend, onDraftAppendConsumed]);

  // Persist a changed attachment list to the backend so the next chat
  // reload reflects the current state. Defined early so the
  // pendingAttachDsId / pendingAttachFdsId effects below can also persist
  // immediately after a 💬-click or drag-drop attach.
  const _persistAttachments = useCallback((dsIds: string[], fdsIds: string[]) => {
    if (!instanceId || !workflowId) return;
    api.patch(`/api/workspace/${instanceId}/workflows/${workflowId}/attachments`, {
      dataSourceIds: dsIds,
      featureDataSourceIds: fdsIds,
    }).catch(err => console.warn('Failed to persist chat attachments:', err));
  }, [instanceId, workflowId]);

  // 💬-click or drag-drop attach: parent sets pendingAttachDsId after
  // creating/finding the DataSource. Add to the chip bar AND persist
  // immediately so a chat reload before the user sends a message still
  // shows the chip.
  useEffect(() => {
    if (!pendingAttachDsId) return;
    setAttachedDataSourceIds(prev => {
      if (prev.includes(pendingAttachDsId)) return prev;
      const next = [...prev, pendingAttachDsId];
      _persistAttachments(next, attachedFeatureDataSourceIds);
      return next;
    });
    onPendingAttachDsConsumed?.();
  }, [pendingAttachDsId, onPendingAttachDsConsumed, _persistAttachments, attachedFeatureDataSourceIds]);

  useEffect(() => {
    if (!pendingAttachFdsId) return;
    setAttachedFeatureDataSourceIds(prev => {
      if (prev.includes(pendingAttachFdsId)) return prev;
      const next = [...prev, pendingAttachFdsId];
      _persistAttachments(attachedDataSourceIds, next);
      return next;
    });
    onPendingAttachFdsConsumed?.();
  }, [pendingAttachFdsId, onPendingAttachFdsConsumed, _persistAttachments, attachedDataSourceIds]);

  // Rehydrate the chip-bar whenever the parent re-loads a chat (loadedNonce
  // bumps on every loadWorkflow call). We trust the loaded IDs initially;
  // a separate one-shot reconciliation below drops IDs that don't resolve
  // once the source lists have arrived from the backend.
  useEffect(() => {
    if (loadedNonce === undefined) return;
    setAttachedFileIds([]);
    setAttachedDataSourceIds(Array.isArray(loadedAttachedDataSourceIds) ? [...loadedAttachedDataSourceIds] : []);
    setAttachedFeatureDataSourceIds(Array.isArray(loadedAttachedFeatureDataSourceIds) ? [...loadedAttachedFeatureDataSourceIds] : []);
  }, [loadedNonce]);

  // Drop persisted attachment IDs that no longer resolve to an existing
  // source (e.g. the DataSource was deleted while the chat was closed).
  //
  // CRITICAL: this MUST run only once per chat-load (per `loadedNonce`),
  // and only after the source lists have actually arrived. A continuous
  // filter would race with `_handleDataSourceDrop` /
  // `_handleSendToChat_FeatureSource` in the parent: the drop sets the
  // chip via `pendingAttachDsId` *before* `refreshDataSources()` has
  // returned, so a continuous filter would briefly evict the freshly
  // dropped ID and the chip would visibly flash in and out.
  const _reconciledDsForNonce = useRef<number | undefined>(undefined);
  const _reconciledFdsForNonce = useRef<number | undefined>(undefined);

  useEffect(() => {
    if (loadedNonce === undefined) return;
    if (_reconciledDsForNonce.current === loadedNonce) return;
    if (dataSources.length === 0) return;  // wait for the list to arrive
    _reconciledDsForNonce.current = loadedNonce;
    const validIds = new Set(dataSources.map(d => d.id));
    setAttachedDataSourceIds(prev => {
      const filtered = prev.filter(id => validIds.has(id));
      return filtered.length === prev.length ? prev : filtered;
    });
  }, [loadedNonce, dataSources]);

  useEffect(() => {
    if (loadedNonce === undefined) return;
    if (_reconciledFdsForNonce.current === loadedNonce) return;
    if (featureDataSources.length === 0) return;
    _reconciledFdsForNonce.current = loadedNonce;
    const validIds = new Set(featureDataSources.map(d => d.id));
    setAttachedFeatureDataSourceIds(prev => {
      const filtered = prev.filter(id => validIds.has(id));
      return filtered.length === prev.length ? prev : filtered;
    });
  }, [loadedNonce, featureDataSources]);

  const promptBeforeVoiceRef = useRef('');
  const finalizedTextRef = useRef('');
  const currentInterimRef = useRef('');

  useEffect(() => {
    if (_sttPrefsLoaded.current) return;
    _sttPrefsLoaded.current = true;
    fetch('/api/voice/preferences', { credentials: 'include' })
      .then(r => r.ok ? r.json() : null)
      .then(data => { if (data?.sttLanguage) setVoiceLanguage(data.sttLanguage); })
      .catch(() => {});
  }, []);

  const _extractFileRefs = useCallback(
    (text: string): string[] => {
      const pattern = /@([\w.\-]+)/g;
      const matched: string[] = [];
      let match;
      while ((match = pattern.exec(text)) !== null) {
        const ref = match[1];
        const file = files.find(
          f => f.fileName === ref || f.fileName.toLowerCase() === ref.toLowerCase(),
        );
        if (file && !matched.includes(file.id)) {
          matched.push(file.id);
        }
      }
      return matched;
    },
    [files],
  );

  const _handleSend = useCallback(() => {
    const trimmed = prompt.trim();
    if (!trimmed || isProcessing) return;
    const inlineFileIds = _extractFileRefs(trimmed);
    const allFileIds = [...new Set([...attachedFileIds, ...inlineFileIds])];
    const options = neutralizeActive ? { requireNeutralization: true } : undefined;
    onSend(trimmed, allFileIds, attachedDataSourceIds, attachedFeatureDataSourceIds, options);
    setPrompt('');
    setShowAutocomplete(false);
    setAttachedFileIds([]);
  }, [prompt, isProcessing, _extractFileRefs, attachedFileIds, attachedDataSourceIds, attachedFeatureDataSourceIds, neutralizeActive, onSend]);

  const _handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        _handleSend();
      }
    },
    [_handleSend],
  );

  const _handleChange = useCallback(
    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
      const value = e.target.value;
      setPrompt(value);
      const cursorPos = e.target.selectionStart;
      const textBeforeCursor = value.slice(0, cursorPos);
      const atMatch = textBeforeCursor.match(/@([\w.\-]*)$/);
      if (atMatch) {
        setAutocompleteFilter(atMatch[1].toLowerCase());
        setShowAutocomplete(true);
      } else {
        setShowAutocomplete(false);
      }
    },
    [],
  );

  const _insertFileRef = useCallback(
    (fileName: string) => {
      const textarea = textareaRef.current;
      if (!textarea) return;
      const cursorPos = textarea.selectionStart;
      const textBefore = prompt.slice(0, cursorPos);
      const textAfter = prompt.slice(cursorPos);
      const atStart = textBefore.lastIndexOf('@');
      const newText = textBefore.slice(0, atStart) + `@${fileName} ` + textAfter;
      setPrompt(newText);
      setShowAutocomplete(false);
      textarea.focus();
    },
    [prompt],
  );

  const _removeAttachedFile = useCallback((fileId: string) => {
    setAttachedFileIds(prev => prev.filter(id => id !== fileId));
  }, []);

  const _removeAttachedDataSource = useCallback((dsId: string) => {
    setAttachedDataSourceIds(prev => {
      const next = prev.filter(id => id !== dsId);
      _persistAttachments(next, attachedFeatureDataSourceIds);
      return next;
    });
  }, [_persistAttachments, attachedFeatureDataSourceIds]);

  const _toggleFeatureDataSource = useCallback((fdsId: string) => {
    setAttachedFeatureDataSourceIds(prev => {
      const next = prev.includes(fdsId) ? prev.filter(id => id !== fdsId) : [...prev, fdsId];
      _persistAttachments(attachedDataSourceIds, next);
      return next;
    });
  }, [_persistAttachments, attachedDataSourceIds]);

  const _buildPromptFromRefs = useCallback(() => {
    const parts = [
      promptBeforeVoiceRef.current,
      finalizedTextRef.current,
      currentInterimRef.current,
    ].filter(Boolean);
    return parts.join(' ');
  }, []);

  const voiceStream = useVoiceStream({
    onFinal: (text) => {
      finalizedTextRef.current = finalizedTextRef.current
        ? `${finalizedTextRef.current} ${text}`
        : text;
      currentInterimRef.current = '';
      setPrompt(_buildPromptFromRefs());
    },
    onInterim: (text) => {
      currentInterimRef.current = text;
      setPrompt(_buildPromptFromRefs());
    },
    onError: (error) => {
      console.warn('Workspace voice stream error', error);
    },
  });

  const _stopVoiceCapture = useCallback(() => {
    if (currentInterimRef.current) {
      finalizedTextRef.current = finalizedTextRef.current
        ? `${finalizedTextRef.current} ${currentInterimRef.current}`
        : currentInterimRef.current;
      currentInterimRef.current = '';
    }
    setPrompt(_buildPromptFromRefs());
    voiceStream.stop();
    setVoiceActive(false);
  }, [voiceStream, _buildPromptFromRefs]);

  const _toggleVoice = useCallback(async () => {
    if (voiceActive) {
      _stopVoiceCapture();
      return;
    }

    promptBeforeVoiceRef.current = prompt;
    finalizedTextRef.current = '';
    currentInterimRef.current = '';
    try {
      setVoiceActive(true);
      await voiceStream.start(voiceLanguage);
    } catch {
      setVoiceActive(false);
    }
  }, [voiceActive, prompt, voiceStream, voiceLanguage, _stopVoiceCapture]);

  const filteredFiles = showAutocomplete
    ? files.filter(f => f.fileName.toLowerCase().includes(autocompleteFilter))
    : [];

  const hasAttachments = attachedFileIds.length > 0 || attachedDataSourceIds.length > 0 || attachedFeatureDataSourceIds.length > 0;
  const _horizontalPadding = isMobile ? 12 : 24;
  const _controlSize = isMobile ? 38 : 40;

  const _handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
    if (!onPasteAsFile) return;
    const text = e.clipboardData.getData('text/plain');
    if (text && text.length >= 1000) {
      e.preventDefault();
      const blob = new Blob([text], { type: 'text/plain' });
      const file = new File([blob], `pasted-text-${Date.now()}.txt`, { type: 'text/plain' });
      onPasteAsFile(file);
    }
  }, [onPasteAsFile]);

  const _handlePromptDragOver = useCallback((e: React.DragEvent) => {
    if (
      e.dataTransfer.types.includes('application/tree-items') ||
      e.dataTransfer.types.includes('application/chat-id') ||
      e.dataTransfer.types.includes('application/feature-source') ||
      e.dataTransfer.types.includes('application/datasource')
    ) {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'copy';
      setTreeDropOver(true);
    }
  }, []);

  const _handlePromptDragLeave = useCallback(() => setTreeDropOver(false), []);

  const _handlePromptDrop = useCallback((e: React.DragEvent) => {
    setTreeDropOver(false);

    const chatId = e.dataTransfer.getData('application/chat-id');
    if (chatId) {
      e.preventDefault();
      e.stopPropagation();
      const chatLabel = e.dataTransfer.getData('text/plain');
      const ref = chatLabel ? `[Chat: ${chatLabel}]` : `[Chat: ${chatId.slice(0, 8)}]`;
      setPrompt(prev => (prev ? `${prev} ${ref}` : ref));
      return;
    }

    const featureSourceJson = e.dataTransfer.getData('application/feature-source');
    if (featureSourceJson && onFeatureSourceDrop) {
      e.preventDefault();
      e.stopPropagation();
      const params = JSON.parse(featureSourceJson);
      onFeatureSourceDrop(params);
      return;
    }

    const dataSourceJson = e.dataTransfer.getData('application/datasource');
    if (dataSourceJson && onDataSourceDrop) {
      e.preventDefault();
      e.stopPropagation();
      const params = JSON.parse(dataSourceJson);
      onDataSourceDrop(params);
      return;
    }

    const treeItemsJson = e.dataTransfer.getData('application/tree-items');
    if (treeItemsJson && onTreeItemsDrop) {
      e.preventDefault();
      e.stopPropagation();
      const items: TreeItemDrop[] = JSON.parse(treeItemsJson);
      onTreeItemsDrop(items);
    }
  }, [onTreeItemsDrop, onFeatureSourceDrop, onDataSourceDrop]);

  return (
    <div
      style={{
        borderTop: '1px solid var(--border-color, #e0e0e0)',
        position: 'relative',
        flexShrink: 0,
        outline: treeDropOver ? '2px dashed var(--primary-color, #F25843)' : 'none',
        background: treeDropOver ? 'var(--primary-dark-bg, rgba(242, 88, 67, 0.08))' : undefined,
        transition: 'background 0.15s, outline 0.15s',
      }}
      onDragOver={_handlePromptDragOver}
      onDragLeave={_handlePromptDragLeave}
      onDrop={_handlePromptDrop}
    >
      {/* Pending uploaded files */}
      {pendingFiles.length > 0 && (
        <div style={{
          padding: `6px ${_horizontalPadding}px`,
          display: 'flex',
          gap: 6,
          flexWrap: 'wrap',
          borderBottom: '1px solid var(--border-color, #f0f0f0)',
          background: 'var(--bg-secondary, #fafafa)',
        }}>
          {pendingFiles.map(pf => (
            <span
              key={pf.fileId}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                padding: '3px 8px', borderRadius: 12, fontSize: 11,
                background: pf.itemType === 'folder' ? '#e3f2fd' : '#fff3e0',
                color: pf.itemType === 'folder' ? '#1565c0' : '#e65100',
                fontWeight: 500,
                border: `1px solid ${pf.itemType === 'folder' ? '#bbdefb' : '#ffe0b2'}`,
              }}
            >
              {pf.itemType === 'folder' ? '📁' : '📎'} {pf.fileName.length > 25 ? pf.fileName.slice(0, 25) + '...' : pf.fileName}
              {onRemovePendingFile && (
                <button
                  onClick={() => onRemovePendingFile(pf.fileId)}
                  style={{
                    border: 'none', background: 'none', cursor: 'pointer',
                    fontSize: 12, color: '#e65100', padding: 0, lineHeight: 1,
                  }}
                >
                  ×
                </button>
              )}
            </span>
          ))}
        </div>
      )}

      {/* Attachment bar */}
      {hasAttachments && (
        <div style={{
          padding: `6px ${_horizontalPadding}px`,
          display: 'flex',
          gap: 6,
          flexWrap: 'wrap',
          borderBottom: '1px solid var(--border-color, #f0f0f0)',
          background: '#fafafa',
        }}>
          {attachedFileIds.map(fId => {
            const file = files.find(f => f.id === fId);
            return (
              <span
                key={fId}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  padding: '3px 8px', borderRadius: 12, fontSize: 11,
                  background: '#e3f2fd', color: '#1565c0', fontWeight: 500,
                }}
              >
                📄 {file?.fileName || fId}
                <button
                  onClick={() => _removeAttachedFile(fId)}
                  style={{
                    border: 'none', background: 'none', cursor: 'pointer',
                    fontSize: 12, color: '#1565c0', padding: 0, lineHeight: 1,
                  }}
                >
                  ×
                </button>
              </span>
            );
          })}
          {attachedDataSourceIds.map(dsId => {
            const ds = dataSources.find(d => d.id === dsId);
            return (
              <span
                key={dsId}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  padding: '3px 8px', borderRadius: 12, fontSize: 11,
                  background: '#e8f5e9', color: '#2e7d32', fontWeight: 500,
                }}
              >
                🔗 {ds?.label || ds?.path || dsId}
                <button
                  onClick={() => _removeAttachedDataSource(dsId)}
                  style={{
                    border: 'none', background: 'none', cursor: 'pointer',
                    fontSize: 12, color: '#2e7d32', padding: 0, lineHeight: 1,
                  }}
                >
                  ×
                </button>
              </span>
            );
          })}
          {attachedFeatureDataSourceIds.map(fdsId => {
            const fds = featureDataSources.find(d => d.id === fdsId);
            const fdsIcon = fds ? getPageIcon(`feature.${fds.featureCode}`) : null;
            return (
              <span
                key={fdsId}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  padding: '3px 8px', borderRadius: 12, fontSize: 11,
                  background: '#f3e5f5', color: '#7b1fa2', fontWeight: 500,
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', fontSize: 12 }}>{fdsIcon || '\uD83D\uDDC3\uFE0F'}</span>
                {fds?.label || fdsId} – {fds?.tableName || ''}
                <button
                  onClick={() => _toggleFeatureDataSource(fdsId)}
                  style={{
                    border: 'none', background: 'none', cursor: 'pointer',
                    fontSize: 12, color: '#7b1fa2', padding: 0, lineHeight: 1,
                  }}
                >
                  ×
                </button>
              </span>
            );
          })}
        </div>
      )}

      {/* Autocomplete dropdown */}
      {showAutocomplete && filteredFiles.length > 0 && (
        <div style={{
          position: 'absolute',
          bottom: '100%',
          left: _horizontalPadding,
          right: _horizontalPadding,
          maxHeight: 200,
          overflowY: 'auto',
          background: '#fff',
          border: '1px solid var(--border-color, #e0e0e0)',
          borderRadius: 8,
          boxShadow: '0 -2px 8px rgba(0,0,0,0.1)',
          zIndex: 10,
        }}>
          {filteredFiles.slice(0, 10).map(f => (
            <div
              key={f.id}
              onClick={() => _insertFileRef(f.fileName)}
              style={{
                padding: '8px 12px',
                cursor: 'pointer',
                fontSize: 13,
                borderBottom: '1px solid #f0f0f0',
              }}
              onMouseEnter={e => (e.currentTarget.style.background = '#f5f5f5')}
              onMouseLeave={e => (e.currentTarget.style.background = '')}
            >
              @{f.fileName}
              <span style={{ color: '#999', marginLeft: 8, fontSize: 11 }}>
                {f.mimeType} · {(f.fileSize / 1024).toFixed(1)}KB
              </span>
            </div>
          ))}
        </div>
      )}

      {/* Main input row */}
      <div style={{
        padding: `8px ${_horizontalPadding}px 12px`,
        display: 'flex',
        gap: 8,
        alignItems: isMobile ? 'stretch' : 'flex-end',
        flexWrap: isMobile ? 'wrap' : 'nowrap',
      }}>
        <textarea
          ref={textareaRef}
          value={prompt}
          onChange={_handleChange}
          onKeyDown={_handleKeyDown}
          onPaste={_handlePaste}
          placeholder={t('Geben Sie eine Nachricht ein, verwenden Sie @file für Dateien')}
          disabled={isProcessing}
          style={{
            flex: 1,
            minHeight: isMobile ? 44 : 40,
            maxHeight: 120,
            resize: 'vertical',
            padding: '10px 14px',
            borderRadius: 8,
            border: '1px solid var(--border-color, #ccc)',
            fontSize: 14,
            fontFamily: 'inherit',
            outline: 'none',
            flexBasis: isMobile ? '100%' : undefined,
          }}
          rows={1}
        />

        <button
          onClick={onFileUploadClick}
          disabled={uploading || isProcessing}
          title={t('Datei anhängen')}
          style={{
            width: _controlSize, height: _controlSize, borderRadius: 8, border: '1px solid var(--border-color, #ddd)',
            background: 'var(--secondary-bg, #f5f5f5)',
            color: uploading ? 'var(--primary-color, #F25843)' : 'var(--text-secondary, #666)',
            cursor: uploading || isProcessing ? 'not-allowed' : 'pointer',
            fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
            opacity: isProcessing ? 0.5 : 1,
          }}
        >
          {uploading ? '...' : '+'}
        </button>

        {/* Source picker removed — data sources are now attached directly from the UDB Sources/Files tabs via "send to chat" buttons */}

        {onProviderSelectionChange && providerSelection && (
          <ProviderMultiSelect
            selection={providerSelection}
            onChange={onProviderSelectionChange}
            showLabel={false}
            disabled={isProcessing}
          />
        )}

        <div style={{ position: 'relative', display: 'flex', gap: 2 }}>
          <button
            onClick={() => setShowLangPicker(prev => !prev)}
            title={t('Sprache wählen')}
            style={{
              height: _controlSize, borderRadius: '8px 0 0 8px', border: '1px solid var(--border-color, #ddd)',
              borderRight: 'none',
              background: 'var(--secondary-bg, #f5f5f5)',
              color: '#666', cursor: 'pointer', fontSize: 10, padding: '0 6px',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >
            {voiceLanguage.split('-')[0].toUpperCase()}
          </button>
          <button
            onClick={_toggleVoice}
            title={voiceActive ? t('Aufnahme stoppen') : t('Sprachaufnahme starten')}
            style={{
              width: _controlSize, height: _controlSize, borderRadius: '0 8px 8px 0', border: 'none',
              background: voiceActive ? '#f44336' : 'var(--secondary-bg, #f5f5f5)',
              color: voiceActive ? '#fff' : '#666',
              cursor: 'pointer', fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >
            {voiceActive ? '■' : '\uD83C\uDFA4'}
          </button>
          {showLangPicker && (
            <div style={{
              position: 'absolute', bottom: '100%', right: 0, marginBottom: 4,
              background: '#fff', border: '1px solid var(--border-color, #e0e0e0)',
              borderRadius: 8, boxShadow: '0 -2px 8px rgba(0,0,0,0.1)', zIndex: 20,
              maxHeight: 240, overflowY: 'auto', minWidth: 160,
            }}>
              {voiceCatalogLanguages.map(lang => (
                <div
                  key={lang.bcp47}
                  onClick={() => {
                    setVoiceLanguage(lang.bcp47);
                    setShowLangPicker(false);
                    fetch('/api/voice/preferences', { method: 'PUT', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sttLanguage: lang.bcp47 }) }).catch(() => {});
                  }}
                  style={{
                    padding: '8px 12px', cursor: 'pointer', fontSize: 13,
                    background: lang.bcp47 === voiceLanguage ? 'var(--primary-color, #F25843)' : 'transparent',
                    color: lang.bcp47 === voiceLanguage ? '#fff' : 'var(--text-primary, #333)',
                  }}
                  onMouseEnter={e => { if (lang.bcp47 !== voiceLanguage) e.currentTarget.style.background = 'var(--bg-secondary, #f5f5f5)'; }}
                  onMouseLeave={e => { if (lang.bcp47 !== voiceLanguage) e.currentTarget.style.background = ''; }}
                >
                  {lang.flag ? `${lang.flag} ` : ''}{lang.label} ({lang.bcp47})
                </div>
              ))}
            </div>
          )}
        </div>

        <button
          onClick={() => setNeutralizeActive(v => !v)}
          title={neutralizeActive ? t('Neutralisierung aktiv, klicken zum Deaktivieren') : t('Neutralisierung aus, klicken zum Aktivieren')}
          style={{
            padding: '8px 10px', borderRadius: 8, border: '1px solid',
            borderColor: neutralizeActive ? '#166534' : 'var(--border-color, #d1d5db)',
            background: neutralizeActive ? '#dcfce7' : 'transparent',
            cursor: 'pointer', fontSize: '1rem', lineHeight: 1,
            opacity: neutralizeActive ? 1 : 0.5,
            transition: 'all 0.15s',
          }}
        >
          🔒
        </button>

        {isProcessing ? (
          <button
            onClick={onStop}
            style={{
              padding: '10px 20px', borderRadius: 8, border: 'none',
              background: '#f44336', color: '#fff', cursor: 'pointer', fontWeight: 600,
              minWidth: isMobile ? 84 : undefined,
            }}
          >
            Stop
          </button>
        ) : (
          <button
            onClick={_handleSend}
            disabled={!prompt.trim()}
            style={{
              padding: '10px 20px', borderRadius: 8, border: 'none',
              background: prompt.trim() ? 'var(--primary-color, #F25843)' : 'var(--color-gray-disabled, #ccc)',
              color: '#fff', cursor: prompt.trim() ? 'pointer' : 'default', fontWeight: 600,
              minWidth: isMobile ? 84 : undefined,
            }}
          >
            Send
          </button>
        )}
      </div>
    </div>
  );
};