<app-admin-layout>
<section class="admin-page">
  <div class="admin-container">

    <!-- Header mit Stats -->
    <div class="admin-page-header">
      <div class="admin-stats-row">
        <div class="admin-stat-chip">
          <span class="stat-value">{{ categories.length }}</span>
          <span class="stat-label">Kategorien</span>
        </div>
        <div class="admin-stat-chip admin-stat-chip--success">
          <span class="stat-value">{{ publishedCategoriesCount }}</span>
          <span class="stat-label">Veröffentlicht</span>
        </div>
        <div class="admin-stat-chip admin-stat-chip--primary">
          <span class="stat-value">{{ totalServicesCount }}</span>
          <span class="stat-label">Services</span>
        </div>
        <div class="admin-stat-chip admin-stat-chip--info">
          <span class="stat-value">{{ publishedServicesCount }}</span>
          <span class="stat-label">Services veröff.</span>
        </div>
      </div>

      <div class="admin-header-actions">
        <button class="admin-btn admin-btn--ghost" (click)="doExport()">
          <span class="material-symbols-outlined">download</span>
          Export
        </button>
        <button class="admin-btn admin-btn--ghost" (click)="openImportModal()">
          <span class="material-symbols-outlined">upload</span>
          Import
        </button>
      </div>
    </div>

    <!-- Tab Navigation -->
    <div class="admin-tabs">
      <button 
        class="admin-tab" 
        [class.active]="activeTab === 'categories'"
        (click)="setTab('categories')">
        <span class="material-symbols-outlined">category</span>
        Kategorien
      </button>
      <button 
        class="admin-tab" 
        [class.active]="activeTab === 'services'"
        (click)="setTab('services')">
        <span class="material-symbols-outlined">build</span>
        Services
      </button>
    </div>

    <!-- Loading -->
    <div class="admin-loading-state" *ngIf="isLoading">
      <div class="admin-spinner"></div>
      <p>Lade Daten...</p>
    </div>

    <!-- CATEGORIES TAB -->
    <div class="tab-content" *ngIf="!isLoading && activeTab === 'categories'">
      <div class="admin-section-header">
        <h2>Kategorien</h2>
        <button class="admin-btn admin-btn--primary" (click)="openCreateCategory()">
          <span class="material-symbols-outlined">add</span>
          Neue Kategorie
        </button>
      </div>

      <div class="admin-empty-state" *ngIf="categories.length === 0">
        <span class="material-symbols-outlined state-icon">folder_off</span>
        <h3>Keine Kategorien</h3>
        <p>Erstelle die erste Kategorie oder importiere Daten.</p>
      </div>

      <div class="admin-list" *ngIf="categories.length > 0">
        <div class="admin-card" *ngFor="let cat of categories">
          <div class="admin-card__body category-info">
            <div class="category-icon" [class.unpublished]="!cat.isPublished">
              <span class="material-symbols-outlined">{{ cat.materialIcon }}</span>
            </div>
            <div class="category-details">
              <h3>{{ cat.name }}</h3>
              <p>{{ cat.subtitle }}</p>
              <div class="category-meta">
                <span class="admin-badge">{{ cat.slug }}</span>
                <span class="admin-badge">{{ cat.services.length }} Services</span>
                <span class="admin-badge" [class.admin-badge--success]="cat.isPublished" [class.admin-badge--warning]="!cat.isPublished">
                  {{ cat.isPublished ? 'Veröffentlicht' : 'Versteckt' }}
                </span>
              </div>
            </div>
          </div>
          <div class="admin-card__footer">
            <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="toggleCategoryPublish(cat)" 
                    [title]="cat.isPublished ? 'Verstecken' : 'Veröffentlichen'">
              <span class="material-symbols-outlined">
                {{ cat.isPublished ? 'visibility_off' : 'visibility' }}
              </span>
            </button>
            <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="openEditCategory(cat)" title="Bearbeiten">
              <span class="material-symbols-outlined">edit</span>
            </button>
            <button class="admin-btn admin-btn--icon admin-btn--danger" (click)="deleteCategory(cat)" title="Löschen">
              <span class="material-symbols-outlined">delete</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- SERVICES TAB -->
    <div class="tab-content" *ngIf="!isLoading && activeTab === 'services'">
      <div class="admin-section-header">
        <h2>Services</h2>
        <button class="admin-btn admin-btn--primary" (click)="openCreateService()">
          <span class="material-symbols-outlined">add</span>
          Neuer Service
        </button>
      </div>

      <div class="admin-empty-state" *ngIf="categories.length === 0">
        <span class="material-symbols-outlined state-icon">build_circle</span>
        <h3>Keine Services</h3>
        <p>Erstelle zuerst eine Kategorie.</p>
      </div>

      <!-- Services gruppiert nach Kategorien -->
      <div class="services-by-category" *ngIf="categories.length > 0">
        <div class="category-group" *ngFor="let cat of categories">
          <div class="category-group-header" (click)="toggleCategoryExpand(cat.id)">
            <div class="category-group-info">
              <span class="material-symbols-outlined icon">{{ cat.materialIcon }}</span>
              <span class="name">{{ cat.name }}</span>
              <span class="admin-badge">{{ cat.services.length }}</span>
            </div>
            <div class="category-group-actions">
              <button class="admin-btn admin-btn--sm admin-btn--ghost" (click)="openCreateService(cat.id); $event.stopPropagation()">
                <span class="material-symbols-outlined">add</span>
              </button>
              <span class="material-symbols-outlined expand-icon" 
                    [class.expanded]="isCategoryExpanded(cat.id)">
                expand_more
              </span>
            </div>
          </div>

          <div class="admin-list" *ngIf="isCategoryExpanded(cat.id)">
            <div class="admin-empty-state" *ngIf="cat.services.length === 0" style="padding: 1rem;">
              <p>Keine Services in dieser Kategorie</p>
            </div>

            <div class="admin-card" *ngFor="let svc of cat.services" [class.unpublished]="!svc.isPublished">
              <div class="admin-card__body service-info">
                <div class="service-icon">{{ svc.icon }}</div>
                <div class="service-details">
                  <h4>{{ svc.title }}</h4>
                  <p>{{ svc.description }}</p>
                  <div class="service-meta">
                    <span class="admin-badge">{{ svc.slug }}</span>
                    <span class="admin-filter-chips" *ngIf="svc.tags.length > 0">
                      <span class="admin-chip" *ngFor="let tag of svc.tags.slice(0, 3)">{{ tag }}</span>
                      <span class="admin-chip" *ngIf="svc.tags.length > 3">+{{ svc.tags.length - 3 }}</span>
                    </span>
                  </div>
                </div>
              </div>
              <div class="admin-card__footer">
                <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="toggleServicePublish(svc)"
                        [title]="svc.isPublished ? 'Verstecken' : 'Veröffentlichen'">
                  <span class="material-symbols-outlined">
                    {{ svc.isPublished ? 'visibility_off' : 'visibility' }}
                  </span>
                </button>
                <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="openEditService(svc)" title="Bearbeiten">
                  <span class="material-symbols-outlined">edit</span>
                </button>
                <button class="admin-btn admin-btn--icon admin-btn--danger" (click)="deleteService(svc)" title="Löschen">
                  <span class="material-symbols-outlined">delete</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<!-- ===== CATEGORY EDITOR MODAL ===== -->
<div class="admin-modal-overlay" *ngIf="showCategoryEditor" (click)="closeCategoryEditor()">
  <div class="admin-modal" (click)="$event.stopPropagation()">
    <div class="admin-modal-header">
      <h2>{{ editingCategory ? 'Kategorie bearbeiten' : 'Neue Kategorie' }}</h2>
      <button class="close-btn" (click)="closeCategoryEditor()">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>

    <div class="admin-modal-body">
      <div class="admin-form-group">
        <label>Name *</label>
        <input type="text" class="admin-input" [(ngModel)]="categoryForm.name" 
               (ngModelChange)="onCategoryNameChange()" 
               placeholder="z.B. Hardware" />
      </div>

      <div class="admin-form-group">
        <label>Slug *</label>
        <input type="text" class="admin-input" [(ngModel)]="categoryForm.slug" placeholder="z.B. hardware" />
      </div>

      <div class="admin-form-group">
        <label>Untertitel</label>
        <input type="text" class="admin-input" [(ngModel)]="categoryForm.subtitle" 
               placeholder="z.B. Computer, Laptops & Geräte" />
      </div>

      <div class="admin-form-group">
        <label>Material Icon</label>
        <input type="text" class="admin-input" [(ngModel)]="categoryForm.materialIcon" placeholder="z.B. memory" />
        <span class="admin-help-text">
          <a href="https://fonts.google.com/icons" target="_blank" rel="noopener">
            Icons durchsuchen
          </a>
        </span>
      </div>

      <div class="form-row">
        <div class="admin-form-group">
          <label>Sortierung</label>
          <input type="number" class="admin-input" [(ngModel)]="categoryForm.sortOrder" />
        </div>
        <div class="admin-form-group checkbox-group">
          <label>
            <input type="checkbox" [(ngModel)]="categoryForm.isPublished" />
            Veröffentlicht
          </label>
        </div>
      </div>
    </div>

    <div class="admin-modal-footer">
      <button class="admin-btn admin-btn--ghost" (click)="closeCategoryEditor()">Abbrechen</button>
      <button class="admin-btn admin-btn--primary" (click)="saveCategory()" [disabled]="isSaving">
        {{ isSaving ? 'Speichern...' : 'Speichern' }}
      </button>
    </div>
  </div>
</div>

<!-- ===== SERVICE EDITOR MODAL ===== -->
<div class="admin-modal-overlay" *ngIf="showServiceEditor" (click)="closeServiceEditor()">
  <div class="admin-modal admin-modal--lg" (click)="$event.stopPropagation()">
    <div class="admin-modal-header">
      <h2>{{ editingService ? 'Service bearbeiten' : 'Neuer Service' }}</h2>
      <button class="close-btn" (click)="closeServiceEditor()">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>

    <div class="admin-modal-body">
      <div class="form-row">
        <div class="admin-form-group">
          <label>Titel *</label>
          <input type="text" class="admin-input" [(ngModel)]="serviceForm.title" 
                 (ngModelChange)="onServiceTitleChange()"
                 placeholder="z.B. PC & Laptop Reparatur" />
        </div>
        <div class="admin-form-group" style="max-width: 100px;">
          <label>Icon (Emoji)</label>
          <input type="text" class="admin-input" [(ngModel)]="serviceForm.icon" placeholder="🔧" />
        </div>
      </div>

      <div class="form-row">
        <div class="admin-form-group">
          <label>Slug *</label>
          <input type="text" class="admin-input" [(ngModel)]="serviceForm.slug" placeholder="pc-reparatur" />
        </div>
        <div class="admin-form-group">
          <label>Kategorie *</label>
          <select class="admin-select" [(ngModel)]="serviceForm.categoryId">
            <option value="">-- Kategorie wählen --</option>
            <option *ngFor="let cat of categories" [value]="cat.id">{{ cat.name }}</option>
          </select>
        </div>
      </div>

      <div class="admin-form-group">
        <label>Kurzbeschreibung</label>
        <input type="text" class="admin-input" [(ngModel)]="serviceForm.description" 
               placeholder="Startet nicht, stürzt ab, wird heiß – wir finden das Problem." />
      </div>

      <div class="admin-form-group">
        <label>Langbeschreibung</label>
        <textarea class="admin-textarea" [(ngModel)]="serviceForm.longDescription" rows="4"
                  placeholder="Ausführliche Beschreibung des Services..."></textarea>
      </div>

      <div class="admin-form-group">
        <label>Keywords (für Suche)</label>
        <input type="text" class="admin-input" [(ngModel)]="serviceForm.keywords" 
               placeholder="pc reparatur computer laptop notebook reparieren kaputt defekt" />
      </div>

      <div class="admin-form-group">
        <label>Tags</label>
        <div class="tags-editor">
          <div class="admin-filter-chips">
            <span class="admin-chip" *ngFor="let tag of serviceForm.tags; let i = index">
              {{ tag }}
              <button type="button" (click)="removeTag(i)">×</button>
            </span>
          </div>
          <div class="tag-input">
            <input type="text" class="admin-input" [(ngModel)]="newTag" placeholder="Neuer Tag..."
                   (keydown.enter)="addTag(); $event.preventDefault()" />
            <button type="button" class="admin-btn admin-btn--sm admin-btn--secondary" (click)="addTag()">Hinzufügen</button>
          </div>
        </div>
      </div>

      <div class="form-row">
        <div class="admin-form-group">
          <label>Sortierung</label>
          <input type="number" class="admin-input" [(ngModel)]="serviceForm.sortOrder" />
        </div>
        <div class="admin-form-group checkbox-group">
          <label>
            <input type="checkbox" [(ngModel)]="serviceForm.isPublished" />
            Veröffentlicht
          </label>
        </div>
      </div>
    </div>

    <div class="admin-modal-footer">
      <button class="admin-btn admin-btn--ghost" (click)="closeServiceEditor()">Abbrechen</button>
      <button class="admin-btn admin-btn--primary" (click)="saveService()" [disabled]="isSaving">
        {{ isSaving ? 'Speichern...' : 'Speichern' }}
      </button>
    </div>
  </div>
</div>

<!-- ===== IMPORT MODAL ===== -->
<div class="admin-modal-overlay" *ngIf="showImportModal" (click)="closeImportModal()">
  <div class="admin-modal admin-modal--lg" (click)="$event.stopPropagation()">
    <div class="admin-modal-header">
      <h2>Services importieren</h2>
      <button class="close-btn" (click)="closeImportModal()">
        <span class="material-symbols-outlined">close</span>
      </button>
    </div>

    <div class="admin-modal-body">
      <div class="admin-form-group">
        <label>JSON-Daten</label>
        <textarea class="admin-textarea" [(ngModel)]="importJson" rows="12" 
                  placeholder='{"categories": [{"slug": "hardware", "name": "Hardware", ...}]}'></textarea>
      </div>

      <div class="admin-form-group checkbox-group">
        <label>
          <input type="checkbox" [(ngModel)]="importOverwrite" />
          Bestehende Einträge überschreiben
        </label>
      </div>
    </div>

    <div class="admin-modal-footer">
      <button class="admin-btn admin-btn--ghost" (click)="closeImportModal()">Abbrechen</button>
      <button class="admin-btn admin-btn--primary" (click)="doImport()" [disabled]="isSaving || !importJson.trim()">
        {{ isSaving ? 'Importiere...' : 'Importieren' }}
      </button>
    </div>
  </div>
</div>
</app-admin-layout>