"use client";

import { useEffect, useRef } from "react";

interface Landmark {
  x: number;
  y: number;
  z: number;
  visibility: number;
}

interface PoseLandmarksProps {
  landmarks: Landmark[] | null;
  imageRef: HTMLImageElement | HTMLVideoElement | null;
  width?: number;
  height?: number;
}

// MediaPipe Pose connections (which landmarks to connect with lines)
const POSE_CONNECTIONS = [
  [11, 12], // Shoulders
  [11, 13],
  [13, 15], // Left arm
  [12, 14],
  [14, 16], // Right arm
  [11, 23],
  [12, 24], // Torso
  [23, 24], // Hips
  [23, 25],
  [25, 27], // Left leg
  [24, 26],
  [26, 28], // Right leg
];

export default function PoseLandmarks({
  landmarks,
  imageRef,
  width,
  height,
}: PoseLandmarksProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!landmarks || !canvasRef.current || !imageRef) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // Set canvas size to match image/video
    const displayWidth =
      width ||
      imageRef.clientWidth ||
      (imageRef as HTMLVideoElement).videoWidth;
    const displayHeight =
      height ||
      imageRef.clientHeight ||
      (imageRef as HTMLVideoElement).videoHeight;

    canvas.width = displayWidth;
    canvas.height = displayHeight;

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw connections (skeleton lines)
    ctx.strokeStyle = "rgba(0, 255, 255, 0.6)";
    ctx.lineWidth = 2;

    POSE_CONNECTIONS.forEach(([startIdx, endIdx]) => {
      if (startIdx < landmarks.length && endIdx < landmarks.length) {
        const start = landmarks[startIdx];
        const end = landmarks[endIdx];

        // Only draw if both points are visible
        if (start.visibility > 0.5 && end.visibility > 0.5) {
          ctx.beginPath();
          ctx.moveTo(start.x * canvas.width, start.y * canvas.height);
          ctx.lineTo(end.x * canvas.width, end.y * canvas.height);
          ctx.stroke();
        }
      }
    });

    // Draw landmarks (points)
    landmarks.forEach((landmark, index) => {
      if (landmark.visibility < 0.5) return; // Skip invisible landmarks

      const x = landmark.x * canvas.width;
      const y = landmark.y * canvas.height;

      // Color code by body part
      let color = "rgba(255, 255, 255, 0.8)"; // Default white

      if (index >= 11 && index <= 16) {
        color = "rgba(255, 100, 100, 0.9)"; // Arms - red
      } else if (index >= 23 && index <= 28) {
        color = "rgba(100, 255, 100, 0.9)"; // Legs - green
      } else if (index >= 11 && index <= 12) {
        color = "rgba(255, 200, 100, 0.9)"; // Shoulders - orange
      }

      // Draw point
      ctx.beginPath();
      ctx.arc(x, y, 5, 0, 2 * Math.PI);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
      ctx.lineWidth = 1;
      ctx.stroke();
    });
  }, [landmarks, imageRef, width, height]);

  if (!landmarks) return null;

  return (
    <canvas
      ref={canvasRef}
      className="absolute top-0 left-0 w-full h-full pointer-events-none z-10"
      style={{ transform: "scaleX(-1)" }}
    />
  );
}