ng-webot

import { useState, useEffect } from 'react'
import { useAuth } from '@/lib/auth'
import SkillConfig from '@/components/SkillConfig'
import { Bot, Loader2, Sparkles } from 'lucide-react'

export default function SkillPage() {
  const { bots, loading: authLoading } = useAuth()
  const [selBotId, setSelBotId] = useState<number>(0)

  // auto-select first bot
  useEffect(() => {
    if (!authLoading && bots.length > 0 && !selBotId) {
      setSelBotId(Number(bots[0].id))
    }
  }, [authLoading, bots, selBotId])

  if (authLoading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    )
  }

  if (bots.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
        <Bot className="h-12 w-12 mb-4 text-gray-300" />
        <p className="text-sm">还没有机器人，请先在个人中心添加</p>
      </div>
    )
  }

  return (
    <div className="w-full px-4 py-6 sm:px-6 space-y-6">
      {/* header */}
      <div className="flex items-center gap-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/30">
          <Sparkles className="h-5 w-5 text-amber-600 dark:text-amber-400" />
        </div>
        <div>
          <h1 className="text-xl font-bold">技能管理</h1>
          <p className="text-sm text-muted-foreground">安装技能包 + 自定义上传，让 AI 获得专业领域能力</p>
        </div>
      </div>

      {/* bot selector */}
      <div className="flex items-center gap-2 flex-wrap">
        <span className="text-sm text-muted-foreground">选择机器人：</span>
        {bots.map(b => (
          <button
            key={b.id}
            onClick={() => setSelBotId(Number(b.id))}
            className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
              selBotId === Number(b.id)
                ? 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300'
                : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
            }`}
          >
            <Bot className="inline h-3 w-3 mr-1" />
            {b.name || b.id}
          </button>
        ))}
      </div>

      {/* config panel */}
      {selBotId > 0 && <SkillConfig botId={selBotId} />}
    </div>
  )
}