import { useAuth } from "@/_core/hooks/useAuth";
import { trpc } from "@/lib/trpc";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { toast } from "sonner";
import { Camera, CameraOff, RotateCcw, CheckCircle2, AlertTriangle, Smartphone, Monitor, FlipHorizontal, Zap, Activity } from "lucide-react";
import { useRef, useState, useEffect, useCallback } from "react";

type CameraFacing = "user" | "environment";

interface PoseScore {
  overall: number;
  posture: number;
  balance: number;
  armAngle: number;
}

// Camera position guide steps
const SETUP_STEPS = [
  { title: "放置设备", desc: "将手机/平板固定在三脚架或稳定平面上", icon: <Smartphone className="h-6 w-6" /> },
  { title: "调整距离", desc: "确保摄像头能拍到全身（距离2-3米）", icon: <Monitor className="h-6 w-6" /> },
  { title: "调整高度", desc: "摄像头高度约在腰部位置，略微仰角", icon: <Camera className="h-6 w-6" /> },
  { title: "确认画面", desc: "确保光线充足，背景简洁，全身可见", icon: <CheckCircle2 className="h-6 w-6" /> },
];

export default function LiveCamera() {
  const { user } = useAuth();
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const streamRef = useRef<MediaStream | null>(null);
  const poseRef = useRef<any>(null);
  const animFrameRef = useRef<number>(0);

  const [cameraActive, setCameraActive] = useState(false);
  const [facing, setFacing] = useState<CameraFacing>("environment");
  const [showSetupGuide, setShowSetupGuide] = useState(true);
  const [setupStep, setSetupStep] = useState(0);
  const [analyzing, setAnalyzing] = useState(false);
  const [liveScore, setLiveScore] = useState<PoseScore | null>(null);
  const [frameCount, setFrameCount] = useState(0);
  const [fps, setFps] = useState(0);
  const [hasMultipleCameras, setHasMultipleCameras] = useState(false);
  const [exerciseType, setExerciseType] = useState("forehand");
  const [feedback, setFeedback] = useState<string[]>([]);

  // Check available cameras
  useEffect(() => {
    navigator.mediaDevices?.enumerateDevices().then(devices => {
      const cameras = devices.filter(d => d.kind === "videoinput");
      setHasMultipleCameras(cameras.length > 1);
    }).catch(() => {});
  }, []);

  // FPS counter
  useEffect(() => {
    if (!analyzing) return;
    const interval = setInterval(() => {
      setFps(prev => {
        const current = frameCount;
        setFrameCount(0);
        return current;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [analyzing, frameCount]);

  const startCamera = useCallback(async () => {
    try {
      // Stop existing stream
      if (streamRef.current) {
        streamRef.current.getTracks().forEach(t => t.stop());
      }

      const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
      const constraints: MediaStreamConstraints = {
        video: {
          facingMode: facing,
          width: { ideal: isMobile ? 1280 : 1920 },
          height: { ideal: isMobile ? 720 : 1080 },
          frameRate: { ideal: 30, max: 30 },
        },
        audio: false,
      };

      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      streamRef.current = stream;

      if (videoRef.current) {
        videoRef.current.srcObject = stream;
        await videoRef.current.play();
      }

      setCameraActive(true);
      toast.success("摄像头已启动");
    } catch (err: any) {
      console.error("Camera error:", err);
      if (err.name === "NotAllowedError") {
        toast.error("请允许摄像头访问权限");
      } else if (err.name === "NotFoundError") {
        toast.error("未找到摄像头设备");
      } else {
        toast.error("摄像头启动失败: " + err.message);
      }
    }
  }, [facing]);

  const stopCamera = useCallback(() => {
    if (streamRef.current) {
      streamRef.current.getTracks().forEach(t => t.stop());
      streamRef.current = null;
    }
    if (animFrameRef.current) {
      cancelAnimationFrame(animFrameRef.current);
    }
    setCameraActive(false);
    setAnalyzing(false);
    setLiveScore(null);
  }, []);

  const switchCamera = useCallback(() => {
    const newFacing = facing === "user" ? "environment" : "user";
    setFacing(newFacing);
    if (cameraActive) {
      stopCamera();
      setTimeout(() => startCamera(), 300);
    }
  }, [facing, cameraActive, stopCamera, startCamera]);

  // Start pose analysis
  const startAnalysis = useCallback(async () => {
    if (!videoRef.current || !canvasRef.current) return;

    setAnalyzing(true);
    toast.info("正在加载姿势识别模型...");

    try {
      const { Pose } = await import("@mediapipe/pose");
      const { drawConnectors, drawLandmarks } = await import("@mediapipe/drawing_utils");

      const pose = new Pose({
        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`,
      });

      pose.setOptions({
        modelComplexity: 1,
        smoothLandmarks: true,
        enableSegmentation: false,
        minDetectionConfidence: 0.5,
        minTrackingConfidence: 0.5,
      });

      const POSE_CONNECTIONS = [
        [11, 12], [11, 13], [13, 15], [12, 14], [14, 16],
        [11, 23], [12, 24], [23, 24], [23, 25], [24, 26],
        [25, 27], [26, 28], [15, 17], [16, 18], [15, 19],
        [16, 20], [17, 19], [18, 20],
      ];

      pose.onResults((results: any) => {
        const canvas = canvasRef.current;
        const ctx = canvas?.getContext("2d");
        if (!canvas || !ctx || !videoRef.current) return;

        canvas.width = videoRef.current.videoWidth;
        canvas.height = videoRef.current.videoHeight;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(videoRef.current, 0, 0);

        if (results.poseLandmarks) {
          // Draw skeleton
          const landmarks = results.poseLandmarks;

          // Draw connections
          ctx.strokeStyle = "rgba(0, 200, 100, 0.8)";
          ctx.lineWidth = 3;
          POSE_CONNECTIONS.forEach(([a, b]) => {
            const la = landmarks[a];
            const lb = landmarks[b];
            if (la && lb && la.visibility > 0.3 && lb.visibility > 0.3) {
              ctx.beginPath();
              ctx.moveTo(la.x * canvas.width, la.y * canvas.height);
              ctx.lineTo(lb.x * canvas.width, lb.y * canvas.height);
              ctx.stroke();
            }
          });

          // Draw landmarks
          landmarks.forEach((lm: any, i: number) => {
            if (lm.visibility > 0.3) {
              ctx.fillStyle = [11, 12, 13, 14, 15, 16].includes(i) ? "#ff4444" : "#00cc66";
              ctx.beginPath();
              ctx.arc(lm.x * canvas.width, lm.y * canvas.height, 5, 0, 2 * Math.PI);
              ctx.fill();
            }
          });

          // Calculate live scores
          const score = calculateLiveScore(landmarks, exerciseType);
          setLiveScore(score);
          setFeedback(generateLiveFeedback(landmarks, exerciseType));
          setFrameCount(prev => prev + 1);

          // Draw score overlay
          ctx.fillStyle = "rgba(0,0,0,0.6)";
          ctx.fillRect(10, 10, 180, 40);
          ctx.fillStyle = "#fff";
          ctx.font = "bold 16px sans-serif";
          ctx.fillText(`评分: ${score.overall}/100`, 20, 35);
        }
      });

      poseRef.current = pose;

      const processFrame = async () => {
        if (!videoRef.current || !analyzing) return;
        if (videoRef.current.readyState >= 2) {
          await pose.send({ image: videoRef.current });
        }
        animFrameRef.current = requestAnimationFrame(processFrame);
      };

      toast.success("模型加载完成，开始实时分析");
      processFrame();
    } catch (err) {
      console.error("Pose init error:", err);
      toast.error("姿势识别模型加载失败");
      setAnalyzing(false);
    }
  }, [analyzing, exerciseType]);

  const stopAnalysis = useCallback(() => {
    if (animFrameRef.current) {
      cancelAnimationFrame(animFrameRef.current);
    }
    setAnalyzing(false);
    setLiveScore(null);
  }, []);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      stopCamera();
    };
  }, [stopCamera]);

  // Setup guide dialog
  const handleSetupComplete = () => {
    setShowSetupGuide(false);
    startCamera();
  };

  return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">实时姿势分析</h1>
          <p className="text-muted-foreground text-sm mt-1">通过摄像头实时捕捉并分析您的挥拍动作</p>
        </div>
        <div className="flex items-center gap-2">
          <Select value={exerciseType} onValueChange={setExerciseType}>
            <SelectTrigger className="w-[120px] h-9 text-sm">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="forehand">正手挥拍</SelectItem>
              <SelectItem value="backhand">反手挥拍</SelectItem>
              <SelectItem value="serve">发球</SelectItem>
              <SelectItem value="volley">截击</SelectItem>
              <SelectItem value="footwork">脚步移动</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Camera position setup guide */}
      <Dialog open={showSetupGuide} onOpenChange={setShowSetupGuide}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Camera className="h-5 w-5 text-primary" />
              摄像头位置设置
            </DialogTitle>
            <DialogDescription>
              为获得最佳分析效果，请按以下步骤调整设备位置
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-2">
            {SETUP_STEPS.map((step, idx) => (
              <div key={idx} className={`flex items-start gap-3 p-3 rounded-lg transition-colors ${
                idx === setupStep ? "bg-primary/10 border border-primary/20" : idx < setupStep ? "bg-green-50" : "bg-muted/30"
              }`}>
                <div className={`h-10 w-10 rounded-full flex items-center justify-center shrink-0 ${
                  idx < setupStep ? "bg-green-100 text-green-600" : idx === setupStep ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground"
                }`}>
                  {idx < setupStep ? <CheckCircle2 className="h-5 w-5" /> : step.icon}
                </div>
                <div>
                  <p className="font-medium text-sm">{step.title}</p>
                  <p className="text-xs text-muted-foreground mt-0.5">{step.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <DialogFooter className="flex gap-2">
            {setupStep > 0 && (
              <Button variant="outline" onClick={() => setSetupStep(s => s - 1)}>上一步</Button>
            )}
            {setupStep < SETUP_STEPS.length - 1 ? (
              <Button onClick={() => setSetupStep(s => s + 1)}>下一步</Button>
            ) : (
              <Button onClick={handleSetupComplete} className="gap-2">
                <Camera className="h-4 w-4" />开始使用摄像头
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Main camera view */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
        <div className="lg:col-span-3">
          <Card className="border-0 shadow-sm overflow-hidden">
            <CardContent className="p-0 relative">
              <div className="relative bg-black aspect-video w-full">
                <video
                  ref={videoRef}
                  className={`absolute inset-0 w-full h-full object-contain ${analyzing ? "opacity-0" : ""}`}
                  playsInline
                  muted
                  autoPlay
                />
                <canvas
                  ref={canvasRef}
                  className={`absolute inset-0 w-full h-full object-contain ${analyzing ? "" : "hidden"}`}
                />
                {!cameraActive && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center text-white/60">
                    <CameraOff className="h-12 w-12 mb-3" />
                    <p className="text-sm">摄像头未启动</p>
                    <Button variant="secondary" className="mt-3 gap-2" onClick={() => setShowSetupGuide(true)}>
                      <Camera className="h-4 w-4" />启动摄像头
                    </Button>
                  </div>
                )}
                {/* FPS indicator */}
                {analyzing && (
                  <div className="absolute top-3 right-3 bg-black/60 text-white text-xs px-2 py-1 rounded">
                    {fps} FPS
                  </div>
                )}
              </div>

              {/* Controls bar */}
              <div className="flex items-center justify-center gap-3 p-3 bg-muted/30 flex-wrap">
                {!cameraActive ? (
                  <Button onClick={() => setShowSetupGuide(true)} className="gap-2">
                    <Camera className="h-4 w-4" />启动摄像头
                  </Button>
                ) : (
                  <>
                    <Button variant="outline" size="sm" onClick={stopCamera} className="gap-1.5">
                      <CameraOff className="h-3.5 w-3.5" />关闭
                    </Button>
                    {hasMultipleCameras && (
                      <Button variant="outline" size="sm" onClick={switchCamera} className="gap-1.5">
                        <FlipHorizontal className="h-3.5 w-3.5" />
                        {facing === "user" ? "后置" : "前置"}
                      </Button>
                    )}
                    {!analyzing ? (
                      <Button size="sm" onClick={startAnalysis} className="gap-1.5">
                        <Zap className="h-3.5 w-3.5" />开始分析
                      </Button>
                    ) : (
                      <Button variant="destructive" size="sm" onClick={stopAnalysis} className="gap-1.5">
                        <Activity className="h-3.5 w-3.5" />停止分析
                      </Button>
                    )}
                    <Button variant="outline" size="sm" onClick={() => setShowSetupGuide(true)} className="gap-1.5">
                      <RotateCcw className="h-3.5 w-3.5" />重新调整
                    </Button>
                  </>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Live score panel */}
        <div className="space-y-4">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm flex items-center gap-2">
                <Activity className="h-4 w-4 text-primary" />实时评分
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {liveScore ? (
                <>
                  <div className="text-center">
                    <p className="text-4xl font-bold text-primary">{liveScore.overall}</p>
                    <p className="text-xs text-muted-foreground">综合评分</p>
                  </div>
                  <div className="space-y-2">
                    <ScoreBar label="姿势" value={liveScore.posture} />
                    <ScoreBar label="平衡" value={liveScore.balance} />
                    <ScoreBar label="手臂" value={liveScore.armAngle} />
                  </div>
                </>
              ) : (
                <div className="text-center py-6 text-muted-foreground text-sm">
                  <Activity className="h-8 w-8 mx-auto mb-2 opacity-30" />
                  <p>开始分析后显示实时评分</p>
                </div>
              )}
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm flex items-center gap-2">
                <AlertTriangle className="h-4 w-4 text-orange-500" />实时反馈
              </CardTitle>
            </CardHeader>
            <CardContent>
              {feedback.length > 0 ? (
                <div className="space-y-2">
                  {feedback.map((f, i) => (
                    <div key={i} className="text-xs p-2 rounded bg-orange-50 text-orange-700 border border-orange-100">
                      {f}
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-xs text-muted-foreground text-center py-4">
                  分析中将显示实时矫正建议
                </p>
              )}
            </CardContent>
          </Card>

          {/* Tips card */}
          <Card className="border-0 shadow-sm bg-blue-50/50">
            <CardContent className="py-3">
              <p className="text-xs font-medium text-blue-700 mb-1">📱 移动端提示</p>
              <ul className="text-[11px] text-blue-600 space-y-1">
                <li>· 横屏模式效果更佳</li>
                <li>· 使用后置摄像头获得更高画质</li>
                <li>· 保持2-3米拍摄距离</li>
                <li>· 确保光线充足</li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

// Score bar component
function ScoreBar({ label, value }: { label: string; value: number }) {
  const color = value >= 80 ? "bg-green-500" : value >= 60 ? "bg-yellow-500" : "bg-red-500";
  return (
    <div>
      <div className="flex justify-between text-xs mb-0.5">
        <span className="text-muted-foreground">{label}</span>
        <span className="font-medium">{Math.round(value)}</span>
      </div>
      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
        <div className={`h-full ${color} rounded-full transition-all duration-300`} style={{ width: `${value}%` }} />
      </div>
    </div>
  );
}

// Live score calculation from landmarks
function calculateLiveScore(landmarks: any[], exerciseType: string): PoseScore {
  const getAngle = (a: any, b: any, c: any) => {
    const radians = Math.atan2(c.y - b.y, c.x - b.x) - Math.atan2(a.y - b.y, a.x - b.x);
    let angle = Math.abs(radians * 180 / Math.PI);
    if (angle > 180) angle = 360 - angle;
    return angle;
  };

  // Shoulder alignment (posture)
  const leftShoulder = landmarks[11];
  const rightShoulder = landmarks[12];
  const shoulderDiff = Math.abs(leftShoulder.y - rightShoulder.y);
  const postureScore = Math.max(0, 100 - shoulderDiff * 500);

  // Hip alignment (balance)
  const leftHip = landmarks[23];
  const rightHip = landmarks[24];
  const hipDiff = Math.abs(leftHip.y - rightHip.y);
  const balanceScore = Math.max(0, 100 - hipDiff * 500);

  // Arm angle based on exercise type
  let armScore = 70;
  if (exerciseType === "forehand" || exerciseType === "backhand") {
    const shoulder = exerciseType === "forehand" ? landmarks[12] : landmarks[11];
    const elbow = exerciseType === "forehand" ? landmarks[14] : landmarks[13];
    const wrist = exerciseType === "forehand" ? landmarks[16] : landmarks[15];
    const angle = getAngle(shoulder, elbow, wrist);
    // Ideal forehand/backhand elbow angle: 90-150 degrees
    if (angle >= 90 && angle <= 150) armScore = 90 + (1 - Math.abs(angle - 120) / 30) * 10;
    else armScore = Math.max(30, 90 - Math.abs(angle - 120));
  } else if (exerciseType === "serve") {
    const rightElbow = landmarks[14];
    const rightShoulder2 = landmarks[12];
    const rightWrist = landmarks[16];
    const angle = getAngle(rightShoulder2, rightElbow, rightWrist);
    if (angle >= 150 && angle <= 180) armScore = 95;
    else armScore = Math.max(40, 95 - Math.abs(angle - 165) * 2);
  }

  const overall = Math.round(postureScore * 0.3 + balanceScore * 0.3 + armScore * 0.4);

  return {
    overall: Math.min(100, Math.max(0, overall)),
    posture: Math.min(100, Math.max(0, Math.round(postureScore))),
    balance: Math.min(100, Math.max(0, Math.round(balanceScore))),
    armAngle: Math.min(100, Math.max(0, Math.round(armScore))),
  };
}

// Generate live feedback
function generateLiveFeedback(landmarks: any[], exerciseType: string): string[] {
  const tips: string[] = [];
  const leftShoulder = landmarks[11];
  const rightShoulder = landmarks[12];

  if (Math.abs(leftShoulder.y - rightShoulder.y) > 0.05) {
    tips.push("⚠️ 双肩不平衡，注意保持肩膀水平");
  }

  const leftHip = landmarks[23];
  const rightHip = landmarks[24];
  if (Math.abs(leftHip.y - rightHip.y) > 0.05) {
    tips.push("⚠️ 重心不稳，注意保持髋部水平");
  }

  const nose = landmarks[0];
  const midShoulder = { x: (leftShoulder.x + rightShoulder.x) / 2, y: (leftShoulder.y + rightShoulder.y) / 2 };
  if (Math.abs(nose.x - midShoulder.x) > 0.08) {
    tips.push("⚠️ 头部偏移，保持头部在身体中心线上");
  }

  if (exerciseType === "forehand") {
    const rightElbow = landmarks[14];
    const rightWrist = landmarks[16];
    if (rightElbow.y > rightShoulder.y + 0.15) {
      tips.push("💡 正手：抬高肘部，保持手臂在肩膀高度");
    }
  }

  if (exerciseType === "serve") {
    const rightWrist = landmarks[16];
    if (rightWrist.y > rightShoulder.y) {
      tips.push("💡 发球：手臂需要充分伸展向上");
    }
  }

  if (tips.length === 0) {
    tips.push("✅ 姿势良好，继续保持！");
  }

  return tips;
}