"use client";

import { Canvas } from "@react-three/fiber";
import {
  OrbitControls,
  PerspectiveCamera,
  Environment,
  ContactShadows,
  RoundedBox,
} from "@react-three/drei";
import { Door3DEnhanced } from "./door-3d-enhanced";
import { useConfiguratorStore } from "@/lib/store";
import {
  STELRUIMTE,
  WALL_THICKNESS,
  mmToMeters,
} from "@/lib/door-models";
import * as THREE from "three";

// ============================================
// MATERIALS
// ============================================

const WallMaterial = () => (
  <meshStandardMaterial color="#f5f2ed" roughness={0.95} metalness={0} />
);

const RevealMaterial = () => (
  <meshStandardMaterial color="#e8e4dd" roughness={1.0} metalness={0} />
);

const FloorMaterial = () => (
  <meshStandardMaterial color="#d4c4a8" roughness={0.7} metalness={0.02} />
);

const WoodMaterial = () => (
  <meshStandardMaterial color="#7a6550" roughness={0.55} metalness={0.05} />
);

const DarkMetalMaterial = () => (
  <meshStandardMaterial color="#1a1a1a" roughness={0.3} metalness={0.8} />
);

// ============================================
// WALL CONTAINER WITH PRECISE HOLE
// ============================================

function WallContainer({
  holeWidth,
  holeHeight,
  wallThickness,
}: {
  holeWidth: number;
  holeHeight: number;
  wallThickness: number;
}) {
  const wallWidth = 4.0;
  const wallHeight = 3.0;
  const halfHoleW = holeWidth / 2;
  const halfWallT = wallThickness / 2;

  const leftSectionWidth = (wallWidth - holeWidth) / 2;
  const leftSectionX = -(halfHoleW + leftSectionWidth / 2);
  const rightSectionWidth = leftSectionWidth;
  const rightSectionX = halfHoleW + rightSectionWidth / 2;
  const topSectionHeight = wallHeight - holeHeight;
  const topSectionY = holeHeight + topSectionHeight / 2;
  const gapPerSide = mmToMeters(STELRUIMTE / 2);

  return (
    <group position={[0, 0, 0]}>
      {/* Main wall sections */}
      <mesh position={[leftSectionX, wallHeight / 2, 0]} castShadow receiveShadow>
        <boxGeometry args={[leftSectionWidth, wallHeight, wallThickness]} />
        <WallMaterial />
      </mesh>
      <mesh position={[rightSectionX, wallHeight / 2, 0]} castShadow receiveShadow>
        <boxGeometry args={[rightSectionWidth, wallHeight, wallThickness]} />
        <WallMaterial />
      </mesh>
      {topSectionHeight > 0.01 && (
        <mesh position={[0, topSectionY, 0]} castShadow receiveShadow>
          <boxGeometry args={[holeWidth, topSectionHeight, wallThickness]} />
          <WallMaterial />
        </mesh>
      )}

      {/* Reveal surfaces */}
      <mesh position={[-halfHoleW + 0.001, holeHeight / 2, 0]} castShadow receiveShadow>
        <boxGeometry args={[0.002, holeHeight, wallThickness]} />
        <RevealMaterial />
      </mesh>
      <mesh position={[halfHoleW - 0.001, holeHeight / 2, 0]} castShadow receiveShadow>
        <boxGeometry args={[0.002, holeHeight, wallThickness]} />
        <RevealMaterial />
      </mesh>
      <mesh position={[0, holeHeight - 0.001, 0]} castShadow receiveShadow>
        <boxGeometry args={[holeWidth, 0.002, wallThickness]} />
        <RevealMaterial />
      </mesh>

      {/* Reveal depth surfaces */}
      <mesh position={[-halfHoleW + gapPerSide / 2, holeHeight / 2, 0]} receiveShadow>
        <boxGeometry args={[gapPerSide, holeHeight, wallThickness - 0.01]} />
        <RevealMaterial />
      </mesh>
      <mesh position={[halfHoleW - gapPerSide / 2, holeHeight / 2, 0]} receiveShadow>
        <boxGeometry args={[gapPerSide, holeHeight, wallThickness - 0.01]} />
        <RevealMaterial />
      </mesh>
      <mesh position={[0, holeHeight - gapPerSide / 2, 0]} receiveShadow>
        <boxGeometry args={[holeWidth - gapPerSide * 2, gapPerSide, wallThickness - 0.01]} />
        <RevealMaterial />
      </mesh>

      {/* Baseboard - front side */}
      <mesh position={[leftSectionX, 0.04, halfWallT + 0.005]} castShadow>
        <boxGeometry args={[leftSectionWidth, 0.08, 0.012]} />
        <meshStandardMaterial color="#d5d0c8" roughness={0.7} />
      </mesh>
      <mesh position={[rightSectionX, 0.04, halfWallT + 0.005]} castShadow>
        <boxGeometry args={[rightSectionWidth, 0.08, 0.012]} />
        <meshStandardMaterial color="#d5d0c8" roughness={0.7} />
      </mesh>
    </group>
  );
}

// ============================================
// ROOM STRUCTURE
// ============================================

function RoomShell() {
  const wallHeight = 3.0;
  const roomDepth = 3.5;
  const roomWidth = 7.0; // Much wider than the 4m back wall
  const sideWallThickness = 0.08;
  const floorSize = 10;

  return (
    <group>
      {/* Front floor (viewer side) */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, roomDepth / 2]} receiveShadow>
        <planeGeometry args={[floorSize, roomDepth + 1]} />
        <FloorMaterial />
      </mesh>

      {/* Back floor (behind wall) */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, -1.5]} receiveShadow>
        <planeGeometry args={[floorSize, 3]} />
        <FloorMaterial />
      </mesh>

      {/* Floor plank lines (viewer side) */}
      {Array.from({ length: 20 }).map((_, i) => {
        const x = -2.7 + i * 0.27;
        return (
          <mesh key={`plank-${i}`} rotation={[-Math.PI / 2, 0, 0]} position={[x, 0.001, roomDepth / 2]}>
            <planeGeometry args={[0.003, roomDepth + 1]} />
            <meshStandardMaterial color="#b0a08a" roughness={0.9} />
          </mesh>
        );
      })}

      {/* Left side wall */}
      <mesh position={[-roomWidth / 2, wallHeight / 2, roomDepth / 2]} receiveShadow>
        <boxGeometry args={[sideWallThickness, wallHeight, roomDepth]} />
        <WallMaterial />
      </mesh>

      {/* Right side wall */}
      <mesh position={[roomWidth / 2, wallHeight / 2, roomDepth / 2]} receiveShadow>
        <boxGeometry args={[sideWallThickness, wallHeight, roomDepth]} />
        <WallMaterial />
      </mesh>

      {/* Left side baseboard */}
      <mesh position={[-roomWidth / 2 + sideWallThickness / 2 + 0.006, 0.04, roomDepth / 2]}>
        <boxGeometry args={[0.012, 0.08, roomDepth]} />
        <meshStandardMaterial color="#d5d0c8" roughness={0.7} />
      </mesh>

      {/* Right side baseboard */}
      <mesh position={[roomWidth / 2 - sideWallThickness / 2 - 0.006, 0.04, roomDepth / 2]}>
        <boxGeometry args={[0.012, 0.08, roomDepth]} />
        <meshStandardMaterial color="#d5d0c8" roughness={0.7} />
      </mesh>

      {/* Ceiling (partial - hint near the wall) */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, wallHeight, 0.6]}>
        <planeGeometry args={[roomWidth, 1.5]} />
        <meshStandardMaterial color="#f8f6f2" roughness={1} />
      </mesh>

      {/* Back room - bedroom visible through glass door */}
      <Bedroom />
    </group>
  );
}

// ============================================
// BEDROOM (visible through the glass door)
// ============================================

function Bedroom() {
  const wallWidth = 4.0;
  const wallHeight = 3.0;
  const roomDepth = 4.0;
  const backZ = -roomDepth;

  return (
    <group>
      {/* Back wall */}
      <mesh position={[0, wallHeight / 2, backZ]} receiveShadow>
        <planeGeometry args={[wallWidth, wallHeight]} />
        <meshStandardMaterial color="#e8e2d8" roughness={0.95} />
      </mesh>

      {/* Left side wall (bedroom) */}
      <mesh position={[-wallWidth / 2 + 0.04, wallHeight / 2, backZ / 2]} receiveShadow>
        <boxGeometry args={[0.08, wallHeight, roomDepth]} />
        <meshStandardMaterial color="#ece6dc" roughness={0.95} />
      </mesh>

      {/* Right side wall (bedroom) */}
      <mesh position={[wallWidth / 2 - 0.04, wallHeight / 2, backZ / 2]} receiveShadow>
        <boxGeometry args={[0.08, wallHeight, roomDepth]} />
        <meshStandardMaterial color="#ece6dc" roughness={0.95} />
      </mesh>

      {/* Bedroom ceiling */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, wallHeight, backZ / 2]}>
        <planeGeometry args={[wallWidth, roomDepth]} />
        <meshStandardMaterial color="#f5f2ee" roughness={1} />
      </mesh>

      {/* Bedroom baseboard - back wall */}
      <mesh position={[0, 0.04, backZ + 0.006]}>
        <boxGeometry args={[wallWidth - 0.16, 0.08, 0.012]} />
        <meshStandardMaterial color="#d5d0c8" roughness={0.7} />
      </mesh>

      {/* Bedroom baseboard - left */}
      <mesh position={[-wallWidth / 2 + 0.085, 0.04, backZ / 2]}>
        <boxGeometry args={[0.012, 0.08, roomDepth - 0.1]} />
        <meshStandardMaterial color="#d5d0c8" roughness={0.7} />
      </mesh>

      {/* Bedroom baseboard - right */}
      <mesh position={[wallWidth / 2 - 0.085, 0.04, backZ / 2]}>
        <boxGeometry args={[0.012, 0.08, roomDepth - 0.1]} />
        <meshStandardMaterial color="#d5d0c8" roughness={0.7} />
      </mesh>

      {/* Window on back wall (bright rectangle suggesting daylight) */}
      <mesh position={[0, 1.6, backZ + 0.01]}>
        <planeGeometry args={[1.2, 1.0]} />
        <meshStandardMaterial color="#d4e6f1" roughness={0.1} emissive="#b8d4e8" emissiveIntensity={0.3} />
      </mesh>
      {/* Window frame */}
      {[
        { pos: [0, 2.1, backZ + 0.015] as [number, number, number], size: [1.26, 0.03, 0.02] as [number, number, number] },
        { pos: [0, 1.1, backZ + 0.015] as [number, number, number], size: [1.26, 0.03, 0.02] as [number, number, number] },
        { pos: [-0.615, 1.6, backZ + 0.015] as [number, number, number], size: [0.03, 1.06, 0.02] as [number, number, number] },
        { pos: [0.615, 1.6, backZ + 0.015] as [number, number, number], size: [0.03, 1.06, 0.02] as [number, number, number] },
        { pos: [0, 1.6, backZ + 0.015] as [number, number, number], size: [0.02, 1.0, 0.02] as [number, number, number] },
        { pos: [0, 1.6, backZ + 0.015] as [number, number, number], size: [1.2, 0.02, 0.02] as [number, number, number] },
      ].map((f, i) => (
        <mesh key={`wf-${i}`} position={f.pos}>
          <boxGeometry args={f.size} />
          <meshStandardMaterial color="#f5f2ed" roughness={0.6} />
        </mesh>
      ))}
      {/* Window light */}
      <rectAreaLight
        position={[0, 1.6, backZ + 0.05]}
        width={1.2}
        height={1.0}
        intensity={2.5}
        color="#e8f0ff"
      />

      {/* === BED === */}
      <group position={[0, 0, backZ + 1.2]}>
        {/* Bed frame base */}
        <mesh position={[0, 0.18, 0]} castShadow receiveShadow>
          <boxGeometry args={[1.6, 0.12, 2.1]} />
          <meshStandardMaterial color="#c4b496" roughness={0.6} metalness={0.02} />
        </mesh>

        {/* Mattress */}
        <RoundedBox args={[1.5, 0.2, 2.0]} radius={0.03} smoothness={4} position={[0, 0.34, 0]} castShadow receiveShadow>
          <meshStandardMaterial color="#f5f2ee" roughness={0.95} />
        </RoundedBox>

        {/* Duvet/blanket */}
        <RoundedBox args={[1.46, 0.08, 1.5]} radius={0.02} smoothness={4} position={[0, 0.47, 0.2]} castShadow>
          <meshStandardMaterial color="#d4cfc5" roughness={0.92} />
        </RoundedBox>

        {/* Duvet fold at top */}
        <RoundedBox args={[1.46, 0.12, 0.25]} radius={0.04} smoothness={4} position={[0, 0.48, -0.55]} castShadow>
          <meshStandardMaterial color="#ddd8ce" roughness={0.92} />
        </RoundedBox>

        {/* Pillows */}
        <RoundedBox args={[0.55, 0.1, 0.35]} radius={0.04} smoothness={4} position={[-0.35, 0.48, -0.78]} castShadow>
          <meshStandardMaterial color="#f0ece6" roughness={0.95} />
        </RoundedBox>
        <RoundedBox args={[0.55, 0.1, 0.35]} radius={0.04} smoothness={4} position={[0.35, 0.48, -0.78]} castShadow>
          <meshStandardMaterial color="#f0ece6" roughness={0.95} />
        </RoundedBox>

        {/* Headboard */}
        <RoundedBox args={[1.65, 0.9, 0.06]} radius={0.01} smoothness={4} position={[0, 0.7, -1.03]} castShadow>
          <meshStandardMaterial color="#7a6a52" roughness={0.55} metalness={0.05} />
        </RoundedBox>

        {/* Bed legs (metal) */}
        {[
          [-0.72, 0, -0.97],
          [0.72, 0, -0.97],
          [-0.72, 0, 0.97],
          [0.72, 0, 0.97],
        ].map(([x, _, z], i) => (
          <mesh key={`bl-${i}`} position={[x, 0.06, z]} castShadow>
            <cylinderGeometry args={[0.015, 0.015, 0.12, 8]} />
            <meshStandardMaterial color="#1a1a1a" roughness={0.3} metalness={0.8} />
          </mesh>
        ))}
      </group>

      {/* === NIGHTSTAND LEFT === */}
      <group position={[-1.1, 0, backZ + 0.6]}>
        <RoundedBox args={[0.45, 0.38, 0.38]} radius={0.008} smoothness={4} position={[0, 0.28, 0]} castShadow receiveShadow>
          <meshStandardMaterial color="#8a7a62" roughness={0.55} metalness={0.05} />
        </RoundedBox>
        {/* Legs */}
        {[[-0.17, -0.14], [0.17, -0.14], [-0.17, 0.14], [0.17, 0.14]].map(([x, z], i) => (
          <mesh key={`nsl-${i}`} position={[x, 0.045, z]} castShadow>
            <cylinderGeometry args={[0.006, 0.008, 0.09, 6]} />
            <meshStandardMaterial color="#1a1a1a" roughness={0.3} metalness={0.8} />
          </mesh>
        ))}
        {/* Lamp on nightstand */}
        <mesh position={[0, 0.52, 0]} castShadow>
          <cylinderGeometry args={[0.04, 0.06, 0.06, 16]} />
          <meshStandardMaterial color="#c8bfb0" roughness={0.85} />
        </mesh>
        <mesh position={[0, 0.6, 0]} castShadow>
          <cylinderGeometry args={[0.005, 0.005, 0.1, 6]} />
          <meshStandardMaterial color="#b8a890" roughness={0.5} metalness={0.3} />
        </mesh>
        <mesh position={[0, 0.68, 0]} castShadow>
          <cylinderGeometry args={[0.03, 0.08, 0.1, 16, 1, true]} />
          <meshStandardMaterial color="#f5f0e8" roughness={0.9} side={THREE.DoubleSide} />
        </mesh>
        <pointLight position={[0, 0.65, 0]} intensity={0.15} color="#ffeedd" distance={2} decay={2} />
      </group>

      {/* === NIGHTSTAND RIGHT === */}
      <group position={[1.1, 0, backZ + 0.6]}>
        <RoundedBox args={[0.45, 0.38, 0.38]} radius={0.008} smoothness={4} position={[0, 0.28, 0]} castShadow receiveShadow>
          <meshStandardMaterial color="#8a7a62" roughness={0.55} metalness={0.05} />
        </RoundedBox>
        {[[-0.17, -0.14], [0.17, -0.14], [-0.17, 0.14], [0.17, 0.14]].map(([x, z], i) => (
          <mesh key={`nsr-${i}`} position={[x, 0.045, z]} castShadow>
            <cylinderGeometry args={[0.006, 0.008, 0.09, 6]} />
            <meshStandardMaterial color="#1a1a1a" roughness={0.3} metalness={0.8} />
          </mesh>
        ))}
        {/* Small plant on nightstand */}
        <mesh position={[0, 0.52, 0]} castShadow>
          <cylinderGeometry args={[0.035, 0.03, 0.06, 12]} />
          <meshStandardMaterial color="#4a4a4a" roughness={0.88} />
        </mesh>
        <mesh position={[0, 0.58, 0]} castShadow>
          <sphereGeometry args={[0.05, 10, 10]} />
          <meshStandardMaterial color="#4a6a3a" roughness={0.88} />
        </mesh>
        <mesh position={[0.03, 0.62, 0.01]} castShadow>
          <sphereGeometry args={[0.035, 8, 8]} />
          <meshStandardMaterial color="#3a5a2c" roughness={0.88} />
        </mesh>
      </group>

      {/* === BEDROOM RUG === */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.003, backZ + 2.0]} receiveShadow>
        <planeGeometry args={[1.8, 1.2]} />
        <meshStandardMaterial color="#b8a88a" roughness={1.0} />
      </mesh>

      {/* === CEILING LIGHT (bedroom) === */}
      <mesh position={[0, 2.97, backZ / 2]}>
        <cylinderGeometry args={[0.15, 0.15, 0.02, 24]} />
        <meshStandardMaterial color="#f5f2ee" roughness={0.5} emissive="#fff5e0" emissiveIntensity={0.1} />
      </mesh>
      <pointLight position={[0, 2.9, backZ / 2]} intensity={0.5} color="#ffeedd" distance={5} decay={2} />

      {/* === WALL ART (bedroom back wall) === */}
      <group position={[-0.8, 1.8, backZ + 0.01]}>
        <mesh>
          <planeGeometry args={[0.35, 0.45]} />
          <meshStandardMaterial color="#d8c8a8" roughness={0.9} />
        </mesh>
        {/* Simple abstract circle */}
        <mesh position={[0, 0.02, 0.001]}>
          <circleGeometry args={[0.1, 24]} />
          <meshStandardMaterial color="#baa882" roughness={0.85} />
        </mesh>
        {/* Frame */}
        {[
          [0, 0.225, 0.35, 0.02],
          [0, -0.225, 0.35, 0.02],
          [-0.175, 0, 0.02, 0.45],
          [0.175, 0, 0.02, 0.45],
        ].map(([x, y, w, h], i) => (
          <mesh key={`art-${i}`} position={[x, y, 0.003]}>
            <planeGeometry args={[w, h]} />
            <meshStandardMaterial color="#2a2a2a" roughness={0.4} />
          </mesh>
        ))}
      </group>

      {/* Second art piece */}
      <group position={[0.8, 1.75, backZ + 0.01]}>
        <mesh>
          <planeGeometry args={[0.3, 0.4]} />
          <meshStandardMaterial color="#c8d4c4" roughness={0.9} />
        </mesh>
        {[
          [0, 0.2, 0.3, 0.02],
          [0, -0.2, 0.3, 0.02],
          [-0.15, 0, 0.02, 0.4],
          [0.15, 0, 0.02, 0.4],
        ].map(([x, y, w, h], i) => (
          <mesh key={`art2-${i}`} position={[x, y, 0.003]}>
            <planeGeometry args={[w, h]} />
            <meshStandardMaterial color="#2a2a2a" roughness={0.4} />
          </mesh>
        ))}
      </group>
    </group>
  );
}

// ============================================
// FURNITURE: SIDEBOARD
// ============================================

function Sideboard() {
  const bodyW = 0.9;
  const bodyH = 0.44;
  const bodyD = 0.36;
  const legH = 0.12;
  const yBody = legH + bodyH / 2;
  const wallFaceZ = 0.075; // Front face of main wall

  return (
    <group position={[-1.4, 0, wallFaceZ + bodyD / 2 + 0.02]}>
      {/* Body */}
      <RoundedBox args={[bodyW, bodyH, bodyD]} radius={0.008} smoothness={4} position={[0, yBody, 0]} castShadow receiveShadow>
        <WoodMaterial />
      </RoundedBox>

      {/* Top surface (darker edge) */}
      <mesh position={[0, yBody + bodyH / 2 + 0.005, 0]} castShadow>
        <boxGeometry args={[bodyW + 0.01, 0.01, bodyD + 0.01]} />
        <meshStandardMaterial color="#5c4a38" roughness={0.5} metalness={0.05} />
      </mesh>

      {/* Metal legs */}
      {[
        [-bodyW / 2 + 0.06, 0, -bodyD / 2 + 0.06],
        [bodyW / 2 - 0.06, 0, -bodyD / 2 + 0.06],
        [-bodyW / 2 + 0.06, 0, bodyD / 2 - 0.06],
        [bodyW / 2 - 0.06, 0, bodyD / 2 - 0.06],
      ].map(([x, _, z], i) => (
        <mesh key={i} position={[x, legH / 2, z]} castShadow>
          <cylinderGeometry args={[0.008, 0.01, legH, 8]} />
          <DarkMetalMaterial />
        </mesh>
      ))}

      {/* Drawer line (decorative) */}
      <mesh position={[0, yBody, bodyD / 2 + 0.001]}>
        <planeGeometry args={[bodyW - 0.04, 0.002]} />
        <meshStandardMaterial color="#5c4a38" roughness={0.5} />
      </mesh>
    </group>
  );
}

// ============================================
// FURNITURE: DECORATIVE OBJECTS
// ============================================

function VaseWithBranches() {
  const wallFaceZ = 0.075;

  return (
    <group position={[-1.55, 0.59, wallFaceZ + 0.18 + 0.02]}>
      {/* Vase body */}
      <mesh castShadow>
        <cylinderGeometry args={[0.04, 0.055, 0.16, 16]} />
        <meshStandardMaterial color="#c8baa6" roughness={0.92} metalness={0} />
      </mesh>
      {/* Vase neck */}
      <mesh position={[0, 0.1, 0]} castShadow>
        <cylinderGeometry args={[0.022, 0.04, 0.04, 16]} />
        <meshStandardMaterial color="#c8baa6" roughness={0.92} metalness={0} />
      </mesh>
      {/* Rim */}
      <mesh position={[0, 0.12, 0]}>
        <torusGeometry args={[0.022, 0.003, 8, 16]} />
        <meshStandardMaterial color="#b8a890" roughness={0.85} />
      </mesh>

      {/* Dried branches */}
      {[
        { rot: [0.2, 0, 0.1] as [number, number, number], h: 0.3 },
        { rot: [-0.15, 1.2, -0.1] as [number, number, number], h: 0.28 },
        { rot: [0.1, 2.5, 0.2] as [number, number, number], h: 0.25 },
      ].map((branch, i) => (
        <mesh key={i} position={[0, 0.12, 0]} rotation={branch.rot} castShadow>
          <cylinderGeometry args={[0.002, 0.003, branch.h, 4]} />
          <meshStandardMaterial color="#8a7a60" roughness={0.95} />
        </mesh>
      ))}
    </group>
  );
}

function BookStack() {
  const wallFaceZ = 0.075;

  return (
    <group position={[-1.2, 0.59, wallFaceZ + 0.18 + 0.02]}>
      {[
        { w: 0.15, h: 0.022, d: 0.1, color: "#2c3e50", y: 0 },
        { w: 0.14, h: 0.018, d: 0.1, color: "#7f8c8d", y: 0.02 },
        { w: 0.13, h: 0.016, d: 0.1, color: "#8e4a3b", y: 0.037 },
      ].map((book, i) => (
        <mesh key={i} position={[0.01 * (i - 1), book.y + book.h / 2, 0]} castShadow>
          <boxGeometry args={[book.w, book.h, book.d]} />
          <meshStandardMaterial color={book.color} roughness={0.85} />
        </mesh>
      ))}
    </group>
  );
}

// ============================================
// FURNITURE: TALL PLANT
// ============================================

function TallPlant() {
  const wallFaceZ = 0.075;

  return (
    <group position={[1.45, 0, wallFaceZ + 0.16]}>
      {/* Pot */}
      <mesh position={[0, 0.13, 0]} castShadow receiveShadow>
        <cylinderGeometry args={[0.12, 0.09, 0.26, 16]} />
        <meshStandardMaterial color="#3d3d3d" roughness={0.88} metalness={0.1} />
      </mesh>
      {/* Pot rim */}
      <mesh position={[0, 0.265, 0]}>
        <torusGeometry args={[0.12, 0.008, 8, 16]} />
        <meshStandardMaterial color="#333333" roughness={0.8} metalness={0.15} />
      </mesh>
      {/* Soil */}
      <mesh position={[0, 0.25, 0]}>
        <cylinderGeometry args={[0.11, 0.11, 0.02, 16]} />
        <meshStandardMaterial color="#4a3728" roughness={1} />
      </mesh>
      {/* Trunk */}
      <mesh position={[0, 0.55, 0]} castShadow>
        <cylinderGeometry args={[0.012, 0.018, 0.6, 8]} />
        <meshStandardMaterial color="#6b5b3e" roughness={0.9} />
      </mesh>
      {/* Secondary trunk */}
      <mesh position={[0.02, 0.48, 0.01]} rotation={[0, 0, 0.15]} castShadow>
        <cylinderGeometry args={[0.006, 0.012, 0.35, 6]} />
        <meshStandardMaterial color="#6b5b3e" roughness={0.9} />
      </mesh>

      {/* Foliage clusters */}
      {[
        [0, 0.92, 0, 0.14],
        [0.08, 0.84, 0.04, 0.11],
        [-0.07, 0.86, -0.03, 0.10],
        [0.04, 0.78, -0.06, 0.09],
        [-0.03, 0.97, 0.03, 0.10],
        [0.1, 0.72, 0.02, 0.08],
        [-0.05, 0.76, 0.05, 0.08],
      ].map(([x, y, z, r], i) => (
        <mesh key={i} position={[x, y, z]} castShadow>
          <sphereGeometry args={[r, 10, 10]} />
          <meshStandardMaterial color={i % 2 === 0 ? "#3a5a2c" : "#4a6a38"} roughness={0.88} />
        </mesh>
      ))}
    </group>
  );
}

// ============================================
// FURNITURE: PENDANT LIGHT
// ============================================

function PendantLight() {
  return (
    <group position={[0.4, 0, 1.4]}>
      {/* Cord */}
      <mesh position={[0, 2.9, 0]}>
        <cylinderGeometry args={[0.002, 0.002, 0.25, 6]} />
        <meshStandardMaterial color="#1a1a1a" roughness={0.5} metalness={0.3} />
      </mesh>
      {/* Canopy (ceiling mount) */}
      <mesh position={[0, 3.0, 0]}>
        <cylinderGeometry args={[0.03, 0.03, 0.015, 16]} />
        <DarkMetalMaterial />
      </mesh>
      {/* Shade - open bottom */}
      <mesh position={[0, 2.72, 0]} castShadow>
        <cylinderGeometry args={[0.04, 0.13, 0.18, 24, 1, true]} />
        <meshStandardMaterial color="#2a2a2a" roughness={0.45} metalness={0.4} side={THREE.DoubleSide} />
      </mesh>
      {/* Shade rim */}
      <mesh position={[0, 2.63, 0]}>
        <torusGeometry args={[0.13, 0.004, 8, 24]} />
        <meshStandardMaterial color="#222222" roughness={0.3} metalness={0.6} />
      </mesh>
      {/* Warm point light (simulates bulb glow) */}
      <pointLight position={[0, 2.68, 0]} intensity={0.6} color="#ffe8cc" distance={4} decay={2} />
    </group>
  );
}

// ============================================
// FURNITURE: PICTURE FRAME
// ============================================

function PictureFrame() {
  const frameW = 0.45;
  const frameH = 0.55;
  const border = 0.025;
  const wallFaceZ = 0.076;

  return (
    <group position={[-1.4, 1.65, wallFaceZ]}>
      {/* Canvas/art (abstract warm tones) */}
      <mesh position={[0, 0, 0.001]}>
        <planeGeometry args={[frameW - border * 2, frameH - border * 2]} />
        <meshStandardMaterial color="#d4c5a0" roughness={0.95} />
      </mesh>
      {/* Abstract shape 1 */}
      <mesh position={[-0.04, 0.03, 0.002]}>
        <circleGeometry args={[0.06, 24]} />
        <meshStandardMaterial color="#b8987a" roughness={0.9} />
      </mesh>
      {/* Abstract shape 2 */}
      <mesh position={[0.06, -0.04, 0.002]}>
        <circleGeometry args={[0.04, 24]} />
        <meshStandardMaterial color="#a08060" roughness={0.9} />
      </mesh>

      {/* Frame border */}
      {[
        { pos: [0, frameH / 2 - border / 2, 0.005] as [number, number, number], size: [frameW, border, 0.018] as [number, number, number] },
        { pos: [0, -frameH / 2 + border / 2, 0.005] as [number, number, number], size: [frameW, border, 0.018] as [number, number, number] },
        { pos: [-frameW / 2 + border / 2, 0, 0.005] as [number, number, number], size: [border, frameH, 0.018] as [number, number, number] },
        { pos: [frameW / 2 - border / 2, 0, 0.005] as [number, number, number], size: [border, frameH, 0.018] as [number, number, number] },
      ].map((side, i) => (
        <mesh key={i} position={side.pos} castShadow>
          <boxGeometry args={side.size} />
          <meshStandardMaterial color="#1a1a1a" roughness={0.35} metalness={0.3} />
        </mesh>
      ))}
    </group>
  );
}

// ============================================
// FURNITURE: RUG
// ============================================

function Rug() {
  return (
    <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.004, 1.3]} receiveShadow>
      <planeGeometry args={[1.4, 0.9]} />
      <meshStandardMaterial color="#c4b496" roughness={1.0} metalness={0} />
    </mesh>
  );
}

// ============================================
// FURNITURE: SMALL SIDE TABLE (right side)
// ============================================

function SideTable() {
  const wallFaceZ = 0.075;
  const tableR = 0.18;
  const tableH = 0.5;

  return (
    <group position={[1.45, 0, wallFaceZ + tableR + 0.5]}>
      {/* Tabletop */}
      <mesh position={[0, tableH, 0]} castShadow receiveShadow>
        <cylinderGeometry args={[tableR, tableR, 0.02, 24]} />
        <meshStandardMaterial color="#6b5b45" roughness={0.5} metalness={0.05} />
      </mesh>
      {/* Single leg */}
      <mesh position={[0, tableH / 2, 0]} castShadow>
        <cylinderGeometry args={[0.015, 0.015, tableH, 8]} />
        <DarkMetalMaterial />
      </mesh>
      {/* Base */}
      <mesh position={[0, 0.01, 0]} castShadow>
        <cylinderGeometry args={[0.12, 0.12, 0.02, 24]} />
        <DarkMetalMaterial />
      </mesh>
      {/* Small decorative candle */}
      <mesh position={[0.04, tableH + 0.05, -0.02]} castShadow>
        <cylinderGeometry args={[0.02, 0.02, 0.08, 12]} />
        <meshStandardMaterial color="#f0ece4" roughness={0.95} />
      </mesh>
    </group>
  );
}

// ============================================
// DOOR + WALL COMPOSITION
// ============================================

/**
 * Side panel: a fixed glass panel with steel frame, rendered next to the door.
 */
function SidePanelMesh({
  panelWidth,
  panelHeight,
  finish,
  glassColor,
}: {
  panelWidth: number; // meters
  panelHeight: number; // meters
  finish: import("@/lib/store").Finish;
  glassColor: import("@/lib/store").GlassColor;
}) {
  const profileW = mmToMeters(40);
  const profileD = mmToMeters(40);
  const glassThick = mmToMeters(7);

  const FRAME_COLORS_LOCAL: Record<string, string> = {
    zwart: "#1a1a1a", brons: "#8B6F47", grijs: "#525252",
    goud: "#B8860B", beige: "#C8B88A", ral: "#4A6741",
  };
  const GLASS_COLORS_LOCAL: Record<string, { color: string; transmission: number; roughness: number }> = {
    helder: { color: "#eff6ff", transmission: 0.98, roughness: 0.05 },
    grijs: { color: "#3a3a3a", transmission: 0.85, roughness: 0.1 },
    brons: { color: "#8B6F47", transmission: 0.85, roughness: 0.1 },
    "mat-blank": { color: "#e8e8e8", transmission: 0.7, roughness: 0.3 },
    "mat-brons": { color: "#A0845C", transmission: 0.6, roughness: 0.35 },
    "mat-zwart": { color: "#1a1a1a", transmission: 0.5, roughness: 0.4 },
  };

  const frameColor = FRAME_COLORS_LOCAL[finish] || "#1a1a1a";
  const glassProps = GLASS_COLORS_LOCAL[glassColor] || GLASS_COLORS_LOCAL.helder;
  const innerW = panelWidth - profileW * 2;
  const innerH = panelHeight - profileW * 2;

  return (
    <group position={[0, panelHeight / 2, 0]}>
      {/* Left stile */}
      <mesh position={[-panelWidth / 2 + profileW / 2, 0, 0]} castShadow>
        <boxGeometry args={[profileW, panelHeight, profileD]} />
        <meshStandardMaterial color={frameColor} roughness={0.7} metalness={0.6} />
      </mesh>
      {/* Right stile */}
      <mesh position={[panelWidth / 2 - profileW / 2, 0, 0]} castShadow>
        <boxGeometry args={[profileW, panelHeight, profileD]} />
        <meshStandardMaterial color={frameColor} roughness={0.7} metalness={0.6} />
      </mesh>
      {/* Top rail */}
      <mesh position={[0, panelHeight / 2 - profileW / 2, 0]} castShadow>
        <boxGeometry args={[innerW, profileW, profileD]} />
        <meshStandardMaterial color={frameColor} roughness={0.7} metalness={0.6} />
      </mesh>
      {/* Bottom rail */}
      <mesh position={[0, -panelHeight / 2 + profileW / 2, 0]} castShadow>
        <boxGeometry args={[innerW, profileW, profileD]} />
        <meshStandardMaterial color={frameColor} roughness={0.7} metalness={0.6} />
      </mesh>
      {/* Glass */}
      <mesh position={[0, 0, 0]} castShadow receiveShadow>
        <boxGeometry args={[innerW - 0.01, innerH - 0.01, glassThick]} />
        <meshPhysicalMaterial
          transmission={glassProps.transmission}
          roughness={glassProps.roughness}
          thickness={0.007}
          ior={1.5}
          color={glassProps.color}
          transparent
          opacity={0.98}
        />
      </mesh>
    </group>
  );
}

function DoorInWall() {
  const { doorType, doorConfig, sidePanel, doorLeafWidth, sidePanelWidth, height, finish, glassColor } =
    useConfiguratorStore();

  const doorWidthM = mmToMeters(doorLeafWidth);
  const doorHeightM = mmToMeters(height);
  const wallThicknessM = mmToMeters(WALL_THICKNESS);
  const stelruimteM = mmToMeters(STELRUIMTE);
  const sidePanelWidthM = mmToMeters(sidePanelWidth);
  const isDouble = doorConfig === "dubbele";

  // Total door section width (all leaves)
  const doorSectionW = isDouble ? doorWidthM * 2 : doorWidthM;

  // Total hole width including side panels
  let holeWidthM = doorSectionW + stelruimteM;
  if (sidePanel === "links" || sidePanel === "rechts") holeWidthM += sidePanelWidthM;
  if (sidePanel === "beide") holeWidthM += sidePanelWidthM * 2;

  const holeHeightM = doorHeightM + stelruimteM / 2;
  const doorZOffset = doorType === "taats" ? 0 : wallThicknessM * 0.15;

  // Calculate X offset for the door(s) when side panels shift the center
  let doorCenterX = 0;
  if (sidePanel === "links") doorCenterX = sidePanelWidthM / 2;
  if (sidePanel === "rechts") doorCenterX = -sidePanelWidthM / 2;

  return (
    <>
      <WallContainer
        holeWidth={holeWidthM}
        holeHeight={holeHeightM}
        wallThickness={wallThicknessM}
      />

      <group position={[0, 0, doorZOffset]}>
        {/* Door leaf(s) */}
        {isDouble ? (
          <group position={[doorCenterX, 0, 0]}>
            <group position={[doorWidthM / 2, 0, 0]}>
              <Door3DEnhanced />
            </group>
            <group position={[-doorWidthM / 2, 0, 0]} scale={[-1, 1, 1]}>
              <Door3DEnhanced />
            </group>
          </group>
        ) : (
          <group position={[doorCenterX, 0, 0]}>
            <Door3DEnhanced />
          </group>
        )}

        {/* Side panels */}
        {(sidePanel === "links" || sidePanel === "beide") && sidePanelWidthM > 0 && (
          <group position={[doorCenterX - doorSectionW / 2 - sidePanelWidthM / 2, 0, 0]}>
            <SidePanelMesh
              panelWidth={sidePanelWidthM}
              panelHeight={doorHeightM}
              finish={finish}
              glassColor={glassColor}
            />
          </group>
        )}
        {(sidePanel === "rechts" || sidePanel === "beide") && sidePanelWidthM > 0 && (
          <group position={[doorCenterX + doorSectionW / 2 + sidePanelWidthM / 2, 0, 0]}>
            <SidePanelMesh
              panelWidth={sidePanelWidthM}
              panelHeight={doorHeightM}
              finish={finish}
              glassColor={glassColor}
            />
          </group>
        )}
      </group>
    </>
  );
}

// ============================================
// LIGHTING
// ============================================

function Lighting() {
  return (
    <>
      <ambientLight intensity={0.4} />

      {/* Main sunlight */}
      <directionalLight
        position={[3, 6, 8]}
        intensity={1.2}
        castShadow
        shadow-mapSize-width={4096}
        shadow-mapSize-height={4096}
        shadow-camera-far={50}
        shadow-camera-left={-10}
        shadow-camera-right={10}
        shadow-camera-top={10}
        shadow-camera-bottom={-10}
        shadow-bias={-0.0001}
      />

      {/* Fill light from behind wall (simulates light from back room) */}
      <directionalLight position={[-2, 4, -4]} intensity={0.25} />

      {/* Viewer-side fill to show furniture */}
      <directionalLight position={[2, 3, 6]} intensity={0.35} />

      {/* Top-down for reveal and furniture shadows */}
      <directionalLight
        position={[0, 8, 1]}
        intensity={0.2}
        castShadow
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
      />
    </>
  );
}

// ============================================
// MAIN SCENE EXPORT
// ============================================

export function Scene3D() {
  return (
    <Canvas
      shadows
      gl={{
        antialias: true,
        toneMapping: THREE.ACESFilmicToneMapping,
        toneMappingExposure: 1.15,
        outputColorSpace: THREE.SRGBColorSpace,
        preserveDrawingBuffer: true,
      }}
      style={{ background: "#f0ede8" }}
    >
      <PerspectiveCamera makeDefault position={[0, 1.4, 4.2]} fov={45} />

      <OrbitControls
        enablePan={false}
        enableZoom={true}
        minDistance={2.5}
        maxDistance={6}
        minPolarAngle={Math.PI / 3}
        maxPolarAngle={Math.PI / 2.1}
        maxAzimuthAngle={Math.PI / 3}
        minAzimuthAngle={-Math.PI / 3}
        target={[0, 1.1, 0]}
        enableDamping
        dampingFactor={0.05}
      />

      <Lighting />

      <Environment preset="apartment" blur={0.6} environmentIntensity={1.0} />

      <ContactShadows
        position={[0, 0.005, 0.8]}
        opacity={0.45}
        scale={20}
        blur={2.5}
        far={4}
        resolution={2048}
      />

      {/* Room structure */}
      <RoomShell />

      {/* Door in wall */}
      <DoorInWall />

      {/* Interior furniture */}
      <Sideboard />
      <VaseWithBranches />
      <BookStack />
      <TallPlant />
      <PendantLight />
      <PictureFrame />
      <Rug />
      <SideTable />
    </Canvas>
  );
}