/**
 * EditorChatPanel
 *
 * AI Chat sidebar for the GraphicalEditor.
 * Streams responses via SSE (same pattern as Workspace chat).
 * File & data-source attachment UX mirrors WorkspaceInput:
 *   - Files: drag & drop from FolderTree onto input area, or click in UDB
 *   - Data Sources: 🔗 picker button next to input (toggle-select from active sources)
 */
import React, { useState, useCallback, useRef } from 'react';
import { startSseStream } from '../../../utils/sseClient';
import { ChatMessageList } from '../../Chat';
import type { ChatMessage } from '../../Chat';
import { getPageIcon } from '../../../config/pageRegistry';

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

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

export interface EditorDataSource {
  id: string;
  label: string;
  path?: string;
  sourceType?: string;
}

export interface EditorFeatureDataSource {
  id: string;
  featureInstanceId: string;
  featureCode: string;
  tableName: string;
  label: string;
}

interface EditorChatPanelProps {
  instanceId: string;
  workflowId: string | null;
  onGraphUpdated?: () => void;
  pendingFiles?: PendingFile[];
  onRemovePendingFile?: (fileId: string) => void;
  dataSources?: EditorDataSource[];
  featureDataSources?: EditorFeatureDataSource[];
}

let _msgCounter = 0;

export const EditorChatPanel: React.FC<EditorChatPanelProps> = ({ instanceId,
  workflowId,
  onGraphUpdated,
  pendingFiles = [],
  onRemovePendingFile,
  dataSources = [],
  featureDataSources = [],
}) => {
  const { t } = useLanguage();
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [loading, setLoading] = useState(false);
  const [prompt, setPrompt] = useState('');
  const [attachedDataSourceIds, setAttachedDataSourceIds] = useState<string[]>([]);
  const [attachedFeatureDataSourceIds, setAttachedFeatureDataSourceIds] = useState<string[]>([]);
  const [showSourcePicker, setShowSourcePicker] = useState(false);
  const [treeDropOver, setTreeDropOver] = useState(false);
  const abortRef = useRef<(() => void) | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const pickerRef = useRef<HTMLDivElement>(null);

  const _toggleDataSource = useCallback((dsId: string) => {
    setAttachedDataSourceIds(prev =>
      prev.includes(dsId) ? prev.filter(id => id !== dsId) : [...prev, dsId],
    );
  }, []);

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

  const _handleSend = useCallback(() => {
    const trimmed = prompt.trim();
    if (!workflowId || loading || !trimmed) return;

    const fileIds = pendingFiles.map(f => f.fileId);
    const body: Record<string, unknown> = {
      message: trimmed,
      conversationHistory: messages.map(m => ({ role: m.role, message: m.content })),
      userLanguage: navigator.language?.slice(0, 2) || 'de',
    };
    if (fileIds.length > 0) body.fileIds = fileIds;
    if (attachedDataSourceIds.length > 0) body.dataSourceIds = attachedDataSourceIds;
    if (attachedFeatureDataSourceIds.length > 0) body.featureDataSourceIds = attachedFeatureDataSourceIds;

    const userMsg: ChatMessage = {
      id: `user-${++_msgCounter}`,
      role: 'user',
      content: trimmed,
      timestamp: Date.now(),
    };
    setMessages(prev => [...prev, userMsg]);
    setPrompt('');
    setShowSourcePicker(false);
    setLoading(true);

    const assistantId = `asst-${++_msgCounter}`;
    let accumulated = '';
    setMessages(prev => [...prev, { id: assistantId, role: 'assistant', content: '', timestamp: Date.now() }]);

    const cleanup = startSseStream({
      url: `/api/workflows/${instanceId}/${workflowId}/chat/stream`,
      body,
      handlers: {
        onChunk: (event) => {
          if (event.content) {
            accumulated += event.content;
            setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: accumulated } : m));
          }
        },
        onRawEvent: (event) => {
          if (event.type === 'message' && event.content) {
            accumulated += event.content;
            setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: accumulated } : m));
          }
          if (event.type === 'toolResult' || event.type === 'toolCall') {
            onGraphUpdated?.();
          }
        },
        onComplete: () => {
          if (!accumulated) {
            setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: 'Done.' } : m));
          }
          onGraphUpdated?.();
          setLoading(false);
        },
        onError: (event) => {
          const errText = event.content || 'Request failed';
          if (!accumulated) {
            setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: `Error: ${errText}` } : m));
          }
          setLoading(false);
        },
        onStopped: () => setLoading(false),
      },
      onConnectionError: (err) => {
        setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: `Error: ${err.message}` } : m));
        setLoading(false);
      },
      onStreamEnd: () => setLoading(false),
    });

    abortRef.current = cleanup;
  }, [prompt, loading, workflowId, instanceId, messages, onGraphUpdated, pendingFiles, attachedDataSourceIds, attachedFeatureDataSourceIds]);

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

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

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

  const _handleDrop = useCallback((e: React.DragEvent) => {
    setTreeDropOver(false);
    const treeItemsJson = e.dataTransfer.getData('application/tree-items');
    if (treeItemsJson) {
      e.preventDefault();
      e.stopPropagation();
    }
  }, []);

  const hasAttachments = pendingFiles.length > 0 || attachedDataSourceIds.length > 0 || attachedFeatureDataSourceIds.length > 0;
  const sourceCount = attachedDataSourceIds.length + attachedFeatureDataSourceIds.length;
  const hasSourceOptions = dataSources.length > 0 || featureDataSources.length > 0;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--bg-secondary, #fafafa)' }}>
      <ChatMessageList
        messages={messages}
        isProcessing={loading}
        emptyMessage={t('editorChatPanel.describeWhatYouWantTo')}
      />

      {/* Pending files (from UDB drag/click) */}
      {pendingFiles.length > 0 && (
        <div style={{
          padding: '6px 12px', display: 'flex', gap: 4, flexWrap: 'wrap',
          borderTop: '1px solid var(--border-color, #e0e0e0)',
          background: 'var(--bg-secondary, #fafafa)',
        }}>
          {pendingFiles.map(pf => (
            <span key={pf.fileId} style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '2px 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' ? '\uD83D\uDCC1' : '\uD83D\uDCCE'} {pf.fileName.length > 20 ? pf.fileName.slice(0, 20) + '...' : pf.fileName}
              {onRemovePendingFile && (
                <button onClick={() => onRemovePendingFile(pf.fileId)} style={{
                  border: 'none', background: 'none', cursor: 'pointer', fontSize: 11, color: '#e65100', padding: 0, lineHeight: 1,
                }}>x</button>
              )}
            </span>
          ))}
        </div>
      )}

      {/* Attached data sources chips */}
      {(attachedDataSourceIds.length > 0 || attachedFeatureDataSourceIds.length > 0) && (
        <div style={{
          padding: '6px 12px', display: 'flex', gap: 4, flexWrap: 'wrap',
          borderTop: pendingFiles.length > 0 ? 'none' : '1px solid var(--border-color, #e0e0e0)',
          background: '#fafafa',
        }}>
          {attachedDataSourceIds.map(dsId => {
            const ds = dataSources.find(d => d.id === dsId);
            return (
              <span key={dsId} style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                padding: '2px 8px', borderRadius: 12, fontSize: 11,
                background: '#e8f5e9', color: '#2e7d32', fontWeight: 500,
              }}>
                \uD83D\uDD17 {ds?.label || dsId}
                <button onClick={() => _toggleDataSource(dsId)} style={{
                  border: 'none', background: 'none', cursor: 'pointer', fontSize: 11, color: '#2e7d32', padding: 0, lineHeight: 1,
                }}>x</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: '2px 8px', borderRadius: 12, fontSize: 11,
                background: '#f3e5f5', color: '#7b1fa2', fontWeight: 500,
              }}>
                <span style={{ display: 'flex', alignItems: 'center', fontSize: 11 }}>{fdsIcon || '\uD83D\uDDC3\uFE0F'}</span>
                {fds?.label || fdsId}
                <button onClick={() => _toggleFeatureDataSource(fdsId)} style={{
                  border: 'none', background: 'none', cursor: 'pointer', fontSize: 11, color: '#7b1fa2', padding: 0, lineHeight: 1,
                }}>x</button>
              </span>
            );
          })}
        </div>
      )}

      {/* Input area */}
      <div
        style={{
          borderTop: hasAttachments ? 'none' : '1px solid var(--border-color, #e0e0e0)',
          padding: '8px 12px',
          display: 'flex', gap: 6, alignItems: 'flex-end',
          outline: treeDropOver ? '2px dashed var(--primary-color, #F25843)' : 'none',
          background: treeDropOver ? 'rgba(242, 88, 67, 0.08)' : undefined,
          transition: 'background 0.15s, outline 0.15s',
        }}
        onDragOver={_handleDragOver}
        onDragLeave={_handleDragLeave}
        onDrop={_handleDrop}
      >
        <textarea
          ref={textareaRef}
          value={prompt}
          onChange={e => setPrompt(e.target.value)}
          onKeyDown={_handleKeyDown}
          placeholder={workflowId ? t('editorChatPanel.describeAChange') : t('editorChatPanel.saveWorkflowFirst')}
          disabled={!workflowId || loading}
          style={{
            flex: 1, minHeight: 36, maxHeight: 100, resize: 'vertical',
            padding: '8px 10px', borderRadius: 8,
            border: '1px solid var(--border-color, #ccc)',
            fontSize: 13, fontFamily: 'inherit', outline: 'none',
          }}
          rows={1}
        />

        {/* Source picker button */}
        {hasSourceOptions && (
          <div style={{ position: 'relative' }} ref={pickerRef}>
            <button
              onClick={() => setShowSourcePicker(prev => !prev)}
              disabled={loading || !workflowId}
              title={t('editorChatPanel.datenquellenAnhaengen')}
              style={{
                width: 36, height: 36, borderRadius: 8,
                border: '1px solid var(--border-color, #ddd)',
                background: sourceCount > 0 ? '#e8f5e9' : 'var(--secondary-bg, #f5f5f5)',
                color: sourceCount > 0 ? '#2e7d32' : '#666',
                cursor: loading || !workflowId ? 'not-allowed' : 'pointer',
                fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
                opacity: loading ? 0.5 : 1, position: 'relative',
              }}
            >
              {'\uD83D\uDD17'}
              {sourceCount > 0 && (
                <span style={{
                  position: 'absolute', top: -4, right: -4,
                  background: '#2e7d32', color: '#fff', fontSize: 9, fontWeight: 700,
                  borderRadius: '50%', width: 16, height: 16,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{sourceCount}</span>
              )}
            </button>
            {showSourcePicker && (
              <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,
                minWidth: 220, maxHeight: 260, overflowY: 'auto',
              }}>
                <div style={{ padding: '8px 12px', fontSize: 11, color: '#999', fontWeight: 600, borderBottom: '1px solid #f0f0f0' }}>
                  Active Sources auswählen
                </div>
                {dataSources.map(ds => {
                  const isSelected = attachedDataSourceIds.includes(ds.id);
                  return (
                    <div key={ds.id} onClick={() => _toggleDataSource(ds.id)} style={{
                      padding: '8px 12px', cursor: 'pointer', fontSize: 12,
                      display: 'flex', alignItems: 'center', gap: 8,
                      background: isSelected ? '#e8f5e9' : 'transparent',
                    }}
                      onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = '#f5f5f5'; }}
                      onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = isSelected ? '#e8f5e9' : ''; }}
                    >
                      <span style={{
                        width: 14, height: 14, borderRadius: 3,
                        border: isSelected ? '2px solid #2e7d32' : '2px solid #ccc',
                        background: isSelected ? '#2e7d32' : 'transparent',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        color: '#fff', fontSize: 9, fontWeight: 700, flexShrink: 0,
                      }}>{isSelected ? '\u2713' : ''}</span>
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {ds.label || ds.path || ds.id}
                      </span>
                    </div>
                  );
                })}
                {featureDataSources.length > 0 && (
                  <>
                    <div style={{ padding: '8px 12px', fontSize: 11, color: '#999', fontWeight: 600, borderTop: '1px solid #f0f0f0', borderBottom: '1px solid #f0f0f0' }}>
                      Feature Data Sources
                    </div>
                    {featureDataSources.map(fds => {
                      const isSelected = attachedFeatureDataSourceIds.includes(fds.id);
                      return (
                        <div key={fds.id} onClick={() => _toggleFeatureDataSource(fds.id)} style={{
                          padding: '8px 12px', cursor: 'pointer', fontSize: 12,
                          display: 'flex', alignItems: 'center', gap: 8,
                          background: isSelected ? '#f3e5f5' : 'transparent',
                        }}
                          onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = '#f5f5f5'; }}
                          onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = isSelected ? '#f3e5f5' : ''; }}
                        >
                          <span style={{
                            width: 14, height: 14, borderRadius: 3,
                            border: isSelected ? '2px solid #7b1fa2' : '2px solid #ccc',
                            background: isSelected ? '#7b1fa2' : 'transparent',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            color: '#fff', fontSize: 9, fontWeight: 700, flexShrink: 0,
                          }}>{isSelected ? '\u2713' : ''}</span>
                          <span style={{ display: 'flex', alignItems: 'center', fontSize: 12, color: '#7b1fa2', flexShrink: 0 }}>
                            {getPageIcon(`feature.${fds.featureCode}`) || '\uD83D\uDDC3\uFE0F'}
                          </span>
                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            {fds.label || fds.featureCode} – {fds.tableName}
                          </span>
                        </div>
                      );
                    })}
                  </>
                )}
              </div>
            )}
          </div>
        )}

        {loading ? (
          <button onClick={() => abortRef.current?.()} style={{
            padding: '8px 14px', borderRadius: 8, border: 'none',
            background: '#f44336', color: '#fff', cursor: 'pointer', fontWeight: 600, fontSize: 12,
          }}>Stop</button>
        ) : (
          <button onClick={_handleSend} disabled={!prompt.trim() || !workflowId} style={{
            padding: '8px 14px', borderRadius: 8, border: 'none',
            background: prompt.trim() && workflowId ? 'var(--primary-color, #F25843)' : '#ccc',
            color: '#fff', cursor: prompt.trim() && workflowId ? 'pointer' : 'default',
            fontWeight: 600, fontSize: 12,
          }}>{t('editorChatPanel.send')}</button>
        )}
      </div>
    </div>
  );
};