import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { Auth } from '@angular/fire/auth';
import { GoogleAuthProvider, signInWithPopup, UserCredential } from 'firebase/auth';
import { PopoverComponent } from './components/popover.component';
import { DeckListComponent } from './deck-list.component';
import { ClickOutsideDirective } from './service/click-outside.directive';
import { PopoverService } from './services/popover.service';
import { UserService } from './services/user.service';
@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="!isLoggedIn" class="min-h-screen flex flex-col items-center justify-center" style="background: rgba(0, 119, 179, 0.1)">
      <div class="text-center">
        <h1 class="text-5xl font-bold mb-4">Master Your Learning</h1>
        <p class="text-xl mb-8">Learn smarter, not harder. Start your journey today</p>
        <button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
          <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
            <path
              fill="#FFC107"
              d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
            />
            <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
            <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
            <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
          </svg>
          Login with Google
        </button>
      </div>
    </div>
    <div *ngIf="isLoggedIn" class="bg-white shadow mb-4">
      <div class="container mx-auto px-4 py-2 flex justify-between items-center">
        <!-- Logo und Name -->
        <div class="flex items-center space-x-2">
          <img src="../assets/logo.svg" alt="Logo" class="w-10 h-10" />
          <span class="text-xl font-bold">Haiky</span>
        </div>

        <!-- Navigation -->
        <div class="hidden md:flex space-x-6">
          <span class="text-xl font-bold">Spaced Repetition Training</span>
        </div>

        <!-- User-Bereich -->
        <div appClickOutside class="relative" (clickOutside)="showDropdown = false">
          <img *ngIf="photoURL" [src]="photoURL" alt="User Photo" class="w-10 h-10 rounded-full cursor-pointer" (click)="toggleDropdown()" referrerpolicy="no-referrer" crossorigin="anonymous" />
          <div *ngIf="!photoURL" class="image-placeholder w-10 h-10 rounded-full cursor-pointer bg-gray-300"></div>

          <!-- Dropdown -->
          <div *ngIf="showDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10">
            <button (click)="logout()" class="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100">Logout</button>
          </div>
        </div>
      </div>
    </div>
    <app-deck-list *ngIf="isLoggedIn"></app-deck-list>

    <app-popover
      [visible]="popoverVisible"
      [title]="popoverTitle"
      [message]="popoverMessage"
      [showInput]="popoverShowInput"
      [showCancel]="popoverShowCancel"
      [inputValue]="popoverInputValue"
      [confirmText]="popoverConfirmText"
      (confirmed)="handleConfirm($event)"
      (canceled)="handleCancel()"
    ></app-popover>
  `,
  standalone: true,
  styles: `
img {
  border: 2px solid #fff;
  transition: transform 0.2s;
}

img:hover {
  transform: scale(1.1);
}

/* Stile für das Dropdown-Menü */
.dropdown {
  display: none;
  position: absolute;
  right: 0;
  margin-top: 0.5rem;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dropdown button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  color: #4a5568;
}

.dropdown button:hover {
  background-color: #f7fafc;
}  

  `,
  imports: [CommonModule, DeckListComponent, ClickOutsideDirective, PopoverComponent],
})
export class AppComponent {
  isLoggedIn = false;
  private auth: Auth = inject(Auth);
  showDropdown = false;
  photoURL: string = 'https://placehold.co/40';
  // user: User | null = null;
  popoverVisible = false;
  popoverTitle = '';
  popoverMessage = '';
  popoverShowInput = false;
  popoverShowCancel = true;
  popoverInputValue = '';
  popoverConfirmText = 'Confirm';
  private confirmCallback?: (inputValue?: string) => void;
  private cancelCallback?: () => void;

  constructor(public popoverService: PopoverService, private userService: UserService) {
    this.popoverService.popoverState$.subscribe(options => {
      this.popoverVisible = true;
      this.popoverTitle = options.title;
      this.popoverMessage = options.message;
      this.popoverShowInput = options.showInput;
      this.popoverShowCancel = options.showCancel;
      this.popoverInputValue = options.inputValue;
      this.popoverConfirmText = options.confirmText;
      this.confirmCallback = options.onConfirm;
      this.cancelCallback = options.onCancel;
    });
  }
  ngOnInit() {
    // Überprüfen des Login-Status beim Start der Anwendung
    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
    const accessToken = localStorage.getItem('accessToken');
    const refreshToken = localStorage.getItem('refreshToken');
    this.photoURL = localStorage.getItem('photoURL');

    if (isLoggedIn && accessToken && refreshToken) {
      this.isLoggedIn = true;
    }
  }

  async loginWithGoogle() {
    const provider = new GoogleAuthProvider();
    try {
      const result: UserCredential = await signInWithPopup(this.auth, provider);
      this.isLoggedIn = true;
      this.photoURL = result.user.photoURL;

      // Speichern des Login-Status und Tokens im Local Storage
      localStorage.setItem('isLoggedIn', 'true');
      localStorage.setItem('accessToken', await result.user.getIdToken());
      localStorage.setItem('refreshToken', result.user.refreshToken);
      localStorage.setItem('photoURL', result.user.photoURL);

      this.showDropdown = false;

      await this.userService.logIn({ name: result.user.displayName, email: result.user.email, sign_in_provider: result.providerId });

      console.log('Logged in with Google', result.user);
    } catch (error) {
      console.error('Google Login failed', error);
    }
  }

  logout() {
    this.isLoggedIn = false;
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    // Optional: Firebase-Logout durchführen
    this.auth.signOut();
  }
  toggleDropdown() {
    this.showDropdown = !this.showDropdown;
  }
  handleConfirm(inputValue?: string) {
    this.popoverVisible = false;
    if (this.confirmCallback) {
      this.confirmCallback(inputValue);
    }
  }

  handleCancel() {
    this.popoverVisible = false;
    if (this.cancelCallback) {
      this.cancelCallback();
    }
  }
}