import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
import {createPortal} from 'react-dom';
import {
    Avatar,
    Button,
    Card,
    Col,
    Divider,
    InputNumber,
    Layout,
    Modal,
    Pagination,
    Row,
    Select,
    Slider,
    Table,
    Tag,
} from 'antd';
import {AppstoreOutlined, FilterOutlined, ReloadOutlined, UserOutlined} from '@ant-design/icons';
import * as App from '../../wailsjs/go/service/App';
import {useMessage} from '../utils/useMessage';
import {
    BonusStats,
    Filters,
    MainStatKey,
    RawHero,
    RawItem,
    SetFilters,
    StatKey,
    emptyBonusStats,
    emptyFilters,
    emptySetFilters,
    isFourPieceSet,
    isTwoPieceSet,
} from '../utils/optimizer';
import './optimizer.css';

const {Content} = Layout;
const MAX_ITEMS_PER_SLOT = 150;
const MAX_COMBOS = 200000;
const MAX_RESULTS = 200;
const GEAR_SLOTS = ['Weapon', 'Helmet', 'Armor', 'Necklace', 'Ring', 'Boots'] as const;

type BuildResult = {
    key: string;
    sets: string;
    atk: number;
    def: number;
    hp: number;
    spd: number;
    cr: number;
    cd: number;
    acc: number;
    res: number;
    score: number;
    items: RawItem[];
};

const STAT_LABELS: Array<{key: StatKey; label: string}> = [
    {key: 'atk', label: '\u653b\u51fb'},
    {key: 'def', label: '\u9632\u5fa1'},
    {key: 'hp', label: '\u751f\u547d'},
    {key: 'spd', label: '\u901f\u5ea6'},
    {key: 'cr', label: '\u66b4\u51fb'},
    {key: 'cd', label: '\u7206\u4f24'},
    {key: 'acc', label: '\u547d\u4e2d'},
    {key: 'res', label: '\u62b5\u6297'},
];

const getHeroStatValue = (hero: RawHero | null, key: StatKey) => {
    if (!hero) return 0;
    switch (key) {
        case 'atk':
            return hero.atk ?? hero.baseAtk ?? 0;
        case 'def':
            return hero.def ?? hero.baseDef ?? 0;
        case 'hp':
            return hero.hp ?? hero.baseHp ?? 0;
        case 'spd':
            return hero.spd ?? hero.baseSpd ?? 0;
        case 'cr':
            return hero.cr ?? hero.baseCr ?? 0;
        case 'cd':
            return hero.cd ?? hero.baseCd ?? 0;
        case 'acc':
            return hero.eff ?? hero.baseEff ?? 0;
        case 'res':
            return hero.res ?? hero.baseRes ?? 0;
        default:
            return 0;
    }
};

export default function OptimizerPage() {
    const [loading, setLoading] = useState(false);
    const [parsedItems, setParsedItems] = useState<RawItem[]>([]);
    const [parsedHeroes, setParsedHeroes] = useState<RawHero[]>([]);
    const [selectedHeroId, setSelectedHeroId] = useState<string | number | null>(null);
    const [setFilters, setSetFilters] = useState<SetFilters>(emptySetFilters);
    const [statFilters, setStatFilters] = useState<Filters>(emptyFilters);
    const [mainStatFilters, setMainStatFilters] = useState<{necklace: MainStatKey | 'All'; ring: MainStatKey | 'All'; boots: MainStatKey | 'All'}>({
        necklace: 'All',
        ring: 'All',
        boots: 'All',
    });
    const [weightValues, setWeightValues] = useState<Record<StatKey, number>>({
        atk: 3,
        def: 3,
        hp: 3,
        spd: 3,
        cr: 3,
        cd: 3,
        acc: 3,
        res: 3,
    });
    const [results, setResults] = useState<BuildResult[]>([]);
    const [selectedResult, setSelectedResult] = useState<BuildResult | null>(null);
    const [totalCombos, setTotalCombos] = useState(0);
    const {success, error, info} = useMessage();
    const [bonusByHeroId, setBonusByHeroId] = useState<Record<string, BonusStats>>({});
    const [bonusEditorOpen, setBonusEditorOpen] = useState(false);
    const [bonusDraft, setBonusDraft] = useState<BonusStats>(emptyBonusStats);

    const leftPanelsRef = useRef<HTMLDivElement | null>(null);
    const [leftPanelsHeight, setLeftPanelsHeight] = useState<number | null>(null);
    const renderSetBadge = (values: string[]) => (values.length === 0 ? 'All' : '已选');

    const [setPickerOpen, setSetPickerOpen] = useState(false);
    const [setPickerTarget, setSetPickerTarget] = useState<'set1' | 'set2' | 'set3'>('set1');
    const [setPickerPos, setSetPickerPos] = useState<{top: number; left: number}>({top: 120, left: 120});
    const [mainPickerOpen, setMainPickerOpen] = useState(false);
    const [mainPickerTarget, setMainPickerTarget] = useState<'necklace' | 'ring' | 'boots'>('necklace');
    const [mainPickerPos, setMainPickerPos] = useState<{top: number; left: number}>({top: 120, left: 120});
    const bodyStyleRef = useRef<{overflow: string; paddingRight: string}>({overflow: '', paddingRight: ''});
    const filterCardRef = useRef<HTMLDivElement | null>(null);
    const rightPanelRef = useRef<HTMLDivElement | null>(null);

    const INGAME_SET_MAP: Record<string, string> = {
        set_acc: 'HitSet',
        set_att: 'AttackSet',
        set_coop: 'UnitySet',
        set_counter: 'CounterSet',
        set_cri_dmg: 'DestructionSet',
        set_cri: 'CriticalSet',
        set_def: 'DefenseSet',
        set_immune: 'ImmunitySet',
        set_max_hp: 'HealthSet',
        set_penetrate: 'PenetrationSet',
        set_rage: 'RageSet',
        set_res: 'ResistSet',
        set_revenge: 'RevengeSet',
        set_scar: 'InjurySet',
        set_speed: 'SpeedSet',
        set_vampire: 'LifestealSet',
        set_shield: 'ProtectionSet',
        set_torrent: 'TorrentSet',
        set_revenant: 'ReversalSet',
        set_riposte: 'RiposteSet',
        set_chase: 'PursuitSet',
        set_opener: 'WarfareSet',
    };

const setPickerOptions = [
        {key: 'All', label: '全部', setKey: ''},
        {key: 'AttackSet', label: '攻击套装', setKey: 'AttackSet'},
        {key: 'DefenseSet', label: '防御套装', setKey: 'DefenseSet'},
        {key: 'HealthSet', label: '生命值套装', setKey: 'HealthSet'},
        {key: 'SpeedSet', label: '速度套装', setKey: 'SpeedSet'},
        {key: 'CriticalSet', label: '暴击套装', setKey: 'CriticalSet'},
        {key: 'HitSet', label: '命中套装', setKey: 'HitSet'},
        {key: 'ResistSet', label: '抵抗套装', setKey: 'ResistSet'},
        {key: 'LifestealSet', label: '吸血套装', setKey: 'LifestealSet'},
        {key: 'UnitySet', label: '夹攻套装', setKey: 'UnitySet'},
        {key: 'RageSet', label: '愤怒套装', setKey: 'RageSet'},
        {key: 'RevengeSet', label: '憨恨套装', setKey: 'RevengeSet'},
        {key: 'DestructionSet', label: '破灭套装', setKey: 'DestructionSet'},
        {key: 'CounterSet', label: '反击套装', setKey: 'CounterSet'},
        {key: 'ImmunitySet', label: '免疫套装', setKey: 'ImmunitySet'},
        {key: 'PenetrationSet', label: '穿透套装', setKey: 'PenetrationSet'},
        {key: 'InjurySet', label: '伤口套装', setKey: 'InjurySet'},
        {key: 'ProtectionSet', label: '守护套装', setKey: 'ProtectionSet'},
        {key: 'TorrentSet', label: '激流套装', setKey: 'TorrentSet'},
        {key: 'ReversalSet', label: '逆袭套装', setKey: 'ReversalSet'},
        {key: 'RiposteSet', label: '回击套装', setKey: 'RiposteSet'},
        {key: 'WarfareSet', label: '开战套装', setKey: 'WarfareSet'},
        {key: 'PursuitSet', label: '追击套装', setKey: 'PursuitSet'},
    ];

    const setPickerRows = Math.ceil(setPickerOptions.length / 2);
    const setPickerListHeight = 28 + setPickerRows * 46 + Math.max(0, setPickerRows - 1) * 8;


    const setCounts = useMemo(() => {
        const counts: Record<string, number> = {};
        let total = 0;
        parsedItems.forEach(item => {
            const setKey = item.set || (item.f ? INGAME_SET_MAP[item.f as string] : undefined);
            if (!setKey) return;
            counts[setKey] = (counts[setKey] || 0) + 1;
            total += 1;
        });
        counts[''] = total;
        return counts;
    }, [parsedItems]);


    const getSetLabel = (values: string[]) => {
        const key = values[0];
        if (!key) return '套装';
        const option = setPickerOptions.find(item => item.setKey === key);
        return option ? option.label : '套装';
    };

    const openSetPicker = (target: 'set1' | 'set2' | 'set3', event: React.MouseEvent<HTMLElement>) => {
        const modalWidth = 520;
        const modalHeight = Math.min(window.innerHeight - 20, setPickerListHeight);
        const offset = 0;
        let left = 0;
        let top = 0;

        const cardRect = filterCardRef.current?.getBoundingClientRect();
        const rightPanelRect = rightPanelRef.current?.getBoundingClientRect();
        if (rightPanelRect) {
            left = rightPanelRect.left - modalWidth - offset;
            top = rightPanelRect.top;
        } else {
            const rect = event.currentTarget.getBoundingClientRect();
            left = rect.left - modalWidth - offset;
            top = rect.top - offset;
        }

        if (left < 0) {
            left = 0;
        }
        if (top < 0) {
            top = 0;
        }
        if (top + modalHeight > window.innerHeight) {
            top = Math.max(0, window.innerHeight - modalHeight);
        }

        setSetPickerTarget(target);
        setSetPickerPos({top, left});
        setSetPickerOpen(true);
    };

    const openMainPicker = (
        target: 'necklace' | 'ring' | 'boots',
        event: React.MouseEvent<HTMLElement>
    ) => {
        const modalWidth = 300;
        const modalHeight = Math.min(520, 88 + getMainStatOptions(target).length * 36);
        const offset = 0;
        let left = 0;
        let top = 0;

        const rightPanelRect = rightPanelRef.current?.getBoundingClientRect();
        if (rightPanelRect) {
            left = rightPanelRect.left - modalWidth - offset;
            top = rightPanelRect.top + 120;
        } else {
            const rect = event.currentTarget.getBoundingClientRect();
            left = rect.left - modalWidth - offset;
            top = rect.top - offset;
        }

        if (left < 0) {
            left = 0;
        }
        if (top < 0) {
            top = 0;
        }
        if (top + modalHeight > window.innerHeight) {
            top = Math.max(0, window.innerHeight - modalHeight);
        }

        setMainPickerTarget(target);
        setMainPickerPos({top, left});
        setMainPickerOpen(true);
    };

    const heroOptions = useMemo(() => {
        return parsedHeroes.map(hero => ({
            label: hero.name || String(hero.id || ''),
            value: hero.id || '',
        }));
    }, [parsedHeroes]);

    const getMainStatOptions = (target: 'necklace' | 'ring' | 'boots'): Array<{label: string; value: MainStatKey | 'All'}> => {
        if (target === 'necklace') {
            return [
                {label: '\u5168\u90e8', value: 'All'},
                {label: '\u653b\u51fb\u529b', value: 'Attack'},
                {label: '\u9632\u5fa1\u529b', value: 'Defense'},
                {label: '\u751f\u547d\u503c', value: 'Health'},
                {label: '\u653b\u51fb\u529b%', value: 'AttackPercent'},
                {label: '\u9632\u5fa1\u529b%', value: 'DefensePercent'},
                {label: '\u751f\u547d\u503c%', value: 'HealthPercent'},
                {label: '\u66b4\u51fb\u7387', value: 'CriticalHitChancePercent'},
                {label: '\u66b4\u51fb\u4f24\u5bb3', value: 'CriticalHitDamagePercent'},
            ];
        }
        if (target === 'ring') {
            return [
                {label: '\u5168\u90e8', value: 'All'},
                {label: '\u653b\u51fb\u529b', value: 'Attack'},
                {label: '\u9632\u5fa1\u529b', value: 'Defense'},
                {label: '\u751f\u547d\u503c', value: 'Health'},
                {label: '\u653b\u51fb\u529b%', value: 'AttackPercent'},
                {label: '\u9632\u5fa1\u529b%', value: 'DefensePercent'},
                {label: '\u751f\u547d\u503c%', value: 'HealthPercent'},
                {label: '\u6548\u679c\u547d\u4e2d', value: 'EffectivenessPercent'},
                {label: '\u6548\u679c\u6297\u6027', value: 'EffectResistancePercent'},
            ];
        }
        return [
            {label: '\u5168\u90e8', value: 'All'},
            {label: '\u653b\u51fb\u529b', value: 'Attack'},
            {label: '\u9632\u5fa1\u529b', value: 'Defense'},
            {label: '\u751f\u547d\u503c', value: 'Health'},
            {label: '\u653b\u51fb\u529b%', value: 'AttackPercent'},
            {label: '\u9632\u5fa1\u529b%', value: 'DefensePercent'},
            {label: '\u751f\u547d\u503c%', value: 'HealthPercent'},
            {label: '\u901f\u5ea6', value: 'Speed'},
        ];
    };

const getMainStatLabel = (target: 'necklace' | 'ring' | 'boots', value: MainStatKey | 'All') => {
        const option = getMainStatOptions(target).find(item => item.value === value);
        return option ? option.label : 'All';
    };

    const selectedHero = useMemo(() => {
        return parsedHeroes.find(hero => hero.id === selectedHeroId) || null;
    }, [parsedHeroes, selectedHeroId]);

    const selectedHeroKey = selectedHeroId == null ? '' : String(selectedHeroId);
    const selectedHeroBonus = bonusByHeroId[selectedHeroKey] || emptyBonusStats;

    const loadLatestData = async () => {
        setLoading(true);
        try {
            const [parsed, templates] = await Promise.all([
                App.GetLatestParsedDataFromDatabase(),
                App.GetHeroTemplates(),
            ]);
            const items = (parsed?.items || []) as RawItem[];
            const heroTemplates = (templates || []).map(t => ({
                id: t.code,
                code: t.code,
                name: t.name,
                baseAtk: t.baseAtk,
                baseDef: t.baseDef,
                baseHp: t.baseHp,
                baseSpd: t.baseSpd,
                baseCr: t.baseCr,
                baseCd: t.baseCd,
                baseEff: t.baseEff,
                baseRes: t.baseRes,
                atk: t.baseAtk,
                def: t.baseDef,
                hp: t.baseHp,
                spd: t.baseSpd,
                cr: t.baseCr,
                cd: t.baseCd,
                eff: t.baseEff,
                res: t.baseRes,
            })) as RawHero[];
            setParsedItems(items);
            setParsedHeroes(heroTemplates);
            if (heroTemplates.length > 0) {
                setSelectedHeroId(heroTemplates[0].id || '');
            }
            if (items.length === 0 && heroTemplates.length === 0) {
                info('暂无解析数据');
            } else {
                success('数据加载成功');
            }
        } catch (err) {
            error('加载数据失败');
            console.error('Load optimizer data error:', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        loadLatestData();
    }, []);

    useLayoutEffect(() => {
        if (!leftPanelsRef.current) return;
        const observer = new ResizeObserver(entries => {
            for (const entry of entries) {
                const next = Math.round(entry.contentRect.height);
                setLeftPanelsHeight(next > 0 ? next : null);
            }
        });
        observer.observe(leftPanelsRef.current);
        return () => observer.disconnect();
    }, []);

    useEffect(() => {
        if (setPickerOpen) {
            bodyStyleRef.current = {
                overflow: document.body.style.overflow,
                paddingRight: document.body.style.paddingRight,
            };
            document.body.style.overflow = 'auto';
            document.body.style.paddingRight = '';
        } else {
            document.body.style.overflow = bodyStyleRef.current.overflow;
            document.body.style.paddingRight = bodyStyleRef.current.paddingRight;
        }
    }, [setPickerOpen]);

    const resetSetsAndAttrs = () => {
        setSetFilters(emptySetFilters);
        setStatFilters(emptyFilters);
        setMainStatFilters({necklace: 'All', ring: 'All', boots: 'All'});
        setResults([]);
        setSelectedResult(null);
        setTotalCombos(0);
    };

    const resetPreferences = () => {
        setWeightValues({
            atk: 3,
            def: 3,
            hp: 3,
            spd: 3,
            cr: 3,
            cd: 3,
            acc: 3,
            res: 3,
        });
        setResults([]);
        setSelectedResult(null);
        setTotalCombos(0);
    };

    const buildResults = async () => {
        console.log('OptimizerPage buildResults clicked');
        if (!selectedHero) {
            info('\u8bf7\u5148\u9009\u62e9\u82f1\u96c4');
            return;
        }
        if (parsedItems.length === 0) {
            info('\u6682\u65e0\u88c5\u5907\u6570\u636e');
            return;
        }
        try {
            console.log('OptimizeBuilds calling', {
                heroId: String(selectedHero.id ?? ''),
                setFilters,
                statFilters,
                mainStatFilters,
                weightValues,
                bonusStats: selectedHeroBonus,
            });
            const resp = await App.OptimizeBuilds({
                heroId: String(selectedHero.code ?? ''),
                setFilters,
                statFilters,
                mainStatFilters,
                weightValues,
                bonusStats: selectedHeroBonus,
                maxItemsPerSlot: MAX_ITEMS_PER_SLOT,
                maxCombos: MAX_COMBOS,
                maxResults: MAX_RESULTS,
            } as any);
            console.log('OptimizeBuilds returned', resp);
            const nextResults = (resp?.results || []) as BuildResult[];
            setTotalCombos(resp?.totalCombos || 0);
            setResults(nextResults);
            setSelectedResult(nextResults[0] || null);
            if (nextResults.length > 0) {
                success(`\u914d\u88c5\u5b8c\u6210\uff0c\u5171 ${nextResults.length} \u6761\u7ed3\u679c`);
            }
            if (nextResults.length === 0) {
                info('\u6ca1\u6709\u7b26\u5408\u6761\u4ef6\u7684\u914d\u88c5\u7ed3\u679c');
            }
        } catch (err) {
            const msg = err instanceof Error ? err.message : '\u914d\u88c5\u5931\u8d25';
            error(msg);
            console.error('OptimizeBuilds error:', err);
        }
    };

    const resultColumns = [
        {title: '套装', dataIndex: 'sets', key: 'sets', render: (v: string) => <Tag>{v}</Tag>},
        {title: '攻击', dataIndex: 'atk', key: 'atk'},
        {title: '防御', dataIndex: 'def', key: 'def'},
        {title: '生命', dataIndex: 'hp', key: 'hp'},
        {title: '速度', dataIndex: 'spd', key: 'spd'},
        {title: '暴击', dataIndex: 'cr', key: 'cr'},
        {title: '爆伤', dataIndex: 'cd', key: 'cd'},
        {title: '命中', dataIndex: 'acc', key: 'acc'},
        {title: '抵抗', dataIndex: 'res', key: 'res'},
    ];

    return (
        <>
            <Layout style={{minHeight: '100vh'}}>
                <Content style={{padding: 16}}>
                <Card style={{marginBottom: 16, position: 'relative'}} ref={filterCardRef}>
                    <Row gutter={16} align="top">
                        <Col span={6} style={{display: 'flex', alignItems: 'flex-start'}}>
                            <Avatar size={64} icon={<UserOutlined/>}/>
                            <div style={{display: 'flex', flexDirection: 'column', gap: 8, marginLeft: 16}}>
                                <div style={{fontWeight: 500}}>英雄</div>
                                <Select
                                    style={{width: 180}}
                                    value={selectedHeroId ?? undefined}
                                    onChange={value => setSelectedHeroId(value)}
                                    options={heroOptions}
                                    placeholder="请选择英雄"
                                />
                                <Button
                                    size="small"
                                    onClick={() => {
                                        if (!selectedHeroKey) return;
                                        setBonusDraft({...selectedHeroBonus});
                                        setBonusEditorOpen(true);
                                    }}
                                >
                                    {'\u7f16\u8f91\u989d\u5916\u52a0\u6210'}
                                </Button>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div style={{fontWeight: 500, marginBottom: 8}}>属性</div>
                            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
                                {STAT_LABELS.map(stat => (
                                    <div key={stat.key}>
                                        {stat.label}: <b>{getHeroStatValue(selectedHero, stat.key)}</b>
                                    </div>
                                ))}
                            </div>
                        </Col>
                        <Col span={6}>
                            <div style={{fontWeight: 500, marginBottom: 8}}>属性过滤</div>
                            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
                                {STAT_LABELS.map(stat => (
                                    <div key={stat.key} style={{display: 'flex', alignItems: 'center', gap: 4}}>
                                        <span style={{minWidth: 36}}>{stat.label}</span>
                                        <InputNumber
                                            size="small"
                                            placeholder="最小"
                                            style={{width: 72}}
                                            value={statFilters[stat.key].min}
                                            onChange={value => {
                                                setStatFilters(prev => ({
                                                    ...prev,
                                                    [stat.key]: {...prev[stat.key], min: value ?? undefined},
                                                }));
                                            }}
                                        />
                                        <span>~</span>
                                        <InputNumber
                                            size="small"
                                            placeholder="最大"
                                            style={{width: 72}}
                                            value={statFilters[stat.key].max}
                                            onChange={value => {
                                                setStatFilters(prev => ({
                                                    ...prev,
                                                    [stat.key]: {...prev[stat.key], max: value ?? undefined},
                                                }));
                                            }}
                                        />
                                    </div>
                                ))}
                            </div>
                        </Col>
                        <Col
                            span={6}
                            style={{display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 10}}
                            ref={rightPanelRef}
                        >
                            <div className="optimizer-side-panel">
                                <div className="optimizer-left-panels" ref={leftPanelsRef}>
                                <div className="optimizer-set-panel">
                                    <div className="optimizer-set-row optimizer-set-row-tight">
                                    <span className="optimizer-set-badge">{renderSetBadge(setFilters.set1)}</span>
                                    <Button
                                        className="optimizer-set-button"
                                        onClick={(event) => openSetPicker('set1', event)}
                                    >
                                        {getSetLabel(setFilters.set1)}
                                    </Button>
                                </div>
                                <div className="optimizer-set-row optimizer-set-row-tight">
                                    <span className="optimizer-set-badge">{renderSetBadge(setFilters.set2)}</span>
                                    <Button
                                        className="optimizer-set-button"
                                        disabled={setFilters.set1.length === 0}
                                        onClick={(event) => openSetPicker('set2', event)}
                                    >
                                        {getSetLabel(setFilters.set2)}
                                    </Button>
                                </div>
                                <div className="optimizer-set-row optimizer-set-row-tight">
                                    <span className="optimizer-set-badge">{renderSetBadge(setFilters.set3)}</span>
                                    <Button
                                        className="optimizer-set-button"
                                        disabled={setFilters.set1.some(isFourPieceSet) || setFilters.set2.length === 0}
                                        onClick={(event) => openSetPicker('set3', event)}
                                    >
                                        {getSetLabel(setFilters.set3)}
                                    </Button>
                                </div>
                                </div>
                                <div className="optimizer-set-panel">
                                <div className="optimizer-set-row">
                                    <span className="optimizer-set-badge">项链</span>
                                    <Button
                                        className="optimizer-set-button"
                                        onClick={(event) => openMainPicker('necklace', event)}
                                    >
                                        {getMainStatLabel('necklace', mainStatFilters.necklace)}
                                    </Button>
                                </div>
                                <div className="optimizer-set-row">
                                    <span className="optimizer-set-badge">戒指</span>
                                    <Button
                                        className="optimizer-set-button"
                                        onClick={(event) => openMainPicker('ring', event)}
                                    >
                                        {getMainStatLabel('ring', mainStatFilters.ring)}
                                    </Button>
                                </div>
                                <div className="optimizer-set-row">
                                    <span className="optimizer-set-badge">鞋子</span>
                                    <Button
                                        className="optimizer-set-button"
                                        onClick={(event) => openMainPicker('boots', event)}
                                    >
                                        {getMainStatLabel('boots', mainStatFilters.boots)}
                                    </Button>
                                </div>
                                    </div>
                                </div>
                            <div className="optimizer-weight-panel" style={leftPanelsHeight ? {height: leftPanelsHeight} : undefined}>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">攻</span>
                                    <span className="optimizer-weight-label">攻击</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.atk}
                                        onChange={value => setWeightValues(prev => ({...prev, atk: value as number}))}
                                    />
                                </div>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">防</span>
                                    <span className="optimizer-weight-label">防御</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.def}
                                        onChange={value => setWeightValues(prev => ({...prev, def: value as number}))}
                                    />
                                </div>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">生</span>
                                    <span className="optimizer-weight-label">生命</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.hp}
                                        onChange={value => setWeightValues(prev => ({...prev, hp: value as number}))}
                                    />
                                </div>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">速</span>
                                    <span className="optimizer-weight-label">速度</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.spd}
                                        onChange={value => setWeightValues(prev => ({...prev, spd: value as number}))}
                                    />
                                </div>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">暴</span>
                                    <span className="optimizer-weight-label">暴击</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.cr}
                                        onChange={value => setWeightValues(prev => ({...prev, cr: value as number}))}
                                    />
                                </div>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">伤</span>
                                    <span className="optimizer-weight-label">爆伤</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.cd}
                                        onChange={value => setWeightValues(prev => ({...prev, cd: value as number}))}
                                    />
                                </div>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">命</span>
                                    <span className="optimizer-weight-label">命中</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.acc}
                                        onChange={value => setWeightValues(prev => ({...prev, acc: value as number}))}
                                    />
                                </div>
                                <div className="optimizer-weight-row">
                                    <span className="optimizer-weight-icon">抗</span>
                                    <span className="optimizer-weight-label">抵抗</span>
                                    <Slider
                                        min={0}
                                        max={5}
                                        step={1}
                                        dots
                                        className="optimizer-weight-slider"
                                        value={weightValues.res}
                                        onChange={value => setWeightValues(prev => ({...prev, res: value as number}))}
                                    />
                                </div>
                                </div>
                            </div>
                            <div style={{display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'flex-end', width: '100%'}}>
                                <Button icon={<ReloadOutlined/>} onClick={loadLatestData} loading={loading} style={{height: 32}}>
                                    重新加载数据
                                </Button>
                                <Button icon={<ReloadOutlined/>} onClick={resetSetsAndAttrs} style={{height: 32}}>
                                    {'\u91cd\u7f6e\u5957\u88c5'}
                                </Button>
                                <Button icon={<FilterOutlined/>} onClick={resetPreferences} style={{height: 32}}>
                                    {'\u91cd\u7f6e\u504f\u597d'}
                                </Button>
                                <Button type="primary" icon={<AppstoreOutlined/>} onClick={buildResults} style={{height: 32}}>
                                    {'\u5f00\u59cb\u914d\u88c5'}
                                </Button>
                            </div>
                        </Col>
                    </Row>
                </Card>

                <Card title="配装结果" style={{marginBottom: 16}}>
                    <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 8}}>
                        <div>
                            组合数量：<b>{totalCombos.toLocaleString()}</b> |
                            结果数量：<b>{results.length.toLocaleString()}</b>
                        </div>
                        <Pagination
                            size="small"
                            total={results.length}
                            pageSize={10}
                            current={1}
                            showSizeChanger={false}
                        />
                    </div>
                    <Table
                        dataSource={results}
                        columns={resultColumns}
                        pagination={{pageSize: 10}}
                        scroll={{x: true}}
                        rowKey="key"
                        onRow={record => ({
                            onClick: () => setSelectedResult(record),
                        })}
                    />
                </Card>

                <Card title="配装详情">
                    {selectedResult ? (
                        <div style={{display: 'flex', gap: 24}}>
                            <div>
                                <Avatar size={48} icon={<UserOutlined/>}/>
                                <div style={{marginTop: 8}}>{selectedHero?.name || '未知英雄'}</div>
                            </div>
                            <Divider type="vertical" style={{height: 80}}/>
                            <div>
                                <div>
                                    套装：<Tag color="blue">{selectedResult.sets}</Tag>
                                </div>
                                <div>
                                    攻击：{selectedResult.atk}，防御：{selectedResult.def}，生命：
                                    {selectedResult.hp}，速度：{selectedResult.spd}
                                </div>
                                <div>
                                    暴击：{selectedResult.cr}% ，爆伤：{selectedResult.cd}% ，命中：
                                    {selectedResult.acc}% ，抵抗：{selectedResult.res}%
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div style={{color: '#999'}}>暂无配装结果</div>
                    )}
                </Card>
            </Content>
            </Layout>
            <Modal
                open={bonusEditorOpen}
                title={'\u989d\u5916\u52a0\u6210'}
                onCancel={() => setBonusEditorOpen(false)}
                onOk={() => {
                    if (!selectedHeroKey) return;
                    setBonusByHeroId(prev => ({...prev, [selectedHeroKey]: bonusDraft}));
                    setBonusEditorOpen(false);
                }}
            >
                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12}}>
                    <div>
                        <div>{'\u653b\u51fb'}</div>
                        <InputNumber value={bonusDraft.atk} onChange={v => setBonusDraft(prev => ({...prev, atk: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u653b\u51fb%'}</div>
                        <InputNumber value={bonusDraft.atkPct} onChange={v => setBonusDraft(prev => ({...prev, atkPct: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u9632\u5fa1'}</div>
                        <InputNumber value={bonusDraft.def} onChange={v => setBonusDraft(prev => ({...prev, def: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u9632\u5fa1%'}</div>
                        <InputNumber value={bonusDraft.defPct} onChange={v => setBonusDraft(prev => ({...prev, defPct: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u751f\u547d'}</div>
                        <InputNumber value={bonusDraft.hp} onChange={v => setBonusDraft(prev => ({...prev, hp: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u751f\u547d%'}</div>
                        <InputNumber value={bonusDraft.hpPct} onChange={v => setBonusDraft(prev => ({...prev, hpPct: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u901f\u5ea6'}</div>
                        <InputNumber value={bonusDraft.spd} onChange={v => setBonusDraft(prev => ({...prev, spd: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u66b4\u51fb\u7387'}</div>
                        <InputNumber value={bonusDraft.cr} onChange={v => setBonusDraft(prev => ({...prev, cr: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u66b4\u51fb\u4f24\u5bb3'}</div>
                        <InputNumber value={bonusDraft.cd} onChange={v => setBonusDraft(prev => ({...prev, cd: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u6548\u679c\u547d\u4e2d'}</div>
                        <InputNumber value={bonusDraft.eff} onChange={v => setBonusDraft(prev => ({...prev, eff: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u6548\u679c\u6297\u6027'}</div>
                        <InputNumber value={bonusDraft.res} onChange={v => setBonusDraft(prev => ({...prev, res: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u6700\u7ec8\u653b\u51fb\u500d\u7387%'}</div>
                        <InputNumber value={bonusDraft.finalAtkMultiplier} onChange={v => setBonusDraft(prev => ({...prev, finalAtkMultiplier: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u6700\u7ec8\u9632\u5fa1\u500d\u7387%'}</div>
                        <InputNumber value={bonusDraft.finalDefMultiplier} onChange={v => setBonusDraft(prev => ({...prev, finalDefMultiplier: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                    <div>
                        <div>{'\u6700\u7ec8\u751f\u547d\u500d\u7387%'}</div>
                        <InputNumber value={bonusDraft.finalHpMultiplier} onChange={v => setBonusDraft(prev => ({...prev, finalHpMultiplier: Number(v || 0)}))} style={{width: '100%'}} />
                    </div>
                </div>
            </Modal>
            {setPickerOpen &&
                createPortal(
                    <div
                        className="optimizer-set-popover-overlay"
                        onMouseDown={() => setSetPickerOpen(false)}
                    >
                        <div
                            className="optimizer-set-popover"
                            style={{top: setPickerPos.top, left: setPickerPos.left}}
                            onMouseDown={(event) => event.stopPropagation()}
                        >
                            <div className="optimizer-set-modal-list" style={{maxHeight: setPickerListHeight}}>
                                {setPickerOptions.map(option => (
                                    <button
                                        key={option.key}
                                        className="optimizer-set-modal-item"
                                        onClick={() => {
                                            const nextValue = option.setKey ? [option.setKey] : [];
                                            if (setPickerTarget === 'set1') {
                                                const hasFour = nextValue.some(isFourPieceSet);
                                                const hasTwo = nextValue.some(isTwoPieceSet);
                                                if (hasFour && hasTwo) {
                                                    info('第一组只能选择纯4件套或纯2件套');
                                                    return;
                                                }
                                                setSetFilters({set1: nextValue, set2: [], set3: []});
                                            } else if (setPickerTarget === 'set2') {
                                                if (nextValue.some(isFourPieceSet)) {
                                                    info('第二组仅支持2件套');
                                                    return;
                                                }
                                                setSetFilters(prev => ({...prev, set2: nextValue, set3: []}));
                                            } else {
                                                if (nextValue.some(isFourPieceSet)) {
                                                    info('第三组仅支持2件套');
                                                    return;
                                                }
                                                setSetFilters(prev => ({...prev, set3: nextValue}));
                                            }
                                            setSetPickerOpen(false);
                                        }}
                                    >
                                        <span className="optimizer-set-modal-icon">◎</span>
                                        <span className="optimizer-set-modal-label">{option.label}</span>
                                        <span className="optimizer-set-modal-count">{setCounts[option.setKey] || 0}</span>
                                    </button>
                                ))}
                            </div>
                        </div>
                    </div>,
                    document.body
                )}
            {mainPickerOpen &&
                createPortal(
                    <div
                        className="optimizer-set-popover-overlay"
                        onMouseDown={() => setMainPickerOpen(false)}
                    >
                        <div
                            className="optimizer-main-popover"
                            style={{top: mainPickerPos.top, left: mainPickerPos.left}}
                            onMouseDown={(event) => event.stopPropagation()}
                        >
                            <div className="optimizer-main-modal-list">
                                {getMainStatOptions(mainPickerTarget).map(option => (
                                    <button
                                        key={option.value}
                                        className="optimizer-set-modal-item"
                                        onClick={() => {
                                            setMainStatFilters(prev => ({
                                                ...prev,
                                                [mainPickerTarget]: option.value,
                                            }));
                                            setMainPickerOpen(false);
                                        }}
                                    >
                                        <span className="optimizer-set-modal-icon">◎</span>
                                        <span className="optimizer-set-modal-label">{option.label}</span>
                                    </button>
                                ))}
                            </div>
                        </div>
                    </div>,
                    document.body
                )}
        </>
    );
}