import { Component, inject, OnInit, signal, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';

interface Capabilities {
  video_enabled: boolean;
  outputter_enabled: boolean;
  step_summarizer_enabled: boolean;
}

@Component({
  selector: 'app-capability-settings', standalone: true, imports: [FormsModule],
  template: `
    <section aria-label="功能开关">
      <h3>功能开关</h3>
      <p>按需启用，保存后对新任务生效。</p>
      <label><input type="checkbox" role="switch" [(ngModel)]="config.video_enabled" [disabled]="busy() || loading() || !loaded()" />
        <span>视频分析与录屏<small>录制设备画面，并允许智能体分析录像；关闭可减少资源占用。</small></span></label>
      <label><input type="checkbox" role="switch" [(ngModel)]="config.outputter_enabled" [disabled]="busy() || loading() || !loaded()" />
        <span>最终报告生成<small>根据执行记录生成任务结果报告。</small></span></label>
      <label><input type="checkbox" role="switch" [(ngModel)]="config.step_summarizer_enabled" [disabled]="busy() || loading() || !loaded()" />
        <span>步骤摘要压缩<small>Flash 模式下在后台生成摘要，减少长任务的上下文占用。</small></span></label>
      <button type="button" (click)="save()" [disabled]="busy() || loading() || !loaded()">{{ busy() ? '正在保存…' : '保存功能设置' }}</button>
      @if (message()) { <p role="status">{{ message() }}</p> }
      @if (error()) { <p role="alert" class="error">{{ error() }}</p> }
    </section>
  `,
  styles: [`section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #64748b55; }
    h3 { margin: 0 0 8px; } p, small { color: #64748b; line-height: 1.6; }
    label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; cursor: pointer; }
    input { width: 20px; height: 20px; accent-color: #0284c7; flex-shrink: 0; }
    small { display: block; margin-top: 4px; } button { padding: 10px 18px; border-radius: 10px; border: 1px solid #38bdf877; background: #0284c7; color: white; font: inherit; cursor: pointer; }
    button:disabled { opacity: .5; cursor: default; } .error { color: #be123c; }`]
})
export class CapabilitySettingsComponent implements OnInit {
  changed = output<Capabilities>();
  private http = inject(HttpClient);
  config: Capabilities = { video_enabled: false, outputter_enabled: true, step_summarizer_enabled: true };
  busy = signal(false); loading = signal(true); loaded = signal(false); message = signal(''); error = signal('');
  ngOnInit(): void {
    this.http.get<Capabilities>('/api/system/capability-settings').pipe(finalize(() => this.loading.set(false))).subscribe({
      next: config => { this.config = config; this.loaded.set(true); this.changed.emit(config); }, error: () => this.error.set('功能配置加载失败，请刷新页面重试。')
    });
  }
  save(): void {
    if (this.busy() || this.loading() || !this.loaded()) return;
    this.busy.set(true); this.message.set(''); this.error.set('');
    this.http.post<Capabilities>('/api/system/capability-settings', this.config).pipe(finalize(() => this.busy.set(false))).subscribe({
      next: config => { this.config = config; this.changed.emit(config); this.message.set('功能设置已保存，新任务将使用此配置。'); },
      error: () => this.error.set('保存失败，请检查服务器连接和 .env 文件权限。')
    });
  }
}