import {
  Component,
  Inject,
  OnInit,
  PLATFORM_ID,
  Renderer2,
} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { CommonModule } from '@angular/common';
import { CardComponent } from '../../../../shared/components/ui/card/card.component';
// Wir müssen KpiColor hier importieren, um es als Typ verwenden zu können
import {
  KpiCardComponent,
  KpiColor,
} from '../../../../shared/components/data-display/kpi-card/kpi-card.component';
import {
  OrdersTableComponent,
  Order,
} from '../../../../shared/components/data-display/orders-table/orders-table.component';
import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
import { FormGroupComponent } from '../../../../shared/components/form/form-group/form-group.component';
import {
  FormSelectComponent,
  SelectOption,
} from '../../../../shared/components/form/form-select/form-select.component';

import {
  FormBuilder,
  FormGroup,
  FormsModule,
  Validators,
} from '@angular/forms';

import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';

import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';

import { isPlatformBrowser } from '@angular/common';

import { ExpansionPanelComponent } from '../../../../shared/components/layout/expansion-panel/expansion-panel.component';

import { PageHeaderComponent } from '../../../../shared/components/layout/page-header/page-header.component';

import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';

import { ChipComponent } from '../../../../shared/components/ui/chip/chip.component';

import { ReactiveFormsModule } from '@angular/forms';

// Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
interface Kpi {
  value: string;
  label: string;
  color: KpiColor; // <-- Hier verwenden wir den importierten Typ
  iconName: string;
}

@Component({
  selector: 'app-demo2',
  standalone: true,
  imports: [
    CommonModule,

    KpiCardComponent,
    OrdersTableComponent,
    FormGroupComponent,
    FormFieldComponent,
    FormSelectComponent,
    FormsModule,
    FormTextareaComponent,
    SlideToggleComponent,
    ExpansionPanelComponent,
    PageHeaderComponent,
    ButtonComponent,
    ChipComponent,
    ReactiveFormsModule
  ],
  templateUrl: './demo2.component.html',
})
export class Demo2Component {

  demoForm: FormGroup;


  kpiData: Kpi[] = [
    {
      value: '€ 14.750',
      label: 'Umsatz',
      color: 'green',
      iconName: 'placeholder',
    },
    {
      value: '1.284',
      label: 'Neue Nutzer',
      color: 'blue',
      iconName: 'placeholder',
    },
    {
      value: '312',
      label: 'Bestellungen',
      color: 'orange',
      iconName: 'placeholder',
    },
    {
      value: '99.8%',
      label: 'Verfügbarkeit',
      color: 'purple',
      iconName: 'placeholder',
    },
  ];

  ordersData: Order[] = [
    {
      id: '10543',
      user: {
        name: 'Max Mustermann',
        email: 'max.m@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=max',
      },
      amount: '€ 129,99',
      status: 'success',
      statusText: 'Abgeschlossen',
    },
    {
      id: '10542',
      user: {
        name: 'Erika Mustermann',
        email: 'erika.m@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=erika',
      },
      amount: '€ 49,50',
      status: 'warning',
      statusText: 'In Bearbeitung',
    },
    {
      id: '10541',
      user: {
        name: 'Peter Pan',
        email: 'peter.p@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=peter',
      },
      amount: '€ 87,00',
      status: 'danger',
      statusText: 'Storniert',
    },
    {
      id: '10543',
      user: {
        name: 'Max Mustermann',
        email: 'max.m@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=max',
      },
      amount: '€ 129,99',
      status: 'success',
      statusText: 'Abgeschlossen',
    },
    {
      id: '10542',
      user: {
        name: 'Erika Mustermann',
        email: 'erika.m@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=erika',
      },
      amount: '€ 49,50',
      status: 'warning',
      statusText: 'In Bearbeitung',
    },
    {
      id: '10541',
      user: {
        name: 'Peter Pan',
        email: 'peter.p@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=peter',
      },
      amount: '€ 87,00',
      status: 'danger',
      statusText: 'Storniert',
    },
    {
      id: '10543',
      user: {
        name: 'Max Mustermann',
        email: 'max.m@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=max',
      },
      amount: '€ 129,99',
      status: 'success',
      statusText: 'Abgeschlossen',
    },
    {
      id: '10542',
      user: {
        name: 'Erika Mustermann',
        email: 'erika.m@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=erika',
      },
      amount: '€ 49,50',
      status: 'warning',
      statusText: 'In Bearbeitung',
    },
    {
      id: '10541',
      user: {
        name: 'Peter Pan',
        email: 'peter.p@example.com',
        avatarUrl: 'https://i.pravatar.cc/40?u=peter',
      },
      amount: '€ 87,00',
      status: 'danger',
      statusText: 'Storniert',
    },
  ];

  aktuellesPasswort: any = '';
  neuesPasswort: any = '';

  selectedCountry: string | null = null;

  countryOptions: SelectOption[] = [
    { value: 'de', label: 'Deutschland' },
    { value: 'at', label: 'Österreich' },
    { value: 'ch', label: 'Schweiz' },
  ];

  biografie: string =
    'Dies ist eine Beispiel-Biografie, die über mehrere Zeilen gehen kann.';

  benachrichtigungenAktiv: boolean = true;
  profilIstPrivat: boolean = false;

  private readonly darkModeKey = 'app-dark-mode-setting';
  darkModeAktiv: boolean = false;


  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document,
    @Inject(PLATFORM_ID) private platformId: Object,

    private fb: FormBuilder
  ) {
    this.demoForm = this.fb.group({
      username: [''], // Entspricht dem [(value)]="benutzername"
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required]]
    });
  }

  ngOnInit(): void {
    this.loadThemeSetting();
  }

  private loadThemeSetting(): void {
    if (isPlatformBrowser(this.platformId)) {
      try {
        const storedValue = localStorage.getItem(this.darkModeKey);
        // Setze den Zustand der Komponente basierend auf dem gespeicherten Wert.
        this.darkModeAktiv = storedValue === 'true';
      } catch (e) {
        console.error('Could not access localStorage:', e);
      }
    }
    // Wende das Theme an - entweder den Standardwert (false) oder den geladenen Wert.
    this.updateTheme(this.darkModeAktiv);
  }

  onDarkModeChange(isEnabled: boolean): void {
    this.darkModeAktiv = isEnabled;

    // --- KORREKTUR 2: Speichere die neue Einstellung ---
    if (isPlatformBrowser(this.platformId)) {
      try {
        localStorage.setItem(this.darkModeKey, String(isEnabled));
      } catch (e) {
        console.error('Could not write to localStorage:', e);
      }
    }

    // Wende die visuelle Änderung an.
    this.updateTheme(isEnabled);
  }

  // This method is CORRECT. It just needs to be called.
  private updateTheme(isEnabled: boolean): void {
    if (isEnabled) {
      this.renderer.addClass(this.document.body, 'dark-theme');
    } else {
      this.renderer.removeClass(this.document.body, 'dark-theme');
    }
  }

  handleDeleteOrder(orderId: string): void {
    console.log('Lösche Bestellung mit ID:', orderId);
    // Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen
  }
  handleViewDetails(orderId: string): void {
    console.log('View Bestellung mit ID:', orderId);
    // Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen
  }
  handleEditOrder(orderId: string): void {
    console.log('Edit Bestellung mit ID:', orderId);
    // Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen
  }
}