import type { CreatedJoinTokenDto } from '@shared/api/types'
import { fmtTime } from '@shared/format'
import { CommandTabs, CopyButton, Dialog, Field, guessPlatform } from '@shared/ui'

/**
 * 加入令牌创建之后的对话框：Agent 和 Probe 共用同一份，一行命令装好。
 * 命令里只有一次性代码，角色由代码决定；节点名字默认取主机名。
 */
export function JoinTokenCreated({ created, kind, onClose }: { created: CreatedJoinTokenDto; kind: 'Agent' | 'Probe'; onClose: () => void }) {
  const commands = created.install_commands
  return (
    <Dialog
      title="加入令牌已创建"
      onClose={onClose}
      actions={
        <button type="button" className="btn primary" onClick={onClose}>
          完成
        </button>
      }
    >
      <div className="stack">
        <div className="notice warn">命令里的代码只显示这一次，请现在就复制。</div>
        <Field
          label={`在要加入的机器上运行（${kind}）`}
          hint="需要 Docker 或 Podman。命令里已经填好面板地址和一次性代码，节点名字默认取主机名；身份和配置存在命名卷里，重启、换新镜像重建容器都不用再给参数。名字想自己定，或者提示名字被占用，在命令里加上 MOSHIRO_NAME=名字（Linux 和 macOS 写在 bash 或 zsh 前面，Windows 先执行 $env:MOSHIRO_NAME='名字'）。"
        >
          <CommandTabs
            storageKey="moshiro.install_tab"
            initial={guessPlatform()}
            tabs={[
              { id: 'linux', label: 'Linux', command: commands.linux },
              { id: 'macos', label: 'macOS', command: commands.macos },
              { id: 'windows', label: 'Windows', command: commands.windows },
            ]}
          />
        </Field>
        <Field label="代码">
          <pre className="code">{created.plaintext}</pre>
          <div>
            <CopyButton text={created.plaintext} label="复制代码" />
          </div>
        </Field>
        <p className="muted">
          {kind === 'Agent' ? (created.token.auto_approve ? '使用它注册的 Agent 会自动启用。' : '使用它注册的 Agent 需要你在列表里审批之后才会启用。') : ''}
          可用 {created.token.max_uses} 次，{fmtTime(created.token.expires_at)} 过期。
        </p>
      </div>
    </Dialog>
  )
}