import { useState, useCallback, useEffect } from 'react'
import { createPortal } from 'react-dom'
import { isElectron } from '../utils/electronBridge'

interface Host {
    anchorId: string
    country: string
    invitationType: number // 1=普票, 2=金票
    state: number
    onlineFans?: number
    hostsLevel?: string
}

interface HostListDialogProps {
    visible: boolean
    onClose: () => void
    onSave: (hosts: Host[]) => void
}

// 等级数据定义
const LEVEL_OPTIONS = [
    {
        label: 'A', value: 'A',
        children: [
            { label: 'A1', value: 'A1' },
            { label: 'A2', value: 'A2' },
            { label: 'A3', value: 'A3' },
        ]
    },
    {
        label: 'B', value: 'B',
        children: [
            { label: 'B1', value: 'B1' },
            { label: 'B2', value: 'B2' },
            { label: 'B3', value: 'B3' },
            { label: 'B4', value: 'B4' },
            { label: 'B5', value: 'B5' },
        ]
    },
    {
        label: 'C', value: 'C',
        children: [
            { label: 'C1', value: 'C1' },
            { label: 'C2', value: 'C2' },
            { label: 'C3', value: 'C3' },
            { label: 'C4', value: 'C4' },
            { label: 'C5', value: 'C5' },
        ]
    },
    {
        label: 'D', value: 'D',
        children: [
            { label: 'D1', value: 'D1' },
            { label: 'D2', value: 'D2' },
            { label: 'D3', value: 'D3' },
            { label: 'D4', value: 'D4' },
            { label: 'D5', value: 'D5' },
        ]
    }
]

// 获取所有子级等级值
const getAllChildLevels = (parentValue: string): string[] => {
    const parent = LEVEL_OPTIONS.find(p => p.value === parentValue)
    return parent ? parent.children.map(c => c.value) : []
}

function HostListDialog({ visible, onClose, onSave }: HostListDialogProps) {
    const [hosts, setHosts] = useState<Host[]>([])
    const [selected, setSelected] = useState<Set<string>>(new Set())
    const [filters, setFilters] = useState({
        gold: true,
        ordinary: true,
        minOnlineFans: '',
        maxOnlineFans: '',
    })
    const [maxCount, setMaxCount] = useState<number>(100)
    const [selectedLevels, setSelectedLevels] = useState<Set<string>>(new Set()) // 选中的等级
    const [showLevelDropdown, setShowLevelDropdown] = useState(false)

    // 锁定 Body 滚动
    useEffect(() => {
        if (visible) {
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.overflow = ''
        }
        return () => {
            document.body.style.overflow = ''
        }
    }, [visible])

    // 加载主播数据和配置
    useEffect(() => {
        if (visible) {
            loadHosts()
            loadConfig()
        }
    }, [visible])

    const loadHosts = async () => {
        if (!isElectron()) return
        try {
            const data = await window.electronAPI!.loadAnchorData()
            setHosts(data as Host[])
            setSelected(new Set())
        } catch (e) {
            console.error('加载主播数据失败:', e)
        }
    }

    // 从后端加载配置（包括 maxAnchorCount 和 hostsLevelList）
    const loadConfig = async () => {
        if (!isElectron()) return
        try {
            const config = await window.electronAPI!.getAutomationConfig()
            if ((config as any)?.maxAnchorCount !== undefined) {
                setMaxCount((config as any).maxAnchorCount)
            }
            // 加载等级过滤配置
            if (config?.filters?.hostsLevelList) {
                setSelectedLevels(new Set(config.filters.hostsLevelList))
            }
        } catch (e) {
            console.error('加载配置失败:', e)
        }
    }

    // 更新等级过滤配置到后端
    const updateLevelFilter = async (levels: Set<string>) => {
        setSelectedLevels(levels)
        if (!isElectron()) return
        try {
            await window.electronAPI!.updateAutomationConfig({
                filters: { hostsLevelList: Array.from(levels) }
            } as any)
            console.log('[HostListDialog] 等级过滤已更新:', Array.from(levels))
        } catch (e) {
            console.error('更新等级配置失败:', e)
        }
    }

    // 切换单个等级选中状态
    const toggleLevel = (level: string) => {
        const newSet = new Set(selectedLevels)
        if (newSet.has(level)) {
            newSet.delete(level)
        } else {
            newSet.add(level)
        }
        updateLevelFilter(newSet)
    }

    // 切换整个大类
    const toggleParentLevel = (parentValue: string) => {
        const childLevels = getAllChildLevels(parentValue)
        const allSelected = childLevels.every(l => selectedLevels.has(l))
        const newSet = new Set(selectedLevels)

        if (allSelected) {
            // 全部取消
            childLevels.forEach(l => newSet.delete(l))
        } else {
            // 全部选中
            childLevels.forEach(l => newSet.add(l))
        }
        updateLevelFilter(newSet)
    }

    // 更新 maxAnchorCount 到后端
    const updateMaxCount = async (value: number) => {
        setMaxCount(value)
        if (!isElectron()) return
        try {
            await window.electronAPI!.updateAutomationConfig({ maxAnchorCount: value } as any)
            console.log('[HostListDialog] 主播数据上限已更新:', value)
        } catch (e) {
            console.error('更新配置失败:', e)
        }
    }

    // 筛选后的主播列表
    const filteredHosts = hosts.filter(h => {
        if (!filters.gold && h.invitationType === 2) return false
        if (!filters.ordinary && h.invitationType === 1) return false
        if (filters.minOnlineFans && h.onlineFans !== undefined) {
            if (h.onlineFans < parseInt(filters.minOnlineFans)) return false
        }
        if (filters.maxOnlineFans && h.onlineFans !== undefined) {
            if (h.onlineFans > parseInt(filters.maxOnlineFans)) return false
        }
        // 等级过滤：如果选择了等级，则只显示选中等级的主播
        if (selectedLevels.size > 0 && h.hostsLevel) {
            if (!selectedLevels.has(h.hostsLevel)) return false
        }
        return true
    })

    const selectedCount = selected.size

    const toggleSelect = useCallback((id: string) => {
        setSelected(prev => {
            const next = new Set(prev)
            if (next.has(id)) next.delete(id)
            else next.add(id)
            return next
        })
    }, [])

    const selectAll = () => {
        setSelected(new Set(filteredHosts.map(h => h.anchorId)))
    }

    const selectNone = () => {
        setSelected(new Set())
    }

    const invertSelect = () => {
        setSelected(prev => {
            const next = new Set<string>()
            filteredHosts.forEach(h => {
                if (!prev.has(h.anchorId)) next.add(h.anchorId)
            })
            return next
        })
    }

    const deleteSelected = () => {
        if (!selected.size) return
        if (!confirm(`确认删除选中的 ${selected.size} 项吗？`)) return

        const remaining = hosts.filter(h => !selected.has(h.anchorId))
        setHosts(remaining)
        setSelected(new Set())
    }

    const handleSave = async () => {
        if (isElectron()) {
            await window.electronAPI!.saveAnchorData(hosts)
        }
        onSave(hosts)
        onClose()
    }

    if (!visible) return null

    return createPortal(
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center" style={{ zIndex: 9999 }}>
            <div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[80vh] flex flex-col mx-4">
                {/* 头部 */}
                <div className="p-4 border-b border-gray-200 flex items-center justify-between">
                    <div>
                        <h3 className="text-lg font-semibold text-gray-600">主播管理</h3>
                        <span className="text-sm text-gray-700">
                            已选 {selectedCount} / 共 {filteredHosts.length}
                        </span>
                    </div>
                    <button onClick={onClose} className="text-gray-700 hover:text-gray-700 text-xl">✕</button>
                </div>

                {/* 工具栏 */}
                <div className="p-4 border-b border-gray-100 space-y-3">
                    <div className="flex flex-wrap gap-2">
                        <button onClick={selectAll} className="px-3 py-1.5 text-sm bg-blue-100 text-blue-700 hover:bg-blue-200 rounded border border-blue-300">全选</button>
                        <button onClick={selectNone} className="px-3 py-1.5 text-sm bg-slate-100 text-slate-700 hover:bg-slate-200 rounded border border-slate-300">全不选</button>
                        <button onClick={invertSelect} className="px-3 py-1.5 text-sm bg-slate-100 text-slate-700 hover:bg-slate-200 rounded border border-slate-300">反选</button>
                        <button
                            onClick={deleteSelected}
                            disabled={!selectedCount}
                            className="px-3 py-1.5 text-sm bg-red-100 text-red-600 hover:bg-red-200 rounded disabled:opacity-50"
                        >
                            删除选中
                        </button>
                    </div>

                    {/* 筛选 */}
                    <div className="flex flex-wrap items-center gap-4 text-sm">
                        <label className="flex items-center gap-2 cursor-pointer">
                            <input
                                type="checkbox"
                                checked={filters.gold}
                                onChange={(e) => setFilters(f => ({ ...f, gold: e.target.checked }))}
                                className="w-4 h-4"
                            />
                            <span className="text-yellow-600">金票</span>
                        </label>
                        <label className="flex items-center gap-2 cursor-pointer">
                            <input
                                type="checkbox"
                                checked={filters.ordinary}
                                onChange={(e) => setFilters(f => ({ ...f, ordinary: e.target.checked }))}
                                className="w-4 h-4"
                            />
                            <span>普票</span>
                        </label>

                        <span className="text-gray-700">在线人数</span>
                        <input
                            type="number"
                            placeholder="最小"
                            value={filters.minOnlineFans}
                            onChange={(e) => setFilters(f => ({ ...f, minOnlineFans: e.target.value }))}
                            className="w-20 px-2 py-1 border border-gray-300 rounded text-sm"
                        />
                        <span>~</span>
                        <input
                            type="number"
                            placeholder="最大"
                            value={filters.maxOnlineFans}
                            onChange={(e) => setFilters(f => ({ ...f, maxOnlineFans: e.target.value }))}
                            className="w-20 px-2 py-1 border border-gray-300 rounded text-sm"
                        />

                        {/* 等级过滤 */}
                        <div className="relative border-l border-gray-200 pl-4 ml-2">
                            <button
                                onClick={() => setShowLevelDropdown(!showLevelDropdown)}
                                className="flex items-center gap-2 px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-50"
                            >
                                <span className="text-gray-700 font-medium">等级过滤</span>
                                <span className="text-xs text-blue-600">
                                    {selectedLevels.size > 0 ? `已选 ${selectedLevels.size}` : '全部'}
                                </span>
                                <svg className={`w-4 h-4 transition-transform ${showLevelDropdown ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>

                            {/* 下拉菜单 */}
                            {showLevelDropdown && (
                                <div className="absolute top-full left-4 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 p-3 w-72">
                                    <div className="text-xs text-gray-500 mb-2">选择接收的主播等级（不选则接收全部）</div>
                                    <div className="space-y-2 max-h-60 overflow-auto">
                                        {LEVEL_OPTIONS.map(parent => {
                                            const childLevels = parent.children.map(c => c.value)
                                            const selectedChildCount = childLevels.filter(l => selectedLevels.has(l)).length
                                            const allSelected = selectedChildCount === childLevels.length
                                            const partialSelected = selectedChildCount > 0 && !allSelected

                                            return (
                                                <div key={parent.value} className="border border-gray-100 rounded p-2">
                                                    <label className="flex items-center gap-2 cursor-pointer font-medium text-gray-700">
                                                        <input
                                                            type="checkbox"
                                                            checked={allSelected}
                                                            ref={el => { if (el) el.indeterminate = partialSelected }}
                                                            onChange={() => toggleParentLevel(parent.value)}
                                                            className="w-4 h-4"
                                                        />
                                                        {parent.label} 级
                                                        <span className="text-xs text-gray-400">({selectedChildCount}/{childLevels.length})</span>
                                                    </label>
                                                    <div className="flex flex-wrap gap-2 mt-1 ml-6">
                                                        {parent.children.map(child => (
                                                            <label key={child.value} className="flex items-center gap-1 cursor-pointer text-gray-600">
                                                                <input
                                                                    type="checkbox"
                                                                    checked={selectedLevels.has(child.value)}
                                                                    onChange={() => toggleLevel(child.value)}
                                                                    className="w-3 h-3"
                                                                />
                                                                <span className="text-xs">{child.label}</span>
                                                            </label>
                                                        ))}
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                    <div className="mt-2 pt-2 border-t border-gray-100 flex justify-between">
                                        <button
                                            onClick={() => updateLevelFilter(new Set())}
                                            className="text-xs text-gray-500 hover:text-gray-700"
                                        >
                                            清空选择
                                        </button>
                                        <button
                                            onClick={() => setShowLevelDropdown(false)}
                                            className="text-xs text-blue-600 hover:text-blue-700"
                                        >
                                            完成
                                        </button>
                                    </div>
                                </div>
                            )}
                        </div>

                        {/* 接收上限 - 紧凑布局 */}
                        <div className="flex items-center gap-2 border-l border-gray-200 pl-4 ml-2">
                            <span className="text-gray-700 font-medium whitespace-nowrap">接收上限</span>
                            <input
                                type="number"
                                min={0}
                                placeholder="无限制"
                                value={maxCount || ''}
                                onChange={(e) => {
                                    const val = parseInt(e.target.value)
                                    updateMaxCount(isNaN(val) ? 0 : val)
                                }}
                                className="w-20 px-2 py-1 border border-gray-300 rounded text-sm focus:border-blue-500 focus:outline-none"
                            />
                        </div>
                    </div>
                </div>

                {/* 主播列表 */}
                <div className="flex-1 overflow-auto p-4">
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                        {filteredHosts.map(host => (
                            <div
                                key={host.anchorId}
                                onClick={() => toggleSelect(host.anchorId)}
                                className={`p-3 rounded-lg border cursor-pointer transition-all ${selected.has(host.anchorId)
                                    ? 'border-blue-500 bg-blue-50 shadow'
                                    : 'border-gray-200 hover:border-gray-300 hover:shadow-sm'
                                    }`}
                            >
                                <div className="flex items-center justify-between mb-1">
                                    <span className="font-medium text-sm truncate flex-1" title={host.anchorId}>
                                        {host.anchorId}
                                    </span>
                                    <span className={host.state ? 'text-green-500' : 'text-red-500'}>
                                        {host.state ? '✓' : '✗'}
                                    </span>
                                </div>
                                <div className="flex items-center justify-between text-xs text-gray-700">
                                    <span>{host.country || '—'}</span>
                                    <div className="flex items-center gap-1">
                                        {host.hostsLevel && (
                                            <span className="px-1.5 py-0.5 rounded bg-purple-100 text-purple-600 text-xs">
                                                {host.hostsLevel}
                                            </span>
                                        )}
                                        <span className={`px-1.5 py-0.5 rounded border ${host.invitationType === 2
                                            ? 'text-yellow-600 border-yellow-400'
                                            : 'border-gray-300'
                                            }`}>
                                            {host.invitationType === 2 ? '金票' : '普票'}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                    {filteredHosts.length === 0 && (
                        <div className="text-center text-gray-700 py-12">
                            暂无主播数据
                        </div>
                    )}
                </div>

                {/* 底部 */}
                <div className="p-4 border-t border-gray-200 flex justify-end gap-3">
                    <button
                        onClick={onClose}
                        className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg"
                    >
                        关闭
                    </button>
                    <button
                        onClick={handleSave}
                        className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600"
                    >
                        保存
                    </button>
                </div>
            </div>
        </div>,
        document.body
    )
}

export default HostListDialog