'use client'

/**
 * Communication Admin Page
 *
 * Matrix & Jitsi Monitoring Dashboard
 * Provides system statistics, active calls, user metrics, and service health
 */

import AdminLayout from '@/components/admin/AdminLayout'
import { useEffect, useState, useCallback } from 'react'

interface MatrixStats {
  total_users: number
  active_users: number
  total_rooms: number
  active_rooms: number
  messages_today: number
  messages_this_week: number
  status: 'online' | 'offline' | 'degraded'
}

interface JitsiStats {
  active_meetings: number
  total_participants: number
  meetings_today: number
  average_duration_minutes: number
  peak_concurrent_users: number
  total_minutes_today: number
  status: 'online' | 'offline' | 'degraded'
}

interface TrafficStats {
  matrix: {
    bandwidth_in_mb: number
    bandwidth_out_mb: number
    messages_per_minute: number
    media_uploads_today: number
    media_size_mb: number
  }
  jitsi: {
    bandwidth_in_mb: number
    bandwidth_out_mb: number
    video_streams_active: number
    audio_streams_active: number
    estimated_hourly_gb: number
  }
  total: {
    bandwidth_in_mb: number
    bandwidth_out_mb: number
    estimated_monthly_gb: number
  }
}

interface CommunicationStats {
  matrix: MatrixStats
  jitsi: JitsiStats
  traffic?: TrafficStats
  last_updated: string
}

interface ActiveMeeting {
  room_name: string
  display_name: string
  participants: number
  started_at: string
  duration_minutes: number
}

interface RecentRoom {
  room_id: string
  name: string
  member_count: number
  last_activity: string
  room_type: 'class' | 'parent' | 'staff' | 'general'
}

export default function CommunicationPage() {
  const [stats, setStats] = useState<CommunicationStats | null>(null)
  const [activeMeetings, setActiveMeetings] = useState<ActiveMeeting[]>([])
  const [recentRooms, setRecentRooms] = useState<RecentRoom[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const API_BASE = '/api/admin/communication'

  const fetchStats = useCallback(async () => {
    try {
      const response = await fetch(`${API_BASE}/stats`)
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`)
      }
      const data = await response.json()
      setStats(data)
      setActiveMeetings(data.active_meetings || [])
      setRecentRooms(data.recent_rooms || [])
      setError(null)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Verbindungsfehler')
      // Set mock data for display purposes when API unavailable
      setStats({
        matrix: {
          total_users: 0,
          active_users: 0,
          total_rooms: 0,
          active_rooms: 0,
          messages_today: 0,
          messages_this_week: 0,
          status: 'offline'
        },
        jitsi: {
          active_meetings: 0,
          total_participants: 0,
          meetings_today: 0,
          average_duration_minutes: 0,
          peak_concurrent_users: 0,
          total_minutes_today: 0,
          status: 'offline'
        },
        last_updated: new Date().toISOString()
      })
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchStats()
  }, [fetchStats])

  // Auto-refresh every 15 seconds
  useEffect(() => {
    const interval = setInterval(fetchStats, 15000)
    return () => clearInterval(interval)
  }, [fetchStats])

  const getStatusBadge = (status: string) => {
    const baseClasses = 'px-3 py-1 rounded-full text-xs font-semibold uppercase'
    switch (status) {
      case 'online':
        return `${baseClasses} bg-green-100 text-green-800`
      case 'degraded':
        return `${baseClasses} bg-yellow-100 text-yellow-800`
      case 'offline':
        return `${baseClasses} bg-red-100 text-red-800`
      default:
        return `${baseClasses} bg-slate-100 text-slate-600`
    }
  }

  const getRoomTypeBadge = (type: string) => {
    const baseClasses = 'px-2 py-0.5 rounded text-xs font-medium'
    switch (type) {
      case 'class':
        return `${baseClasses} bg-blue-100 text-blue-700`
      case 'parent':
        return `${baseClasses} bg-purple-100 text-purple-700`
      case 'staff':
        return `${baseClasses} bg-orange-100 text-orange-700`
      default:
        return `${baseClasses} bg-slate-100 text-slate-600`
    }
  }

  const formatDuration = (minutes: number) => {
    if (minutes < 60) return `${Math.round(minutes)} Min.`
    const hours = Math.floor(minutes / 60)
    const mins = Math.round(minutes % 60)
    return `${hours}h ${mins}m`
  }

  const formatTimeAgo = (dateStr: string) => {
    const date = new Date(dateStr)
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()
    const diffMins = Math.floor(diffMs / 60000)

    if (diffMins < 1) return 'gerade eben'
    if (diffMins < 60) return `vor ${diffMins} Min.`
    if (diffMins < 1440) return `vor ${Math.floor(diffMins / 60)} Std.`
    return `vor ${Math.floor(diffMins / 1440)} Tagen`
  }

  // Traffic estimation helpers for SysEleven planning
  const calculateEstimatedTraffic = (direction: 'in' | 'out'): number => {
    const messages = stats?.matrix?.messages_today || 0
    const callMinutes = stats?.jitsi?.total_minutes_today || 0
    const participants = stats?.jitsi?.total_participants || 0

    // Estimates: ~2KB per message, ~1.5 Mbps per video participant
    const messageTrafficMB = messages * 0.002
    const videoTrafficMB = callMinutes * participants * 0.011 // ~660 KB/min per participant

    if (direction === 'in') {
      return messageTrafficMB * 0.3 + videoTrafficMB * 0.4 // Incoming is less (mostly receiving)
    }
    return messageTrafficMB * 0.7 + videoTrafficMB * 0.6 // Outgoing is more
  }

  const calculateHourlyEstimate = (): number => {
    const activeParticipants = stats?.jitsi?.total_participants || 0
    // ~1.5 Mbps per participant = ~0.675 GB/hour per participant
    return activeParticipants * 0.675
  }

  const calculateMonthlyEstimate = (): number => {
    const dailyCallMinutes = stats?.jitsi?.total_minutes_today || 0
    const avgParticipants = stats?.jitsi?.peak_concurrent_users || 1
    // Extrapolate: assume 22 working days, similar usage pattern
    const monthlyMinutes = dailyCallMinutes * 22
    // ~11 MB/min for video conference with participants
    return (monthlyMinutes * avgParticipants * 11) / 1024
  }

  const getResourceRecommendation = (): string => {
    const peakUsers = stats?.jitsi?.peak_concurrent_users || 0
    const monthlyGB = calculateMonthlyEstimate()

    if (monthlyGB < 10 || peakUsers < 5) {
      return 'Starter (1 vCPU, 2GB RAM, 100GB Traffic)'
    } else if (monthlyGB < 50 || peakUsers < 20) {
      return 'Standard (2 vCPU, 4GB RAM, 500GB Traffic)'
    } else if (monthlyGB < 200 || peakUsers < 50) {
      return 'Professional (4 vCPU, 8GB RAM, 2TB Traffic)'
    } else {
      return 'Enterprise (8+ vCPU, 16GB+ RAM, Unlimited Traffic)'
    }
  }

  return (
    <AdminLayout title="Kommunikation" description="Matrix & Jitsi Monitoring">
      {/* Service Status Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        {/* Matrix Status Card */}
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold text-slate-900">Matrix (Synapse)</h3>
                <p className="text-sm text-slate-500">E2EE Messaging</p>
              </div>
            </div>
            <span className={getStatusBadge(stats?.matrix.status || 'offline')}>
              {stats?.matrix.status || 'offline'}
            </span>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <div>
              <div className="text-2xl font-bold text-slate-900">{stats?.matrix.total_users || 0}</div>
              <div className="text-xs text-slate-500">Benutzer</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-slate-900">{stats?.matrix.active_users || 0}</div>
              <div className="text-xs text-slate-500">Aktiv</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-slate-900">{stats?.matrix.total_rooms || 0}</div>
              <div className="text-xs text-slate-500">Räume</div>
            </div>
          </div>
          <div className="mt-4 pt-4 border-t border-slate-100">
            <div className="flex justify-between text-sm">
              <span className="text-slate-500">Nachrichten heute</span>
              <span className="font-medium">{stats?.matrix.messages_today || 0}</span>
            </div>
            <div className="flex justify-between text-sm mt-1">
              <span className="text-slate-500">Diese Woche</span>
              <span className="font-medium">{stats?.matrix.messages_this_week || 0}</span>
            </div>
          </div>
        </div>

        {/* Jitsi Status Card */}
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold text-slate-900">Jitsi Meet</h3>
                <p className="text-sm text-slate-500">Videokonferenzen</p>
              </div>
            </div>
            <span className={getStatusBadge(stats?.jitsi.status || 'offline')}>
              {stats?.jitsi.status || 'offline'}
            </span>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <div>
              <div className="text-2xl font-bold text-green-600">{stats?.jitsi.active_meetings || 0}</div>
              <div className="text-xs text-slate-500">Live Calls</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-slate-900">{stats?.jitsi.total_participants || 0}</div>
              <div className="text-xs text-slate-500">Teilnehmer</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-slate-900">{stats?.jitsi.meetings_today || 0}</div>
              <div className="text-xs text-slate-500">Calls heute</div>
            </div>
          </div>
          <div className="mt-4 pt-4 border-t border-slate-100">
            <div className="flex justify-between text-sm">
              <span className="text-slate-500">Ø Dauer</span>
              <span className="font-medium">{formatDuration(stats?.jitsi.average_duration_minutes || 0)}</span>
            </div>
            <div className="flex justify-between text-sm mt-1">
              <span className="text-slate-500">Peak gleichzeitig</span>
              <span className="font-medium">{stats?.jitsi.peak_concurrent_users || 0} Nutzer</span>
            </div>
          </div>
        </div>
      </div>

      {/* Traffic & Bandwidth Statistics for SysEleven Planning */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
              <svg className="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
            <div>
              <h3 className="font-semibold text-slate-900">Traffic & Bandbreite</h3>
              <p className="text-sm text-slate-500">SysEleven Ressourcenplanung</p>
            </div>
          </div>
          <span className="px-3 py-1 rounded-full text-xs font-semibold uppercase bg-emerald-100 text-emerald-800">
            Live
          </span>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
          <div className="bg-slate-50 rounded-lg p-4">
            <div className="text-xs text-slate-500 mb-1">Eingehend (heute)</div>
            <div className="text-2xl font-bold text-slate-900">
              {stats?.traffic?.total?.bandwidth_in_mb?.toFixed(1) || calculateEstimatedTraffic('in').toFixed(1)} MB
            </div>
          </div>
          <div className="bg-slate-50 rounded-lg p-4">
            <div className="text-xs text-slate-500 mb-1">Ausgehend (heute)</div>
            <div className="text-2xl font-bold text-slate-900">
              {stats?.traffic?.total?.bandwidth_out_mb?.toFixed(1) || calculateEstimatedTraffic('out').toFixed(1)} MB
            </div>
          </div>
          <div className="bg-slate-50 rounded-lg p-4">
            <div className="text-xs text-slate-500 mb-1">Geschätzt/Stunde</div>
            <div className="text-2xl font-bold text-blue-600">
              {stats?.traffic?.jitsi?.estimated_hourly_gb?.toFixed(2) || calculateHourlyEstimate().toFixed(2)} GB
            </div>
          </div>
          <div className="bg-slate-50 rounded-lg p-4">
            <div className="text-xs text-slate-500 mb-1">Geschätzt/Monat</div>
            <div className="text-2xl font-bold text-emerald-600">
              {stats?.traffic?.total?.estimated_monthly_gb?.toFixed(1) || calculateMonthlyEstimate().toFixed(1)} GB
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Matrix Traffic */}
          <div className="border border-slate-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <div className="w-3 h-3 bg-purple-500 rounded-full"></div>
              <span className="text-sm font-medium text-slate-700">Matrix Messaging</span>
            </div>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-500">Nachrichten/Min</span>
                <span className="font-medium">{stats?.traffic?.matrix?.messages_per_minute || Math.round((stats?.matrix?.messages_today || 0) / (new Date().getHours() || 1) / 60)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Media Uploads heute</span>
                <span className="font-medium">{stats?.traffic?.matrix?.media_uploads_today || 0}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Media Größe</span>
                <span className="font-medium">{stats?.traffic?.matrix?.media_size_mb?.toFixed(1) || '0.0'} MB</span>
              </div>
            </div>
          </div>

          {/* Jitsi Traffic */}
          <div className="border border-slate-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
              <span className="text-sm font-medium text-slate-700">Jitsi Video</span>
            </div>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-500">Video Streams aktiv</span>
                <span className="font-medium">{stats?.traffic?.jitsi?.video_streams_active || (stats?.jitsi?.total_participants || 0)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Audio Streams aktiv</span>
                <span className="font-medium">{stats?.traffic?.jitsi?.audio_streams_active || (stats?.jitsi?.total_participants || 0)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Bitrate geschätzt</span>
                <span className="font-medium">{((stats?.jitsi?.total_participants || 0) * 1.5).toFixed(1)} Mbps</span>
              </div>
            </div>
          </div>
        </div>

        {/* SysEleven Resource Recommendations */}
        <div className="mt-4 p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
          <h4 className="text-sm font-semibold text-emerald-800 mb-2">SysEleven Empfehlung</h4>
          <div className="text-sm text-emerald-700">
            <p>Basierend auf aktuellem Traffic: <strong>{getResourceRecommendation()}</strong></p>
            <p className="mt-1 text-xs text-emerald-600">
              Peak Teilnehmer: {stats?.jitsi?.peak_concurrent_users || 0} |
              Ø Call-Dauer: {stats?.jitsi?.average_duration_minutes?.toFixed(0) || 0} Min. |
              Calls heute: {stats?.jitsi?.meetings_today || 0}
            </p>
          </div>
        </div>
      </div>

      {/* Active Meetings */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="font-semibold text-slate-900">Aktive Meetings</h3>
          <button
            onClick={fetchStats}
            disabled={loading}
            className="px-3 py-1.5 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-50"
          >
            {loading ? 'Lade...' : 'Aktualisieren'}
          </button>
        </div>

        {activeMeetings.length === 0 ? (
          <div className="text-center py-8 text-slate-500">
            <svg className="w-12 h-12 mx-auto mb-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
            <p>Keine aktiven Meetings</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="text-left text-xs text-slate-500 uppercase border-b border-slate-200">
                  <th className="pb-3 pr-4">Meeting</th>
                  <th className="pb-3 pr-4">Teilnehmer</th>
                  <th className="pb-3 pr-4">Gestartet</th>
                  <th className="pb-3">Dauer</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {activeMeetings.map((meeting, idx) => (
                  <tr key={idx} className="text-sm">
                    <td className="py-3 pr-4">
                      <div className="font-medium text-slate-900">{meeting.display_name}</div>
                      <div className="text-xs text-slate-500">{meeting.room_name}</div>
                    </td>
                    <td className="py-3 pr-4">
                      <span className="inline-flex items-center gap-1">
                        <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                        {meeting.participants}
                      </span>
                    </td>
                    <td className="py-3 pr-4 text-slate-500">{formatTimeAgo(meeting.started_at)}</td>
                    <td className="py-3 font-medium">{formatDuration(meeting.duration_minutes)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Recent Chat Rooms */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <h3 className="font-semibold text-slate-900 mb-4">Aktive Chat-Räume</h3>

          {recentRooms.length === 0 ? (
            <div className="text-center py-6 text-slate-500">
              <p>Keine aktiven Räume</p>
            </div>
          ) : (
            <div className="space-y-3">
              {recentRooms.slice(0, 5).map((room, idx) => (
                <div key={idx} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-slate-200 rounded-lg flex items-center justify-center">
                      <svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                    <div>
                      <div className="font-medium text-slate-900 text-sm">{room.name}</div>
                      <div className="text-xs text-slate-500">{room.member_count} Mitglieder</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className={getRoomTypeBadge(room.room_type)}>{room.room_type}</span>
                    <span className="text-xs text-slate-400">{formatTimeAgo(room.last_activity)}</span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Usage Statistics */}
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <h3 className="font-semibold text-slate-900 mb-4">Nutzungsstatistiken</h3>
          <div className="space-y-4">
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-slate-600">Call-Minuten heute</span>
                <span className="font-semibold">{stats?.jitsi.total_minutes_today || 0} Min.</span>
              </div>
              <div className="w-full bg-slate-100 rounded-full h-2">
                <div
                  className="bg-blue-600 h-2 rounded-full transition-all"
                  style={{ width: `${Math.min((stats?.jitsi.total_minutes_today || 0) / 500 * 100, 100)}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-slate-600">Aktive Chat-Räume</span>
                <span className="font-semibold">{stats?.matrix.active_rooms || 0} / {stats?.matrix.total_rooms || 0}</span>
              </div>
              <div className="w-full bg-slate-100 rounded-full h-2">
                <div
                  className="bg-purple-600 h-2 rounded-full transition-all"
                  style={{ width: `${stats?.matrix.total_rooms ? ((stats.matrix.active_rooms / stats.matrix.total_rooms) * 100) : 0}%` }}
                />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="text-slate-600">Aktive Nutzer</span>
                <span className="font-semibold">{stats?.matrix.active_users || 0} / {stats?.matrix.total_users || 0}</span>
              </div>
              <div className="w-full bg-slate-100 rounded-full h-2">
                <div
                  className="bg-green-600 h-2 rounded-full transition-all"
                  style={{ width: `${stats?.matrix.total_users ? ((stats.matrix.active_users / stats.matrix.total_users) * 100) : 0}%` }}
                />
              </div>
            </div>
          </div>

          {/* Quick Actions */}
          <div className="mt-6 pt-4 border-t border-slate-100">
            <h4 className="text-sm font-medium text-slate-700 mb-3">Schnellaktionen</h4>
            <div className="flex flex-wrap gap-2">
              <a
                href="http://localhost:8448/_synapse/admin"
                target="_blank"
                rel="noopener noreferrer"
                className="px-3 py-1.5 text-sm bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors"
              >
                Synapse Admin
              </a>
              <a
                href="http://localhost:8443"
                target="_blank"
                rel="noopener noreferrer"
                className="px-3 py-1.5 text-sm bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors"
              >
                Jitsi Meet
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Connection Info */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
        <div className="flex gap-3">
          <svg className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div>
            <h4 className="font-semibold text-blue-900">Service Konfiguration</h4>
            <p className="text-sm text-blue-800 mt-1">
              <strong>Matrix Homeserver:</strong> http://localhost:8448 (Synapse)<br />
              <strong>Jitsi Meet:</strong> http://localhost:8443<br />
              <strong>Auto-Refresh:</strong> Alle 15 Sekunden
            </p>
            {error && (
              <p className="text-sm text-red-600 mt-2">
                <strong>Fehler:</strong> {error} - API-Proxy nicht verfügbar
              </p>
            )}
            {stats?.last_updated && (
              <p className="text-xs text-blue-600 mt-2">
                Letzte Aktualisierung: {new Date(stats.last_updated).toLocaleString('de-DE')}
              </p>
            )}
          </div>
        </div>
      </div>
    </AdminLayout>
  )
}