import React from 'react';
import { ChatDisplayMode } from '../../types/chatAssistant';
import styles from './ChatAssistant.module.css';

interface ChatAssistantHeaderProps {
  preferredMode: ChatDisplayMode;
  effectiveMode: ChatDisplayMode;
  onPreferredModeChange: (mode: ChatDisplayMode) => void;
  onNewConversation: () => void;
  onClose: () => void;
}

const ChatAssistantHeader: React.FC<ChatAssistantHeaderProps> = ({
  preferredMode,
  effectiveMode,
  onPreferredModeChange,
  onNewConversation,
  onClose,
}) => {
  return (
    <div className={styles.chatHeader}>
      <div className={styles.chatHeaderBrand}>
        <span className={styles.chatHeaderIcon} aria-hidden="true">
          <i className="ri-robot-2-line" />
        </span>
        <div className={styles.chatHeaderText}>
          <h2 className={styles.chatHeaderTitle}>Asistente Eneon</h2>
          <p className={styles.chatHeaderSubtitle}>Consultas de contratos y clientes</p>
        </div>
      </div>

      <div className={styles.chatHeaderActions}>
        <div className={styles.chatModeGroup} role="group" aria-label="Modo de visualización">
          <button
            type="button"
            className={`${styles.chatModeButton} ${preferredMode === 'embedded' ? styles.chatModeButtonActive : ''}`}
            onClick={() => onPreferredModeChange('embedded')}
            aria-pressed={preferredMode === 'embedded'}
            title="Panel incrustado"
          >
            <i className="ri-layout-right-2-line" aria-hidden="true" />
          </button>
          <button
            type="button"
            className={`${styles.chatModeButton} ${preferredMode === 'floating' ? styles.chatModeButtonActive : ''}`}
            onClick={() => onPreferredModeChange('floating')}
            aria-pressed={preferredMode === 'floating'}
            title="Panel flotante"
          >
            <i className="ri-chat-3-line" aria-hidden="true" />
          </button>
        </div>

        {effectiveMode !== preferredMode && (
          <span className="visually-hidden">Modo flotante activo por tamaño de pantalla</span>
        )}

        <button
          type="button"
          id="chat-assistant-new-conversation"
          className={styles.chatHeaderButton}
          onClick={onNewConversation}
          aria-label="Iniciar nueva conversación"
          title="Nueva conversación"
        >
          <i className="ri-add-line" aria-hidden="true" />
        </button>

        <button
          type="button"
          id="chat-assistant-close"
          className={styles.chatHeaderButton}
          onClick={onClose}
          aria-label="Cerrar asistente"
          title="Cerrar"
        >
          <i className="ri-close-line" aria-hidden="true" />
        </button>
      </div>
    </div>
  );
};

export default ChatAssistantHeader;