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-fsa-knock-page',
  standalone: true,
  imports: [
    CommonModule, RouterModule, CardModule, ButtonModule, DialogModule, KnockPageComponent
  ],
  template: `
    <div class="container">
      <div *ngIf="!isFSASupported" class="text-center">
        <h3>File System Access API не поддерживается</h3>
        <p>Эта функциональность требует браузер с поддержкой File System Access API:</p>
        <ul class="text-left mt-3">
          <li>Google Chrome 86+</li>
          <li>Microsoft Edge 86+</li>
          <li>Opera 72+</li>
        </ul>
        <p class="mt-3">Ваш браузер: <strong>{{ browserInfo }}</strong></p>
        <button pButton 
                type="button" 
                label="Перейти к основной версии" 
                class="p-button-outlined mt-3"
                routerLink="/">
        </button>
      </div>
      
      <div *ngIf="isFSASupported">
        <!-- Встраиваем основной компонент с поддержкой FSA -->
        <app-knock-page [enableFSA]="true" [canUseFSA]="true"></app-knock-page>
      </div>
    </div>

    <!-- Информационное модальное окно -->
    <p-dialog header="🚀 Расширенная версия с File System Access" 
              [(visible)]="showInfoDialog" 
              [modal]="true" 
              [closable]="true"
              [draggable]="false"
              [resizable]="false"
              styleClass="info-dialog">
      <div class="dialog-content">
        <p class="mb-3">
          Эта версия поддерживает прямое редактирование файлов на диске.
          Файлы будут автоматически перезаписываться после шифрования/дешифрования.
        </p>
        <div class="p-3 bg-green-50 border-round">
          <p class="text-sm mb-2">
            ✅ <strong>Доступные возможности:</strong>
          </p>
          <ul class="text-sm mb-0">
            <li>Прямое открытие файлов с диска</li>
            <li>Автоматическое сохранение изменений</li>
            <li>Перезапись зашифрованных файлов "на месте"</li>
            <li>Быстрая работа без диалогов загрузки/скачивания</li>
          </ul>
        </div>
      </div>
    </p-dialog>
  `,
  styles: [`
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
    }
    
    ul {
      display: inline-block;
      text-align: left;
    }
    
    .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-green-50 {
      background-color: #f0fdf4;
    }
    
    .dialog-content {
      min-width: 450px;
    }
  `]
})
export class FsaKnockPageComponent {
  isFSASupported = false;
  browserInfo = '';
  showInfoDialog = false;

  constructor() {
    this.checkFSASupport();
    this.getBrowserInfo();
  }

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

  private getBrowserInfo() {
    const ua = navigator.userAgent;
    if (ua.includes('Chrome') && !ua.includes('Edg/')) {
      this.browserInfo = 'Google Chrome';
    } else if (ua.includes('Edg/')) {
      this.browserInfo = 'Microsoft Edge';
    } else if (ua.includes('Opera') || ua.includes('OPR/')) {
      this.browserInfo = 'Opera';
    } else if (ua.includes('Firefox')) {
      this.browserInfo = 'Mozilla Firefox';
    } else if (ua.includes('Safari') && !ua.includes('Chrome')) {
      this.browserInfo = 'Safari';
    } else {
      this.browserInfo = 'Неизвестный браузер';
    }
  }
}