import { Canvas } from '@react-three/fiber';
import { useMemo } from 'react';
import {
  ACESFilmicToneMapping,
  PCFSoftShadowMap,
  SRGBColorSpace
} from 'three';

import { useViewerStore } from '../../store/viewerStore';
import { ViewerScene } from '../../three/ViewerScene';

export interface ViewerCanvasProps {
  machineId: string;
  className?: string;
}

export function ViewerCanvas({ machineId, className = '' }: ViewerCanvasProps) {
  const clearSelection = useViewerStore((state) => state.clearSelection);
  const setHoveredPart = useViewerStore((state) => state.setHoveredPart);
  const display = useViewerStore((state) => state.display);
  const rendererProfile = useRendererProfile();

  const dpr = useMemo<[number, number]>(
    () => [1, rendererProfile.maxDpr],
    [rendererProfile.maxDpr]
  );

  return (
    <div className={`h-full w-full overflow-hidden rounded-2xl bg-[#0B0E14] ${className}`}>
      <Canvas
        dpr={dpr}
        shadows={display.shadows}
        camera={{
          fov: 42,
          near: 0.025,
          far: 120,
          position: [6.8, 4.7, 5.5]
        }}
        gl={{
          antialias: rendererProfile.antialias,
          alpha: false,
          depth: true,
          stencil: false,
          powerPreference: rendererProfile.powerPreference,
          preserveDrawingBuffer: false
        }}
        performance={{
          min: rendererProfile.mobile ? 0.55 : 0.7,
          max: 1,
          debounce: 220
        }}
        onCreated={({ gl }) => {
          gl.toneMapping = ACESFilmicToneMapping;
          gl.outputColorSpace = SRGBColorSpace;
          gl.toneMappingExposure = display.exposure;
          gl.shadowMap.enabled = display.shadows;
          gl.shadowMap.type = PCFSoftShadowMap;
          gl.localClippingEnabled = true;
        }}
        onPointerMissed={() => {
          setHoveredPart(null);
          clearSelection();
        }}
      >
        <ViewerScene machineId={machineId} />
      </Canvas>
    </div>
  );
}

function useRendererProfile(): {
  maxDpr: number;
  antialias: boolean;
  mobile: boolean;
  powerPreference: WebGLPowerPreference;
} {
  if (typeof window === 'undefined') {
    return {
      maxDpr: 1.5,
      antialias: true,
      mobile: false,
      powerPreference: 'high-performance'
    };
  }

  const mobile =
    window.matchMedia('(max-width: 768px)').matches ||
    window.matchMedia('(pointer: coarse)').matches;
  const lowCoreCount = navigator.hardwareConcurrency
    ? navigator.hardwareConcurrency <= 4
    : false;
  const maxDpr = mobile ? Math.min(window.devicePixelRatio || 1, 1.5) : Math.min(window.devicePixelRatio || 1, 2);

  return {
    maxDpr,
    antialias: !(mobile && lowCoreCount),
    mobile,
    powerPreference: mobile ? 'default' : 'high-performance'
  };
}