import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { CardModule } from 'primeng/card';
import { ButtonModule } from 'primeng/button';
import { DialogModule } from 'primeng/dialog';
import { KnockPageComponent } from '../knock/knock-page.component';

@Component({
  selector: 'app-basic-knock-page',
  standalone: true,
  imports: [
    CommonModule, RouterModule, CardModule, ButtonModule, DialogModule, KnockPageComponent
  ],
  template: `
    <div class="container">
      <!-- Встраиваем основной компонент в базовом режиме -->
      <app-knock-page [enableFSA]="false" [canUseFSA]="canUseFSA"></app-knock-page>
    </div>

    <!-- Информационное модальное окно -->
    <p-dialog header="📁 Базовая версия" 
              [(visible)]="showInfoDialog" 
              [modal]="true" 
              [closable]="true"
              [draggable]="false"
              [resizable]="false"
              styleClass="info-dialog">
      <div class="dialog-content">
        <p class="mb-3">
          Эта версия работает в любом браузере, но файлы загружаются/скачиваются через стандартные диалоги браузера.
        </p>
        <div *ngIf="canUseFSA" class="p-3 bg-blue-50 border-round">
          <p class="text-sm mb-2">
            💡 <strong>Доступна расширенная версия!</strong>
          </p>
          <p class="text-sm mb-3">
            Ваш браузер поддерживает прямое редактирование файлов на диске.
          </p>
          <button pButton 
                  type="button" 
                  label="Перейти к расширенной версии" 
                  class="p-button-success p-button-sm"
                  routerLink="/fsa"
                  (click)="showInfoDialog = false">
          </button>
        </div>
      </div>
    </p-dialog>
  `,
  styles: [`
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
    }
    
    .info-link {
      color: #3b82f6;
      cursor: pointer;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease;
    }
    
    .info-link:hover {
      color: #1d4ed8;
      text-decoration: underline;
    }
    
    .bg-blue-50 {
      background-color: #eff6ff;
    }
    
    .dialog-content {
      min-width: 400px;
    }
  `]
})
export class BasicKnockPageComponent {
  canUseFSA = false;
  showInfoDialog = false;

  constructor() {
    this.checkFSASupport();
  }

  private checkFSASupport() {
    const w = window as any;
    this.canUseFSA = typeof w.showOpenFilePicker === 'function';
  }
}
