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

const { ccclass, property } = _decorator;

/**
 * 主界面 - 吐纳（修炼）界面
 * 基于江湖截图：顶部角色信息栏 + 修炼区域 + 底部导航
 */
@ccclass('MainScreen')
export class MainScreen extends UIBase {

    @property(Node) topBar: Node = null!;
    @property(Node) characterArea: Node = null!;
    @property(Node) cultivationArea: Node = null!;
    @property(Node) newsArea: Node = null!;
    @property(Node) bottomNav: Node = null!;

    start() {
        this.initTopBar();
        this.initCharacterArea();
        this.initCultivationArea();
        this.initNewsArea();
        this.initBottomNav();
    }

    /**
     * 顶部信息栏
     * 包含：角色头像、身家财产、江湖名望、内力/悟性
     */
    private initTopBar() {
        if (!this.topBar) return;

        const topBarLayout = this.topBar.addComponent(Layout);
        topBarLayout.type = Layout.Type.VERTICAL;
        topBarLayout.resizeMode = Layout.ResizeMode.CONTAINER;

        // 资源栏
        const resourceBar = this.createResourceBar();
        resourceBar.setParent(this.topBar);

        // 角色信息
        const charInfo = this.createCharacterInfo();
        charInfo.setParent(this.topBar);

        // 内力/悟性
        const statsBar = this.createStatsBar();
        statsBar.setParent(this.topBar);
    }

    private createResourceBar(): Node {
        const node = new Node('ResourceBar');
        const transform = node.addComponent(UITransform);
        transform.setContentSize(new Size(720, 80));
        node.setParent(this.topBar);

        // 身家财产标签
        const wealthLabel = new Node('WealthLabel');
        const label = wealthLabel.addComponent(Label);
        label.string = '身家财产';
        label.fontSize = UITheme.FONT_SIZE.SM;
        label.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
        wealthLabel.setParent(node);

        // 铜钱图标+数值
        const copperNode = new Node('Copper');
        const copperLabel = copperNode.addComponent(Label);
        copperLabel.string = '🪙 389953';
        copperLabel.fontSize = UITheme.FONT_SIZE.MD;
        copperLabel.color = this.hexToColor(UITheme.COLORS.GOLD_PRIMARY);
        copperNode.setParent(node);

        // 灵石图标+数值
        const stoneNode = new Node('SpiritStone');
        const stoneLabel = stoneNode.addComponent(Label);
        stoneLabel.string = '💎 0';
        stoneLabel.fontSize = UITheme.FONT_SIZE.MD;
        stoneLabel.color = this.hexToColor(UITheme.COLORS.TEXT_BLUE);
        stoneNode.setParent(node);

        return node;
    }

    private createCharacterInfo(): Node {
        const node = new Node('CharacterInfo');
        const transform = node.addComponent(UITransform);
        transform.setContentSize(new Size(720, 100));
        node.setParent(this.topBar);

        // 角色名
        const nameLabel = new Node('Name');
        const label = nameLabel.addComponent(Label);
        label.string = '角色名';
        label.fontSize = UITheme.FONT_SIZE.LG;
        label.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
        nameLabel.setParent(node);

        // 称号
        const titleNode = new Node('Title');
        const titleLabel = titleNode.addComponent(Label);
        titleLabel.string = '锐不可挡';
        titleLabel.fontSize = UITheme.FONT_SIZE.SM;
        titleLabel.color = this.hexToColor(UITheme.COLORS.TEXT_ORANGE);
        titleNode.setParent(node);

        // 江湖名望
        const fameNode = new Node('Fame');
        const fameLabel = fameNode.addComponent(Label);
        fameLabel.string = '江湖名望：独孤求败 | 3387598';
        fameLabel.fontSize = UITheme.FONT_SIZE.SM;
        fameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
        fameNode.setParent(node);

        return node;
    }

    private createStatsBar(): Node {
        const node = new Node('StatsBar');
        const transform = node.addComponent(UITransform);
        transform.setContentSize(new Size(720, 60));
        node.setParent(this.topBar);

        const neiLiLabel = new Node('NeiLi');
        const label = neiLiLabel.addComponent(Label);
        label.string = '内力：65,075,153,913';
        label.fontSize = UITheme.FONT_SIZE.SM;
        label.color = this.hexToColor(UITheme.COLORS.TEXT_WHITE);
        neiLiLabel.setParent(node);

        const wuXingLabel = new Node('WuXing');
        const wuXing = wuXingLabel.addComponent(Label);
        wuXing.string = '悟性：26,459,801';
        wuXing.fontSize = UITheme.FONT_SIZE.SM;
        wuXing.color = this.hexToColor(UITheme.COLORS.TEXT_GREEN);
        wuXingLabel.setParent(node);

        return node;
    }

    /**
     * 角色展示区域
     * 包含：角色立绘/头像 + 火焰特效
     */
    private initCharacterArea() {
        if (!this.characterArea) return;

        const transform = this.characterArea.getComponent(UITransform) || this.characterArea.addComponent(UITransform);
        transform.setContentSize(new Size(720, 400));
    }

    /**
     * 修炼区域
     * 包含：经脉信息、修炼按钮、丹田、外练/内练
     */
    private initCultivationArea() {
        if (!this.cultivationArea) return;

        const layout = this.cultivationArea.addComponent(Layout);
        layout.type = Layout.Type.VERTICAL;
        layout.resizeMode = Layout.ResizeMode.CONTAINER;

        // 经脉信息
        const meridianInfo = this.createMeridianInfo();
        meridianInfo.setParent(this.cultivationArea);

        // 修炼按钮区
        const cultivationBtns = this.createCultivationButtons();
        cultivationBtns.setParent(this.cultivationArea);
    }

    private createMeridianInfo(): Node {
        const node = new Node('MeridianInfo');
        const transform = node.addComponent(UITransform);
        transform.setContentSize(new Size(680, 120));
        node.setParent(this.cultivationArea);

        const titleLabel = new Node('Title');
        const label = titleLabel.addComponent(Label);
        label.string = '督脉';
        label.fontSize = UITheme.FONT_SIZE.MD;
        label.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
        titleLabel.setParent(node);

        const detailLabel = new Node('Detail');
        const detail = detailLabel.addComponent(Label);
        detail.string = '神庭穴 | 逆行十七阶三层';
        detail.fontSize = UITheme.FONT_SIZE.SM;
        detail.color = this.hexToColor(UITheme.COLORS.TEXT_WHITE);
        detailLabel.setParent(node);

        return node;
    }

    private createCultivationButtons(): Node {
        const node = new Node('CultivationButtons');
        const transform = node.addComponent(UITransform);
        transform.setContentSize(new Size(680, 200));
        node.setParent(this.cultivationArea);

        // 丹田按钮
        const danTianBtn = this.createButton(node, '丹 田', {
            width: 160, height: 50,
            bgColor: UITheme.COLORS.BG_CARD,
            textColor: UITheme.COLORS.TEXT_GOLD,
        });

        // 江湖历练按钮
        const lianLiBtn = this.createButton(node, '江湖历练', {
            width: 160, height: 50,
            bgColor: UITheme.COLORS.BG_CARD,
            textColor: UITheme.COLORS.TEXT_GOLD,
        });

        // 外练按钮
        const waiLianBtn = this.createButton(node, '外 练', {
            width: 160, height: 50,
            bgColor: UITheme.COLORS.BG_CARD,
            textColor: UITheme.COLORS.TEXT_GOLD,
        });

        // 内练中按钮
        const neiLianBtn = this.createButton(node, '内练中', {
            width: 160, height: 50,
            bgColor: UITheme.COLORS.BG_CARD,
            textColor: UITheme.COLORS.TEXT_GREEN,
        });

        return node;
    }

    /**
     * 江湖见闻录区域
     * 显示游戏世界动态消息
     */
    private initNewsArea() {
        if (!this.newsArea) return;

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

        const titleLabel = new Node('Title');
        const label = titleLabel.addComponent(Label);
        label.string = '江湖见闻录';
        label.fontSize = UITheme.FONT_SIZE.MD;
        label.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
        titleLabel.setParent(this.newsArea);

        // 新闻内容列表
        const contentNode = new Node('Content');
        const contentLabel = contentNode.addComponent(Label);
        contentLabel.string = '百晓生：江湖动态将在这里显示...';
        contentLabel.fontSize = UITheme.FONT_SIZE.SM;
        contentLabel.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
        contentLabel.overflow = Label.Overflow.CLAMP;
        contentNode.setParent(this.newsArea);
    }

    /**
     * 底部导航栏
     * 吐纳 | 门派 | 武学 | 江湖 | 游历
     */
    private initBottomNav() {
        if (!this.bottomNav) return;

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

        const tabs = [
            { name: '吐纳', icon: '🧘', active: true },
            { name: '门派', icon: '🏯', active: false },
            { name: '武学', icon: '⚔️', active: false },
            { name: '江湖', icon: '🗺️', active: false },
            { name: '游历', icon: '🚶', active: false },
        ];

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

            // 图标
            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.XS;
            textLabel.color = tab.active
                ? this.hexToColor(UITheme.COLORS.TEXT_GOLD)
                : this.hexToColor(UITheme.COLORS.TEXT_DIM);
            textNode.setParent(tabNode);
        });
    }
}