stalendeuren/components/configurator/door-3d-enhanced.tsx

"use client";

import { useRef } from "react";
import { useConfiguratorStore } from "@/lib/store";
import { RoundedBox } from "@react-three/drei";
import * as THREE from "three";

// Steel material - fallback to solid color for now
const SteelMaterial = ({ color }: { color: string }) => (
  <meshStandardMaterial
    color={color}
    roughness={0.7}
    metalness={0.8}
    envMapIntensity={1}
  />
);

// Glass material - More opaque/white for technical drawing look
const GlassMaterial = () => (
  <meshPhysicalMaterial
    color="#f8f9fa"
    transparent
    transmission={0.3}
    roughness={0.1}
    thickness={1}
    ior={1.5}
    envMapIntensity={0.5}
    opacity={0.95}
  />
);

// 3D Dimension Label Component - temporarily disabled
function DimensionLabel({
  value,
  position,
  label,
}: {
  value: number;
  position: [number, number, number];
  label: string;
}) {
  return null; // Temporarily disabled to fix loading
}

export function Door3DEnhanced() {
  const { doorType, gridType, finish, handle, doorLeafWidth, height } =
    useConfiguratorStore();
  const doorRef = useRef<THREE.Group>(null);

  // Frame color based on finish
  const frameColor = {
    zwart: "#1a1a1a",
    brons: "#8B6F47",
    grijs: "#525252",
  }[finish];

  // Convert mm to meters for 3D scene
  const doorWidth = doorLeafWidth / 1000; // Convert mm to m
  const doorHeight = height / 1000; // Convert mm to m

  // Profile dimensions (in meters) - Thicker for visibility
  const stileWidth = 0.06; // 60mm vertical profiles (more visible)
  const stileDepth = 0.06; // 60mm depth
  const railHeight = 0.04; // 40mm horizontal profiles (more visible)
  const railDepth = 0.06; // 60mm depth
  const glassThickness = 0.01; // 10mm glass
  const profileRadius = 0.002; // 2mm rounded corners

  // Calculate positions for grid dividers
  const getDividerPositions = () => {
    if (gridType === "3-vlak") {
      return [-doorHeight / 3, doorHeight / 3];
    } else if (gridType === "4-vlak") {
      return [-doorHeight / 2, 0, doorHeight / 2];
    }
    return [];
  };

  const dividerPositions = getDividerPositions();

  return (
    <group ref={doorRef} position={[0, doorHeight / 2, 0]}>
      {/* LEFT STILE - Vertical profile */}
      <RoundedBox
        args={[stileWidth, doorHeight, stileDepth]}
        radius={profileRadius}
        smoothness={4}
        position={[-doorWidth / 2 + stileWidth / 2, 0, 0]}
        castShadow
      >
        <SteelMaterial color={frameColor} />
      </RoundedBox>

      {/* RIGHT STILE - Vertical profile */}
      <RoundedBox
        args={[stileWidth, doorHeight, stileDepth]}
        radius={profileRadius}
        smoothness={4}
        position={[doorWidth / 2 - stileWidth / 2, 0, 0]}
        castShadow
      >
        <SteelMaterial color={frameColor} />
      </RoundedBox>

      {/* TOP RAIL - Horizontal profile */}
      <RoundedBox
        args={[doorWidth - stileWidth * 2, railHeight, railDepth]}
        radius={profileRadius}
        smoothness={4}
        position={[0, doorHeight / 2 - railHeight / 2, 0]}
        castShadow
      >
        <SteelMaterial color={frameColor} />
      </RoundedBox>

      {/* BOTTOM RAIL - Horizontal profile */}
      <RoundedBox
        args={[doorWidth - stileWidth * 2, railHeight, railDepth]}
        radius={profileRadius}
        smoothness={4}
        position={[0, -doorHeight / 2 + railHeight / 2, 0]}
        castShadow
      >
        <SteelMaterial color={frameColor} />
      </RoundedBox>

      {/* INTERMEDIATE RAILS (Grid dividers) */}
      {dividerPositions.map((yPos, index) => (
        <RoundedBox
          key={`rail-${index}`}
          args={[doorWidth - stileWidth * 2, railHeight, railDepth]}
          radius={profileRadius}
          smoothness={4}
          position={[0, yPos, 0]}
          castShadow
        >
          <SteelMaterial color={frameColor} />
        </RoundedBox>
      ))}

      {/* VERTICAL DIVIDER for Paneel */}
      {doorType === "paneel" && (
        <RoundedBox
          args={[stileWidth, doorHeight - railHeight * 2, stileDepth]}
          radius={profileRadius}
          smoothness={4}
          position={[0, 0, 0]}
          castShadow
        >
          <SteelMaterial color={frameColor} />
        </RoundedBox>
      )}

      {/* GLASS PANEL - Sits inside the frame */}
      <mesh position={[0, 0, 0]} castShadow receiveShadow>
        <boxGeometry
          args={[
            doorWidth - stileWidth * 2,
            doorHeight - railHeight * 2,
            glassThickness,
          ]}
        />
        <GlassMaterial />
      </mesh>

      {/* HANDLE - U-Greep for Taats */}
      {doorType === "taats" && handle === "u-greep" && (
        <RoundedBox
          args={[0.02, 0.6, 0.02]}
          radius={0.003}
          smoothness={4}
          position={[0, 0, railDepth / 2 + 0.01]}
          castShadow
        >
          <SteelMaterial color={frameColor} />
        </RoundedBox>
      )}

      {/* HANDLE - Klink for Scharnier */}
      {doorType === "scharnier" && handle === "klink" && (
        <group position={[doorWidth / 2 - stileWidth - 0.1, 0, railDepth / 2 + 0.01]}>
          <RoundedBox args={[0.08, 0.02, 0.02]} radius={0.003} smoothness={4} castShadow>
            <SteelMaterial color={frameColor} />
          </RoundedBox>
          <mesh position={[0.04, 0, 0]} castShadow>
            <sphereGeometry args={[0.015, 32, 32]} />
            <meshStandardMaterial
              color={finish === "brons" ? "#6B5434" : frameColor}
              metalness={0.95}
              roughness={0.05}
              envMapIntensity={1.2}
            />
          </mesh>
        </group>
      )}

      {/* 3D DIMENSION LABELS */}
      {/* Width dimension */}
      <DimensionLabel
        value={doorLeafWidth}
        position={[0, -doorHeight / 2 - 0.15, 0.1]}
        label="mm"
      />

      {/* Height dimension */}
      <DimensionLabel
        value={height}
        position={[doorWidth / 2 + 0.15, 0, 0.1]}
        label="mm"
      />

      {/* Dimension lines */}
      {/* Horizontal line for width */}
      <mesh position={[0, -doorHeight / 2 - 0.1, 0.05]}>
        <boxGeometry args={[doorWidth, 0.002, 0.002]} />
        <meshBasicMaterial color="#1a1a1a" />
      </mesh>

      {/* Vertical line for height */}
      <mesh position={[doorWidth / 2 + 0.1, 0, 0.05]}>
        <boxGeometry args={[0.002, doorHeight, 0.002]} />
        <meshBasicMaterial color="#1a1a1a" />
      </mesh>
    </group>
  );
}