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;
  recording_enabled: boolean;
  outputter_enabled: boolean;
  step_summarizer_enabled: boolean;
  screenshot_limit_enabled: boolean;
  screenshot_max_long_edge: number;
  task_timeout_seconds: number;
  observation_timeout_seconds: number;
  observation_max_attempts: number;
  device_command_timeout_seconds: number;
  action_failure_attempts: number;
  worker_cleanup_timeout_seconds: number;
}

@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.recording_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>
      <label><input type="checkbox" role="switch" [(ngModel)]="config.screenshot_limit_enabled" [disabled]="busy() || loading() || !loaded()" />
        <span>限制截图分辨率<small>开启时长边最多 {{ config.screenshot_max_long_edge }} 像素；关闭后使用设备原始分辨率。JSON 配置可覆盖开关和上限。</small></span></label>
      <details class="execution-settings">
        <summary>执行保护</summary>
        <p>限制故障等待与反复失败；保存后对新任务生效，任务 JSON 可单独覆盖。</p>
        <div class="number-fields">
          <label>任务总超时（秒）<input type="number" min="30" max="86400" step="1" [(ngModel)]="config.task_timeout_seconds" [disabled]="busy() || !loaded()" /><small>不包含排队和用户暂停时间。</small></label>
          <label>屏幕观测超时（秒）<input type="number" min="1" max="300" [(ngModel)]="config.observation_timeout_seconds" [disabled]="busy() || !loaded()" /></label>
          <label>观测恢复最多尝试次数<input type="number" min="1" max="5" step="1" [(ngModel)]="config.observation_max_attempts" [disabled]="busy() || !loaded()" /></label>
          <label>ADB 命令超时（秒）<input type="number" min="1" max="60" [(ngModel)]="config.device_command_timeout_seconds" [disabled]="busy() || !loaded()" /></label>
          <label>连续动作失败次数<input type="number" min="1" max="10" step="1" [(ngModel)]="config.action_failure_attempts" [disabled]="busy() || !loaded()" /><small>先重新观察，再让兜底模型处理当前步骤。</small></label>
          <label>任务收尾超时（秒）<input type="number" min="1" max="300" [(ngModel)]="config.worker_cleanup_timeout_seconds" [disabled]="busy() || !loaded()" /><small>已有最终结果但进程未退出时，回收进程以释放队列。</small></label>
        </div>
      </details>
      <button type="button" (click)="save()" [disabled]="busy() || loading() || !loaded() || !valid()">{{ 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; }
    .execution-settings { margin: 12px 0 20px; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; }
    summary { cursor: pointer; font-weight: 600; color: #334155; }
    .number-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    .number-fields label { display: block; padding: 0; color: #334155; }
    .number-fields input { box-sizing: border-box; display: block; width: 100%; height: auto; margin-top: 8px; padding: 9px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
    @media(max-width: 480px) { .number-fields { grid-template-columns: 1fr; } }`]
})
export class CapabilitySettingsComponent implements OnInit {
  changed = output<Capabilities>();
  private http = inject(HttpClient);
  config: Capabilities = { video_enabled: false, recording_enabled: false, outputter_enabled: true, step_summarizer_enabled: true, screenshot_limit_enabled: true, screenshot_max_long_edge: 2048, task_timeout_seconds: 1800, observation_timeout_seconds: 60, observation_max_attempts: 3, device_command_timeout_seconds: 10, action_failure_attempts: 3, worker_cleanup_timeout_seconds: 30 };
  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() || !this.valid()) 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 文件权限。')
    });
  }
  valid(): boolean {
    const c = this.config;
    return Number.isInteger(c.task_timeout_seconds) && c.task_timeout_seconds >= 30 && c.task_timeout_seconds <= 86400
      && c.observation_timeout_seconds > 0 && c.observation_timeout_seconds <= 300
      && Number.isInteger(c.observation_max_attempts) && c.observation_max_attempts >= 1 && c.observation_max_attempts <= 5
      && c.device_command_timeout_seconds > 0 && c.device_command_timeout_seconds <= 60
      && Number.isInteger(c.action_failure_attempts) && c.action_failure_attempts >= 1 && c.action_failure_attempts <= 10
      && c.worker_cleanup_timeout_seconds > 0 && c.worker_cleanup_timeout_seconds <= 300;
  }
}