<app-admin-layout>
<section class="admin-page">
  <div class="admin-container">
    
    <!-- Header Actions -->
    <div class="admin-page-header">
      <div class="header-info">
        <span class="admin-badge">{{ faqs.length }} FAQs</span>
        <span class="admin-badge admin-badge--success" *ngIf="!isLoading">
          {{ publishedCount }} veröffentlicht
        </span>
      </div>
      <div class="admin-header-actions">
        <button class="admin-btn admin-btn--secondary" (click)="openImportModal()">
          <span class="material-symbols-outlined">upload</span>
          Import JSON
        </button>
        <button class="admin-btn admin-btn--secondary" (click)="exportFaqs()">
          <span class="material-symbols-outlined">download</span>
          Export JSON
        </button>
        <button class="admin-btn admin-btn--primary" (click)="openCreateEditor()">
          <span class="material-symbols-outlined">add</span>
          Neue FAQ
        </button>
      </div>
    </div>

    <!-- Loading State -->
    <div class="admin-loading-state" *ngIf="isLoading">
      <div class="admin-spinner"></div>
      <p>FAQs werden geladen...</p>
    </div>

    <!-- Empty State -->
    <div class="admin-empty-state" *ngIf="!isLoading && faqs.length === 0">
      <span class="material-symbols-outlined state-icon">quiz</span>
      <h3>Keine FAQs vorhanden</h3>
      <p>Erstelle deine erste FAQ oder importiere bestehende Daten.</p>
      <div class="admin-header-actions">
        <button class="admin-btn admin-btn--primary" (click)="openCreateEditor()">
          <span class="material-symbols-outlined">add</span>
          Neue FAQ erstellen
        </button>
        <button class="admin-btn admin-btn--secondary" (click)="openImportModal()">
          <span class="material-symbols-outlined">upload</span>
          JSON importieren
        </button>
      </div>
    </div>

    <!-- FAQ List -->
    <div class="admin-list" *ngIf="!isLoading && faqs.length > 0">
      <div class="admin-card" *ngFor="let faq of faqs; trackBy: trackById" 
           [class.faq-card--unpublished]="!faq.isPublished">
        
        <div class="admin-card__header">
          <div class="faq-card__status">
            <span class="admin-status-dot" [class.admin-status-dot--active]="faq.isPublished"></span>
            <span class="status-text">{{ faq.isPublished ? 'Veröffentlicht' : 'Entwurf' }}</span>
          </div>
          <span class="admin-badge">{{ faq.slug }}</span>
        </div>

        <div class="admin-card__body">
          <h3 class="faq-card__question">{{ faq.question }}</h3>

          <div class="faq-card__answers">
            <p *ngFor="let answer of faq.answers.slice(0, 2)">{{ answer }}</p>
            <span class="more-indicator" *ngIf="faq.answers.length > 2">
              +{{ faq.answers.length - 2 }} weitere Antworten
            </span>
          </div>

          <div class="faq-card__meta" *ngIf="faq.listItems && faq.listItems.length > 0">
            <span class="material-symbols-outlined">list</span>
            {{ faq.listItems.length }} Listenpunkte
          </div>
        </div>

        <div class="admin-card__footer">
          <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="openEditEditor(faq)" title="Bearbeiten">
            <span class="material-symbols-outlined">edit</span>
          </button>
          <button class="admin-btn admin-btn--icon admin-btn--ghost" (click)="togglePublish(faq)" 
                  [title]="faq.isPublished ? 'Verstecken' : 'Veröffentlichen'">
            <span class="material-symbols-outlined">
              {{ faq.isPublished ? 'visibility_off' : 'visibility' }}
            </span>
          </button>
          <button class="admin-btn admin-btn--icon admin-btn--danger" (click)="deleteFaq(faq)" title="Löschen">
            <span class="material-symbols-outlined">delete</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Editor Modal -->
    <div class="admin-modal-overlay" *ngIf="showEditor" (click)="closeEditor()">
      <div class="admin-modal admin-modal--lg" (click)="$event.stopPropagation()">
        <div class="admin-modal-header">
          <h2>{{ editingFaq ? 'FAQ bearbeiten' : 'Neue FAQ erstellen' }}</h2>
          <button class="close-btn" (click)="closeEditor()">
            <span class="material-symbols-outlined">close</span>
          </button>
        </div>

        <div class="admin-modal-body">
          <form (ngSubmit)="saveFaq()" #faqForm="ngForm">
            
            <!-- Basic Info -->
            <div class="form-section">
              <h3>Grunddaten</h3>
              
              <div class="admin-form-group">
                <label for="question">Frage *</label>
                <input 
                  type="text" 
                  id="question" 
                  name="question"
                  class="admin-input"
                  [(ngModel)]="formModel.question"
                  (blur)="generateSlug()"
                  placeholder="z.B. Wie starten wir?"
                  required
                />
              </div>

              <div class="admin-form-group">
                <label for="slug">Slug *</label>
                <input 
                  type="text" 
                  id="slug" 
                  name="slug"
                  class="admin-input"
                  [(ngModel)]="formModel.slug"
                  placeholder="wie-starten-wir"
                  required
                />
                <span class="admin-help-text">Eindeutiger Identifier (URL-freundlich)</span>
              </div>

              <div class="form-row">
                <div class="admin-form-group">
                  <label for="sortOrder">Sortierung</label>
                  <input 
                    type="number" 
                    id="sortOrder" 
                    name="sortOrder"
                    class="admin-input"
                    [(ngModel)]="formModel.sortOrder"
                  />
                </div>

                <div class="admin-form-group">
                  <label for="category">Kategorie</label>
                  <input 
                    type="text" 
                    id="category" 
                    name="category"
                    class="admin-input"
                    [(ngModel)]="formModel.category"
                    placeholder="Optional"
                  />
                </div>
              </div>

              <div class="admin-form-group">
                <label class="checkbox-label">
                  <input 
                    type="checkbox" 
                    name="isPublished"
                    [(ngModel)]="formModel.isPublished"
                  />
                  <span class="checkbox-custom"></span>
                  <span>Veröffentlicht</span>
                </label>
              </div>
            </div>

            <!-- Answers -->
            <div class="form-section">
              <h3>Antworten *</h3>
              <p class="admin-help-text">Mindestens eine Antwort erforderlich. Jeder Eintrag wird als Absatz angezeigt.</p>

              <div class="list-manager">
                <div class="admin-list">
                  <div class="admin-list-item" *ngFor="let answer of formModel.answers; let i = index">
                    <span class="list-item__number">{{ i + 1 }}</span>
                    <span class="list-item__text">{{ answer }}</span>
                    <div class="admin-header-actions">
                      <button type="button" class="admin-btn admin-btn--icon admin-btn--sm admin-btn--ghost" 
                              (click)="moveAnswerUp(i)" [disabled]="i === 0">
                        <span class="material-symbols-outlined">arrow_upward</span>
                      </button>
                      <button type="button" class="admin-btn admin-btn--icon admin-btn--sm admin-btn--ghost" 
                              (click)="moveAnswerDown(i)" 
                              [disabled]="i === formModel.answers.length - 1">
                        <span class="material-symbols-outlined">arrow_downward</span>
                      </button>
                      <button type="button" class="admin-btn admin-btn--icon admin-btn--sm admin-btn--danger" 
                              (click)="removeAnswer(i)">
                        <span class="material-symbols-outlined">close</span>
                      </button>
                    </div>
                  </div>
                </div>

                <div class="list-add">
                  <textarea 
                    [(ngModel)]="newAnswer"
                    name="newAnswer"
                    class="admin-textarea"
                    placeholder="Neue Antwort eingeben..."
                    rows="2"
                    (keydown.enter)="$event.preventDefault(); addAnswer()"
                  ></textarea>
                  <button type="button" class="admin-btn admin-btn--secondary" (click)="addAnswer()">
                    <span class="material-symbols-outlined">add</span>
                    Hinzufügen
                  </button>
                </div>
              </div>
            </div>

            <!-- List Items -->
            <div class="form-section">
              <h3>Aufzählungspunkte (optional)</h3>
              <p class="admin-help-text">Werden als Bullet-Liste unter den Antworten angezeigt.</p>

              <div class="list-manager">
                <div class="admin-list" *ngIf="formModel.listItems.length > 0">
                  <div class="admin-list-item" *ngFor="let item of formModel.listItems; let i = index">
                    <span class="list-item__bullet">•</span>
                    <span class="list-item__text">{{ item }}</span>
                    <button type="button" class="admin-btn admin-btn--icon admin-btn--sm admin-btn--danger" 
                            (click)="removeListItem(i)">
                      <span class="material-symbols-outlined">close</span>
                    </button>
                  </div>
                </div>

                <div class="list-add list-add--inline">
                  <input 
                    type="text"
                    class="admin-input"
                    [(ngModel)]="newListItem"
                    name="newListItem"
                    placeholder="Neuen Punkt eingeben..."
                    (keydown.enter)="$event.preventDefault(); addListItem()"
                  />
                  <button type="button" class="admin-btn admin-btn--secondary" (click)="addListItem()">
                    <span class="material-symbols-outlined">add</span>
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>

        <div class="admin-modal-footer">
          <button type="button" class="admin-btn admin-btn--secondary" (click)="closeEditor()">
            Abbrechen
          </button>
          <button type="button" class="admin-btn admin-btn--primary" (click)="saveFaq()" [disabled]="isSaving">
            <span *ngIf="!isSaving">
              <span class="material-symbols-outlined">save</span>
              {{ editingFaq ? 'Speichern' : 'Erstellen' }}
            </span>
            <span *ngIf="isSaving" class="loading-content">
              <div class="admin-spinner" style="width: 16px; height: 16px;"></div>
              Wird gespeichert...
            </span>
          </button>
        </div>
      </div>
    </div>

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

        <div class="admin-modal-body">
          <p class="import-hint">
            Füge hier JSON ein. Unterstützte Formate:
          </p>
          <ul class="format-hints">
            <li><code>[{{ '{' }} "slug": "...", "question": "...", "answers": [...] {{ '}' }}]</code></li>
            <li><code>{{ '{' }} "faqs": [...] {{ '}' }}</code></li>
            <li>Legacy: <code>[{{ '{' }} "id": "...", "q": "...", "a": [...] {{ '}' }}]</code></li>
          </ul>

          <div class="admin-form-group">
            <label for="importJson">JSON Daten</label>
            <textarea 
              id="importJson"
              class="admin-textarea"
              [(ngModel)]="importJson"
              rows="12"
              placeholder='[
  {
    "slug": "beispiel",
    "question": "Was ist das?",
    "answers": ["Das ist ein Beispiel."],
    "listItems": ["Punkt 1", "Punkt 2"]
  }
]'
            ></textarea>
          </div>

          <div class="admin-form-group">
            <label class="checkbox-label">
              <input type="checkbox" [(ngModel)]="importOverwrite" />
              <span class="checkbox-custom"></span>
              <span>Existierende FAQs überschreiben (gleicher Slug)</span>
            </label>
          </div>
        </div>

        <div class="admin-modal-footer">
          <button type="button" class="admin-btn admin-btn--secondary" (click)="closeImportModal()">
            Abbrechen
          </button>
          <button type="button" class="admin-btn admin-btn--primary" (click)="importFaqs()" [disabled]="isSaving">
            <span *ngIf="!isSaving">
              <span class="material-symbols-outlined">upload</span>
              Importieren
            </span>
            <span *ngIf="isSaving" class="loading-content">
              <div class="admin-spinner" style="width: 16px; height: 16px;"></div>
              Wird importiert...
            </span>
          </button>
        </div>
      </div>
    </div>

  </div>
</section>
</app-admin-layout>