/**
 * ChatbotConfigSection Component
 * 
 * Displays chatbot-specific configuration fields (connector, system prompt)
 * Only shown when featureCode is "chatbot"
 */

import React from 'react';
import { TextField } from '../../components/UiComponents/TextField';
import styles from './Admin.module.css';

export interface ChatbotConfig {
  connector: string;
  systemPrompt: string;
}

export interface ChatbotConfigSectionProps {
  connectors: string[]; // Array of selected connector types (database connectors only)
  systemPrompt: string;
  enableWebResearch: boolean; // Enable Tavily web research
  onConnectorsChange: (connectors: string[]) => void;
  onSystemPromptChange: (prompt: string) => void;
  onEnableWebResearchChange: (enabled: boolean) => void;
}

export const ChatbotConfigSection: React.FC<ChatbotConfigSectionProps> = ({
  connectors,
  systemPrompt,
  enableWebResearch,
  onConnectorsChange,
  onSystemPromptChange,
  onEnableWebResearchChange
}) => {
  const availableConnectors = [
    { id: 'preprocessor', label: 'Althaus Preprocessor', value: 'preprocessor' }
  ];
  
  const handleConnectorToggle = (connectorValue: string) => {
    if (connectors.includes(connectorValue)) {
      // Remove connector
      onConnectorsChange(connectors.filter(c => c !== connectorValue));
    } else {
      // Add connector
      onConnectorsChange([...connectors, connectorValue]);
    }
  };
  
  return (
    <div className={styles.chatbotConfigSection}>
      <div className={styles.configField}>
        <label className={styles.configLabel}>
          Connector:
        </label>
        <div className={styles.multiselectContainer}>
          {availableConnectors.map(connector => {
            const isSelected = connectors.includes(connector.value);
            return (
              <label key={connector.id} className={styles.multiselectOption}>
                <input
                  type="checkbox"
                  checked={isSelected}
                  onChange={() => handleConnectorToggle(connector.value)}
                  className={styles.multiselectCheckbox}
                />
                <span className={styles.multiselectLabel}>{connector.label}</span>
              </label>
            );
          })}
        </div>
        {connectors.length === 0 && (
          <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '0.5rem' }}>
            Bitte wählen Sie mindestens einen Connector aus.
          </p>
        )}
      </div>
      
      <div className={styles.configField}>
        <label className={styles.configLabel} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
          <input
            type="checkbox"
            checked={enableWebResearch}
            onChange={(e) => onEnableWebResearchChange(e.target.checked)}
            className={styles.multiselectCheckbox}
          />
          <span>Web Research aktivieren (Tavily)</span>
        </label>
        <p className={styles.configHelpText}>
          Wenn aktiviert, führt der Chatbot zusätzlich Web-Recherchen mit Tavily durch, um aktuelle Informationen aus dem Internet zu finden.
        </p>
      </div>
      
      <div className={styles.configField}>
        <label className={styles.configLabel}>
          System Prompt: <span style={{ color: 'var(--error-color)' }}>*</span>
        </label>
        <TextField
          type="text"
          value={systemPrompt}
          onChange={onSystemPromptChange}
          placeholder="Benutzerdefinierter System-Prompt für den Chatbot..."
          className={styles.configTextArea}
          size="md"
          rows={6}
          required={true}
        />
        <p className={styles.configHelpText}>
          Dieser Prompt wird für Analyse und Antwort-Generierung verwendet (erforderlich).
          Platzhalter: {'{userPrompt}'}, {'{context}'}, {'{db_results_part}'}, {'{web_results_part}'}
        </p>
      </div>
    </div>
  );
};