import { useState, useEffect } from 'react'
import { Plus, Edit, Crown, Sprout, X, Search, Trophy, Star, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { getLevelConfList, addLevelConf, updateLevelConf, type LevelConf } from '@/api/config'
import { cn } from '@/lib/utils'

interface LevelFormData {
    id?: string
    level: number
    title: string
    minSunlight: number
    perks: string
}

const defaultFormData: LevelFormData = {
    level: 1,
    title: '',
    minSunlight: 0,
    perks: '',
}

export default function LevelConfigPage() {
    const [levels, setLevels] = useState<LevelConf[]>([])
    const [loading, setLoading] = useState(true)
    const [dialogOpen, setDialogOpen] = useState(false)
    const [formData, setFormData] = useState<LevelFormData>(defaultFormData)
    const [isEdit, setIsEdit] = useState(false)
    const [submitting, setSubmitting] = useState(false)
    const [searchTerm, setSearchTerm] = useState('')

    // 获取列表
    const fetchLevels = async () => {
        setLoading(true)
        try {
            const res = await getLevelConfList()

            let list: LevelConf[] = []

            if (res && res.data && Array.isArray(res.data.list)) {
                list = res.data.list
            }
            // Sort by level
            list.sort((a, b) => a.level - b.level)

            setLevels(list)
        } catch (error) {
            console.error('获取等级配置失败:', error)
            setLevels([])
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        fetchLevels()
    }, [])

    // 打开新增对话框
    const handleAdd = () => {
        setIsEdit(false)
        // Auto increment level suggestion
        const maxLevel = levels.length > 0 ? Math.max(...levels.map(l => l.level)) : 0
        setFormData({ ...defaultFormData, level: maxLevel + 1 })
        setDialogOpen(true)
    }

    // 打开编辑对话框
    const handleEdit = (level: LevelConf) => {
        setIsEdit(true)
        setFormData({
            id: level.id,
            level: level.level,
            title: level.title,
            minSunlight: level.minSunlight,
            perks: level.perks,
        })
        setDialogOpen(true)
    }

    // 提交表单
    const handleSubmit = async () => {
        if (!formData.title) return

        setSubmitting(true)
        try {
            if (isEdit && formData.id) {
                await updateLevelConf({ ...formData, id: formData.id })
            } else {
                await addLevelConf(formData)
            }
            setDialogOpen(false)
            fetchLevels()
        } catch (error) {
            console.error('保存等级配置失败:', error)
        } finally {
            setSubmitting(false)
        }
    }

    const filteredLevels = levels.filter(l =>
        l.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        l.perks?.toLowerCase().includes(searchTerm.toLowerCase())
    )

    // Calculate stats
    const maxSunlight = Math.max(...levels.map(l => l.minSunlight), 0)
    const totalPerks = levels.reduce((acc, curr) => acc + (curr.perks ? 1 : 0), 0)

    return (
        <div className="space-y-6 animate-fadeIn">
            {/* Header & Stats */}
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                <Card className="border-l-4 border-l-primary shadow-sm hover:shadow-md transition-all">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">总等级数</CardTitle>
                        <Trophy className="h-4 w-4 text-primary" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{levels.length}</div>
                        <p className="text-xs text-muted-foreground mt-1">当前配置的等级总数</p>
                    </CardContent>
                </Card>
                <Card className="border-l-4 border-l-green-500 shadow-sm hover:shadow-md transition-all">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">最高阳光门槛</CardTitle>
                        <Sprout className="h-4 w-4 text-green-500" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{maxSunlight.toLocaleString()}</div>
                        <p className="text-xs text-muted-foreground mt-1">解锁最高等级所需阳光</p>
                    </CardContent>
                </Card>
                <Card className="border-l-4 border-l-yellow-500 shadow-sm hover:shadow-md transition-all">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">权益覆盖率</CardTitle>
                        <Star className="h-4 w-4 text-yellow-500" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{levels.length > 0 ? Math.round((totalPerks / levels.length) * 100) : 0}%</div>
                        <p className="text-xs text-muted-foreground mt-1">已配置权益的等级占比</p>
                    </CardContent>
                </Card>
                <Card className="border-l-4 border-l-purple-500 shadow-sm hover:shadow-md transition-all group cursor-pointer bg-gradient-to-br from-background to-purple-50/50 hover:to-purple-100/50" onClick={handleAdd}>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium text-purple-600">快速添加</CardTitle>
                        <div className="bg-purple-100 p-1 rounded-full group-hover:scale-110 transition-transform">
                            <Plus className="h-4 w-4 text-purple-600" />
                        </div>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold text-purple-700">New</div>
                        <p className="text-xs text-purple-600/80 mt-1">点击创建新等级配置</p>
                    </CardContent>
                </Card>
            </div>

            {/* Main Content */}
            <Card className="border-border/60 shadow-sm hover:shadow transition-shadow duration-300">
                <CardHeader className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pb-6">
                    <div className="space-y-1">
                        <CardTitle className="text-xl flex items-center gap-2">
                            等级列表
                            <Badge variant="secondary" className="font-normal text-xs">{levels.length}</Badge>
                        </CardTitle>
                        <CardDescription>
                            管理用户成长的等级体系，定义每个阶段的阳光值要求与专属特权。
                        </CardDescription>
                    </div>
                    <div className="flex items-center gap-3 w-full sm:w-auto">
                        <div className="relative w-full sm:w-auto">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                            <Input
                                placeholder="搜索称号或权益..."
                                className="pl-9 w-full sm:w-[240px] h-10 bg-muted/30 focus:bg-background transition-colors"
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                            />
                        </div>
                        <Button onClick={handleAdd} className="h-10 gap-2 shadow-sm bg-primary hover:bg-primary/90 transition-all active:scale-95">
                            <Plus className="h-4 w-4" />
                            <span className="hidden sm:inline">新增等级</span>
                        </Button>
                    </div>
                </CardHeader>
                <CardContent>
                    {loading ? (
                        <div className="flex flex-col items-center justify-center py-16 space-y-4 text-muted-foreground bg-muted/10 rounded-lg border border-dashed border-border/60">
                            <div className="relative">
                                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <Crown className="h-4 w-4 text-primary opacity-50" />
                                </div>
                            </div>
                            <p className="text-sm font-medium animate-pulse">正在加载配置数据...</p>
                        </div>
                    ) : (
                        <div className="rounded-lg border border-border/50 overflow-hidden bg-background">
                            <Table>
                                <TableHeader className="bg-muted/50 backdrop-blur-sm sticky top-0">
                                    <TableRow className="hover:bg-transparent border-b-border/60">
                                        <TableHead className="w-[100px] font-semibold pl-6">等级</TableHead>
                                        <TableHead className="font-semibold">称号 & 标识</TableHead>
                                        <TableHead className="font-semibold">阳光值门槛</TableHead>
                                        <TableHead className="font-semibold">权益说明</TableHead>
                                        <TableHead className="w-[100px] text-right font-semibold pr-6">操作</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {filteredLevels.length === 0 ? (
                                        <TableRow>
                                            <TableCell colSpan={5} className="h-64 text-center">
                                                <div className="flex flex-col items-center justify-center text-muted-foreground gap-3">
                                                    <div className="bg-muted/30 p-4 rounded-full">
                                                        <Search className="h-8 w-8 opacity-40" />
                                                    </div>
                                                    <div>
                                                        <p className="font-medium text-foreground">未找到匹配数据</p>
                                                        <p className="text-sm text-muted-foreground mt-1">尝试调整搜索关键词或添加新等级</p>
                                                    </div>
                                                    {searchTerm && (
                                                        <Button variant="outline" size="sm" onClick={() => setSearchTerm('')} className="mt-2">
                                                            清除搜索
                                                        </Button>
                                                    )}
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ) : (
                                        filteredLevels.map((item, index) => (
                                            <TableRow
                                                key={item.id}
                                                className={cn(
                                                    "group transition-all duration-200 hover:bg-muted/30 border-b-border/40",
                                                    index % 2 === 1 && "bg-muted/5"
                                                )}
                                            >
                                                <TableCell className="font-medium pl-6">
                                                    <div className="flex items-center gap-2">
                                                        <div className={cn(
                                                            "flex h-9 w-9 items-center justify-center rounded-lg font-bold shadow-sm transition-transform group-hover:scale-110",
                                                            item.level <= 3 ? "bg-primary/10 text-primary border border-primary/20" :
                                                                item.level <= 6 ? "bg-purple-500/10 text-purple-600 border border-purple-500/20" :
                                                                    "bg-orange-500/10 text-orange-600 border border-orange-500/20"
                                                        )}>
                                                            {item.level}
                                                        </div>
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    <div className="flex items-center gap-3">
                                                        <div className="bg-background p-1.5 rounded-full shadow-sm border border-border/50">
                                                            <Crown className={cn("h-4 w-4",
                                                                item.level <= 3 ? "text-primary/70" :
                                                                    item.level <= 6 ? "text-purple-500" :
                                                                        "text-orange-500"
                                                            )} />
                                                        </div>
                                                        <span className="font-medium text-foreground/90">{item.title}</span>
                                                        {item.level === levels.length && levels.length > 5 && (
                                                            <Badge variant="secondary" className="bg-gradient-to-r from-orange-500/10 to-red-500/10 text-orange-600 border-none text-[10px] px-1.5 py-0 h-5">MAX</Badge>
                                                        )}
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                                                        <Sprout className="h-4 w-4 text-green-500/70" />
                                                        <span className="font-mono text-sm tracking-wide">{item.minSunlight.toLocaleString()}</span>
                                                    </div>
                                                </TableCell>
                                                <TableCell className="max-w-[300px]">
                                                    {item.perks ? (
                                                        <div className="flex items-start gap-2 group/perk">
                                                            <Sparkles className="h-3.5 w-3.5 mt-0.5 text-purple-500/70 shrink-0 group-hover/perk:text-purple-500 transition-colors" />
                                                            <p className="text-sm text-muted-foreground line-clamp-2 group-hover:text-foreground/80 transition-colors cursor-help" title={item.perks}>
                                                                {item.perks}
                                                            </p>
                                                        </div>
                                                    ) : (
                                                        <span className="text-muted-foreground/30 text-sm italic flex items-center gap-1">
                                                            <span className="w-1.5 h-1.5 bg-muted-foreground/20 rounded-full"></span>
                                                            暂无权益
                                                        </span>
                                                    )}
                                                </TableCell>
                                                <TableCell className="text-right pr-6">
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        className="h-8 w-8 text-muted-foreground/60 hover:text-primary hover:bg-primary/10 transition-all duration-200"
                                                        onClick={() => handleEdit(item)}
                                                    >
                                                        <Edit className="h-3.5 w-3.5" />
                                                    </Button>
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </div>
                    )}
                </CardContent>
            </Card>

            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                <DialogContent className="sm:max-w-[500px]">
                    <DialogHeader>
                        <DialogTitle className="flex items-center gap-2 text-xl">
                            <div className={cn("p-2 rounded-lg", isEdit ? "bg-primary/10 text-primary" : "bg-purple-500/10 text-purple-600")}>
                                {isEdit ? <Edit className="h-5 w-5" /> : <Plus className="h-5 w-5" />}
                            </div>
                            {isEdit ? '编辑等级' : '新增等级'}
                        </DialogTitle>
                        <DialogDescription className="pt-2">
                            配置等级数值、称号及对应的权益。这些设置将直接影响用户成长体验。
                        </DialogDescription>
                    </DialogHeader>
                    <div className="grid gap-6 py-6">
                        <div className="grid grid-cols-2 gap-5">
                            <div className="grid gap-2">
                                <Label htmlFor="level" className="text-xs uppercase text-muted-foreground font-semibold tracking-wider">
                                    等级数值
                                </Label>
                                <div className="relative group">
                                    <Input
                                        id="level"
                                        type="number"
                                        min={1}
                                        value={formData.level}
                                        onChange={(e) => setFormData({ ...formData, level: parseInt(e.target.value) || 0 })}
                                        className="pr-8 font-mono bg-muted/30 focus:bg-background h-10 transition-all"
                                    />
                                    {formData.level > 0 && (
                                        <button
                                            className="absolute right-2 top-3 text-muted-foreground/30 hover:text-destructive transition-colors"
                                            onClick={() => setFormData({ ...formData, level: 0 })}
                                            type="button"
                                            tabIndex={-1}
                                        >
                                            <X className="h-4 w-4" />
                                        </button>
                                    )}
                                </div>
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="minSunlight" className="text-xs uppercase text-muted-foreground font-semibold tracking-wider">
                                    所需阳光值
                                </Label>
                                <div className="relative group">
                                    <Input
                                        id="minSunlight"
                                        type="number"
                                        min={0}
                                        value={formData.minSunlight}
                                        onChange={(e) => setFormData({ ...formData, minSunlight: parseInt(e.target.value) || 0 })}
                                        className="pr-8 font-mono bg-muted/30 focus:bg-background h-10 transition-all"
                                    />
                                    {formData.minSunlight > 0 && (
                                        <button
                                            className="absolute right-2 top-3 text-muted-foreground/30 hover:text-destructive transition-colors"
                                            onClick={() => setFormData({ ...formData, minSunlight: 0 })}
                                            type="button"
                                            tabIndex={-1}
                                        >
                                            <X className="h-4 w-4" />
                                        </button>
                                    )}
                                </div>
                            </div>
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="title" className="text-xs uppercase text-muted-foreground font-semibold tracking-wider">
                                等级称号
                            </Label>
                            <div className="relative group">
                                <Input
                                    id="title"
                                    value={formData.title}
                                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                                    placeholder="例如：萌芽园丁"
                                    className="pr-8 bg-muted/30 focus:bg-background h-10 transition-all"
                                />
                                {formData.title && (
                                    <button
                                        className="absolute right-2 top-3 text-muted-foreground/30 hover:text-destructive transition-colors"
                                        onClick={() => setFormData({ ...formData, title: '' })}
                                        type="button"
                                        tabIndex={-1}
                                    >
                                        <X className="h-4 w-4" />
                                    </button>
                                )}
                            </div>
                        </div>
                        <div className="grid gap-2">
                            <div className="flex items-center justify-between">
                                <Label htmlFor="perks" className="text-xs uppercase text-muted-foreground font-semibold tracking-wider">
                                    权益描述
                                </Label>
                                <span className="text-[10px] text-muted-foreground">支持换行</span>
                            </div>
                            <div className="relative group">
                                <Textarea
                                    id="perks"
                                    value={formData.perks}
                                    onChange={(e) => setFormData({ ...formData, perks: e.target.value })}
                                    placeholder="例如：解锁每日签到双倍奖励、专属头像框"
                                    className="h-28 pr-8 resize-none bg-muted/30 focus:bg-background transition-all leading-relaxed"
                                />
                                {formData.perks && (
                                    <button
                                        className="absolute right-2 top-3 text-muted-foreground/30 hover:text-destructive transition-colors"
                                        onClick={() => setFormData({ ...formData, perks: '' })}
                                        type="button"
                                        tabIndex={-1}
                                    >
                                        <X className="h-4 w-4" />
                                    </button>
                                )}
                            </div>
                        </div>
                    </div>
                    <DialogFooter className="gap-2 sm:gap-0">
                        <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={submitting} className="h-10 px-6">
                            取消
                        </Button>
                        <Button onClick={handleSubmit} disabled={submitting} className="h-10 px-6 min-w-[80px]">
                            {submitting ? <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div> : '保存'}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    )
}