import * as React from 'react'
import { getCurrentWindow } from '@tauri-apps/api/window'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { open as openDialog } from '@tauri-apps/plugin-dialog'
import { invoke as tauriInvoke } from '@tauri-apps/api/core'
import { useConfig } from '@/state/config'
import { isTauriHost } from '@/lib/api/desktop'
import { BrainCircuit, Check, Loader2 } from 'lucide-react'
type ToolStatus = {
id: string
name: string
installed: boolean
spool_injected: boolean
hooks_installed: boolean
}
export function OnboardingWizard() {
const cfg = useConfig()
const [step, setStep] = React.useState(1)
const [configPath, setConfigPath] = React.useState('')
const [vaultRoot, setVaultRoot] = React.useState('')
const [actor, setActor] = React.useState('')
const [tools, setTools] = React.useState<ToolStatus[]>([])
const [detecting, setDetecting] = React.useState(false)
const [installing, setInstalling] = React.useState<string | null>(null)
const [msg, setMsg] = React.useState('')
async function pickConfig() {
const sel = await openDialog({ multiple: false, filters: [{ name: 'TOML', extensions: ['toml'] }] })
if (typeof sel === 'string') setConfigPath(sel)
}
async function pickVault() {
const sel = await openDialog({ directory: true, multiple: false })
if (typeof sel === 'string') setVaultRoot(sel)
}
async function detectTools() {
if (!isTauriHost()) return
setDetecting(true)
try {
const res = await tauriInvoke<{ tools: ToolStatus[] }>('desktop_detect_ai_tools')
setTools(res.tools.filter(t => t.installed))
} catch {
// ignore
}
setDetecting(false)
}
async function installAll() {
if (!isTauriHost()) return
setMsg('')
for (const tool of tools) {
if (tool.spool_injected && tool.hooks_installed) continue
setInstalling(tool.id)
try {
await Promise.all([
!tool.spool_injected ? tauriInvoke('desktop_install_tool', { client: tool.id }) : Promise.resolve(),
!tool.hooks_installed ? tauriInvoke('desktop_install_hooks', { client: tool.id }) : Promise.resolve(),
])
} catch { /* ignore */ }
}
setInstalling(null)
setMsg('注入完成')
detectTools()
}
React.useEffect(() => {
if (step === 4) detectTools()
}, [step])
function finish() {
cfg.setConfigPath(configPath)
if (vaultRoot.trim()) cfg.setVaultRoot(vaultRoot)
if (actor.trim()) cfg.setDefaultActor(actor)
}
const allReady = tools.length > 0 && tools.every(t => t.spool_injected && t.hooks_installed)
return (
<div className="flex h-screen flex-col bg-background">
{/* macOS traffic-light drag zone */}
<div
className="h-11 shrink-0 select-none cursor-default"
onMouseDown={(e) => {
if (e.button === 0) void getCurrentWindow().startDragging()
}}
/>
<div className="flex flex-1 items-center justify-center p-6">
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-primary/10">
<BrainCircuit className="h-6 w-6 text-primary" />
</div>
<CardTitle>欢迎使用 spool</CardTitle>
<CardDescription>Step {step} / 4</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{step === 1 && (
<div className="space-y-3">
<Label>配置文件路径 (.toml)</Label>
<p className="text-xs text-muted-foreground">spool 用 toml 配置路由 vault 和 ledger</p>
<div className="flex gap-2">
<Input value={configPath} onChange={e => setConfigPath(e.target.value)} placeholder="/path/to/spool.toml" />
<Button variant="outline" onClick={pickConfig}>浏览</Button>
</div>
<Button className="w-full" disabled={!configPath.trim()} onClick={() => setStep(2)}>下一步</Button>
</div>
)}
{step === 2 && (
<div className="space-y-3">
<Label>Vault 根目录（可选）</Label>
<p className="text-xs text-muted-foreground">留空则使用 config 中的默认值</p>
<div className="flex gap-2">
<Input value={vaultRoot} onChange={e => setVaultRoot(e.target.value)} placeholder="/path/to/vault" />
<Button variant="outline" onClick={pickVault}>浏览</Button>
</div>
<div className="flex gap-2">
<Button variant="outline" className="flex-1" onClick={() => setStep(1)}>上一步</Button>
<Button className="flex-1" onClick={() => setStep(3)}>下一步</Button>
</div>
</div>
)}
{step === 3 && (
<div className="space-y-3">
<Label>你的名字（默认 actor）</Label>
<p className="text-xs text-muted-foreground">用作 lifecycle 操作的 actor 字段</p>
<Input value={actor} onChange={e => setActor(e.target.value)} placeholder="long" />
<div className="flex gap-2">
<Button variant="outline" className="flex-1" onClick={() => setStep(2)}>上一步</Button>
<Button className="flex-1" onClick={() => setStep(4)}>下一步</Button>
</div>
</div>
)}
{step === 4 && (
<div className="space-y-3">
<div>
<Label>连接 AI 工具</Label>
<p className="text-xs text-muted-foreground mt-1">
注入 MCP 让 AI 读写记忆，注入 Hooks 让 AI 自动提炼对话
</p>
</div>
{detecting ? (
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<Loader2 className="h-3.5 w-3.5 animate-spin" />
检测中…
</div>
) : tools.length === 0 ? (
<p className="text-xs text-muted-foreground">未检测到已安装的 AI 工具</p>
) : (
<div className="space-y-2">
{tools.map(tool => {
const fullyInjected = tool.spool_injected && tool.hooks_installed
const busy = installing === tool.id
return (
<div key={tool.id} className="flex items-center justify-between rounded-md border px-3 py-2">
<div className="flex items-center gap-2 min-w-0">
<span className="text-sm font-medium">{tool.name}</span>
<Check className="h-3 w-3 shrink-0 text-green-500" />
<div className="flex items-center gap-1">
<Badge variant={tool.spool_injected ? 'default' : 'secondary'} className="text-[10px] h-4">MCP</Badge>
<Badge variant={tool.hooks_installed ? 'default' : 'secondary'} className="text-[10px] h-4">Hooks</Badge>
</div>
</div>
{!fullyInjected && (
<button
onClick={async () => {
setInstalling(tool.id)
try {
await Promise.all([
!tool.spool_injected ? tauriInvoke('desktop_install_tool', { client: tool.id }) : Promise.resolve(),
!tool.hooks_installed ? tauriInvoke('desktop_install_hooks', { client: tool.id }) : Promise.resolve(),
])
} catch { /* ignore */ }
setInstalling(null)
detectTools()
}}
disabled={installing !== null}
className="ml-2 shrink-0 rounded border px-2 py-0.5 text-[10px] hover:bg-primary/10 hover:border-primary/30 transition-colors disabled:opacity-50"
>
{busy ? <Loader2 className="h-2.5 w-2.5 animate-spin inline" /> : '一键注入'}
</button>
)}
</div>
)
})}
</div>
)}
{tools.length > 0 && !allReady && (
<Button
variant="outline"
className="w-full text-xs"
onClick={installAll}
disabled={installing !== null}
>
{installing ? <Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" /> : null}
一键注入全部
</Button>
)}
{msg && <p className="text-xs text-green-600">{msg}</p>}
<div className="flex gap-2">
<Button variant="outline" className="flex-1" onClick={() => setStep(3)}>上一步</Button>
<Button className="flex-1" onClick={finish}>
{allReady ? '完成' : '跳过'}
</Button>
</div>
</div>
)}
</CardContent>
</Card>
</div>
</div>
)
}