'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 { useCommunicationStats } from './_components/useCommunicationStats'
import { MatrixCard, JitsiCard } from './_components/ServiceCards'
import { TrafficSection } from './_components/TrafficSection'
import { ActiveMeetingsSection, ChatRoomsAndUsage } from './_components/MeetingsAndRooms'

export default function CommunicationPage() {
  const { stats, activeMeetings, recentRooms, loading, error, fetchStats } = useCommunicationStats()

  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">
        <MatrixCard stats={stats} />
        <JitsiCard stats={stats} />
      </div>

      {/* Traffic & Bandwidth Statistics for SysEleven Planning */}
      <TrafficSection stats={stats} />

      {/* Active Meetings */}
      <ActiveMeetingsSection
        activeMeetings={activeMeetings}
        loading={loading}
        onRefresh={fetchStats}
      />

      {/* Recent Chat Rooms & Usage */}
      <ChatRoomsAndUsage recentRooms={recentRooms} stats={stats} />

      {/* 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>
  )
}