import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { TranslateService } from '../../../../i18n/translate.service';
import { ConfigService } from '../../../../core/config/config.service';
import { ButtonComponent } from '../../../../shared/ui/button/button.component';
import { DialogComponent } from '../../../../shared/ui/dialog/dialog.component';
import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component';
import { FormFieldComponent } from '../../../../shared/ui/form-field/form-field.component';
import { InputComponent } from '../../../../shared/ui/input/input.component';
import { IconComponent } from '../../../../shared/ui/icon/icon.component';
import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';

interface SellerAccessRequest {
  company: string;
  email: string;
  message: string;
}

/**
 * Phase 1 UI for the optional Seller Management module (ADR-011). The module
 * has no backend/business logic yet, so this page's entire content today is
 * the "not available" empty state - request-access and learn-more dialogs
 * only. Reads `modules.sellerManagement.enabled` per ADR-011's capability-
 * guard rule rather than assuming a hardcoded state; there is no enabled-
 * state UI to switch to yet, that's separate future work once the module is
 * actually built.
 */
@Component({
  selector: 'app-admin-seller-management-page',
  standalone: true,
  imports: [
    FormsModule,
    TranslatePipe,
    ButtonComponent,
    DialogComponent,
    EmptyStateComponent,
    FormFieldComponent,
    InputComponent,
    IconComponent,
    BadgeComponent
  ],
  templateUrl: './admin-seller-management-page.component.html',
  styleUrl: './admin-seller-management-page.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AdminSellerManagementPageComponent {
  private readonly configService = inject(ConfigService);
  private readonly i18n = inject(TranslateService);

  /**
   * Reactive, not a one-time snapshot - re-reads on every bootstrap reload
   * (same pattern as UiRuntimeFacade/SeoService's bootstrapRevision()-keyed
   * effects), so this won't go stale if bootstrap ever reloads with the
   * flag now true. Not yet consumed in the template - there is no
   * enabled-state UI to gate yet (see class doc comment) - but it must be
   * correct now rather than silently wrong later.
   */
  protected readonly sellerManagementEnabled = computed(() => {
    this.configService.bootstrapRevision();
    return this.configService.getBootstrapSnapshot()?.modules?.sellerManagement?.enabled ?? false;
  });

  protected readonly requestDialogOpen = signal(false);
  protected readonly successDialogOpen = signal(false);
  protected readonly learnMoreDialogOpen = signal(false);
  protected readonly submitting = signal(false);

  protected readonly form = signal<SellerAccessRequest>({ company: '', email: '', message: '' });

  protected readonly learnMoreFeatureKeys = [
    'sellerDashboards',
    'sellerStorefronts',
    'sellerPermissions',
    'sellerAnalytics',
    'productOwnership',
    'marketplaceAdministration'
  ] as const;

  protected openRequestDialog(): void {
    this.form.set({ company: '', email: '', message: '' });
    this.requestDialogOpen.set(true);
  }

  protected closeRequestDialog(): void {
    this.requestDialogOpen.set(false);
  }

  protected openLearnMoreDialog(): void {
    this.learnMoreDialogOpen.set(true);
  }

  protected closeLearnMoreDialog(): void {
    this.learnMoreDialogOpen.set(false);
  }

  protected closeSuccessDialog(): void {
    this.successDialogOpen.set(false);
  }

  protected updateCompany(value: string): void {
    this.form.update(f => ({ ...f, company: value }));
  }

  protected updateEmail(value: string): void {
    this.form.update(f => ({ ...f, email: value }));
  }

  protected updateMessage(value: string): void {
    this.form.update(f => ({ ...f, message: value }));
  }

  /** Mocked submission - no backend/API exists for this yet (Phase 1 UI only). */
  protected submitRequest(): void {
    this.submitting.set(true);
    setTimeout(() => {
      this.submitting.set(false);
      this.requestDialogOpen.set(false);
      this.successDialogOpen.set(true);
    }, 400);
  }

  protected dialogTitle(key: string): string {
    return this.i18n.t(key);
  }
}
