@if (isLoading()) {
  <div class="flex justify-center items-center py-12">
    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600"></div>
    <span class="ml-3 text-slate-500">Lade Daten...</span>
  </div>
} @else if (error()) {
  <div class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
    <p class="text-red-600">{{ error() }}</p>
  </div>
} @else if (role === 'ADMIN' && adminStats(); as stats) {
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-500">Energiegemeinschaften</p>
      <p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.totalCommunities }}</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-500">Ausstehende Freischaltungen</p>
      <p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.pendingUsers }}</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-500">Offene Mitgliedsanträge</p>
      <p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.pendingMemberships }}</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
      <p class="text-sm text-slate-500">Aktive Mitgliedschaften</p>
      <p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.totalActiveMemberships }}</p>
    </div>
  </div>
} @else if (userStats(); as stats) {
  <div class="space-y-6">
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
      <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
        <p class="text-sm text-slate-500">Meine Zählpunkte</p>
        <p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.totalMeteringPoints }}</p>
      </div>
      <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
        <p class="text-sm text-slate-500">Aktive Mitgliedschaften</p>
        <p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.activeMemberships }}</p>
      </div>
      <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
        <p class="text-sm text-slate-500">Offene Anfragen</p>
        <p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.pendingMemberships }}</p>
      </div>
    </div>

    @if (meteringData(); as data) {
      @if (data.meteringPoints.length > 0) {
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold text-slate-800">Verbrauch & Erzeugung</h2>
            <div class="flex gap-2">
              <button
                (click)="setRange(7)"
                [class]="selectedDays() === 7 ? 'px-3 py-2 text-sm rounded-lg bg-emerald-600 text-white' : 'px-3 py-2 text-sm rounded-lg border border-slate-300 hover:bg-slate-50'">
                7 Tage
              </button>
              <button
                (click)="setRange(30)"
                [class]="selectedDays() === 30 ? 'px-3 py-2 text-sm rounded-lg bg-emerald-600 text-white' : 'px-3 py-2 text-sm rounded-lg border border-slate-300 hover:bg-slate-50'">
                30 Tage
              </button>
              <button
                (click)="setRange(90)"
                [class]="selectedDays() === 90 ? 'px-3 py-2 text-sm rounded-lg bg-emerald-600 text-white' : 'px-3 py-2 text-sm rounded-lg border border-slate-300 hover:bg-slate-50'">
                90 Tage
              </button>
            </div>
          </div>
          @if (chartOptions()) {
            <div echarts [options]="chartOptions()" class="h-[400px]"></div>
          } @else {
            <p class="text-slate-500 text-center py-8">Keine Daten im ausgewählten Zeitraum vorhanden.</p>
          }
        </div>
      }
    }
  </div>
}