import { useState } from 'react'
import { Plus, Search, Edit, Trash2, Award, MoreHorizontal } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Badge } from '@/components/ui/badge'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

// Mock data
const mockBadges = [
  { id: '1', name: '绿色新手', icon: '🌱', description: '完成首次浇水', condition: '首次浇水', category: 'beginner', sort: 0, isActive: true },
  { id: '2', name: '植物猎人', icon: '🌿', description: '识别10种植物', condition: '识别10种植物', category: 'explore', sort: 1, isActive: true },
  { id: '3', name: '花园大师', icon: '🌸', description: '养活50株植物', condition: '养活50株植物', category: 'master', sort: 2, isActive: true },
  { id: '4', name: '社区之星', icon: '⭐', description: '帖子获得100赞', condition: '获得100赞', category: 'social', sort: 3, isActive: true },
  { id: '5', name: '百科贡献者', icon: '📚', description: '贡献5篇百科', condition: '贡献5篇百科', category: 'wiki', sort: 4, isActive: false },
  { id: '6', name: '连续打卡7天', icon: '🔥', description: '连续签到7天', condition: '连续7天签到', category: 'checkin', sort: 5, isActive: true },
]

const categoryMap: Record<string, string> = {
  beginner: '新手入门', explore: '探索发现', master: '大师成就',
  social: '社区互动', wiki: '百科贡献', checkin: '签到打卡',
}

export default function BadgePage() {
  const [badges] = useState(mockBadges)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [search, setSearch] = useState('')

  const filtered = badges.filter(b => !search || b.name.includes(search))

  return (
    <div className="space-y-6 animate-fadeIn">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">徽章配置</h1>
        <p className="text-muted-foreground mt-1">管理用户成就徽章，配置获取条件和展示规则。</p>
      </div>

      <Card className="border-border/60 shadow-soft">
        <CardHeader className="pb-3 border-b border-border/40">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <CardTitle className="text-lg flex items-center gap-2">
              <Award className="h-5 w-5 text-primary" /> 徽章列表
              <Badge variant="secondary" className="text-xs">{filtered.length}</Badge>
            </CardTitle>
            <div className="flex items-center gap-3">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input placeholder="搜索徽章..." className="pl-9 w-48 h-9" value={search} onChange={e => setSearch(e.target.value)} />
              </div>
              <Button size="sm" onClick={() => setDialogOpen(true)} className="h-9 gap-1.5">
                <Plus className="h-4 w-4" /> 新增徽章
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <Table>
            <TableHeader className="bg-muted/30">
              <TableRow>
                <TableHead className="pl-6 w-[60px]">图标</TableHead>
                <TableHead>徽章名称</TableHead>
                <TableHead>获取条件</TableHead>
                <TableHead>分类</TableHead>
                <TableHead>排序</TableHead>
                <TableHead>状态</TableHead>
                <TableHead className="w-[60px]" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {filtered.map(b => (
                <TableRow key={b.id} className="group hover:bg-muted/20">
                  <TableCell className="pl-6 text-2xl">{b.icon}</TableCell>
                  <TableCell>
                    <div><span className="font-medium">{b.name}</span></div>
                    <div className="text-xs text-muted-foreground">{b.description}</div>
                  </TableCell>
                  <TableCell><span className="text-sm bg-muted px-2 py-0.5 rounded font-mono">{b.condition}</span></TableCell>
                  <TableCell><Badge variant="outline" className="bg-primary/5">{categoryMap[b.category]}</Badge></TableCell>
                  <TableCell className="font-mono text-muted-foreground">{b.sort}</TableCell>
                  <TableCell>
                    {b.isActive
                      ? <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 shadow-none">启用</Badge>
                      : <Badge variant="secondary" className="shadow-none">禁用</Badge>}
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8 opacity-0 group-hover:opacity-100">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem><Edit className="mr-2 h-4 w-4" /> 编辑</DropdownMenuItem>
                        <DropdownMenuItem className="text-red-500"><Trash2 className="mr-2 h-4 w-4" /> 删除</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>新增徽章</DialogTitle>
            <DialogDescription>配置徽章的名称、图标和获取条件。</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label className="text-right">名称</Label>
              <Input className="col-span-3" placeholder="如: 绿色新手" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label className="text-right">图标</Label>
              <Input className="col-span-3" placeholder="使用 emoji 或上传图片" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label className="text-right">获取条件</Label>
              <Input className="col-span-3" placeholder="如: 首次浇水" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label className="text-right">分类</Label>
              <Select defaultValue="beginner">
                <SelectTrigger className="col-span-3"><SelectValue /></SelectTrigger>
                <SelectContent>
                  {Object.entries(categoryMap).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
            <Button onClick={() => setDialogOpen(false)}>保存</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
