import { _decorator, Node, EditBox, instantiate, Vec3, Button, Label, Sprite, SpriteFrame, AudioClip, AudioSource, UITransform } from 'cc';
import { BaseView } from 'db://assets/scripts/core/BaseView';
import { ViewManager } from 'db://assets/scripts/core/ViewManager';
import { StorageManager } from 'db://assets/scripts/utils/StorageManager';
import { WxSDK } from 'db://assets/scripts/utils/WxSDK';
import { LevelDataManager } from 'db://assets/scripts/utils/LevelDataManager';
import { RuntimeLevelConfig } from 'db://assets/scripts/types/LevelTypes';
const { ccclass, property } = _decorator;

/**
 * 关卡页面组件
 * 继承 BaseView，实现页面生命周期
 */
@ccclass('PageLevel')
export class PageLevel extends BaseView {
    // ========== 节点引用 ==========
    @property(Node)
    inputLayout: Node | null = null;

    @property(Node)
    submitButton: Node | null = null;

    @property(Node)
    inputTemplate: Node | null = null;

    @property(Node)
    actionNode: Node | null = null;

    @property(Node)
    iconSetting: Node | null = null;

    @property(Node)
    tipsLayout: Node | null = null;

    @property(Node)
    mainImage: Node | null = null;

    @property(Node)
    tipsItem1: Node | null = null;

    @property(Node)
    tipsItem2: Node | null = null;

    @property(Node)
    tipsItem3: Node | null = null;

    @property(Node)
    unLockItem2: Node | null = null;

    @property(Node)
    unLockItem3: Node | null = null;

    @property(Label)
    clockLabel: Label | null = null;

    @property(Label)
    liveLabel: Label | null = null;

    // ========== 配置属性 ==========
    @property({
        min: 0,
        tooltip: '当前关卡索引'
    })
    currentLevelIndex: number = 0;

    @property(AudioClip)
    clickAudio: AudioClip | null = null;

    @property(AudioClip)
    successAudio: AudioClip | null = null;

    @property(AudioClip)
    failAudio: AudioClip | null = null;

    // ========== 内部状态 ==========
    /** 当前创建的输入框节点数组 */
    private _inputNodes: Node[] = [];

    /** 倒计时剩余秒数 */
    private _countdown: number = 60;

    /** 倒计时是否结束 */
    private _isTimeUp: boolean = false;

    /** 当前关卡配置 */
    private _currentConfig: RuntimeLevelConfig | null = null;

    /** 是否正在切换关卡（防止重复提交） */
    private _isTransitioning: boolean = false;

    /**
     * 页面首次加载时调用
     */
    onViewLoad(): void {
        console.log('[PageLevel] onViewLoad');
        this.updateLiveLabel();
        this.initLevel();
        this.initIconSetting();
        this.initUnlockButtons();
        this.initSubmitButton();
        this.startCountdown();
    }

    /**
     * 页面每次显示时调用
     */
    onViewShow(): void {
        console.log('[PageLevel] onViewShow');
        this.updateLiveLabel();
    }

    /**
     * 页面隐藏时调用
     */
    onViewHide(): void {
        console.log('[PageLevel] onViewHide');
    }

    /**
     * 页面销毁时调用
     */
    onViewDestroy(): void {
        console.log('[PageLevel] onViewDestroy');
        this.clearInputNodes();
        this.stopCountdown();
    }

    /**
     * 初始化关卡（从 API 数据加载）
     */
    private initLevel(): void {
        const config = LevelDataManager.instance.getLevelConfig(this.currentLevelIndex);
        if (!config) {
            console.warn(`[PageLevel] 没有找到关卡配置，索引: ${this.currentLevelIndex}`);
            return;
        }

        console.log(`[PageLevel] 初始化关卡 ${this.currentLevelIndex + 1}: ${config.name}`);
        this._applyLevelConfig(config);
    }

    /**
     * 应用关卡配置（通用初始化逻辑）
     */
    private _applyLevelConfig(config: RuntimeLevelConfig): void {
        this._currentConfig = config;

        // 重置关卡切换状态，允许再次提交
        this._isTransitioning = false;

        // 重置倒计时状态
        this._isTimeUp = false;
        this._countdown = 60;

        // 设置主图
        this.setMainImage(config.spriteFrame);

        // 设置线索1（默认解锁）
        this.setClue(1, config.clue1);

        // 隐藏线索2、3
        this.hideClue(2);
        this.hideClue(3);

        // 显示解锁按钮2、3
        this.showUnlockButton(2);
        this.showUnlockButton(3);

        // 根据答案长度创建单个输入框
        this.createSingleInput(config.answer.length);

        // 更新倒计时显示
        this.updateClockLabel();

        console.log(`[PageLevel] 初始化关卡 ${this.currentLevelIndex + 1}, 答案长度: ${config.answer.length}`);
    }

    /**
     * 创建单个输入框
     * @param answerLength 答案长度，用于设置 placeholder 和宽度
     */
    private createSingleInput(answerLength: number): void {
        if (!this.inputLayout || !this.inputTemplate) {
            console.error('[PageLevel] inputLayout 或 inputTemplate 未设置');
            return;
        }

        // 清理现有输入框
        this.clearInputNodes();

        // 隐藏模板节点
        this.inputTemplate.active = false;

        // 创建单个输入框
        const inputNode = instantiate(this.inputTemplate);
        inputNode.active = true;
        inputNode.name = 'singleInput';

        // 设置位置
        inputNode.setPosition(new Vec3(0, 0, 0));

        // 获取 EditBox 组件
        const editBox = inputNode.getComponent(EditBox);
        if (editBox) {
            // 设置 placeholder 提示
            editBox.placeholder = `(${answerLength}个字)`;

            // 设置最大长度为答案长度
            editBox.maxLength = answerLength;

            // 清空输入内容
            editBox.string = '';

            // 监听事件
            editBox.node.on(EditBox.EventType.TEXT_CHANGED, this.onInputTextChanged, this);
            editBox.node.on(EditBox.EventType.EDITING_DID_ENDED, this.onInputEditingEnded, this);
        }

        // 动态调整输入框宽度
        const uitransform = inputNode.getComponent(UITransform);
        let inputWidth = 200;
        if (uitransform) {
            // 每个字符约 60px，加上 padding
            inputWidth = Math.min(600, Math.max(200, answerLength * 60 + 40));
            uitransform.setContentSize(inputWidth, 100);
        }

        // 调整下划线宽度与输入框一致
        const underLine = inputNode.getChildByName('UnderLine');
        if (underLine) {
            const underLineTransform = underLine.getComponent(UITransform);
            if (underLineTransform) {
                underLineTransform.setContentSize(inputWidth, underLineTransform.height);
            }
        }

        this.inputLayout.addChild(inputNode);
        this._inputNodes.push(inputNode);

        console.log(`[PageLevel] 创建单个输入框，答案长度: ${answerLength}`);
    }

    /**
     * 清理所有输入框节点
     */
    private clearInputNodes(): void {
        for (const node of this._inputNodes) {
            if (node.isValid) {
                node.destroy();
            }
        }
        this._inputNodes = [];
    }

    /**
     * 获取所有输入框的值
     */
    getInputValues(): string[] {
        if (this._inputNodes.length === 0) return [];
        const editBox = this._inputNodes[0].getComponent(EditBox);
        const str = (editBox?.string ?? '').trim();
        return [str];
    }

    /**
     * 获取拼接后的答案字符串
     */
    getAnswer(): string {
        if (this._inputNodes.length === 0) return '';
        const editBox = this._inputNodes[0].getComponent(EditBox);
        return (editBox?.string ?? '').trim();
    }

    // ========== EditBox 事件回调 ==========

    /**
     * 输入框文本变化回调
     */
    private onInputTextChanged(_editBox: EditBox): void {
        console.log('[PageLevel] 输入内容变化');
    }

    /**
     * 输入框编辑结束回调
     */
    private onInputEditingEnded(_editBox: EditBox): void {
        console.log('[PageLevel] 输入编辑结束');
    }

    // ========== IconSetting 按钮相关 ==========

    /**
     * 初始化 IconSetting 按钮事件
     */
    private initIconSetting(): void {
        if (!this.iconSetting) {
            console.warn('[PageLevel] iconSetting 节点未设置');
            return;
        }

        const button = this.iconSetting.getComponent(Button);
        if (!button) {
            console.warn('[PageLevel] iconSetting 节点缺少 Button 组件');
            return;
        }

        this.iconSetting.on(Node.EventType.TOUCH_END, this.onIconSettingClick, this);
        console.log('[PageLevel] IconSetting 按钮事件已绑定');
    }

    /**
     * IconSetting 按钮点击回调
     */
    private onIconSettingClick(): void {
        console.log('[PageLevel] IconSetting 点击，返回主页');
        this.playClickSound();
        ViewManager.instance.back();
    }

    // ========== 线索相关方法 ==========

    /**
     * 获取线索节点
     */
    private getTipsItem(index: number): Node | null {
        switch (index) {
            case 1: return this.tipsItem1;
            case 2: return this.tipsItem2;
            case 3: return this.tipsItem3;
            default: return null;
        }
    }

    /**
     * 设置线索内容
     */
    private setClue(index: number, content: string): void {
        const tipsItem = this.getTipsItem(index);
        if (!tipsItem) return;

        // 查找 TipsLabel 节点：Content -> TipsLabel
        const contentNode = tipsItem.getChildByName('Content');
        if (!contentNode) return;

        const tipsLabelNode = contentNode.getChildByName('TipsLabel');
        if (!tipsLabelNode) return;

        const label = tipsLabelNode.getComponent(Label);
        if (label) {
            label.string = `提示 ${index}: ${content}`;
            console.log(`[PageLevel] 设置线索${index}: ${content}`);
        }
    }

    /**
     * 显示线索
     */
    private showClue(index: number): void {
        const tipsItem = this.getTipsItem(index);
        if (tipsItem) {
            tipsItem.active = true;
            console.log(`[PageLevel] 显示线索${index}`);
        }
    }

    /**
     * 隐藏线索
     */
    private hideClue(index: number): void {
        const tipsItem = this.getTipsItem(index);
        if (tipsItem) {
            tipsItem.active = false;
            console.log(`[PageLevel] 隐藏线索${index}`);
        }
    }

    /**
     * 显示解锁按钮
     */
    private showUnlockButton(index: number): void {
        const unlockItem = index === 2 ? this.unLockItem2 : this.unLockItem3;
        if (unlockItem) {
            unlockItem.active = true;
            console.log(`[PageLevel] 显示解锁按钮${index}`);
        }
    }

    /**
     * 隐藏解锁按钮
     */
    private hideUnlockButton(index: number): void {
        const unlockItem = index === 2 ? this.unLockItem2 : this.unLockItem3;
        if (unlockItem) {
            unlockItem.active = false;
            console.log(`[PageLevel] 隐藏解锁按钮${index}`);
        }
    }

    /**
     * 初始化解锁按钮事件
     */
    private initUnlockButtons(): void {
        // 解锁按钮2
        if (this.unLockItem2) {
            this.unLockItem2.on(Node.EventType.TOUCH_END, () => this.onUnlockClue(2), this);
        }

        // 解锁按钮3
        if (this.unLockItem3) {
            this.unLockItem3.on(Node.EventType.TOUCH_END, () => this.onUnlockClue(3), this);
        }

        console.log('[PageLevel] 解锁按钮事件已绑定');
    }

    /**
     * 初始化提交按钮事件
     */
    private initSubmitButton(): void {
        if (!this.submitButton) {
            console.warn('[PageLevel] submitButton 节点未设置');
            return;
        }

        this.submitButton.on(Node.EventType.TOUCH_END, this.onSubmitAnswer, this);
        console.log('[PageLevel] 提交按钮事件已绑定');
    }

    /**
     * 点击解锁线索
     */
    private onUnlockClue(index: number): void {
        // 检查生命值是否足够
        if (!this.hasLives()) {
            console.warn('[PageLevel] 生命值不足，无法解锁线索');
            return;
        }

        // 消耗一颗生命值
        if (!this.consumeLife()) {
            return;
        }

        // 播放点击音效
        this.playClickSound();

        // 隐藏解锁按钮
        this.hideUnlockButton(index);

        // 显示线索
        this.showClue(index);

        // 设置线索内容
        if (this._currentConfig) {
            const clueContent = index === 2 ? this._currentConfig.clue2 : this._currentConfig.clue3;
            this.setClue(index, clueContent);
        }

        console.log(`[PageLevel] 解锁线索${index}`);
    }

    // ========== 主图相关方法 ==========

    /**
     * 设置主图
     */
    private setMainImage(spriteFrame: SpriteFrame | null): void {
        if (!this.mainImage) return;

        const sprite = this.mainImage.getComponent(Sprite);
        if (sprite && spriteFrame) {
            sprite.spriteFrame = spriteFrame;
            console.log('[PageLevel] 设置主图');
        }
    }

    // ========== 音效相关方法 ==========

    /**
     * 播放音效（通用方法）
     */
    private playSound(clip: AudioClip | null): void {
        if (!clip) return;
        const audioSource = this.node.getComponent(AudioSource);
        audioSource?.playOneShot(clip);
    }

    /**
     * 播放点击音效
     */
    private playClickSound(): void {
        this.playSound(this.clickAudio);
    }

    /**
     * 播放成功音效
     */
    private playSuccessSound(): void {
        this.playSound(this.successAudio);
    }

    /**
     * 播放失败音效
     */
    private playFailSound(): void {
        this.playSound(this.failAudio);
    }

    // ========== 倒计时相关方法 ==========

    /**
     * 开始倒计时
     */
    private startCountdown(): void {
        this._countdown = 60;
        this._isTimeUp = false;
        this.updateClockLabel();
        this.schedule(this.onCountdownTick, 1);
        console.log('[PageLevel] 开始倒计时 60 秒');
    }

    /**
     * 停止倒计时
     */
    private stopCountdown(): void {
        this.unschedule(this.onCountdownTick);
    }

    /**
     * 倒计时每秒回调
     */
    private onCountdownTick(): void {
        if (this._isTimeUp) return;

        this._countdown--;
        this.updateClockLabel();

        if (this._countdown <= 0) {
            this._isTimeUp = true;
            this.stopCountdown();
            this.onTimeUp();
        }
    }

    /**
     * 更新倒计时显示
     */
    private updateClockLabel(): void {
        if (this.clockLabel) {
            this.clockLabel.string = `${this._countdown}s`;
        }
    }

    /**
     * 倒计时结束
     */
    private onTimeUp(): void {
        console.log('[PageLevel] 倒计时结束！');
        this.playFailSound();
        // 可以在这里添加游戏结束逻辑
    }

    // ========== 生命值相关方法 ==========

    /**
     * 更新生命值显示
     */
    private updateLiveLabel(): void {
        if (this.liveLabel) {
            const lives = StorageManager.getLives();
            this.liveLabel.string = `x ${lives}`;
            console.log(`[PageLevel] 更新生命值显示: ${lives}`);
        }
    }

    /**
     * 消耗一颗生命值（用于查看提示）
     * @returns 是否消耗成功
     */
    private consumeLife(): boolean {
        const success = StorageManager.consumeLife();
        if (success) {
            this.updateLiveLabel();
            console.log('[PageLevel] 消耗一颗生命');
        } else {
            console.warn('[PageLevel] 生命值不足，无法消耗');
        }
        return success;
    }

    /**
     * 增加一颗生命值（用于通关奖励）
     */
    private addLife(): void {
        StorageManager.addLife();
        this.updateLiveLabel();
        console.log('[PageLevel] 获得一颗生命');
    }

    /**
     * 检查是否有足够的生命值
     */
    private hasLives(): boolean {
        return StorageManager.hasLives();
    }

    // ========== 答案提交与关卡切换 ==========

    /**
     * 提交答案
     */
    onSubmitAnswer(): void {
        if (!this._currentConfig) return;
        if (this._isTransitioning) return;

        const userAnswer = this.getAnswer();
        console.log(`[PageLevel] 提交答案: ${userAnswer}, 正确答案: ${this._currentConfig.answer}`);

        if (userAnswer === this._currentConfig.answer) {
            // 答案正确
            this.playClickSound();
            this.showSuccess();
        } else {
            // 答案错误
            this.showError();
        }
    }

    /**
     * 显示成功提示
     */
    private showSuccess(): void {
        console.log('[PageLevel] 答案正确！');

        // 标记正在切换关卡，防止重复提交
        this._isTransitioning = true;

        // 停止倒计时
        this.stopCountdown();

        // 播放成功音效
        this.playSuccessSound();

        // 通关奖励：增加一颗生命值
        this.addLife();

        // 延迟后进入下一关
        this.scheduleOnce(() => {
            this.nextLevel();
        }, 1.0);
    }

    /**
     * 显示错误提示
     */
    private showError(): void {
        console.log('[PageLevel] 答案错误！');

        // 播放失败音效
        this.playFailSound();

        // 触发手机震动
        WxSDK.vibrateLong();
    }

    /**
     * 进入下一关
     */
    private nextLevel(): void {
        this.currentLevelIndex++;

        // 检查是否还有关卡
        const totalLevels = LevelDataManager.instance.getLevelCount();

        if (this.currentLevelIndex >= totalLevels) {
            // 所有关卡完成
            console.log('[PageLevel] 恭喜通关！');
            this.stopCountdown();
            ViewManager.instance.back();
            return;
        }

        // 重置并加载下一关，重新开始倒计时
        this.initLevel();
        this.startCountdown();
        console.log(`[PageLevel] 进入关卡 ${this.currentLevelIndex + 1}`);
    }
}