import { 
  ConfigService, 
  LoggerService, 
  StorageService,
  authGuard,
  httpErrorInterceptor 
} from '@flyfront/core';

import { 
  ButtonComponent, 
  InputComponent, 
  CardComponent,
  AppShellComponent,
  SpinnerComponent 
} from '@flyfront/ui';

import { AuthService, TokenService } from '@flyfront/auth';

import { ApiService, WebSocketService } from '@flyfront/data-access';

import { createEntityAdapter, BaseEffects } from '@flyfront/state';

import { LocaleService, TranslocoLoader } from '@flyfront/i18n';

import { MockAuthService, renderComponent } from '@flyfront/testing';

import { Component } from '@angular/core';
import { 
  ButtonComponent, 
  InputComponent, 
  CardComponent,
  CardHeaderComponent,
  CardContentComponent,
  CardFooterComponent 
} from '@flyfront/ui';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  standalone: true,
  imports: [
    FormsModule,
    ButtonComponent, 
    InputComponent, 
    CardComponent,
    CardHeaderComponent,
    CardContentComponent,
    CardFooterComponent
  ],
  template: `
    <fly-card>
      <fly-card-header>
        <h2>Login to Your Account</h2>
      </fly-card-header>
      
      <fly-card-content>
        <fly-input
          label="Email Address"
          type="email"
          placeholder="[email protected]"
          [(ngModel)]="email"
          [error]="emailError"
          required
        />
        
        <fly-input
          label="Password"
          type="password"
          placeholder="Enter your password"
          [(ngModel)]="password"
          required
        />
      </fly-card-content>
      
      <fly-card-footer>
        <fly-button variant="ghost">Forgot Password?</fly-button>
        <fly-button 
          variant="primary" 
          [loading]="isLoading"
          (clicked)="login()"
        >
          Sign In
        </fly-button>
      </fly-card-footer>
    </fly-card>
  `,
})
export class LoginFormComponent {
  email = '';
  password = '';
  emailError = '';
  isLoading = false;

  login() {
    this.isLoading = true;
    // Handle login...
  }
}

import { Component, inject, effect } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@flyfront/auth';

@Component({
  selector: 'app-profile',
  template: `
    @if (auth.isLoading()) {
      <fly-spinner size="lg" />
    } @else if (auth.isAuthenticated()) {
      <div class="profile">
        <h1>Welcome, {{ auth.user()?.displayName }}</h1>
        <p>Email: {{ auth.user()?.email }}</p>
        <p>Roles: {{ auth.roles().join(', ') }}</p>
        
        <fly-button variant="outline" (clicked)="logout()">
          Sign Out
        </fly-button>
      </div>
    } @else {
      <fly-button variant="primary" (clicked)="login()">
        Sign In
      </fly-button>
    }
  `,
})
export class ProfileComponent {
  readonly auth = inject(AuthService);
  private readonly router = inject(Router);

  constructor() {
    // React to auth state changes
    effect(() => {
      if (!this.auth.isAuthenticated() && !this.auth.isLoading()) {
        this.router.navigate(['/login']);
      }
    });
  }

  login() {
    this.auth.login({ returnUrl: '/profile' });
  }

  logout() {
    this.auth.logout('/');
  }
}

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideConfig, httpErrorInterceptor } from '@flyfront/core';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(
      withInterceptors([httpErrorInterceptor])
    ),
    provideConfig({
      appName: 'My Firefly App',
      version: '1.0.0',
      environment: 'production',
      apiBaseUrl: 'https://api.example.com',
      auth: {
        provider: 'oidc',
        issuerUrl: 'https://auth.example.com/realms/myapp',
        clientId: 'my-client-id',
        redirectUri: 'https://myapp.com/callback',
      },
      logging: {
        level: 'info',
        console: true,
      },
    }),
  ],
};

// app.routes.ts
import { Routes } from '@angular/router';
import { authGuard, permissionGuard } from '@flyfront/core';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./home/home.component'),
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component'),
    canActivate: [authGuard()],
  },
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component'),
    canActivate: [
      authGuard(),
      permissionGuard({ 
        roles: ['admin'],
        forbiddenUrl: '/forbidden' 
      })
    ],
  },
  {
    path: 'forbidden',
    loadComponent: () => import('./forbidden/forbidden.component'),
  },
];