import { useEffect, useState } from 'react'
import { api } from '@shared/api/client'
import type { Page, PasskeyDto, TrustStateDto } from '@shared/api/types'

/**
 * 选这个节点的属主（必选，至少一把）：允许授权它 extension 会话（web ssh 等，以后）、解密它加密内容的 passkey。只是选，不需要触碰 Passkey：
 * 选定的凭证 id 会写进安装命令，节点装上时固定在本地，之后面板改不了。默认是操作员集合里的全部。
 * 还没有建立信任根时不显示选项，只提示去建立。
 */
export function OwnerPicker({ value, onChange }: { value: string[] | null; onChange: (next: string[]) => void }) {
  const [trust, setTrust] = useState<TrustStateDto>()
  const [own, setOwn] = useState<PasskeyDto[]>([])

  useEffect(() => {
    let alive = true
    api
      .get<TrustStateDto>('/api/admin/trust')
      .then((t) => {
        if (!alive) return
        setTrust(t)
        if (value === null) onChange(t.operators ?? [])
      })
      .catch(() => undefined)
    api
      .get<Page<PasskeyDto>>('/api/admin/auth/passkeys')
      .then((list) => alive && setOwn(list.items))
      .catch(() => undefined)
    return () => {
      alive = false
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  if (!trust) return null
  if (!trust.initialized) {
    return <div className="notice warn">还没有建立信任根：每个节点都必须有属主（passkey），先到「系统 → 信任」用 Passkey 建立信任根，才能添加节点。</div>
  }

  const chosen = new Set(value ?? [])
  const name = (id: string) => own.find((p) => p.id === id)?.name ?? `其他账号的 Passkey（${id.slice(0, 8)}…）`
  return (
    <div className="stack" style={{ gap: 4 }}>
      {(trust.operators ?? []).map((id) => (
        <label key={id} className="switch">
          <input
            type="checkbox"
            checked={chosen.has(id)}
            onChange={(e) => {
              const next = new Set(chosen)
              if (e.target.checked) next.add(id)
              else next.delete(id)
              onChange([...next])
            }}
          />
          {name(id)}
        </label>
      ))}
    </div>
  )
}