import { useState, useEffect } from "react";
import { Box, Typography, Paper, useTheme } from "@mui/material";
import { useAppStore } from "../../store";
import { usePropertyInspectorSettings } from "../../hooks/usePropertyInspectorSettings";
import { formatPropertyValue } from "../../utils/propertyFormatting";

/**
 * HoverInfoBox - Displays contextual information at the mouse position.
 * Shows:
 * - Particle index when hovering over a particle
 * - Curve length when in drawing mode with an active curve
 */
export default function HoverInfoBox() {
  const theme = useTheme();
  const {
    showInfoBoxes,
    hoveredParticleId,
    curveLength,
    isDrawing,
  } = useAppStore();

  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  // Performance optimization: only fetch per-particle properties when boxes are visible and particle is hovered
  const shouldFetchProperties = showInfoBoxes && hoveredParticleId !== null;

  const {
    enabledProperties,
    propertyValues,
    isEnabled,
    categories,
  } = usePropertyInspectorSettings({
    category: "per-particle",
    enabled: shouldFetchProperties,
  });

  useEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      setMousePosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  if (!showInfoBoxes) return null;

  // Determine what to show
  const showParticleInfo = hoveredParticleId !== null;
  const showCurveInfo = isDrawing && curveLength > 0;
  const hasContent = showParticleInfo || showCurveInfo;

  if (!hasContent) return null;

  return (
    <Box
      sx={{
        position: "fixed",
        left: mousePosition.x + 20,
        top: mousePosition.y + 20,
        pointerEvents: "none",
        userSelect: "none",
        zIndex: 10000,
      }}
    >
      <Paper
        elevation={3}
        sx={{
          padding: 1.5,
          backgroundColor: theme.palette.mode === "dark" 
            ? "rgba(0, 0, 0, 0.85)" 
            : "rgba(255, 255, 255, 0.95)",
          backdropFilter: "blur(10px)",
          borderRadius: 1,
          minWidth: "120px",
          border: `1px solid ${theme.palette.mode === "dark" 
            ? "rgba(255, 255, 255, 0.15)" 
            : "rgba(0, 0, 0, 0.15)"}`,
        }}
      >
        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
          {showParticleInfo && (
            <>
              <Typography
                variant="body2"
                sx={{ color: theme.palette.primary.main, fontWeight: "bold" }}
              >
                Particle: {hoveredParticleId}
              </Typography>
              {isEnabled && hoveredParticleId !== null && propertyValues.map((query, index) => {
                const key = enabledProperties[index];

                // Skip if loading or error
                if (query.isLoading || query.isError || !query.data?.value) {
                  return null;
                }

                const value = query.data.value;

                // Find property metadata for proper formatting
                const propInfo = categories?.perParticle.find(p => p.key === key);

                // Format value using utility function
                const displayValue = formatPropertyValue(value, hoveredParticleId, propInfo);

                return (
                  <Typography
                    key={key}
                    variant="caption"
                    sx={{
                      color: theme.palette.text.secondary,
                      fontFamily: "monospace",
                      fontSize: "0.75rem",
                    }}
                  >
                    {key}: {displayValue}
                  </Typography>
                );
              })}
            </>
          )}
          {showCurveInfo && (
            <Typography
              variant="body2"
              sx={{ color: theme.palette.warning.main, fontWeight: "bold" }}
            >
              Length: {curveLength.toFixed(2)}
            </Typography>
          )}
        </Box>
      </Paper>
    </Box>
  );
}
