import React, { useEffect, useState } from 'react';
import { fetchGroupsWithClients, restartClient } from './apiClients';
import type { Group, Client } from './apiClients';
import { fetchEvents } from './apiEvents';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent, MessageComponent } from '@syncfusion/ej2-react-notifications';
import { listHolidays } from './apiHolidays';
import { getActiveAcademicPeriod, type AcademicPeriod } from './apiAcademicPeriods';
import { getHolidayBannerSetting } from './apiSystemSettings';
import { formatIsoDateForDisplay } from './dateFormatting';

const REFRESH_INTERVAL = 15000; // 15 Sekunden

type FilterType = 'all' | 'online' | 'offline' | 'warning';

interface ActiveEvent {
  id: string;
  title: string;
  event_type: string;
  start: string;
  end: string;
  recurrenceRule?: string;
  isRecurring: boolean;
}

interface GroupEvents {
  [groupId: number]: ActiveEvent | null;
}

const Dashboard: React.FC = () => {
  const [groups, setGroups] = useState<Group[]>([]);
  const [expandedCards, setExpandedCards] = useState<Set<number>>(new Set());
  const [filter, setFilter] = useState<FilterType>('all');
  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
  const [activeEvents, setActiveEvents] = useState<GroupEvents>({});
  const toastRef = React.useRef<ToastComponent>(null);

  // Holiday status state
  const [holidayBannerEnabled, setHolidayBannerEnabled] = useState<boolean>(true);
  const [activePeriod, setActivePeriod] = useState<AcademicPeriod | null>(null);
  const [holidayOverlapCount, setHolidayOverlapCount] = useState<number>(0);
  const [holidayFirst, setHolidayFirst] = useState<string | null>(null);
  const [holidayLast, setHolidayLast] = useState<string | null>(null);
  const [holidayLoading, setHolidayLoading] = useState<boolean>(false);
  const [holidayError, setHolidayError] = useState<string | null>(null);

  // Optimiertes Update: Nur bei echten Datenänderungen wird das Grid aktualisiert
  useEffect(() => {
    let lastGroups: Group[] = [];
    const fetchAndUpdate = async () => {
      try {
        const newGroups = await fetchGroupsWithClients();
        // Vergleiche nur die relevanten Felder (id, clients, is_alive)
        const changed =
          lastGroups.length !== newGroups.length ||
          lastGroups.some((g, i) => {
            const ng = newGroups[i];
            if (!ng || g.id !== ng.id || g.clients.length !== ng.clients.length) return true;
            // Optional: Vergleiche tiefer, z.B. Alive-Status
            for (let j = 0; j < g.clients.length; j++) {
              if (
                g.clients[j].uuid !== ng.clients[j].uuid ||
                g.clients[j].is_alive !== ng.clients[j].is_alive
              ) {
                return true;
              }
            }
            return false;
          });
        if (changed) {
          setGroups(newGroups);
          lastGroups = newGroups;
          setLastUpdate(new Date());
          
          // Fetch active events for all groups
          fetchActiveEventsForGroups(newGroups);
        }
      } catch (error) {
        console.error('Fehler beim Laden der Gruppen:', error);
      }
    };

    fetchAndUpdate();
    const interval = setInterval(fetchAndUpdate, REFRESH_INTERVAL);
    return () => clearInterval(interval);
  }, []);

  // Load academic period & holidays status
  useEffect(() => {
    const loadHolidayStatus = async () => {
      // Check if banner is enabled first
      try {
        const bannerSetting = await getHolidayBannerSetting();
        setHolidayBannerEnabled(bannerSetting.enabled);
        if (!bannerSetting.enabled) {
          return; // Skip loading if disabled
        }
      } catch (e) {
        console.error('Fehler beim Laden der Banner-Einstellung:', e);
        // Continue with default (enabled)
      }

      setHolidayLoading(true);
      setHolidayError(null);
      try {
        const period = await getActiveAcademicPeriod();
        setActivePeriod(period || null);
        const holidayData = period ? await listHolidays(undefined, period.id) : { holidays: [] };
        const list = holidayData.holidays || [];
        
        if (period) {
          // Check for holidays overlapping with active period
          const ps = new Date(period.startDate + 'T00:00:00');
          const pe = new Date(period.endDate + 'T23:59:59');
          const overlapping = list.filter(h => {
            const hs = new Date(h.start_date + 'T00:00:00');
            const he = new Date(h.end_date + 'T23:59:59');
            return hs <= pe && he >= ps;
          });
          setHolidayOverlapCount(overlapping.length);
          if (overlapping.length > 0) {
            const sorted = overlapping.slice().sort((a, b) => a.start_date.localeCompare(b.start_date));
            setHolidayFirst(sorted[0].start_date);
            setHolidayLast(sorted[sorted.length - 1].end_date);
          } else {
            setHolidayFirst(null);
            setHolidayLast(null);
          }
        } else {
          setHolidayOverlapCount(0);
          setHolidayFirst(null);
          setHolidayLast(null);
        }
      } catch (e) {
        const msg = e instanceof Error ? e.message : 'Ferienstatus konnte nicht geladen werden';
        setHolidayError(msg);
      } finally {
        setHolidayLoading(false);
      }
    };
    loadHolidayStatus();
  }, []);

  // Fetch currently active events for all groups
  const fetchActiveEventsForGroups = async (groupsList: Group[]) => {
    const now = new Date();
    const eventsMap: GroupEvents = {};
    
    for (const group of groupsList) {
      try {
        const events = await fetchEvents(String(group.id), false, {
          start: new Date(now.getTime() - 60000), // 1 minute ago
          end: new Date(now.getTime() + 60000),   // 1 minute ahead
          expand: true
        });
        
        // Find the first active event
        if (events && events.length > 0) {
          const activeEvent = events[0];
          
          eventsMap[group.id] = {
            id: activeEvent.id,
            title: activeEvent.subject || 'Unbenannter Event',
            event_type: activeEvent.type || 'unknown',
            start: activeEvent.startTime, // Keep as string, will be parsed in format functions
            end: activeEvent.endTime,
            recurrenceRule: activeEvent.recurrenceRule,
            isRecurring: !!activeEvent.recurrenceRule
          };
        } else {
          eventsMap[group.id] = null;
        }
      } catch {
        console.error(`Fehler beim Laden der Events für Gruppe ${group.id}`);
        eventsMap[group.id] = null;
      }
    }
    
    setActiveEvents(eventsMap);
  };

  // Toggle card expansion
  const toggleCard = (groupId: number) => {
    setExpandedCards(prev => {
      const newSet = new Set(prev);
      if (newSet.has(groupId)) {
        newSet.delete(groupId);
      } else {
        newSet.add(groupId);
      }
      return newSet;
    });
  };

  // Health-Statistik berechnen
  const getHealthStats = (group: Group) => {
    const total = group.clients.length;
    const alive = group.clients.filter((c: Client) => c.is_alive).length;
    const offline = total - alive;
    const ratio = total === 0 ? 0 : alive / total;
    
    let statusColor = '#e74c3c'; // danger red
    let statusText = 'Kritisch';
    if (ratio === 1) {
      statusColor = '#27ae60'; // success green
      statusText = 'Optimal';
    } else if (ratio >= 0.5) {
      statusColor = '#f39c12'; // warning orange
      statusText = 'Teilweise';
    }
    
    return { total, alive, offline, ratio, statusColor, statusText };
  };

  // Neustart-Logik
  const handleRestartClient = async (uuid: string, description: string) => {
    try {
      const result = await restartClient(uuid);
      toastRef.current?.show({
        title: 'Neustart erfolgreich',
        content: `${description || uuid}: ${result.message}`,
        cssClass: 'e-toast-success',
        icon: 'e-success toast-icons',
      });
    } catch (error: unknown) {
      const message = error && typeof error === 'object' && 'message' in error
        ? (error as { message: string }).message
        : 'Unbekannter Fehler beim Neustart';
      toastRef.current?.show({
        title: 'Fehler beim Neustart',
        content: message,
        cssClass: 'e-toast-danger',
        icon: 'e-error toast-icons',
      });
    }
  };

  // Bulk restart für offline Clients einer Gruppe
  const handleRestartAllOffline = async (group: Group) => {
    const offlineClients = group.clients.filter(c => !c.is_alive);
    if (offlineClients.length === 0) {
      toastRef.current?.show({
        title: 'Keine Offline-Geräte',
        content: `Alle Infoscreens in "${group.name}" sind online.`,
        cssClass: 'e-toast-info',
        icon: 'e-info toast-icons',
      });
      return;
    }

    const confirmed = window.confirm(
      `Möchten Sie ${offlineClients.length} offline Infoscreen(s) in "${group.name}" neu starten?`
    );
    
    if (!confirmed) return;

    let successCount = 0;
    let failCount = 0;

    for (const client of offlineClients) {
      try {
        await restartClient(client.uuid);
        successCount++;
      } catch {
        failCount++;
      }
    }

    toastRef.current?.show({
      title: 'Bulk-Neustart abgeschlossen',
      content: `✓ ${successCount} erfolgreich, ✗ ${failCount} fehlgeschlagen`,
      cssClass: failCount > 0 ? 'e-toast-warning' : 'e-toast-success',
      icon: failCount > 0 ? 'e-warning toast-icons' : 'e-success toast-icons',
    });
  };

  // Berechne Gesamtstatistiken
  const getGlobalStats = () => {
    const allClients = groups.flatMap(g => g.clients);
    const total = allClients.length;
    const online = allClients.filter(c => c.is_alive).length;
    const offline = total - online;
    const ratio = total === 0 ? 0 : online / total;
    
    // Warnungen: Gruppen mit teilweise offline Clients
    const warningGroups = groups.filter(g => {
      const groupStats = getHealthStats(g);
      return groupStats.ratio > 0 && groupStats.ratio < 1;
    }).length;

    return { total, online, offline, ratio, warningGroups };
  };

  // Berechne "Zeit seit letztem Lebenszeichen"
  const getTimeSinceLastAlive = (lastAlive: string | null | undefined): string => {
    if (!lastAlive) return 'Nie';
    
    try {
      const dateStr = lastAlive.endsWith('Z') ? lastAlive : lastAlive + 'Z';
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return 'Unbekannt';
      
      const now = new Date();
      const diffMs = now.getTime() - date.getTime();
      const diffMins = Math.floor(diffMs / 60000);
      const diffHours = Math.floor(diffMins / 60);
      const diffDays = Math.floor(diffHours / 24);
      
      if (diffMins < 1) return 'Gerade eben';
      if (diffMins < 60) return `vor ${diffMins} Min.`;
      if (diffHours < 24) return `vor ${diffHours} Std.`;
      return `vor ${diffDays} Tag${diffDays > 1 ? 'en' : ''}`;
    } catch {
      return 'Unbekannt';
    }
  };

  // Manuelle Aktualisierung
  const handleManualRefresh = async () => {
    try {
      const newGroups = await fetchGroupsWithClients();
      setGroups(newGroups);
      setLastUpdate(new Date());
      await fetchActiveEventsForGroups(newGroups);
      toastRef.current?.show({
        title: 'Aktualisiert',
        content: 'Daten wurden erfolgreich aktualisiert',
        cssClass: 'e-toast-success',
        icon: 'e-success toast-icons',
        timeOut: 2000,
      });
    } catch {
      toastRef.current?.show({
        title: 'Fehler',
        content: 'Daten konnten nicht aktualisiert werden',
        cssClass: 'e-toast-danger',
        icon: 'e-error toast-icons',
      });
    }
  };

  // Get event type icon
  const getEventTypeIcon = (eventType: string): string => {
    switch (eventType) {
      case 'presentation': return '📊';
      case 'website': return '🌐';
      case 'webuntis': return '📅';
      case 'video': return '🎬';
      case 'message': return '💬';
      default: return '📄';
    }
  };

  // Get event type label
  const getEventTypeLabel = (eventType: string): string => {
    switch (eventType) {
      case 'presentation': return 'Präsentation';
      case 'website': return 'Website';
      case 'webuntis': return 'WebUntis';
      case 'video': return 'Video';
      case 'message': return 'Nachricht';
      default: return 'Inhalt';
    }
  };

  // Format time for display
  const formatEventTime = (dateStr: string): string => {
    try {
      // API returns UTC ISO strings without 'Z', so append 'Z' to parse as UTC
      const utcString = dateStr.endsWith('Z') ? dateStr : dateStr + 'Z';
      const date = new Date(utcString);
      if (isNaN(date.getTime())) return '—';
      return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
    } catch {
      return '—';
    }
  };

  // Format date for display
  const formatEventDate = (dateStr: string): string => {
    try {
      // API returns UTC ISO strings without 'Z', so append 'Z' to parse as UTC
      const utcString = dateStr.endsWith('Z') ? dateStr : dateStr + 'Z';
      const date = new Date(utcString);
      if (isNaN(date.getTime())) return '—';
      const today = new Date();
      const isToday = date.toDateString() === today.toDateString();
      
      if (isToday) {
        return 'Heute';
      }
      return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
    } catch {
      return '—';
    }
  };

  // Filter Gruppen basierend auf Status
  const getFilteredGroups = () => {
    return groups.filter(group => {
      const stats = getHealthStats(group);
      
      switch (filter) {
        case 'online':
          return stats.ratio === 1;
        case 'offline':
          return stats.ratio === 0;
        case 'warning':
          return stats.ratio > 0 && stats.ratio < 1;
        default:
          return true;
      }
    });
  };

  // Format date for holiday display
  const formatDate = (iso: string | null) => formatIsoDateForDisplay(iso);

  // Holiday Status Banner Component
  const HolidayStatusBanner = () => {
    if (holidayLoading) {
      return (
        <MessageComponent severity="Info" variant="Filled">
          Lade Ferienstatus ...
        </MessageComponent>
      );
    }
    if (holidayError) {
      return (
        <MessageComponent severity="Error" variant="Filled">
          Fehler beim Laden des Ferienstatus: {holidayError}
        </MessageComponent>
      );
    }
    if (!activePeriod) {
      return (
        <MessageComponent severity="Warning" variant="Outlined">
          ⚠️ Keine aktive akademische Periode gesetzt – Ferienplan nicht verknüpft.
        </MessageComponent>
      );
    }
    if (holidayOverlapCount > 0) {
      return (
        <MessageComponent severity="Success" variant="Filled">
          ✅ Ferienplan vorhanden für <strong>{activePeriod.displayName || activePeriod.name}</strong>: {holidayOverlapCount} Zeitraum{holidayOverlapCount === 1 ? '' : 'e'}
          {holidayFirst && holidayLast && (
            <> ({formatDate(holidayFirst)} – {formatDate(holidayLast)})</>
          )}
        </MessageComponent>
      );
    }
    return (
      <MessageComponent severity="Warning" variant="Filled">
        ⚠️ Kein Ferienplan für <strong>{activePeriod.displayName || activePeriod.name}</strong> importiert. Jetzt unter Einstellungen → 📥 Ferienkalender: Import/Anzeige.
      </MessageComponent>
    );
  };

  return (
    <div>
      <ToastComponent
        ref={toastRef}
        position={{ X: 'Right', Y: 'Top' }}
        timeOut={4000}
      />
      
      <header style={{ marginBottom: 24, paddingBottom: 16, borderBottom: '2px solid #d6c3a6' }}>
        <h2 style={{ fontSize: '1.75rem', fontWeight: 800, margin: 0, marginBottom: 8 }}>
          Dashboard
        </h2>
        <p style={{ color: '#666', fontSize: '0.95rem', margin: 0 }}>
          Übersicht aller Raumgruppen und deren Infoscreens
        </p>
      </header>

      {/* Holiday Status Banner */}
      {holidayBannerEnabled && (
        <div style={{ marginBottom: '20px' }}>
          <HolidayStatusBanner />
        </div>
      )}

      {/* Global Statistics Summary */}
      {(() => {
        const globalStats = getGlobalStats();
        return (
          <div className="e-card" style={{ 
            marginBottom: '24px',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'white',
            borderRadius: '8px',
            padding: '24px'
          }}>
            <div style={{ 
              display: 'grid', 
              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
              gap: '20px',
              alignItems: 'center'
            }}>
              <div>
                <div style={{ fontSize: '0.85rem', opacity: 0.9, marginBottom: '4px' }}>
                  Gesamt Infoscreens
                </div>
                <div style={{ fontSize: '2rem', fontWeight: 'bold' }}>
                  {globalStats.total}
                </div>
              </div>
              
              <div>
                <div style={{ fontSize: '0.85rem', opacity: 0.9, marginBottom: '4px' }}>
                  🟢 Online
                </div>
                <div style={{ fontSize: '2rem', fontWeight: 'bold' }}>
                  {globalStats.online}
                  <span style={{ fontSize: '1rem', marginLeft: '8px', opacity: 0.8 }}>
                    ({globalStats.total > 0 ? Math.round(globalStats.ratio * 100) : 0}%)
                  </span>
                </div>
              </div>

              <div>
                <div style={{ fontSize: '0.85rem', opacity: 0.9, marginBottom: '4px' }}>
                  🔴 Offline
                </div>
                <div style={{ fontSize: '2rem', fontWeight: 'bold' }}>
                  {globalStats.offline}
                </div>
              </div>

              <div>
                <div style={{ fontSize: '0.85rem', opacity: 0.9, marginBottom: '4px' }}>
                  ⚠️ Gruppen mit Warnungen
                </div>
                <div style={{ fontSize: '2rem', fontWeight: 'bold' }}>
                  {globalStats.warningGroups}
                </div>
              </div>

              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: '0.85rem', opacity: 0.9, marginBottom: '8px' }}>
                  Zuletzt aktualisiert: {getTimeSinceLastAlive(lastUpdate.toISOString())}
                </div>
                <ButtonComponent
                  cssClass="e-small e-info"
                  iconCss="e-icons e-refresh"
                  onClick={handleManualRefresh}
                >
                  Aktualisieren
                </ButtonComponent>
              </div>
            </div>
          </div>
        );
      })()}

      {/* Filter Buttons */}
      <div style={{ 
        display: 'flex', 
        gap: '12px', 
        marginBottom: '24px',
        flexWrap: 'wrap'
      }}>
        <ButtonComponent
          cssClass={filter === 'all' ? 'e-primary' : 'e-outline'}
          onClick={() => setFilter('all')}
        >
          Alle anzeigen ({groups.length})
        </ButtonComponent>
        <ButtonComponent
          cssClass={filter === 'online' ? 'e-success' : 'e-outline'}
          onClick={() => setFilter('online')}
        >
          🟢 Nur Online ({groups.filter(g => getHealthStats(g).ratio === 1).length})
        </ButtonComponent>
        <ButtonComponent
          cssClass={filter === 'offline' ? 'e-danger' : 'e-outline'}
          onClick={() => setFilter('offline')}
        >
          🔴 Nur Offline ({groups.filter(g => getHealthStats(g).ratio === 0).length})
        </ButtonComponent>
        <ButtonComponent
          cssClass={filter === 'warning' ? 'e-warning' : 'e-outline'}
          onClick={() => setFilter('warning')}
        >
          ⚠️ Mit Warnungen ({groups.filter(g => {
            const stats = getHealthStats(g);
            return stats.ratio > 0 && stats.ratio < 1;
          }).length})
        </ButtonComponent>
      </div>

      {/* Group Cards */}
      {(() => {
        const filteredGroups = getFilteredGroups();
        
        if (filteredGroups.length === 0) {
          return (
            <div className="e-card" style={{ padding: '40px', textAlign: 'center' }}>
              <div style={{ color: '#999', fontSize: '1.1rem' }}>
                {filter === 'all' 
                  ? 'Keine Raumgruppen gefunden'
                  : `Keine Gruppen mit Filter "${filter}" gefunden`
                }
              </div>
            </div>
          );
        }

        return (
          <div style={{ 
            display: 'grid', 
            gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))',
            gap: '24px'
          }}>
            {filteredGroups
              .sort((a, b) => {
                // 'Nicht zugeordnet' always comes last
                if (a.name === 'Nicht zugeordnet') return 1;
                if (b.name === 'Nicht zugeordnet') return -1;
                // Otherwise, sort alphabetically
                return a.name.localeCompare(b.name);
              })
              .map((group) => {
                const stats = getHealthStats(group);
                const isExpanded = expandedCards.has(group.id);
                
                return (
                  <div key={group.id} className="e-card" style={{ 
                    borderRadius: '8px',
                    overflow: 'hidden',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                    transition: 'all 0.3s ease',
                    border: `2px solid ${stats.statusColor}20`
                  }}>
                    {/* Card Header */}
                    <div className="e-card-header" style={{ 
                      background: `linear-gradient(135deg, ${stats.statusColor}15, ${stats.statusColor}05)`,
                      borderBottom: `3px solid ${stats.statusColor}`,
                      padding: '16px 20px'
                    }}>
                      <div className="e-card-header-title" style={{ 
                        fontSize: '1.25rem', 
                        fontWeight: '700',
                        color: '#333',
                        marginBottom: '8px'
                      }}>
                        {group.name}
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>
                        <span className={`e-badge e-badge-${stats.ratio === 1 ? 'success' : stats.ratio >= 0.5 ? 'warning' : 'danger'}`}>
                          {stats.statusText}
                        </span>
                        <span style={{ color: '#666', fontSize: '0.9rem' }}>
                          {stats.total} {stats.total === 1 ? 'Infoscreen' : 'Infoscreens'}
                        </span>
                      </div>
                    </div>

                    {/* Card Content - Statistics */}
                    <div className="e-card-content" style={{ padding: '20px' }}>
                      {/* Currently Active Event */}
                      {activeEvents[group.id] ? (
                        <div style={{ 
                          marginBottom: '16px',
                          padding: '12px',
                          backgroundColor: '#f0f7ff',
                          borderLeft: '4px solid #2196F3',
                          borderRadius: '4px'
                        }}>
                          <div style={{ 
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            marginBottom: '8px'
                          }}>
                            <div style={{ 
                              fontSize: '0.75rem', 
                              color: '#666', 
                              fontWeight: '600',
                              textTransform: 'uppercase',
                              letterSpacing: '0.5px'
                            }}>
                              🎯 Aktuell angezeigt
                            </div>
                            {activeEvents[group.id]?.isRecurring && (
                              <span style={{
                                fontSize: '0.75rem',
                                backgroundColor: '#e3f2fd',
                                color: '#1976d2',
                                padding: '2px 8px',
                                borderRadius: '12px',
                                fontWeight: '600'
                              }}>
                                🔄 Wiederkehrend
                              </span>
                            )}
                          </div>
                          <div style={{ 
                            fontSize: '0.95rem', 
                            fontWeight: '600',
                            color: '#333',
                            marginBottom: '6px',
                            display: 'flex',
                            alignItems: 'center',
                            gap: '6px'
                          }}>
                            <span>{getEventTypeIcon(activeEvents[group.id]?.event_type || 'unknown')}</span>
                            <span style={{ 
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              whiteSpace: 'nowrap',
                              flex: 1
                            }}>
                              {activeEvents[group.id]?.title || 'Unbenannter Event'}
                            </span>
                          </div>
                          <div style={{ 
                            fontSize: '0.8rem', 
                            color: '#666',
                            marginBottom: '6px'
                          }}>
                            {getEventTypeLabel(activeEvents[group.id]?.event_type || 'unknown')}
                          </div>
                          <div style={{ 
                            fontSize: '0.8rem', 
                            color: '#555',
                            display: 'flex',
                            alignItems: 'center',
                            gap: '8px',
                            flexWrap: 'wrap'
                          }}>
                            <span style={{ fontWeight: '500' }}>
                              📅 {activeEvents[group.id]?.start ? formatEventDate(activeEvents[group.id]!.start) : 'Kein Datum'}
                            </span>
                            <span>•</span>
                            <span>
                              🕐 {activeEvents[group.id]?.start && activeEvents[group.id]?.end 
                                ? `${formatEventTime(activeEvents[group.id]!.start)} - ${formatEventTime(activeEvents[group.id]!.end)}`
                                : 'Keine Zeit'}
                            </span>
                          </div>
                        </div>
                      ) : (
                        <div style={{ 
                          marginBottom: '16px',
                          padding: '12px',
                          backgroundColor: '#f5f5f5',
                          borderLeft: '4px solid #999',
                          borderRadius: '4px'
                        }}>
                          <div style={{ 
                            fontSize: '0.85rem', 
                            color: '#666',
                            fontStyle: 'italic'
                          }}>
                            📭 Kein aktiver Event
                          </div>
                        </div>
                      )}

                      {/* Health Bar */}
                      <div style={{ marginBottom: '20px' }}>
                        <div style={{ 
                          display: 'flex', 
                          justifyContent: 'space-between', 
                          marginBottom: '8px',
                          fontSize: '0.85rem',
                          color: '#666'
                        }}>
                          <span>🟢 Online: {stats.alive}</span>
                          <span>🔴 Offline: {stats.offline}</span>
                        </div>
                        <div style={{ 
                          height: '8px', 
                          backgroundColor: '#e0e0e0', 
                          borderRadius: '4px',
                          overflow: 'hidden'
                        }}>
                          <div style={{ 
                            height: '100%', 
                            width: `${stats.ratio * 100}%`, 
                            backgroundColor: stats.statusColor,
                            transition: 'width 0.5s ease'
                          }} />
                        </div>
                      </div>

                      {/* Action Buttons */}
                      <div style={{ display: 'flex', gap: '8px', marginBottom: isExpanded ? '16px' : '0' }}>
                        <ButtonComponent
                          cssClass="e-outline"
                          iconCss={isExpanded ? 'e-icons e-chevron-up' : 'e-icons e-chevron-down'}
                          onClick={() => toggleCard(group.id)}
                          style={{ flex: 1 }}
                        >
                          {isExpanded ? 'Details ausblenden' : 'Details anzeigen'}
                        </ButtonComponent>
                        
                        {stats.offline > 0 && (
                          <ButtonComponent
                            cssClass="e-danger e-small"
                            iconCss="e-icons e-refresh"
                            onClick={() => handleRestartAllOffline(group)}
                            title={`${stats.offline} offline Gerät(e) neu starten`}
                            style={{ flexShrink: 0 }}
                          >
                            Offline neustarten
                          </ButtonComponent>
                        )}
                      </div>

                      {/* Expanded Client List */}
                      {isExpanded && (
                        <div style={{ 
                          marginTop: '16px',
                          maxHeight: '400px',
                          overflowY: 'auto',
                          border: '1px solid #e0e0e0',
                          borderRadius: '4px'
                        }}>
                          {group.clients.length === 0 ? (
                            <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                              Keine Infoscreens in dieser Gruppe
                            </div>
                          ) : (
                            group.clients.map((client, index) => (
                              <div 
                                key={client.uuid}
                                style={{
                                  padding: '12px 16px',
                                  borderBottom: index < group.clients.length - 1 ? '1px solid #f0f0f0' : 'none',
                                  backgroundColor: client.is_alive ? '#f8fff9' : '#fff5f5',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'space-between',
                                  gap: '12px'
                                }}
                              >
                                <div style={{ flex: 1, minWidth: 0 }}>
                                  <div style={{ 
                                    fontWeight: '600', 
                                    fontSize: '0.95rem',
                                    marginBottom: '4px',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                  }}>
                                    {client.description || client.hostname || 'Unbenannt'}
                                  </div>
                                  <div style={{ 
                                    fontSize: '0.85rem', 
                                    color: '#666',
                                    display: 'flex',
                                    gap: '12px',
                                    flexWrap: 'wrap'
                                  }}>
                                    <span>📍 {client.ip || 'Keine IP'}</span>
                                    {client.hostname && (
                                      <span title={client.hostname} style={{ 
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap',
                                        maxWidth: '150px'
                                      }}>
                                        🖥️ {client.hostname}
                                      </span>
                                    )}
                                  </div>
                                  <div style={{ 
                                    fontSize: '0.75rem', 
                                    color: client.is_alive ? '#27ae60' : '#e74c3c',
                                    marginTop: '4px',
                                    fontWeight: '500'
                                  }}>
                                    {client.is_alive 
                                      ? `✓ Aktiv ${getTimeSinceLastAlive(client.last_alive)}`
                                      : `⚠ Offline seit ${getTimeSinceLastAlive(client.last_alive)}`
                                    }
                                  </div>
                                </div>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
                                  <span className={`e-badge e-badge-${client.is_alive ? 'success' : 'danger'}`}>
                                    {client.is_alive ? 'Online' : 'Offline'}
                                  </span>
                                  <ButtonComponent
                                    cssClass="e-small e-primary"
                                    iconCss="e-icons e-refresh"
                                    onClick={() => handleRestartClient(client.uuid, client.description || client.hostname || 'Infoscreen')}
                                    title="Neustart"
                                  />
                                </div>
                              </div>
                            ))
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
          </div>
        );
      })()}
    </div>
  );
};

export default Dashboard;