import {ref } from 'vue';
import { loadModels,detectWithTimeout,detectSingleWithTimeout,isFaceFrontal,isFaceCentered } from "@/facerecognition/faceManager";
import { getVideoDevices,stopCamera,stopStream,drawVideoToCanvas,clearCanvas,captureImageFromVideo,captureBlobFromVideo,createCanvasFromVideo} from '@/facerecognition/deviceManager';
import { ElMessage} from "element-plus";
import * as faceapi from "face-api.js";

export class FaceRecognitionVm {
    constructor(options = { type : 0}){
        this.recognitionType = options.type;

        // 初始化canvas和video控件对象
        this.canvasDom = ref(null);
        this.videoDom = ref(null);
        this.videoArr = ref([]);
        //选择的摄像头的id
        this.constraints = ref("");
        this.videoConstraints = ref({});

        this.recognitionState = ref(0);
        this.startDetectFace = ref(false);
        this.imageDataUrl = ref(null);
        this.startRecognize = ref(false);
        this.stopCameraImmidiate = ref(false);

        this.lastStatus = ''
        this.statusStartTime = 0
        this.progress = ref(0)
        this.statusMessage = ref('请点击人脸录入按钮开始录入人脸');
        this.MIN_STATUS_DURATION = 3000; 

        this.baseEyeOpen = null
        this.isBlinking = false
        this.blinkDetected = false

        this.baseMouthOpen = null
        this.mouthOpenDetected = false
        this.mouthCloseAfterOpenDetected = false
        this.motionDetected = false
        this.motionHistory = []
        this.motionThreshold = 3 
        this.motionFrames = 10 

        this.lastLeftEyeHeight = null
        this.lastRightEyeHeight = null
        this.eyeHistory = []

        // 默认回调函数
        const defaultCallbacks = {
            onDetectionStart: () => {},
            onFaceRecognitionComplete: (imageData) => {},
            onError: (error) => {}
        }
        
        this.callbacks = { ...defaultCallbacks, ...options.callbacks }
    }

    registerHandleClose=()=>{
        this.startDetectFace.value = false;
        this.startRecognize.value = false;
        this.statusMessage.value= '请点击人脸录入按钮开始录入人脸';
        if(this.videoDom.value){
            console.log('stop camera');
            stopCamera(this.videoDom.value);
        }
        this.recognitionState.value = 0;
    }

    recognizeFace = () => {
        if(this.startRecognize.value ) return;
        this.statusMessage.value = '正在打开摄像头，请稍等...';
        this.startRecognize.value = true;
        this.imageDataUrl.value = null;
        this.recognitionState.value = 1;
        let that = this;
        this.baseEyeOpen = null
        this.baseMouthOpen = null
        this.isBlinking = false
        this.blinkDetected = false
        this.mouthOpenDetected = false
        this.mouthCloseAfterOpenDetected = false
        this.motionDetected = false
        this.motionHistory = []
        this.motionThreshold = 3 
        this.motionFrames = 10 

        loadModels().then(()=>{
            that.setupCamera();
        }).catch((err) => {
            this.startRecognize.value = false;
            console.error("Error loading models:", err);
            ElMessage.error("人脸识别模型加载失败，请检查网络连接或稍后再试。");
        });
    }

    // 获取设备列表
    setupCamera = async()=>{
        try {
            clearCanvas(this.canvasDom.value);
            ElMessage({
                message: "正在打开摄像头，请稍等...",
                type: "warning",
                plain: true,
                duration: 1000,
            });
            
            const devices = await getVideoDevices();
            this.videoArr.value = [];

            devices.forEach(device => {
                //console.log(`Device: ${device.label} (ID: ${device.id})`);
                this.videoArr.value.push({
                    label: device.label,
                    id: device.id,
                });
            });
            
            this.constraints.value = this.videoArr.value[0].id; 
            this.videoConstraints.value.deviceId = { exact: this.constraints.value };

            navigator.mediaDevices
            // 开启视频，关闭音频
            .getUserMedia({
                audio: false,
                video: {
                    width: 300, // 设置视频宽度
                    height: 300, // 设置视频高度
                    facingMode: "user", // 使用前置摄像头
                    deviceId: this.videoConstraints.value.deviceId,
                },
            })
            .then((stream) => {
                var video = this.videoDom.value;
                video.onloadeddata = () => {
                    console.log('视频帧已准备好，可开始检测');
                    this.faceRecognition();
                };
                video.srcObject = stream;
                video.play();
            })
            .catch((err) => {
                console.log(err);
            });
        } catch (err) {
            // 处理错误
            this.startRecognize.value = false;
            console.log(err);
            window.alert("该浏览器不支持开启摄像头，请更换最新版浏览器");
        }
    }
 
    faceRecognition = () => {
        this.startDetectFace.value = true;
        this.detectFaces();
    }

    
    detectFaces = async() => {
        if((!this.startDetectFace.value)){
            console.log('自动检测已停用');
            return;
        }
        try {
            var video = this.videoDom.value;
            var canvas = this.canvasDom.value;
            const displaySize = { width: video.videoWidth, height: video.videoHeight }
            faceapi.matchDimensions(canvas, displaySize)
            const detections = await detectWithTimeout(this.videoDom.value);
            let currentStatus = ''
            if (detections.length != 1) {
                // console.log('请确保只有一张人脸')
                currentStatus = 'not-centered-or-not-frontal';
            } else {
                const detection = detections[0]
                const box = detection.detection.box
                const score = detection.detection.score
                const landmarks = detection.landmarks
                // 中心点判断
                const isCentered = isFaceCentered(video, box)

                // 正脸判断
                const isFrontal = isFaceFrontal(landmarks)

                if (isCentered && isFrontal) {
                    // console.log(score);

                    const leftEye = landmarks.getLeftEye()
                    const rightEye = landmarks.getRightEye()
                    const mouth = landmarks.getMouth()

                    // 左右眼高度
                    const leftEyeH = Math.abs(leftEye[1].y - leftEye[5].y)
                    const rightEyeH = Math.abs(rightEye[1].y - rightEye[5].y)
                    const avgEyeH = (leftEyeH + rightEyeH) / 2

                    // 嘴巴高度
                    const mouthH = Math.abs(mouth[14].y - mouth[18].y)

                    // 改进后的嘴巴张开检测
                    const mouthWidth = Math.abs(mouth[0].x - mouth[6].x)  // 嘴巴的宽度
                    const mouthHeight = Math.abs(mouth[14].y - mouth[18].y) // 嘴巴的高度

                    // 计算宽高比
                    const mouthAspectRatio = mouthHeight / mouthWidth

                    // 设置一个阈值来判断嘴巴是否张开，通常一个较大的阈值表示张嘴
                    const mouthOpenThreshold = 0.3 // 你可以根据实际情况调整此值

                    // 记录baseline
                    if (!this.baseEyeOpen) {
                        this.baseEyeOpen = avgEyeH
                        this.baseMouthOpen = mouthH
                        currentStatus = '请张嘴'
                    }else{

                        if (mouthAspectRatio > mouthOpenThreshold) {
                            this.mouthOpenDetected = true
                            console.log('✅ 检测到张嘴')
                            currentStatus = '请合上嘴'
                        } else{
                            if(this.mouthOpenDetected){
                                if(mouthAspectRatio < 0.1){
                                    this.mouthCloseAfterOpenDetected = true;
                                    console.log('✅ 检测到张嘴后闭嘴')
                                }else{
                                    currentStatus = '请合上嘴'
                                }
                            }else{
                                currentStatus = '请张嘴'
                            }
                        }


                        // 活体判断
                        if ( this.mouthCloseAfterOpenDetected) {
                            currentStatus = '✅ 检测通过'
                            this.startDetectFace.value = false; // 停止自动检测
                            this.videoDom.value.pause();
                            this.takePhoto();
                            return;
                        } 
                    }
                } else {
                    // console.log('请调整人脸位置或角度')
                    currentStatus = '请张嘴'
                }
            }

            // 状态切换逻辑
            const now = Date.now()
            if (currentStatus == this.lastStatus) {
                const duration = now - this.statusStartTime
                // progress.value = Math.min(100, (duration / MIN_STATUS_DURATION) * 100)

                if (duration > this.MIN_STATUS_DURATION) {
                    // 状态已保持足够时间
                    this.statusMessage.value = this.getStatusText(currentStatus)
                    // ElMessage.info(this.statusMessage.value);
                }
            } else {
                this.lastStatus = currentStatus
                this.statusStartTime = now
                // progress.value = 0
                this.statusMessage.value = this.getStatusText(currentStatus, true)
                // ElMessage.info(this.statusMessage.value);
            }
            
        } catch (err) {
            console.error("检测失败:", err);
        }

        // 继续检测
        requestAnimationFrame(this.detectFaces);
        
    }

    getStatusText = (status, immediate = false) => {
        if (status === 'ok') return immediate ? '检测到正脸，请保持...' : '✅ 识别成功'
        if (status === 'not-centered-or-not-frontal') return '⚠️ 请保持人脸居中且正视摄像头'
        
        return status
    }

    // 简单高光检测函数
    detectHighlights = (imageData, threshold = 240) => {
        const pixels = imageData.data
        let brightPixels = 0
        for (let i = 0; i < pixels.length; i += 4) {
            const brightness = 0.299 * pixels[i] + 0.587 * pixels[i+1] + 0.114 * pixels[i+2]
            if (brightness > threshold) brightPixels++
        }
        const ratio = brightPixels / (pixels.length / 4)
        return ratio
    }

    toGrayscale = (data, width, height) => {
        const gray = new Uint8ClampedArray(width * height)
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i]
            const g = data[i+1]
            const b = data[i+2]
            gray[i/4] = 0.299*r + 0.587*g + 0.114*b
        }
        return gray
    }

    // 手写LBP
    computeLBP = (gray, width, height) => {
        const lbp = new Uint8Array(width * height)
        for (let y = 1; y < height -1; y++) {
            for (let x = 1; x < width -1; x++) {
            const center = gray[y*width + x]
            let code = 0
            code |= (gray[(y-1)*width + (x-1)] > center) << 7
            code |= (gray[(y-1)*width + x] > center) << 6
            code |= (gray[(y-1)*width + (x+1)] > center) << 5
            code |= (gray[y*width + (x+1)] > center) << 4
            code |= (gray[(y+1)*width + (x+1)] > center) << 3
            code |= (gray[(y+1)*width + x] > center) << 2
            code |= (gray[(y+1)*width + (x-1)] > center) << 1
            code |= (gray[y*width + (x-1)] > center) << 0
            lbp[y*width + x] = code
            }
        }
        return lbp
    }

    // 开始识别
    takePhoto = async () => {
        var curVideo = this.videoDom.value;
        var curCanvas = this.canvasDom.value;
        drawVideoToCanvas(curVideo, curCanvas);
        // 将画布内容转为 Base64 数据
        //captureImageFromVideo(curVideo);
        captureBlobFromVideo(curVideo)
        .then(imageData=>{
            this.imageDataUrl.value = imageData;
            console.log("捕获视频帧成功！");
            // 关闭摄像头
            stopCamera(curVideo);
            this.startRecognize.value = false;
            this.statusMessage.value = '✅ 识别成功';
            if(this.recognitionType === 0) {
                ElMessage({
                    message: "识别成功，请点击提交数据按钮进行注册",
                    type: "success",
                    plain: true,
                });
            }
            this.callbacks.onFaceRecognitionComplete(this.imageDataUrl.value);
        })
        .catch(err=>{
            console.error("捕获视频帧失败:", err);
            this.recognizeFace();
        });
    };
}