import React, { useEffect, useRef, useState, RefObject } from "react";
import { motion, useAnimation, AnimatePresence } from "framer-motion";
import { TriangleAlert } from "lucide-react";


// 人物框组件
const PersonBox = React.forwardRef<HTMLDivElement, {
  person: PersonDetection;
}>(({ person }, ref) => {
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.6 }}
      className="absolute border-2 border-cyan-400/70 rounded-md shadow-lg z-30"
      style={{
        top: `${person.position.top}px`,
        left: `${person.position.left}px`,
        width: `${person.position.width}px`,
        height: `${person.position.height}px`,
        boxShadow: "0 0 20px rgba(6, 182, 212, 0.3)"
      }}
    >
    </motion.div>
  );
});

PersonBox.displayName = 'PersonBox';

export type PersonDetection = {
  id: string;
  name: string;
  description: string;
  imageUrl: string;
  position: {
    top: number;
    left: number;
    width: number;
    height: number;
  };
};

type Props = {
  scanState: 'idle' | 'scanning' | 'detected' | 'failed' | 'timeout';
  backgroundImage?: string;
  videoSrc?: string;
  detections: PersonDetection[];
  triggerScan: boolean;
  triggerSuccess: boolean;
  onScanStart?: (currentTime?: number) => void;
  onScanTimeout?: () => void;
  onScanExit?: () => void; // 扫描退出回调
  scanTimeout?: number;
  isScanFailed?: boolean; // 外部传入的失败状态
  onDetectionsChange?: (detections: PersonDetection[]) => void;
  onPersonClick?: (person: PersonDetection) => void;
};

export const PersonDetectionScene: React.FC<Props> = ({
  scanState,
  backgroundImage,
  videoSrc,
  detections,
  triggerScan,
  triggerSuccess,
  onScanStart,
  onScanTimeout,
  onScanExit,
  scanTimeout = 100000,
  isScanFailed = false,
  onDetectionsChange,
  onPersonClick
}) => {
  const scanControls = useAnimation();
  const videoRef = useRef<HTMLVideoElement>(null);
  const [scanStatus, setScanStatus] = useState<'idle' | 'scanning' | 'timeout' | 'failed'>('idle');
  const timeoutRef = useRef<NodeJS.Timeout>();
  const exitTimeoutRef = useRef<NodeJS.Timeout>();


  // 处理扫描状态
  useEffect(() => {
    if (triggerScan && detections.length === 0) {
      setScanStatus('scanning');
      // 设置超时定时器
      timeoutRef.current = setTimeout(() => {
        setScanStatus('timeout');
        onScanTimeout?.();
      }, scanTimeout);
    } else {
      // 清除所有定时器
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      if (exitTimeoutRef.current) {
        clearTimeout(exitTimeoutRef.current);
      }
      setScanStatus('idle');
    }

    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      if (exitTimeoutRef.current) {
        clearTimeout(exitTimeoutRef.current);
      }
    };
  }, [triggerScan, detections.length, scanTimeout, onScanTimeout]);

  // 处理外部失败状态
  useEffect(() => {
    if (isScanFailed && scanStatus === 'scanning') {
      console.log('roleRecognitionResponse---isScanFailed', isScanFailed);
      setScanStatus('failed');
    }
  }, [isScanFailed, scanStatus]);

  // 处理失败/超时自动退出
  useEffect(() => {
    if (scanStatus === 'timeout' || scanStatus === 'failed') {
      exitTimeoutRef.current = setTimeout(() => {
        setScanStatus('idle');
        onScanExit?.();
      }, 3000);
    }
    return () => {
      if (exitTimeoutRef.current) {
        clearTimeout(exitTimeoutRef.current);
      }
    };
  }, [scanStatus, onScanExit]);

  // 处理视频/图片源变化
  useEffect(() => {
    setScanStatus('idle');
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    if (exitTimeoutRef.current) {
      clearTimeout(exitTimeoutRef.current);
    }
  }, [videoSrc, backgroundImage]);

  useEffect(() => {
    if (scanStatus !== 'idle') {
      if (videoRef.current) {
        videoRef.current.pause();
        onScanStart?.(videoRef.current.currentTime);
      } else {
        onScanStart?.();
      }

      scanControls.start({
        opacity: [0, 1, 1, 0],
        scale: [0.98, 1, 1, 0.98],
        y: ["-120%", "120%"],
        transition: {
          duration: 3,
          repeat: Infinity,
          repeatType: "loop",
          times: [0, 0.2, 0.8, 1],
          ease: "easeInOut"
        }
      });
    } else {
      scanControls.stop();
    }
  }, [triggerScan, scanStatus, scanControls, onScanStart]);

  // 监听检测结果变化
  useEffect(() => {
    onDetectionsChange?.(detections);
  }, [detections, onDetectionsChange]);

  const isShowError = scanStatus === 'timeout' || scanStatus === 'failed';
  const isShowScan = scanStatus !== 'idle';

  return (
    <div className="relative w-full aspect-video overflow-hidden rounded-xl border border-white/10 bg-black">
      {/* 背景层 */}
      {backgroundImage && (
        <div
          className="absolute inset-0 z-0"
          style={{
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
      )}
      {videoSrc && (
        <video
          ref={videoRef}
          id="person-detection-video"
          src={videoSrc}
          className="absolute inset-0 w-full h-full object-cover z-0"
          autoPlay
          muted={false}
          crossOrigin="anonymous"
          loop
          controls
        />
      )}

      {scanState !== 'idle' && (
        <>
          {/* 暗化层 */}
          <AnimatePresence>
            {isShowScan && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="absolute inset-0 bg-black/40 backdrop-blur-sm z-10"
              />
            )}
          </AnimatePresence>

          {/* 扫描状态提示 */}
          <AnimatePresence>
            {isShowScan && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="absolute top-1/2 left-1/2 z-50 flex flex-col items-center -translate-y-1/2 -translate-x-1/2"
              >
                {/* 状态图标 */}
                <div className={`relative w-12 h-12 mb-2 ${isShowError ? 'scale-110' : ''}`}>
                  {!isShowError ? (
                    <>
                      <motion.div
                        className="absolute inset-0 rounded-full"
                        style={{
                          border: '2px solid rgba(6, 182, 212, 0.5)',
                          borderTopColor: 'rgb(6, 182, 212)',
                        }}
                        animate={{ rotate: 360 }}
                        transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
                      />
                      <motion.div
                        className="absolute inset-2 rounded-full"
                        style={{
                          border: '2px solid rgba(6, 182, 212, 0.3)',
                          borderRightColor: 'rgb(6, 182, 212)',
                        }}
                        animate={{ rotate: -360 }}
                        transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
                      />
                      <div className="absolute inset-4 bg-cyan-400 rounded-full" />
                    </>
                  ) : (
                    <motion.div
                      initial={{ scale: 0.8 }}
                      animate={{
                        scale: [0.8, 1.1, 1],
                        borderColor: ['rgb(239, 68, 68)', 'rgb(239, 68, 68)', 'rgb(239, 68, 68)']
                      }}
                      transition={{ duration: 0.5 }}
                      className="w-full h-full rounded-full flex items-center justify-center"
                    >
                      <TriangleAlert className="w-12 h-12 text-red-500" />
                    </motion.div>
                  )}
                </div>

                {/* 状态文字 */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: 0.1 }}
                >
                  <div className="flex items-center gap-2">
                    {!isShowError ? (
                      <span className="text-cyan-400 text-sm font-medium tracking-wider whitespace-nowrap">
                        Intelligenting portrait recognition
                      </span>
                    ) : (
                      <span className="text-red-400 text-sm font-medium tracking-wider whitespace-nowrap">
                        {scanStatus === 'timeout' ? 'Timeout, please try again' : 'Failed, please try again'}
                      </span>
                    )}
                  </div>
                </motion.div>
              </motion.div>
            )}
          </AnimatePresence>

          {/* 扫描动画效果 */}
          <AnimatePresence>
            {isShowScan && scanState === 'scanning' && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="absolute inset-0"
              >
                {/* 主扫描线 */}
                <motion.div
                  className="absolute left-0 w-full h-[150px] z-20"
                  animate={scanControls}
                  initial={{ y: "-120%" }}
                  exit={{ opacity: 0 }}
                  style={{
                    background: `
                      linear-gradient(
                        180deg,
                        transparent 0%,
                        rgba(6, 182, 212, 0.1) 20%,
                        rgba(6, 182, 212, 0.3) 50%,
                        rgba(6, 182, 212, 0.1) 80%,
                        transparent 100%
                      )
                    `,
                    boxShadow: '0 0 30px rgba(6, 182, 212, 0.3)'
                  }}
                >
                  {/* 扫描线中心光束 */}
                  <motion.div
                    className="absolute top-1/2 left-0 w-full h-[2px]"
                    style={{
                      background: 'linear-gradient(90deg, transparent 0%, rgb(6, 182, 212) 50%, transparent 100%)',
                      boxShadow: '0 0 20px rgb(6, 182, 212)'
                    }}
                  />
                </motion.div>

                {/* 扫描网格 */}
                <div className="absolute inset-0 z-15">
                  <motion.div
                    className="w-full h-full"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.5 }}
                    style={{
                      backgroundImage: `
                        linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px),
                        linear-gradient(0deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px)
                      `,
                      backgroundSize: '40px 40px'
                    }}
                  />
                  <motion.div
                    className="absolute inset-0"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 0.5 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.5 }}
                    style={{
                      backgroundImage: `
                        linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px),
                        linear-gradient(0deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px)
                      `,
                      backgroundSize: '20px 20px'
                    }}
                  />
                </div>

                {/* 四角扫描框 */}
                <div className="absolute inset-4 z-30 pointer-events-none">
                  <motion.div
                    className="w-full h-full"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                  >
                    {/* 左上角 */}
                    <div className="absolute top-0 left-0 w-8 h-8 border-l-2 border-t-2 border-cyan-400/70" />
                    {/* 右上角 */}
                    <div className="absolute top-0 right-0 w-8 h-8 border-r-2 border-t-2 border-cyan-400/70" />
                    {/* 左下角 */}
                    <div className="absolute bottom-0 left-0 w-8 h-8 border-l-2 border-b-2 border-cyan-400/70" />
                    {/* 右下角 */}
                    <div className="absolute bottom-0 right-0 w-8 h-8 border-r-2 border-b-2 border-cyan-400/70" />
                  </motion.div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {/* 人物识别框和浮签 */}
          <AnimatePresence>
            {detections.length === 0 && triggerSuccess && (
              <div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm">
                <span className="text-white text-sm">No portrait detected</span>
              </div>
            )}
            {detections.map((person, index) => {
              return (
                <div key={person.id} className="cursor-pointer" onClick={() => {
                  onPersonClick?.(person);
                }}>
                  <PersonBox person={person} />
                  <motion.div
                    className="absolute z-50 px-3 py-1 text-white text-xs bg-cyan-500/20 border border-cyan-400/30 rounded-md backdrop-blur-md whitespace-nowrap"
                    style={{
                      top: `${person.position.top}px`,
                      left: `${person.position.left}px`
                    }}
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                  >
                    {person.name}
                  </motion.div>
                </div>
              );
            })}
          </AnimatePresence>
        </>
      )}
    </div>
  );
};
