import { _decorator, Component, Node, Label, Sprite, Color, UITransform, Size, Layout } from 'cc';
import { UITheme } from '../common/UITheme';
import { UIBase } from '../common/UIBase';

const { ccclass, property } = _decorator;

/**
 * 武学界面
 * 基于江湖截图：招式心法/秘技/自创武学/金身/极意 标签页
 * 修炼/要诀/秘卷 子标签
 * 功法展示 + 属性列表
 */
@ccclass('MartialArtsScreen')
export class MartialArtsScreen extends UIBase {

    @property(Node) tabBar: Node = null!;
    @property(Node) subTabBar: Node = null!;
    @property(Node) skillDisplay: Node = null!;
    @property(Node) statsList: Node = null!;

    start() {
        this.initTabBar();
        this.initSubTabBar();
        this.initSkillDisplay();
        this.initStatsList();
    }

    /**
     * 主标签栏
     * 招式心法 | 秘技 | 自创武学 | 金身 | 极意
     */
    private initTabBar() {
        if (!this.tabBar) return;

        const transform = this.tabBar.getComponent(UITransform) || this.tabBar.addComponent(UITransform);
        transform.setContentSize(new Size(720, 80));

        const layout = this.tabBar.addComponent(Layout);
        layout.type = Layout.Type.HORIZONTAL;
        layout.resizeMode = Layout.ResizeMode.CONTAINER;

        const tabs = [
            { name: '招式心法', icon: '📖' },
            { name: '秘 技', icon: '🔮' },
            { name: '自创武学', icon: '✍️' },
            { name: '金 身', icon: '🧘' },
            { name: '极 意', icon: '💫' },
        ];

        tabs.forEach((tab, index) => {
            const tabNode = new Node(`Tab_${tab.name}`);
            const tabTransform = tabNode.addComponent(UITransform);
            tabTransform.setContentSize(new Size(144, 80));
            tabNode.setParent(this.tabBar);

            // 图标
            const iconNode = new Node('Icon');
            const iconLabel = iconNode.addComponent(Label);
            iconLabel.string = tab.icon;
            iconLabel.fontSize = UITheme.FONT_SIZE.XL;
            iconNode.setParent(tabNode);

            // 文字
            const textNode = new Node('Text');
            const textLabel = textNode.addComponent(Label);
            textLabel.string = tab.name;
            textLabel.fontSize = UITheme.FONT_SIZE.SM;
            textLabel.color = index === 3
                ? this.hexToColor(UITheme.COLORS.TEXT_GOLD)
                : this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
            textNode.setParent(tabNode);
        });
    }

    /**
     * 子标签栏
     * 修炼 | 要诀 | 秘卷
     */
    private initSubTabBar() {
        if (!this.subTabBar) return;

        const transform = this.subTabBar.getComponent(UITransform) || this.subTabBar.addComponent(UITransform);
        transform.setContentSize(new Size(720, 60));

        const tabs = ['修炼', '要诀', '秘卷'];

        tabs.forEach((tabName, index) => {
            const tabNode = new Node(`SubTab_${tabName}`);
            const tabTransform = tabNode.addComponent(UITransform);
            tabTransform.setContentSize(new Size(200, 60));
            tabNode.setParent(this.subTabBar);

            const label = tabNode.addComponent(Label);
            label.string = tabName;
            label.fontSize = UITheme.FONT_SIZE.MD;
            label.color = index === 0
                ? this.hexToColor(UITheme.COLORS.TEXT_GOLD)
                : this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
        });
    }

    /**
     * 功法展示区
     * 功法名称 + 等级 + 修炼按钮
     */
    private initSkillDisplay() {
        if (!this.skillDisplay) return;

        const transform = this.skillDisplay.getComponent(UITransform) || this.skillDisplay.addComponent(UITransform);
        transform.setContentSize(new Size(720, 300));

        // 功法名称
        const nameNode = new Node('SkillName');
        const nameLabel = nameNode.addComponent(Label);
        nameLabel.string = '不破金身 · 六十九重';
        nameLabel.fontSize = UITheme.FONT_SIZE.LG;
        nameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
        nameNode.setParent(this.skillDisplay);

        // 功法图标区域
        const iconArea = new Node('IconArea');
        const iconTransform = iconArea.addComponent(UITransform);
        iconTransform.setContentSize(new Size(200, 200));
        iconArea.setParent(this.skillDisplay);

        // 功法图标
        const iconNode = new Node('Icon');
        const iconLabel = iconNode.addComponent(Label);
        iconLabel.string = '📖';
        iconLabel.fontSize = 80;
        iconNode.setParent(iconArea);

        // 进度
        const progressNode = new Node('Progress');
        const progressLabel = progressNode.addComponent(Label);
        progressLabel.string = '10/26';
        progressLabel.fontSize = UITheme.FONT_SIZE.MD;
        progressLabel.color = this.hexToColor(UITheme.COLORS.TEXT_RED);
        progressNode.setParent(this.skillDisplay);

        // 修炼按钮
        const trainBtn = this.createButton(this.skillDisplay, '修 炼', {
            width: 200, height: 50,
            bgColor: UITheme.COLORS.BG_CARD,
            textColor: UITheme.COLORS.TEXT_GOLD,
        });
    }

    /**
     * 属性列表
     * 护体罡气/聚气值/调息间隔/护体/流血抗性/减防抗性
     */
    private initStatsList() {
        if (!this.statsList) return;

        const transform = this.statsList.getComponent(UITransform) || this.statsList.addComponent(UITransform);
        transform.setContentSize(new Size(720, 200));

        const stats = [
            { name: '护体罡气', value: '23940' },
            { name: '聚气值', value: '1495' },
            { name: '调息间隔', value: '14' },
            { name: '护体', value: '2076' },
            { name: '流血抗性', value: '310' },
            { name: '减防抗性', value: '180' },
        ];

        stats.forEach((stat, index) => {
            const col = index % 2;
            const row = Math.floor(index / 2);

            const statNode = new Node(`Stat_${stat.name}`);
            const statTransform = statNode.addComponent(UITransform);
            statTransform.setContentSize(new Size(340, 40));
            statNode.setParent(this.statsList);

            const nameNode = new Node('Name');
            const nameLabel = nameNode.addComponent(Label);
            nameLabel.string = `◆ ${stat.name}：`;
            nameLabel.fontSize = UITheme.FONT_SIZE.SM;
            nameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
            nameNode.setParent(statNode);

            const valueNode = new Node('Value');
            const valueLabel = valueNode.addComponent(Label);
            valueLabel.string = stat.value;
            valueLabel.fontSize = UITheme.FONT_SIZE.SM;
            valueLabel.color = this.hexToColor(UITheme.COLORS.TEXT_GREEN);
            valueNode.setParent(statNode);
        });
    }
}