@visns-studio/visns-components 5.15.4 → 5.15.5

package/src/components/CameraPlacement.jsx

@@ -0,0 +1,1638 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import mapboxgl from 'mapbox-gl';
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import html2canvas from 'html2canvas';
+import Swal from 'sweetalert2';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+import styles from './styles/CameraPlacement.module.scss';
+import modalStyles from './styles/CameraPlacementModal.module.scss';
+import './styles/CameraMarkers.scss';
+import {
+    VERKADA_CAMERAS,
+    CAMERA_CATEGORIES,
+    getCameraById,
+} from './data/verkadaCameras';
+import CameraIcon from './utils/CameraIcon';
+
+const CameraPlacement = () => {
+    const [cameras, setCameras] = useState([]);
+    const [selectedCamera, setSelectedCamera] = useState(null);
+    const [showModal, setShowModal] = useState(false);
+    const [map, setMap] = useState(null);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [mode, setMode] = useState('image'); // 'image' or 'map' - default to image
+    const [uploadedImage, setUploadedImage] = useState(null);
+    const [addCameraMode, setAddCameraMode] = useState(false);
+    const mapContainer = useRef(null);
+    const mapRef = useRef(null);
+    const geocoderRef = useRef(null);
+    const imageContainer = useRef(null);
+    const fileInputRef = useRef(null);
+
+    // Mapbox configuration
+    const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg';
+
+    // Handle image upload
+    const handleImageUpload = useCallback((event) => {
+        const file = event.target.files[0];
+        if (file && file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                setUploadedImage(e.target.result);
+                setMode('image');
+                // Reset cameras when switching to image mode
+                setCameras([]);
+                // Cleanup map if it exists
+                if (map) {
+                    try {
+                        map.remove();
+                    } catch (error) {
+                        console.warn('Error removing map:', error);
+                    }
+                    setMap(null);
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    }, [map]);
+
+    // Handle image click for camera placement (only when in add camera mode)
+    const handleImageClick = useCallback((event) => {
+        if (mode !== 'image' || !imageContainer.current || !addCameraMode) return;
+
+        const rect = imageContainer.current.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        const newCamera = {
+            id: Date.now(),
+            x: x, // Image coordinates instead of lat/lng
+            y: y,
+            name: `Camera ${cameras.length + 1}`,
+            verkadaModel: null,
+            customName: '',
+            direction: 0,
+        };
+
+        setCameras((prev) => [...prev, newCamera]);
+        setSelectedCamera(newCamera);
+        setShowModal(true);
+        setAddCameraMode(false); // Exit add camera mode after placing
+    }, [mode, cameras.length, addCameraMode]);
+
+    // Initialize Mapbox GL map
+    useEffect(() => {
+        if (!mapContainer.current || mode !== 'map') return;
+
+        // Set Mapbox access token
+        mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
+
+        const mapInstance = new mapboxgl.Map({
+            container: mapContainer.current,
+            style: 'mapbox://styles/mapbox/satellite-streets-v12', // Start with satellite imagery
+            center: [115.8605, -31.9505], // Perth, Australia default
+            zoom: 16,
+            maxZoom: 22, // Allow higher zoom for better detail
+            minZoom: 10,
+            bearing: 0,
+            pitch: 0,
+            preserveDrawingBuffer: true, // Required for canvas export
+        });
+
+        // Add Mapbox geocoder
+        const geocoder = new MapboxGeocoder({
+            accessToken: MAPBOX_ACCESS_TOKEN,
+            mapboxgl: mapboxgl,
+            placeholder: 'Search for addresses...',
+            proximity: {
+                longitude: 144.9631,
+                latitude: -37.8136,
+            },
+        });
+
+        mapInstance.on('load', () => {
+            setMap(mapInstance);
+            mapRef.current = mapInstance;
+
+            // Add zoom controls to the map using Mapbox GL
+            const zoomControl = new mapboxgl.NavigationControl({
+                showCompass: false, // Hide compass, only show zoom buttons
+                showZoom: true,
+            });
+            mapInstance.addControl(zoomControl, 'top-right');
+
+            // Add fullscreen control using Mapbox GL
+            const fullscreenControl = new mapboxgl.FullscreenControl();
+            mapInstance.addControl(fullscreenControl, 'top-right');
+
+            // Add Mapbox geocoder to the map
+            if (geocoderRef.current) {
+                geocoderRef.current.appendChild(geocoder.onAdd(mapInstance));
+            }
+
+            // Handle geocoder result for Mapbox
+            geocoder.on('result', (e) => {
+                // Mapbox geocoder result format
+                const coordinates = e.result.center;
+                if (coordinates) {
+                    mapInstance.flyTo({
+                        center: coordinates,
+                        zoom: Math.min(Math.max(mapInstance.getZoom(), 18), 20), // Allow zoom up to 20 for better detail
+                    });
+                }
+            });
+        });
+
+        return () => {
+            mapInstance.remove();
+        };
+    }, [mode]);
+
+    // Handle map click to add camera
+    const handleMapClick = useCallback(
+        (e) => {
+            if (!map || mode !== 'map') return;
+
+            const { lng, lat } = e.lngLat;
+            const newCamera = {
+                id: Date.now(),
+                lng,
+                lat,
+                name: `Camera ${cameras.length + 1}`,
+                verkadaModel: null, // Will be selected in modal
+                customName: '',
+                direction: 0,
+            };
+
+            setCameras((prev) => [...prev, newCamera]);
+            setSelectedCamera(newCamera);
+            setShowModal(true);
+        },
+        [map, cameras.length, mode]
+    );
+
+    // Add click listener to map
+    useEffect(() => {
+        if (!map) return;
+
+        map.on('click', handleMapClick);
+        return () => {
+            map.off('click', handleMapClick);
+        };
+    }, [map, handleMapClick]);
+
+    const updateCamera = useCallback((cameraId, updates) => {
+        setCameras((prev) =>
+            prev.map((cam) =>
+                cam.id === cameraId ? { ...cam, ...updates } : cam
+            )
+        );
+    }, []);
+
+    const removeCamera = useCallback(
+        (cameraId) => {
+            setCameras((prev) => prev.filter((cam) => cam.id !== cameraId));
+
+            // Remove FOV layer and source from map
+            if (map) {
+                const layerId = `fov-layer-${cameraId}`;
+                const sourceId = `fov-${cameraId}`;
+                if (map.getLayer(layerId)) {
+                    map.removeLayer(layerId);
+                }
+                if (map.getSource(sourceId)) {
+                    map.removeSource(sourceId);
+                }
+            }
+        },
+        [map]
+    );
+
+    // Save placement as JSON file
+    const saveAsFile = useCallback(() => {
+        if (!cameras.length && !uploadedImage) {
+            Swal.fire({
+                icon: 'warning',
+                title: 'No Data to Save',
+                text: 'Please add cameras or upload an image first.',
+                confirmButtonColor: '#8b5cf6'
+            });
+            return;
+        }
+
+        const saveData = {
+            version: '1.0',
+            timestamp: new Date().toISOString(),
+            image: uploadedImage ? {
+                src: uploadedImage,
+                name: 'uploaded-image'
+            } : null,
+            mode: mode,
+            cameras: cameras.map(camera => ({
+                id: camera.id,
+                name: camera.name,
+                customName: camera.customName,
+                x: camera.x,
+                y: camera.y,
+                direction: camera.direction,
+                verkadaModel: camera.verkadaModel,
+                timestamp: camera.timestamp
+            }))
+        };
+
+        const dataStr = JSON.stringify(saveData, null, 2);
+        const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+        
+        const exportFileDefaultName = `camera-placement-${new Date().toISOString().split('T')[0]}.json`;
+        
+        const linkElement = document.createElement('a');
+        linkElement.setAttribute('href', dataUri);
+        linkElement.setAttribute('download', exportFileDefaultName);
+        linkElement.click();
+
+        // Show success message
+        Swal.fire({
+            icon: 'success',
+            title: 'File Saved!',
+            text: `Camera placement saved as ${exportFileDefaultName}`,
+            timer: 3000,
+            showConfirmButton: false,
+            toast: true,
+            position: 'top-end'
+        });
+    }, [cameras, uploadedImage, mode]);
+
+    // Load placement from JSON file
+    const loadFromFile = useCallback(() => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        
+        input.onchange = (event) => {
+            const file = event.target.files[0];
+            if (!file) return;
+            
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const saveData = JSON.parse(e.target.result);
+                    
+                    // Validate data structure
+                    if (!saveData.version || !Array.isArray(saveData.cameras)) {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Invalid File',
+                            text: 'Please select a valid camera placement file.',
+                            confirmButtonColor: '#f59e0b'
+                        });
+                        return;
+                    }
+                    
+                    // Load image if present
+                    if (saveData.image && saveData.image.src) {
+                        setUploadedImage(saveData.image.src);
+                    }
+                    
+                    // Set mode
+                    if (saveData.mode) {
+                        setMode(saveData.mode);
+                    }
+                    
+                    // Load cameras
+                    setCameras(saveData.cameras || []);
+                    
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'File Loaded!',
+                        text: `Successfully loaded ${saveData.cameras?.length || 0} cameras from ${file.name}`,
+                        confirmButtonColor: '#f59e0b'
+                    });
+                    
+                } catch (error) {
+                    console.error('Error loading file:', error);
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'File Error',
+                        text: 'Error reading file. Please ensure it\'s a valid JSON file.',
+                        confirmButtonColor: '#f59e0b'
+                    });
+                }
+            };
+            reader.readAsText(file);
+        };
+        
+        input.click();
+    }, []);
+
+    const exportMap = useCallback(async () => {
+        try {
+            if (!cameras.length) {
+                Swal.fire({
+                    icon: 'warning',
+                    title: 'No Cameras',
+                    text: 'Please add cameras first before exporting.',
+                    confirmButtonColor: '#10b981'
+                });
+                return;
+            }
+
+            const imageContainer = document.querySelector(`.${styles.imageContainer}`);
+            if (!imageContainer) {
+                Swal.fire({
+                    icon: 'warning',
+                    title: 'No Image',
+                    text: 'Please upload an image first before exporting.',
+                    confirmButtonColor: '#10b981'
+                });
+                return;
+            }
+
+            // First, take a screenshot of just the image container to get its natural size
+            const imageCanvas = await html2canvas(imageContainer, {
+                useCORS: true,
+                allowTaint: true,
+                scale: 1.2,
+                backgroundColor: '#f8fafc',
+                logging: false
+            });
+
+            // Calculate dimensions based on camera count (more cameras = more height needed)
+            const cameraListWidth = 450; // Wider to show more info
+            const headerHeight = 80;
+            const cameraHeight = 85; // Height per camera entry
+            const totalCameraListHeight = headerHeight + (cameras.length * cameraHeight) + 40; // padding
+            
+            // Use the larger of image height or camera list height
+            const finalHeight = Math.max(imageCanvas.height, totalCameraListHeight);
+            const finalWidth = imageCanvas.width + cameraListWidth + 20; // small gap
+
+            // Create the composite container with calculated dimensions
+            const exportContainer = document.createElement('div');
+            exportContainer.style.position = 'absolute';
+            exportContainer.style.top = '-10000px';
+            exportContainer.style.left = '-10000px';
+            exportContainer.style.width = finalWidth + 'px';
+            exportContainer.style.height = finalHeight + 'px';
+            exportContainer.style.backgroundColor = '#ffffff';
+            exportContainer.style.display = 'flex';
+            exportContainer.style.gap = '10px';
+            exportContainer.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif';
+            document.body.appendChild(exportContainer);
+
+            // Left side: Image
+            const imageDiv = document.createElement('div');
+            imageDiv.style.width = imageCanvas.width + 'px';
+            imageDiv.style.height = finalHeight + 'px';
+            imageDiv.style.background = '#f8fafc';
+            imageDiv.style.display = 'flex';
+            imageDiv.style.alignItems = 'center';
+            imageDiv.style.justifyContent = 'center';
+            imageDiv.style.borderRight = '2px solid #e5e7eb';
+            imageDiv.style.flexShrink = '0';
+
+            // Scale the canvas to fit if needed
+            const scaledCanvas = document.createElement('canvas');
+            const ctx = scaledCanvas.getContext('2d');
+            scaledCanvas.width = imageCanvas.width;
+            scaledCanvas.height = imageCanvas.height;
+            ctx.drawImage(imageCanvas, 0, 0);
+            
+            imageDiv.appendChild(scaledCanvas);
+            exportContainer.appendChild(imageDiv);
+
+            // Right side: Camera list
+            const cameraListDiv = document.createElement('div');
+            cameraListDiv.style.width = cameraListWidth + 'px';
+            cameraListDiv.style.height = finalHeight + 'px';
+            cameraListDiv.style.padding = '20px';
+            cameraListDiv.style.background = '#ffffff';
+            cameraListDiv.style.overflow = 'visible';
+            cameraListDiv.style.boxSizing = 'border-box';
+
+            // Generate optimized camera list HTML
+            const cameraListHTML = `
+                <div style="margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; padding-bottom: 12px;">
+                    <h2 style="margin: 0 0 6px 0; font-size: 18px; font-weight: 700; color: #111827;">Camera Reference</h2>
+                    <p style="margin: 0; font-size: 12px; color: #6b7280;">Generated ${new Date().toLocaleDateString()}</p>
+                    <p style="margin: 2px 0 0 0; font-size: 12px; color: #6b7280;">${cameras.length} camera${cameras.length !== 1 ? 's' : ''} placed</p>
+                </div>
+                
+                ${cameras.map((camera) => {
+                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
+                    const cameraNumber = (camera.customName || camera.name).replace(/\D/g, '') || camera.id;
+                    
+                    return `
+                        <div style="margin-bottom: 12px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; page-break-inside: avoid;">
+                            <div style="display: flex; align-items: center; margin-bottom: 6px;">
+                                <div style="width: 22px; height: 22px; background: ${verkadaCamera?.environment === 'indoor' ? '#10b981' : '#f59e0b'}; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; margin-right: 8px; flex-shrink: 0;">${cameraNumber}</div>
+                                <div style="flex: 1; min-width: 0;">
+                                    <div style="font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${camera.customName || camera.name}</div>
+                                    <div style="font-size: 10px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${verkadaCamera ? verkadaCamera.name : 'No Model Selected'}</div>
+                                </div>
+                            </div>
+                            
+                            ${verkadaCamera ? `
+                                <div style="font-size: 10px; line-height: 1.5;">
+                                    <div style="margin-bottom: 4px;"><strong>Resolution:</strong> ${verkadaCamera.resolution} | <strong>FOV:</strong> ${verkadaCamera.fov}°</div>
+                                    <div style="margin-bottom: 4px;"><strong>Environment:</strong> ${verkadaCamera.environment} | <strong>Range:</strong> ${verkadaCamera.irRange}m IR</div>
+                                    ${camera.direction ? `<div style="margin-bottom: 4px;"><strong>Direction:</strong> ${camera.direction}°</div>` : ''}
+                                    <div style="color: #6b7280; margin-top: 6px; font-size: 9px; line-height: 1.4;">${verkadaCamera.features?.slice(0, 3).join(', ') || 'No features'}</div>
+                                </div>
+                            ` : `
+                                <div style="font-size: 10px; color: #dc2626; font-style: italic; margin-top: 4px;">Camera model not selected</div>
+                            `}
+                        </div>
+                    `;
+                }).join('')}
+            `;
+
+            cameraListDiv.innerHTML = cameraListHTML;
+            exportContainer.appendChild(cameraListDiv);
+
+            // Wait for rendering
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            // Capture the composite with exact dimensions
+            const finalCanvas = await html2canvas(exportContainer, {
+                useCORS: true,
+                allowTaint: true,
+                scale: 1,
+                backgroundColor: '#ffffff',
+                logging: false,
+                width: finalWidth,
+                height: finalHeight
+            });
+
+            // Clean up
+            document.body.removeChild(exportContainer);
+
+            // Download
+            const link = document.createElement('a');
+            link.download = `camera-layout-${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}.png`;
+            link.href = finalCanvas.toDataURL('image/png', 0.9);
+            link.click();
+
+            console.log('Export completed successfully');
+
+            // Show success message
+            Swal.fire({
+                icon: 'success',
+                title: 'Export Complete!',
+                text: `Camera layout exported as ${link.download}`,
+                timer: 3000,
+                showConfirmButton: false,
+                toast: true,
+                position: 'top-end'
+            });
+
+        } catch (error) {
+            console.error('Error exporting:', error);
+            Swal.fire({
+                icon: 'error',
+                title: 'Export Failed',
+                text: 'Export failed. Please try again or take a manual screenshot.',
+                confirmButtonColor: '#10b981'
+            });
+        }
+    }, [cameras]);
+
+    // Update cameras with markers on map
+    useEffect(() => {
+        if (!map || mode !== 'map') return;
+
+        // Clear existing markers
+        const existingMarkers = document.querySelectorAll('.camera-map-marker');
+        existingMarkers.forEach((marker) => marker.remove());
+
+        // Clear existing FOV layers
+        let existingSources = [];
+        try {
+            const style = map.getStyle();
+            if (style && style.sources) {
+                existingSources = Object.keys(style.sources).filter(
+                    (id) => id.startsWith('fov-')
+                );
+            }
+        } catch (error) {
+            console.warn('Could not access map style, skipping FOV layer cleanup:', error);
+        }
+        existingSources.forEach((sourceId) => {
+            try {
+                const layerId = `fov-layer-${sourceId.replace('fov-', '')}`;
+                if (map.getLayer(layerId)) {
+                    map.removeLayer(layerId);
+                }
+                if (map.getSource(sourceId)) {
+                    map.removeSource(sourceId);
+                }
+            } catch (error) {
+                console.warn(`Could not remove layer/source ${sourceId}:`, error);
+            }
+        });
+
+        // Add camera markers and FOV
+        cameras.forEach((camera, index) => {
+            const verkadaCamera = camera.verkadaModel
+                ? getCameraById(camera.verkadaModel)
+                : null;
+
+            // Create main marker container
+            const markerContainer = document.createElement('div');
+            markerContainer.className = 'camera-marker-container';
+
+            // Create marker element
+            const markerEl = document.createElement('div');
+            const cameraType = verkadaCamera ? verkadaCamera.type : 'unknown';
+            const environment = verkadaCamera
+                ? verkadaCamera.environment
+                : 'outdoor';
+
+            markerEl.className = `camera-map-marker ${cameraType} ${environment}`;
+
+            // Extract camera number from name or use index + 1
+            const cameraNumber =
+                (camera.customName || camera.name).replace(/\D/g, '') ||
+                index + 1;
+
+            markerEl.innerHTML = `
+                <div class="camera-marker-content">
+                    <div class="camera-number">${cameraNumber}</div>
+                </div>
+            `;
+
+            // Create rotation handle
+            const rotationHandle = document.createElement('div');
+            rotationHandle.className = 'rotation-handle';
+            rotationHandle.innerHTML = '<div class="rotation-icon"></div>';
+
+            // Add rotation functionality
+            let isRotating = false;
+            let startAngle = 0;
+            let currentRotation = camera.direction || 0;
+
+            const handleRotationStart = (e) => {
+                e.stopPropagation();
+                isRotating = true;
+                const rect = markerContainer.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                startAngle =
+                    (Math.atan2(e.clientY - centerY, e.clientX - centerX) *
+                        180) /
+                    Math.PI;
+                markerContainer.classList.add('rotating');
+                document.addEventListener('mousemove', handleRotationMove);
+                document.addEventListener('mouseup', handleRotationEnd);
+            };
+
+            const handleRotationMove = (e) => {
+                if (!isRotating) return;
+                const rect = markerContainer.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                const currentAngle =
+                    (Math.atan2(e.clientY - centerY, e.clientX - centerX) *
+                        180) /
+                    Math.PI;
+                const deltaAngle = currentAngle - startAngle;
+                const newRotation = (currentRotation + deltaAngle + 360) % 360;
+
+                // Update visual rotation
+                rotationHandle.style.transform = `rotate(${newRotation}deg)`;
+
+                // Update camera direction in real-time
+                updateCamera(camera.id, { direction: Math.round(newRotation) });
+            };
+
+            const handleRotationEnd = () => {
+                isRotating = false;
+                markerContainer.classList.remove('rotating');
+                document.removeEventListener('mousemove', handleRotationMove);
+                document.removeEventListener('mouseup', handleRotationEnd);
+
+                // Get final rotation value
+                const transform = rotationHandle.style.transform;
+                const match = transform.match(/rotate\(([^)]+)deg\)/);
+                if (match) {
+                    currentRotation = parseFloat(match[1]);
+                    updateCamera(camera.id, {
+                        direction: Math.round(currentRotation),
+                    });
+                }
+            };
+
+            // Add event listeners
+            rotationHandle.addEventListener('mousedown', handleRotationStart);
+
+            // Set initial rotation
+            rotationHandle.style.transform = `rotate(${currentRotation}deg)`;
+
+            // Click handler for main marker (not rotation handle)
+            markerEl.onclick = () => {
+                if (!isRotating) {
+                    setSelectedCamera(camera);
+                    setShowModal(true);
+                }
+            };
+
+            // Assemble marker structure
+            markerContainer.appendChild(markerEl);
+            markerContainer.appendChild(rotationHandle);
+
+            // Add marker to map with drag functionality using Mapbox GL
+            const marker = new mapboxgl.Marker({
+                element: markerContainer,
+                draggable: true,
+                anchor: 'center', // Ensure marker is centered on coordinates
+            })
+                .setLngLat([camera.lng, camera.lat])
+                .addTo(map);
+
+            // Handle drag start
+            marker.on('dragstart', () => {
+                markerContainer.classList.add('dragging');
+                // Hide rotation handle during drag
+                rotationHandle.style.opacity = '0.2';
+            });
+
+            // Handle drag (real-time coordinate updates)
+            marker.on('drag', () => {
+                const { lng, lat } = marker.getLngLat();
+                // Update coordinates in real-time (optional - can be removed if performance is an issue)
+                updateCamera(camera.id, {
+                    lng: parseFloat(lng.toFixed(6)),
+                    lat: parseFloat(lat.toFixed(6)),
+                });
+            });
+
+            // Handle drag end to finalize camera position
+            marker.on('dragend', () => {
+                markerContainer.classList.remove('dragging');
+                rotationHandle.style.opacity = '0.9';
+
+                const { lng, lat } = marker.getLngLat();
+                updateCamera(camera.id, {
+                    lng: parseFloat(lng.toFixed(6)),
+                    lat: parseFloat(lat.toFixed(6)),
+                });
+            });
+
+            // Prevent rotation handle from triggering drag
+            rotationHandle.addEventListener('mousedown', (e) => {
+                e.stopPropagation();
+                marker.setDraggable(false);
+            });
+
+            // Re-enable dragging after rotation ends
+            const enableDragAfterRotation = () => {
+                setTimeout(() => {
+                    marker.setDraggable(true);
+                }, 100);
+            };
+
+            document.addEventListener('mouseup', enableDragAfterRotation);
+
+            // Add FOV visualization if camera model is selected
+            if (verkadaCamera) {
+                const fov = verkadaCamera.ptz ? 90 : verkadaCamera.fov; // Use 90 degrees for PTZ as default view
+                const fovRad = (fov * Math.PI) / 180;
+                const distance = verkadaCamera.ptz ? 0.001 : 0.0005; // Larger range for PTZ
+                const directionRad = (camera.direction * Math.PI) / 180;
+
+                // Calculate FOV triangle points
+                const point1Lng =
+                    camera.lng + distance * Math.cos(directionRad - fovRad / 2);
+                const point1Lat =
+                    camera.lat + distance * Math.sin(directionRad - fovRad / 2);
+                const point2Lng =
+                    camera.lng + distance * Math.cos(directionRad + fovRad / 2);
+                const point2Lat =
+                    camera.lat + distance * Math.sin(directionRad + fovRad / 2);
+
+                const fovPolygon = {
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Polygon',
+                        coordinates: [
+                            [
+                                [camera.lng, camera.lat],
+                                [point1Lng, point1Lat],
+                                [point2Lng, point2Lat],
+                                [camera.lng, camera.lat],
+                            ],
+                        ],
+                    },
+                };
+
+                // Add FOV polygon to map
+                const sourceId = `fov-${camera.id}`;
+                const layerId = `fov-layer-${camera.id}`;
+
+                map.addSource(sourceId, {
+                    type: 'geojson',
+                    data: fovPolygon,
+                });
+
+                // Color based on camera type and environment
+                const fovColor =
+                    verkadaCamera.environment === 'indoor'
+                        ? '#10b981'
+                        : '#f59e0b';
+
+                map.addLayer({
+                    id: layerId,
+                    type: 'fill',
+                    source: sourceId,
+                    paint: {
+                        'fill-color': fovColor,
+                        'fill-opacity': 0.25,
+                    },
+                });
+            }
+        });
+    }, [map, cameras, mode]);
+
+
+    return (
+        <div className={styles.cameraPlacement}>
+            <div className={styles.header}>
+                <h1 className={styles.title}>Camera Placement Tool</h1>
+                <div className={styles.controls}>
+                    <div className={styles.leftControls}>
+                        <button
+                            onClick={() => fileInputRef.current?.click()}
+                            className={styles.uploadBtn}
+                        >
+                            Upload Image
+                        </button>
+                        {uploadedImage && (
+                            <button
+                                onClick={() => setAddCameraMode(!addCameraMode)}
+                                className={`${styles.addCameraBtn} ${addCameraMode ? styles.activeControl : ''}`}
+                            >
+                                {addCameraMode ? 'Cancel Add' : 'Add Camera'}
+                            </button>
+                        )}
+                    </div>
+                    <div className={styles.rightControls}>
+                        <button
+                            onClick={saveAsFile}
+                            className={styles.saveFileBtn}
+                            disabled={!cameras.length && !uploadedImage}
+                            title="Save camera placement as JSON file"
+                        >
+                            Save File
+                        </button>
+                        <button
+                            onClick={loadFromFile}
+                            className={styles.loadFileBtn}
+                            title="Load camera placement from JSON file"
+                        >
+                            Load File
+                        </button>
+                        <button
+                            onClick={() =>
+                                setSidebarCollapsed(!sidebarCollapsed)
+                            }
+                        >
+                            {sidebarCollapsed ? 'Show' : 'Hide'} Cameras
+                        </button>
+                        <button
+                            className={styles.exportBtn}
+                            onClick={exportMap}
+                            disabled={mode === 'image' && !uploadedImage}
+                        >
+                            Export {mode === 'map' ? 'Map' : 'Image'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.mainContent}>
+                <div 
+                    className={`${styles.imageContainer} ${addCameraMode ? styles.addMode : ''} ${sidebarCollapsed ? styles.sidebarCollapsed : ''}`} 
+                    ref={imageContainer} 
+                    onClick={handleImageClick}
+                >
+                        {uploadedImage ? (
+                            <div className={styles.imageWrapper}>
+                                <img 
+                                    src={uploadedImage} 
+                                    alt="Floor plan or site layout" 
+                                    className={styles.uploadedImage}
+                                />
+                                {/* Render FOV triangles first (behind markers) */}
+                                {cameras.map((camera) => {
+                                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
+                                    if (!verkadaCamera) return null;
+                                    
+                                    let fov = verkadaCamera.ptz ? 90 : verkadaCamera.fov;
+                                    
+                                    // Handle special FOV cases
+                                    if (fov >= 360) fov = 120; // PTZ cameras showing max practical FOV
+                                    else if (fov >= 270) fov = 150; // Multi-sensor cameras
+                                    else if (fov >= 180) fov = 130; // Fisheye cameras
+                                    
+                                    const fovRad = (fov * Math.PI) / 180;
+                                    
+                                    // Calculate distance based on FOV - wider angles get shorter distances
+                                    // Base distance of 100px for 60° FOV, scaled inversely with bounds
+                                    const baseFov = 60; // Reference FOV angle
+                                    const baseDistance = verkadaCamera.ptz ? 120 : 100;
+                                    let distance = baseDistance * (baseFov / fov);
+                                    
+                                    // Apply bounds: min 30px, max 200px
+                                    distance = Math.max(30, Math.min(200, distance));
+                                    const directionRad = (camera.direction * Math.PI) / 180;
+
+                                    // Calculate FOV triangle points in pixels
+                                    const point1X = camera.x + distance * Math.cos(directionRad - fovRad / 2);
+                                    const point1Y = camera.y + distance * Math.sin(directionRad - fovRad / 2);
+                                    const point2X = camera.x + distance * Math.cos(directionRad + fovRad / 2);
+                                    const point2Y = camera.y + distance * Math.sin(directionRad + fovRad / 2);
+
+                                    const fovColor = verkadaCamera.environment === 'indoor' ? '#10b981' : '#f59e0b';
+                                    
+                                    // Create SVG path for the triangle
+                                    const pathData = `M ${camera.x} ${camera.y} L ${point1X} ${point1Y} L ${point2X} ${point2Y} Z`;
+
+                                    return (
+                                        <svg
+                                            key={`fov-${camera.id}`}
+                                            className={styles.fovTriangle}
+                                            style={{
+                                                position: 'absolute',
+                                                top: 0,
+                                                left: 0,
+                                                width: '100%',
+                                                height: '100%',
+                                                pointerEvents: 'none',
+                                                zIndex: 1,
+                                            }}
+                                        >
+                                            <path
+                                                d={pathData}
+                                                fill={fovColor}
+                                                fillOpacity="0.25"
+                                                stroke={fovColor}
+                                                strokeOpacity="0.5"
+                                                strokeWidth="2"
+                                            />
+                                        </svg>
+                                    );
+                                })}
+                                
+                                {/* Render camera markers on image */}
+                                {cameras.map((camera) => {
+                                    const verkadaCamera = camera.verkadaModel ? getCameraById(camera.verkadaModel) : null;
+                                    const environment = verkadaCamera ? verkadaCamera.environment : 'outdoor';
+                                    const cameraNumber = (camera.customName || camera.name).replace(/\D/g, '') || camera.id;
+
+                                    return (
+                                        <div
+                                            key={camera.id}
+                                            className={`camera-marker-container ${styles.imageMarker}`}
+                                            style={{
+                                                position: 'absolute',
+                                                left: camera.x - 20, // Adjusted for smaller circular marker
+                                                top: camera.y - 20,  // Adjusted for smaller circular marker
+                                                transform: 'none',
+                                                zIndex: 2,
+                                            }}
+                                            onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                let isDragging = false;
+                                                let startTime = Date.now();
+                                                const startX = e.clientX;
+                                                const startY = e.clientY;
+                                                const containerRect = imageContainer.current.getBoundingClientRect();
+                                                
+                                                const handleMouseMove = (moveEvent) => {
+                                                    const deltaX = Math.abs(moveEvent.clientX - startX);
+                                                    const deltaY = Math.abs(moveEvent.clientY - startY);
+                                                    
+                                                    // Start dragging if moved more than 5px
+                                                    if (!isDragging && (deltaX > 5 || deltaY > 5)) {
+                                                        isDragging = true;
+                                                    }
+                                                    
+                                                    if (isDragging) {
+                                                        const newX = moveEvent.clientX - containerRect.left;
+                                                        const newY = moveEvent.clientY - containerRect.top;
+                                                        
+                                                        // Update camera position
+                                                        updateCamera(camera.id, { x: newX, y: newY });
+                                                    }
+                                                };
+                                                
+                                                const handleMouseUp = () => {
+                                                    const clickDuration = Date.now() - startTime;
+                                                    
+                                                    // If it was a quick click without dragging, show modal
+                                                    if (!isDragging && clickDuration < 200) {
+                                                        setSelectedCamera(camera);
+                                                        setShowModal(true);
+                                                    }
+                                                    
+                                                    document.removeEventListener('mousemove', handleMouseMove);
+                                                    document.removeEventListener('mouseup', handleMouseUp);
+                                                };
+                                                
+                                                document.addEventListener('mousemove', handleMouseMove);
+                                                document.addEventListener('mouseup', handleMouseUp);
+                                            }}
+                                        >
+                                            <div className={`${styles.circularMarker} ${environment} ${verkadaCamera?.ptz ? styles.ptzMarker : ''}`}>
+                                                <div className={styles.markerNumber}>{cameraNumber}</div>
+                                                <div 
+                                                    className={styles.rotationHandle}
+                                                    style={{
+                                                        transform: `rotate(${camera.direction || 0}deg)`,
+                                                    }}
+                                                    onMouseDown={(e) => {
+                                                        e.stopPropagation();
+                                                        let isRotating = false;
+                                                        let currentRotation = camera.direction || 0;
+                                                        
+                                                        const markerRect = e.currentTarget.parentElement.getBoundingClientRect();
+                                                        const centerX = markerRect.left + markerRect.width / 2;
+                                                        const centerY = markerRect.top + markerRect.height / 2;
+                                                        
+                                                        const handleRotationMove = (moveEvent) => {
+                                                            if (!isRotating) {
+                                                                isRotating = true;
+                                                            }
+                                                            
+                                                            const angle = Math.atan2(
+                                                                moveEvent.clientY - centerY,
+                                                                moveEvent.clientX - centerX
+                                                            );
+                                                            
+                                                            const degrees = ((angle * 180) / Math.PI + 90 + 360) % 360;
+                                                            currentRotation = Math.round(degrees);
+                                                            
+                                                            // Update rotation handle visual
+                                                            e.currentTarget.style.transform = `rotate(${currentRotation}deg)`;
+                                                            
+                                                            // Update camera direction
+                                                            updateCamera(camera.id, { direction: currentRotation });
+                                                        };
+                                                        
+                                                        const handleRotationEnd = () => {
+                                                            document.removeEventListener('mousemove', handleRotationMove);
+                                                            document.removeEventListener('mouseup', handleRotationEnd);
+                                                        };
+                                                        
+                                                        document.addEventListener('mousemove', handleRotationMove);
+                                                        document.addEventListener('mouseup', handleRotationEnd);
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ) : (
+                            <div className={styles.uploadPlaceholder}>
+                                <div className={styles.uploadIcon}>📁</div>
+                                <h3>Upload an Image</h3>
+                                <p>Click "Upload Image" to add a floor plan, site layout, or any image where you want to place cameras.</p>
+                                <button 
+                                    onClick={() => fileInputRef.current?.click()}
+                                    className={styles.uploadBtn}
+                                >
+                                    Choose Image File
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                
+                {/* Hidden file input */}
+                <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleImageUpload}
+                    accept="image/*"
+                    style={{ display: 'none' }}
+                />
+
+                <div
+                    className={`${styles.sidebar} ${
+                        sidebarCollapsed ? styles.collapsed : ''
+                    }`}
+                >
+                    <div className={styles.sidebarHeader}>
+                        <h3 className={styles.sidebarTitle}>Camera List</h3>
+                        <p className={styles.cameraCount}>
+                            {cameras.length} camera
+                            {cameras.length !== 1 ? 's' : ''} placed
+                        </p>
+                    </div>
+
+                    <div className={styles.camerasList}>
+                        {cameras.length === 0 ? (
+                            <div
+                                style={{
+                                    textAlign: 'center',
+                                    color: '#6c757d',
+                                    padding: '40px 20px',
+                                    fontStyle: 'italic',
+                                }}
+                            >
+                                <div>
+                                    Click "Add Camera" to place your first camera
+                                </div>
+                                <div
+                                    style={{
+                                        fontSize: '12px',
+                                        marginTop: '8px',
+                                    }}
+                                >
+                                    Once placed, you can drag cameras to reposition them and use the rotation handle to adjust direction
+                                </div>
+                            </div>
+                        ) : (
+                            cameras.map((camera) => {
+                                const verkadaCamera = camera.verkadaModel
+                                    ? getCameraById(camera.verkadaModel)
+                                    : null;
+
+                                return (
+                                    <div
+                                        key={camera.id}
+                                        className={styles.cameraItem}
+                                    >
+                                        <div className={styles.cameraHeader}>
+                                            <h4 className={styles.cameraName}>
+                                                {verkadaCamera && (
+                                                    <CameraIcon
+                                                        icon={
+                                                            verkadaCamera.icon
+                                                        }
+                                                        size={16}
+                                                    />
+                                                )}{' '}
+                                                {camera.customName ||
+                                                    camera.name}
+                                            </h4>
+                                            {verkadaCamera && (
+                                                <span
+                                                    className={`${
+                                                        styles.cameraType
+                                                    } ${
+                                                        styles[
+                                                            verkadaCamera
+                                                                .environment
+                                                        ]
+                                                    }`}
+                                                >
+                                                    {verkadaCamera.id}
+                                                </span>
+                                            )}
+                                        </div>
+
+                                        {verkadaCamera ? (
+                                            <div
+                                                className={styles.cameraDetails}
+                                            >
+                                                <div
+                                                    className={
+                                                        modalStyles.cameraModelName
+                                                    }
+                                                >
+                                                    <strong>
+                                                        {verkadaCamera.name}
+                                                    </strong>
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        modalStyles.cameraSpecGrid
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Resolution:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {
+                                                                verkadaCamera.resolution
+                                                            }
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            FOV:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {verkadaCamera.fov}°
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Environment:
+                                                        </span>
+                                                        <span
+                                                            className={`${
+                                                                modalStyles.specValue
+                                                            } ${
+                                                                modalStyles[
+                                                                    verkadaCamera
+                                                                        .environment
+                                                                ]
+                                                            }`}
+                                                        >
+                                                            {
+                                                                verkadaCamera.environment
+                                                            }
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            IR Range:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {
+                                                                verkadaCamera.irRange
+                                                            }
+                                                            m
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Zoom:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {verkadaCamera.zoom}
+                                                        </span>
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            modalStyles.specItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                modalStyles.specLabel
+                                                            }
+                                                        >
+                                                            Rating:
+                                                        </span>
+                                                        <span
+                                                            className={
+                                                                modalStyles.specValue
+                                                            }
+                                                        >
+                                                            {
+                                                                verkadaCamera.rating
+                                                            }
+                                                        </span>
+                                                    </div>
+                                                    {verkadaCamera.ptz && (
+                                                        <>
+                                                            <div
+                                                                className={
+                                                                    modalStyles.specItem
+                                                                }
+                                                            >
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specLabel
+                                                                    }
+                                                                >
+                                                                    Pan:
+                                                                </span>
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specValue
+                                                                    }
+                                                                >
+                                                                    {
+                                                                        verkadaCamera.pan
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                            <div
+                                                                className={
+                                                                    modalStyles.specItem
+                                                                }
+                                                            >
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specLabel
+                                                                    }
+                                                                >
+                                                                    Tilt:
+                                                                </span>
+                                                                <span
+                                                                    className={
+                                                                        modalStyles.specValue
+                                                                    }
+                                                                >
+                                                                    {
+                                                                        verkadaCamera.tilt
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                        </>
+                                                    )}
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        modalStyles.cameraFeatures
+                                                    }
+                                                >
+                                                    <span
+                                                        className={
+                                                            modalStyles.specLabel
+                                                        }
+                                                    >
+                                                        Features:
+                                                    </span>
+                                                    <div
+                                                        className={
+                                                            modalStyles.featuresList
+                                                        }
+                                                    >
+                                                        {verkadaCamera.features.map(
+                                                            (
+                                                                feature,
+                                                                index
+                                                            ) => (
+                                                                <span
+                                                                    key={index}
+                                                                    className={
+                                                                        modalStyles.featureTag
+                                                                    }
+                                                                >
+                                                                    {feature}
+                                                                </span>
+                                                            )
+                                                        )}
+                                                    </div>
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        modalStyles.directionControl
+                                                    }
+                                                >
+                                                    <label>
+                                                        Direction:{' '}
+                                                        {camera.direction}°
+                                                    </label>
+                                                    <input
+                                                        type="range"
+                                                        min="0"
+                                                        max="360"
+                                                        value={camera.direction}
+                                                        onChange={(e) =>
+                                                            updateCamera(
+                                                                camera.id,
+                                                                {
+                                                                    direction:
+                                                                        parseInt(
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                        ),
+                                                                }
+                                                            )
+                                                        }
+                                                        className={
+                                                            modalStyles.directionSlider
+                                                        }
+                                                    />
+                                                    <div
+                                                        className={
+                                                            modalStyles.directionHelper
+                                                        }
+                                                    >
+                                                        0° = North, 90° = East,
+                                                        180° = South, 270° =
+                                                        West
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            <div
+                                                className={styles.cameraDetails}
+                                            >
+                                                <div
+                                                    className={
+                                                        modalStyles.noModel
+                                                    }
+                                                >
+                                                    No Verkada model selected -
+                                                    Click "Edit" to choose a
+                                                    camera
+                                                </div>
+                                                <div
+                                                    className={
+                                                        modalStyles.directionControl
+                                                    }
+                                                >
+                                                    <label>
+                                                        Direction:{' '}
+                                                        {camera.direction}°
+                                                    </label>
+                                                    <input
+                                                        type="range"
+                                                        min="0"
+                                                        max="360"
+                                                        value={camera.direction}
+                                                        onChange={(e) =>
+                                                            updateCamera(
+                                                                camera.id,
+                                                                {
+                                                                    direction:
+                                                                        parseInt(
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                        ),
+                                                                }
+                                                            )
+                                                        }
+                                                        className={
+                                                            modalStyles.directionSlider
+                                                        }
+                                                    />
+                                                    <div
+                                                        className={
+                                                            modalStyles.directionHelper
+                                                        }
+                                                    >
+                                                        0° = North, 90° = East,
+                                                        180° = South, 270° =
+                                                        West
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        <div className={styles.cameraCoords}>
+                                            <span className={styles.coordLabel}>
+                                                Location:
+                                            </span>
+                                            {mode === 'map' ? (
+                                                <>
+                                                    {camera.lat?.toFixed(6)},{' '}
+                                                    {camera.lng?.toFixed(6)}
+                                                </>
+                                            ) : (
+                                                <>
+                                                    X: {Math.round(camera.x)}, Y: {Math.round(camera.y)}
+                                                </>
+                                            )}
+                                        </div>
+
+                                        <div className={styles.cameraActions}>
+                                            <button
+                                                className={styles.editBtn}
+                                                onClick={() => {
+                                                    setSelectedCamera(camera);
+                                                    setShowModal(true);
+                                                }}
+                                            >
+                                                Edit
+                                            </button>
+                                            <button
+                                                className={styles.removeBtn}
+                                                onClick={() =>
+                                                    removeCamera(camera.id)
+                                                }
+                                            >
+                                                Remove
+                                            </button>
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        )}
+                    </div>
+                </div>
+            
+            {showModal && selectedCamera && (
+                <CameraSelectionModal
+                    camera={selectedCamera}
+                    onSave={(updates) => {
+                        updateCamera(selectedCamera.id, updates);
+                        setShowModal(false);
+                    }}
+                    onClose={() => setShowModal(false)}
+                />
+            )}
+        </div>
+    );
+};
+
+const CameraSelectionModal = ({ camera, onSave, onClose }) => {
+    const [customName, setCustomName] = useState(camera.customName || '');
+    const [selectedCategory, setSelectedCategory] = useState('all');
+    const [selectedCamera, setSelectedCamera] = useState(null);
+
+    // Filter cameras based on selected category
+    const filteredCameras = Object.values(VERKADA_CAMERAS).filter((cam) => {
+        if (selectedCategory === 'all') return true;
+        return cam.type === selectedCategory;
+    });
+
+    const handleCameraSelect = (cameraModel) => {
+        setSelectedCamera(cameraModel);
+    };
+
+    const handleSave = () => {
+        if (!selectedCamera) {
+            alert('Please select a camera model before saving.');
+            return;
+        }
+
+        onSave({
+            customName: customName.trim(),
+            verkadaModel: selectedCamera.id,
+        });
+    };
+
+    return (
+        <div className={styles.modalOverlay}>
+            <div className={styles.cameraSelectionModal}>
+                <div className={styles.modalHeader}>
+                    <h3>Select Verkada Camera</h3>
+                    <button className={styles.closeBtn} onClick={onClose}>×</button>
+                </div>
+
+                <div className={styles.modalContent}>
+                    <div className={styles.topSection}>
+                        <div className={styles.formGroup}>
+                            <label>Custom Name:</label>
+                            <input
+                                type="text"
+                                value={customName}
+                                onChange={(e) => setCustomName(e.target.value)}
+                                placeholder="Enter camera name (optional)"
+                            />
+                        </div>
+
+                        <div className={styles.categoryFilter}>
+                            <label>Filter by Category:</label>
+                            <div className={styles.categoryButtons}>
+                                <button
+                                    className={selectedCategory === 'all' ? styles.active : ''}
+                                    onClick={() => setSelectedCategory('all')}
+                                >
+                                    All Cameras
+                                </button>
+                                {Object.entries(CAMERA_CATEGORIES).map(([key, category]) => (
+                                    <button
+                                        key={key}
+                                        className={selectedCategory === key ? styles.active : ''}
+                                        onClick={() => setSelectedCategory(key)}
+                                    >
+                                        {category.name}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={styles.cameraGrid}>
+                        {filteredCameras.map((cam) => (
+                            <div
+                                key={cam.id}
+                                className={`${styles.cameraCard} ${selectedCamera?.id === cam.id ? styles.selectedCard : ''}`}
+                                onClick={() => handleCameraSelect(cam)}
+                            >
+                                <div className={styles.cardHeader}>
+                                    <div className={styles.cameraIcon}>
+                                        <CameraIcon icon={cam.icon} size={24} />
+                                    </div>
+                                    <div className={styles.cameraTitle}>
+                                        <h4>{cam.name}</h4>
+                                        <span className={`${styles.environmentBadge} ${styles[cam.environment]}`}>
+                                            {cam.environment}
+                                        </span>
+                                    </div>
+                                </div>
+                                
+                                <div className={styles.cardBody}>
+                                    <div className={styles.specRow}>
+                                        <span className={styles.specLabel}>Resolution:</span>
+                                        <span className={styles.specValue}>{cam.resolution}</span>
+                                    </div>
+                                    <div className={styles.specRow}>
+                                        <span className={styles.specLabel}>FOV:</span>
+                                        <span className={styles.specValue}>{cam.fov}°</span>
+                                    </div>
+                                    <div className={styles.specRow}>
+                                        <span className={styles.specLabel}>Range:</span>
+                                        <span className={styles.specValue}>{cam.irRange}m IR</span>
+                                    </div>
+                                    {cam.ptz && (
+                                        <div className={styles.ptzBadge}>PTZ</div>
+                                    )}
+                                </div>
+
+                                <div className={styles.cardFooter}>
+                                    <div className={styles.features}>
+                                        {cam.features?.slice(0, 2).map((feature, index) => (
+                                            <span key={index} className={styles.featureBadge}>
+                                                {feature}
+                                            </span>
+                                        ))}
+                                        {cam.features?.length > 2 && (
+                                            <span className={styles.moreFeatures}>
+                                                +{cam.features.length - 2} more
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                <div className={styles.modalActions}>
+                    <div className={styles.selectedInfo}>
+                        {selectedCamera && (
+                            <span>Selected: {selectedCamera.name}</span>
+                        )}
+                    </div>
+                    <div className={styles.actionButtons}>
+                        <button onClick={onClose} className={styles.cancelBtn}>
+                            Cancel
+                        </button>
+                        <button 
+                            onClick={handleSave} 
+                            disabled={!selectedCamera}
+                            className={styles.saveBtn}
+                        >
+                            Add Camera
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CameraPlacement;