import { useState } from 'react'
import { Plus, Search, Edit, Trash2, Star, MoreHorizontal, ArrowUp } 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 { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

const mockLevels = [
  { id: '1', level: 1, name: '种子', icon: '🌱', minExp: 0, maxExp: 100, color: '#a3a3a3', rewards: '解锁基本功能' },
  { id: '2', level: 2, name: '嫩芽', icon: '🌿', minExp: 100, maxExp: 300, color: '#86efac', rewards: '解锁社区发帖' },
  { id: '3', level: 3, name: '绿叶', icon: '🍃', minExp: 300, maxExp: 600, color: '#4ade80', rewards: '解锁识别加速' },
  { id: '4', level: 4, name: '花蕾', icon: '🌷', minExp: 600, maxExp: 1000, color: '#f9a8d4', rewards: '头像框·花蕾' },
  { id: '5', level: 5, name: '盛花', icon: '🌸', minExp: 1000, maxExp: 2000, color: '#f472b6', rewards: '专属称号·花园达人' },
  { id: '6', level: 6, name: '果实', icon: '🍎', minExp: 2000, maxExp: 5000, color: '#ef4444', rewards: '兑换折扣·9折' },
  { id: '7', level: 7, name: '大树', icon: '🌳', minExp: 5000, maxExp: 99999, color: '#22c55e', rewards: '至尊头像框 + 专属客服' },
]

export default function LevelPage() {
  const [levels] = useState(mockLevels)
  const [dialogOpen, setDialogOpen] = useState(false)

  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 justify-between items-center">
            <CardTitle className="text-lg flex items-center gap-2">
              <Star className="h-5 w-5 text-primary" /> 等级阶梯
              <Badge variant="secondary" className="text-xs">{levels.length} 级</Badge>
            </CardTitle>
            <Button size="sm" onClick={() => setDialogOpen(true)} className="h-9 gap-1.5">
              <Plus className="h-4 w-4" /> 新增等级
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <Table>
            <TableHeader className="bg-muted/30">
              <TableRow>
                <TableHead className="pl-6 w-[70px]">等级</TableHead>
                <TableHead className="w-[60px]">图标</TableHead>
                <TableHead>名称</TableHead>
                <TableHead>经验区间</TableHead>
                <TableHead>升级奖励</TableHead>
                <TableHead className="w-[60px]" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {levels.map(lv => (
                <TableRow key={lv.id} className="group hover:bg-muted/20">
                  <TableCell className="pl-6">
                    <div className="flex items-center justify-center w-8 h-8 rounded-full font-bold text-white text-sm" style={{ background: lv.color }}>
                      {lv.level}
                    </div>
                  </TableCell>
                  <TableCell className="text-2xl">{lv.icon}</TableCell>
                  <TableCell className="font-semibold">{lv.name}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1.5 text-sm">
                      <span className="font-mono bg-muted px-1.5 py-0.5 rounded">{lv.minExp}</span>
                      <ArrowUp className="h-3 w-3 text-muted-foreground rotate-90" />
                      <span className="font-mono bg-muted px-1.5 py-0.5 rounded">{lv.maxExp}</span>
                      <span className="text-xs text-muted-foreground ml-1">EXP</span>
                    </div>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground max-w-[200px] truncate">{lv.rewards}</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" type="number" placeholder="如: 8" />
            </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>
              <Input className="col-span-3" type="number" placeholder="10000" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label className="text-right">升级奖励</Label>
              <Input className="col-span-3" placeholder="描述升级后获得的奖励" />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
            <Button onClick={() => setDialogOpen(false)}>保存</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
