import { useState } from 'react'
import { Bot, Save, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'

export default function AiConfigPage() {
  const [saving, setSaving] = useState(false)
  const [config, setConfig] = useState({
    model: 'gpt-4o', temperature: 0.7, maxTokens: 2000, enabled: true,
    systemPrompt: '你是一个植物养护专家，帮助用户解答关于植物养护的各种问题。请用专业但友好的语气回答。',
    welcomeMsg: '你好！我是植物养护AI助手，有什么关于植物的问题都可以问我～ 🌿',
  })

  const handleSave = async () => {
    setSaving(true)
    await new Promise(r => setTimeout(r, 500))
    setSaving(false)
  }

  return (
    <div className="space-y-6 animate-fadeIn max-w-3xl">
      <div>
        <h1 className="text-2xl font-bold flex items-center gap-2"><Bot className="h-6 w-6 text-primary" />AI 配置</h1>
        <p className="text-muted-foreground mt-1">配置 Plant 服务的 AI 助手参数</p>
      </div>

      <Card className="border-border/60 shadow-sm">
        <CardHeader><CardTitle className="text-lg">模型参数</CardTitle><CardDescription>设置 AI 模型和推理参数</CardDescription></CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div><Label className="text-sm font-medium">启用 AI 助手</Label><p className="text-xs text-muted-foreground mt-0.5">开启后用户可以在小程序中使用 AI 问答</p></div>
            <Switch checked={config.enabled} onCheckedChange={v => setConfig(c => ({ ...c, enabled: v }))} />
          </div>
          <div className="grid grid-cols-3 gap-4">
            <div className="grid gap-2"><Label>模型</Label><Select value={config.model} onValueChange={v => setConfig(c => ({ ...c, model: v }))}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="gpt-4o">GPT-4o</SelectItem><SelectItem value="gpt-4o-mini">GPT-4o Mini</SelectItem><SelectItem value="deepseek-v3">DeepSeek V3</SelectItem></SelectContent></Select></div>
            <div className="grid gap-2"><Label>Temperature</Label><Input type="number" step={0.1} min={0} max={2} value={config.temperature} onChange={e => setConfig(c => ({ ...c, temperature: parseFloat(e.target.value) || 0 }))} /></div>
            <div className="grid gap-2"><Label>Max Tokens</Label><Input type="number" value={config.maxTokens} onChange={e => setConfig(c => ({ ...c, maxTokens: parseInt(e.target.value) || 0 }))} /></div>
          </div>
        </CardContent>
      </Card>

      <Card className="border-border/60 shadow-sm">
        <CardHeader><CardTitle className="text-lg">Prompt 模板</CardTitle><CardDescription>配置 AI 对话的系统提示词和欢迎语</CardDescription></CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-2"><Label>System Prompt</Label><Textarea value={config.systemPrompt} onChange={e => setConfig(c => ({ ...c, systemPrompt: e.target.value }))} rows={5} className="font-mono text-sm" /></div>
          <div className="grid gap-2"><Label>欢迎语</Label><Input value={config.welcomeMsg} onChange={e => setConfig(c => ({ ...c, welcomeMsg: e.target.value }))} /></div>
        </CardContent>
      </Card>

      <div className="flex justify-end">
        <Button onClick={handleSave} disabled={saving} className="gap-2 px-6 shadow-sm">
          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}保存配置
        </Button>
      </div>
    </div>
  )
}
