import type { ReactElement } from "react";

import { useProviderProfileOptions } from "../../hooks/useProviderProfileOptions";
import type { ProviderProfile } from "../../types/domain";

interface SettingsViewProps {
  providerProfile: ProviderProfile;
  codeAgentTimeoutMs: number;
  gatewayShellTimeoutMs: number;
  onProviderProfile(profile: ProviderProfile): void;
  onCodeAgentTimeout(value: number): void;
  onGatewayShellTimeout(value: number): void;
  onLogout(): Promise<void>;
}

export function SettingsView({ providerProfile, codeAgentTimeoutMs, gatewayShellTimeoutMs, onProviderProfile, onCodeAgentTimeout, onGatewayShellTimeout, onLogout }: SettingsViewProps): ReactElement {
  const { options: providerOptions } = useProviderProfileOptions(providerProfile);
  return (
    <section className="view settings-view" id="settings" data-view="settings" aria-labelledby="settings-title">
      <div className="workspace-panel settings-panel">
        <div className="panel-title-row"><div><p className="eyebrow">账号与运行参数</p><h2 id="settings-title">设置</h2></div></div>
        <div className="settings-content">
          <section className="settings-group" aria-label="Code Agent 设置">
            <label className="agent-timeout-control" htmlFor="settings-code-agent-provider-profile">
              <span>模型通道</span>
              <select id="settings-code-agent-provider-profile" aria-label="Code Agent 模型通道" value={providerProfile} onChange={(event) => onProviderProfile(event.currentTarget.value as ProviderProfile)}>
                {providerOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
              </select>
            </label>
            <label className="agent-timeout-control" htmlFor="code-agent-timeout">
              <span>无新事件超时</span>
              <select id="code-agent-timeout" aria-label="Code Agent 无新事件超时" value={codeAgentTimeoutMs} onChange={(event) => onCodeAgentTimeout(Number(event.currentTarget.value))}>
                <option value="180000">3 分钟</option>
                <option value="300000">5 分钟</option>
                <option value="600000">10 分钟</option>
                <option value="900000">15 分钟</option>
                <option value="1200000">20 分钟</option>
                <option value="1800000">30 分钟</option>
                <option value="2400000">40 分钟</option>
              </select>
            </label>
            <label className="agent-timeout-control" htmlFor="gateway-shell-timeout">
              <span>Gateway 命令超时</span>
              <select id="gateway-shell-timeout" aria-label="PC gateway shell 命令超时" value={gatewayShellTimeoutMs} onChange={(event) => onGatewayShellTimeout(Number(event.currentTarget.value))}>
                <option value="60000">1 分钟</option>
                <option value="120000">2 分钟</option>
                <option value="180000">3 分钟</option>
                <option value="300000">5 分钟</option>
                <option value="600000">10 分钟</option>
              </select>
            </label>
          </section>
          <button className="logout-button" id="logout-button" type="button" onClick={() => void onLogout()}>注销登录</button>
        </div>
      </div>
    </section>
  );
}
