import { useState } from 'react'
import { toast } from '../../toast'

interface CardDef {
  kind: 'app' | 'edit' | 'publish'
  icon: string
  title: string
  desc: string
}

const CARDS: CardDef[] = [
  {
    kind: 'app',
    icon: '🖥️',
    title: '打开本控制中心工具',
    desc: '在桌面创建一个快捷方式，双击直接打开本工具。'
  },
  {
    kind: 'edit',
    icon: '✏️',
    title: '打开项目并进入编辑',
    desc: '在桌面创建快捷方式，双击后自动打开指定的工程 JSON 并进入编辑状态。'
  },
  {
    kind: 'publish',
    icon: '🚀',
    title: '打开项目并进入发布',
    desc: '在桌面创建快捷方式，双击后自动打开指定的工程 JSON，并按「发布设置」的默认配置自动发布。'
  }
]

export default function ShortcutPanel(): React.JSX.Element {
  const [busy, setBusy] = useState<string | null>(null)

  const create = async (kind: 'app' | 'edit' | 'publish'): Promise<void> => {
    setBusy(kind)
    try {
      const r = await window.api.shortcuts.create(kind)
      if (r.ok) toast(`快捷方式已创建到桌面：「${r.message}」`, 'ok')
      else toast('创建失败：' + (r.message ?? ''), 'warn')
    } finally {
      setBusy(null)
    }
  }

  return (
    <div className="cfg-section">
      <p className="cfg-tip">
        共三种桌面快捷方式。第 2、3 种会先弹出文件选择框，选择后把指定的工程 JSON
        路径固化到快捷方式中，双击即可直达对应状态。
      </p>
      <div className="cfg-cards3">
        {CARDS.map((c) => (
          <div key={c.kind} className="cfg-card">
            <div className="cfg-card-head">
              {c.icon} {c.title}
            </div>
            <div className="cfg-card-body">
              <p className="cfg-tip">{c.desc}</p>
              <div className="pub-actions">
                <button className="btn primary" disabled={busy !== null} onClick={() => void create(c.kind)}>
                  {busy === c.kind ? '创建中…' : '📌 创建桌面快捷方式'}
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
