/**
 * UserSection Component
 * 
 * Zeigt Benutzerinformationen und Logout-Button in der Sidebar.
 */

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCurrentUser } from '../../hooks/useUsers';
import { useMsal } from '@azure/msal-react';
import { NotificationBell } from '../NotificationBell';
import styles from './UserSection.module.css';

export const UserSection: React.FC = () => {
  const { user, logout } = useCurrentUser();
  const { instance: msalInstance } = useMsal();
  const navigate = useNavigate();
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const [showLegalModal, setShowLegalModal] = useState(false);
  
  const handleLogout = async () => {
    setIsLoggingOut(true);
    try {
      await logout(msalInstance);
    } catch (error) {
      console.error('Logout failed:', error);
      setIsLoggingOut(false);
    }
  };
  
  const handleSettings = () => {
    navigate('/settings');
    setShowMenu(false);
  };
  
  const handleLegal = () => {
    setShowLegalModal(true);
    setShowMenu(false);
  };
  
  if (!user) {
    return null;
  }
  
  // Initialen für Avatar
  const initials = user.fullName
    ? user.fullName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
    : user.username.slice(0, 2).toUpperCase();
  
  return (
    <div className={styles.userSection}>
      {/* Notification Bell */}
      <NotificationBell className={styles.notificationBell} />
      
      <button 
        className={styles.userButton}
        onClick={() => setShowMenu(!showMenu)}
        aria-expanded={showMenu}
      >
        <div className={styles.avatar}>
          {initials}
        </div>
        <div className={styles.userInfo}>
          <span className={styles.userName}>{user.fullName || user.username}</span>
          <span className={styles.userEmail}>{user.email}</span>
        </div>
        <span className={styles.chevron}>
          {showMenu ? '▲' : '▼'}
        </span>
      </button>
      
      {showMenu && (
        <div className={styles.menu}>
          <button 
            className={styles.menuItem}
            onClick={handleSettings}
          >
            <span className={styles.menuIcon}>⚙️</span>
            Einstellungen
          </button>
          
          <button 
            className={styles.menuItem}
            onClick={handleLegal}
          >
            <span className={styles.menuIcon}>📜</span>
            Rechtliche Hinweise
          </button>
          
          <div className={styles.menuDivider} />
          
          <button 
            className={styles.menuItem}
            onClick={handleLogout}
            disabled={isLoggingOut}
          >
            <span className={styles.menuIcon}>🚪</span>
            {isLoggingOut ? 'Abmelden...' : 'Abmelden'}
          </button>
        </div>
      )}
      
      {/* Legal Modal */}
      {showLegalModal && (
        <div className={styles.modalOverlay} onClick={() => setShowLegalModal(false)}>
          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
            <div className={styles.modalHeader}>
              <h2>Rechtliche Hinweise</h2>
              <button 
                className={styles.modalClose}
                onClick={() => setShowLegalModal(false)}
              >
                ✕
              </button>
            </div>
            <div className={styles.modalContent}>
              <div className={styles.legalSection}>
                <h3>Datenverarbeitung und KI-Nutzung</h3>
                
                <h4>1. Einwilligung zur Datenverarbeitung</h4>
                <p>Mit der Nutzung dieser Anwendung stimmen Sie zu und erklären sich mit den folgenden Bedingungen zur Verarbeitung Ihrer Daten durch künstliche Intelligenz einverstanden:</p>
                <ul>
                  <li>Sie autorisieren die Erfassung, Verarbeitung, Übertragung und Speicherung aller Daten, die Sie bei der Nutzung unserer Dienste bereitstellen.</li>
                  <li>Nutzerdaten können an Drittanbieter von künstlicher Intelligenz übertragen werden (z.B. OpenAI).</li>
                  <li>Diese Einwilligung erstreckt sich auf alle Inhalte, einschließlich Text, Bilder, Dokumente und Gesprächsverläufe.</li>
                </ul>
                
                <h4>2. Anerkennung der KI-Verarbeitungsrisiken</h4>
                <ul>
                  <li>KI-Systeme können unerwartete oder ungenaue Ausgaben erzeugen.</li>
                  <li>KI-Dienste können Daten gemäß ihren eigenen Nutzungsbedingungen speichern oder daraus lernen.</li>
                  <li>Trotz Sicherheitsmaßnahmen können Daten anfällig für unbefugten Zugriff sein.</li>
                </ul>
                
                <h4>3. Haftungsausschluss</h4>
                <p>Im größtmöglichen Umfang verzichten Sie auf Ansprüche, die sich aus der KI-Verarbeitung ergeben, einschließlich Datenverletzungen und unbeabsichtigter Offenlegung.</p>
              </div>
              
              <div className={styles.legalLinks}>
                <a href="/poweron-privacy.html" target="_blank" rel="noopener noreferrer">
                  Datenschutzrichtlinie
                </a>
                <a href="/poweron-terms.html" target="_blank" rel="noopener noreferrer">
                  Nutzungsbedingungen
                </a>
                <a href="/poweron-home.html" target="_blank" rel="noopener noreferrer">
                  Über PowerOn
                </a>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default UserSection;
