@extends('crm.layouts.app')

@section('title', '3D Body Mapping')

@push('scripts')
    <!-- Three.js and dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
@endpush

@section('content')
<style>
        #body-canvas {
            cursor: grab;
        }
        #body-canvas:active {
            cursor: grabbing;
        }
        .heatmap-low { background: rgba(0, 255, 0, 0.3); }
        .heatmap-medium { background: rgba(255, 255, 0, 0.5); }
        .heatmap-high { background: rgba(255, 165, 0, 0.7); }
        .heatmap-very-high { background: rgba(255, 0, 0, 0.9); }
</style>

<div id="app" class="flex h-screen" style="margin: -2rem; width: calc(100% + 4rem);">
        <!-- Sidebar Controls -->
        <div class="w-80 bg-white shadow-lg overflow-y-auto">
            <div class="p-6 border-b">
                <h1 class="text-2xl font-bold text-gray-800 flex items-center">
                    <i class="fas fa-user-md text-red-600 mr-3"></i>
                    3D Body Mapping
                </h1>
                <p class="text-gray-600 text-sm mt-2">Body Part Analytics & Heatmap</p>
            </div>

            <!-- Body Type Selector -->
            <div class="p-4 border-b">
                <label class="block text-sm font-medium text-gray-700 mb-2">Body Model</label>
                <div class="flex space-x-2">
                    <button id="gender-male" class="flex-1 px-3 py-2 bg-indigo-600 text-white rounded text-sm font-medium">
                        <i class="fas fa-male mr-1"></i> Male
                    </button>
                    <button id="gender-female" class="flex-1 px-3 py-2 bg-gray-200 text-gray-700 rounded text-sm font-medium">
                        <i class="fas fa-female mr-1"></i> Female
                    </button>
                </div>
            </div>

            <!-- Heatmap Filters -->
            <div class="p-4 border-b">
                <h3 class="font-semibold text-gray-800 mb-3">
                    <i class="fas fa-filter text-indigo-600 mr-2"></i>
                    Filters
                </h3>

                <!-- Date Range Filter -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label>
                    <div class="space-y-2">
                        <input
                            type="date"
                            id="filter-date-from"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                            placeholder="From"
                        />
                        <input
                            type="date"
                            id="filter-date-to"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                            placeholder="To"
                        />
                    </div>
                </div>

                <!-- Artist Filter -->
                <div class="mb-4">
                    <label for="filter-artist" class="block text-sm font-medium text-gray-700 mb-2">Artist</label>
                    <select
                        id="filter-artist"
                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                    >
                        <option value="">All Artists</option>
                        @foreach($artists as $artist)
                            <option value="{{ $artist->id }}">{{ $artist->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Apply Filters Button -->
                <button
                    id="apply-filters"
                    class="w-full bg-indigo-600 text-white py-2 px-4 rounded text-sm font-medium hover:bg-indigo-700 transition"
                >
                    <i class="fas fa-check mr-2"></i>Apply Filters
                </button>

                <!-- Clear Filters Button -->
                <button
                    id="clear-filters"
                    class="w-full mt-2 bg-gray-200 text-gray-700 py-2 px-4 rounded text-sm font-medium hover:bg-gray-300 transition"
                >
                    <i class="fas fa-times mr-2"></i>Clear Filters
                </button>
            </div>



            <!-- Heatmap Legend -->
            <div id="heatmap-legend" class="p-4">
                <h3 class="font-semibold text-gray-800 mb-3">
                    <i class="fas fa-chart-bar text-yellow-600 mr-2"></i>
                    Popularity Heatmap
                </h3>

                <div class="space-y-2">
                    <div class="flex items-center text-sm">
                        <div class="w-4 h-4 rounded heatmap-low mr-2"></div>
                        <span>Low (1-25%)</span>
                    </div>
                    <div class="flex items-center text-sm">
                        <div class="w-4 h-4 rounded heatmap-medium mr-2"></div>
                        <span>Medium (26-50%)</span>
                    </div>
                    <div class="flex items-center text-sm">
                        <div class="w-4 h-4 rounded heatmap-high mr-2"></div>
                        <span>High (51-75%)</span>
                    </div>
                    <div class="flex items-center text-sm">
                        <div class="w-4 h-4 rounded heatmap-very-high mr-2"></div>
                        <span>Very High (76-100%)</span>
                    </div>
                </div>

                <div id="heatmap-stats" class="mt-4 p-3 bg-gray-50 rounded">
                    <div class="text-sm text-gray-600">
                        <div>Total Tattoos: <span id="total-tattoos" class="font-semibold">0</span></div>
                        <div>Most Popular: <span id="most-popular-region" class="font-semibold">-</span></div>
                    </div>
                </div>
            </div>

            <!-- Model Controls -->
            <div class="p-4 border-t mt-auto space-y-2">
                <button id="reset-view" class="w-full bg-gray-600 text-white py-2 px-4 rounded text-sm font-medium hover:bg-gray-700 transition">
                    <i class="fas fa-undo mr-2"></i>Reset View
                </button>
                <button id="export-csv" class="w-full bg-green-600 text-white py-2 px-4 rounded text-sm font-medium hover:bg-green-700 transition">
                    <i class="fas fa-download mr-2"></i>Export as CSV
                </button>
            </div>
        </div>

        <!-- 3D Viewport -->
        <div class="flex-1 relative">
            <canvas id="body-canvas" class="w-full h-full"></canvas>

            <!-- Loading Overlay -->
            <div id="loading-overlay" class="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center">
                <div class="text-center">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-red-600 mx-auto mb-4"></div>
                    <p class="text-gray-600">Loading 3D Model...</p>
                </div>
            </div>

            <!-- Information Panel -->
            <div id="info-panel" class="absolute top-4 right-4 bg-white rounded-lg shadow-lg p-4 w-64 hidden">
                <h4 class="font-semibold text-gray-800 mb-2">Region Information</h4>
                <div id="region-info" class="text-sm text-gray-600"></div>
            </div>

            <!-- Controls Help -->
            <div class="absolute bottom-4 left-4 bg-black bg-opacity-75 text-white p-3 rounded text-sm">
                <div><strong>Controls:</strong></div>
                <div>• Left click + drag: Rotate</div>
                <div>• Right click + drag: Pan</div>
                <div>• Scroll: Zoom</div>
                <div>• Click regions: Select</div>
            </div>
        </div>
    </div>

    <script>
        // Main 3D Body Mapping Application
        class BodyMapping3D {
            constructor() {
                this.scene = null;
                this.camera = null;
                this.renderer = null;
                this.controls = null;
                this.bodyModel = null;
                this.currentGender = 'male';
                this.heatmapData = [];

                this.init();
                this.setupEventListeners();
                this.loadHeatmapData();
            }

            init() {
                const canvas = document.getElementById('body-canvas');
                const container = canvas.parentElement;

                // Scene setup
                this.scene = new THREE.Scene();
                this.scene.background = new THREE.Color(0xf5f5f5);

                // Camera setup
                this.camera = new THREE.PerspectiveCamera(
                    75,
                    container.clientWidth / container.clientHeight,
                    0.1,
                    1000
                );
                this.camera.position.set(0, 1, 3);

                // Renderer setup
                this.renderer = new THREE.WebGLRenderer({
                    canvas: canvas,
                    antialias: true
                });
                this.renderer.setSize(container.clientWidth, container.clientHeight);
                this.renderer.shadowMap.enabled = true;
                this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

                // Controls setup
                this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                this.controls.enableDamping = true;
                this.controls.dampingFactor = 0.05;
                this.controls.minDistance = 1;
                this.controls.maxDistance = 10;

                // Lighting setup
                this.setupLighting();

                // Load body model
                this.loadBodyModel();

                // Start render loop
                this.animate();

                // Handle resize
                window.addEventListener('resize', () => this.onWindowResize());
            }

            setupLighting() {
                // Ambient light
                const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
                this.scene.add(ambientLight);

                // Directional light
                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
                directionalLight.position.set(1, 1, 1);
                directionalLight.castShadow = true;
                this.scene.add(directionalLight);

                // Point lights for better illumination
                const pointLight1 = new THREE.PointLight(0xffffff, 0.4);
                pointLight1.position.set(-1, 1, 1);
                this.scene.add(pointLight1);

                const pointLight2 = new THREE.PointLight(0xffffff, 0.4);
                pointLight2.position.set(1, -1, -1);
                this.scene.add(pointLight2);
            }

            loadBodyModel() {
                // Show loading overlay
                document.getElementById('loading-overlay').style.display = 'flex';

                // Remove old model if exists
                if (this.bodyModel) {
                    this.scene.remove(this.bodyModel);
                    this.bodyModel = null;
                }

                const loader = new THREE.GLTFLoader();
                const modelPath = this.currentGender === 'male' ? '/models/male_normal.glb' : '/models/female_normal.glb';

                loader.load(
                    modelPath,
                    (gltf) => {
                        // Model loaded successfully
                        this.bodyModel = gltf.scene;

                        // Process each mesh in the model
                        this.bodyModel.traverse((child) => {
                            if (child.isMesh) {
                                // Store original material
                                child.userData.originalMaterial = child.material.clone();
                                child.userData.regionName = child.name;
                                child.userData.originalColor = child.material.color.getHex();
                                child.userData.popularity = 0;

                                // Make material responsive to lighting
                                child.material = new THREE.MeshStandardMaterial({
                                    color: child.material.color,
                                    metalness: 0.1,
                                    roughness: 0.8,
                                });

                                // Enable shadows
                                child.castShadow = true;
                                child.receiveShadow = true;
                            }
                        });

                        // Center and scale the model
                        const box = new THREE.Box3().setFromObject(this.bodyModel);
                        const center = box.getCenter(new THREE.Vector3());
                        const size = box.getSize(new THREE.Vector3());

                        // Move model to origin
                        this.bodyModel.position.x = -center.x;
                        this.bodyModel.position.y = -center.y;
                        this.bodyModel.position.z = -center.z;

                        // Scale to reasonable size (assuming model height should be ~2 units)
                        const maxDim = Math.max(size.x, size.y, size.z);
                        const scale = 2 / maxDim;
                        this.bodyModel.scale.set(scale, scale, scale);

                        this.scene.add(this.bodyModel);
                        this.setupRaycasting();

                        document.getElementById('loading-overlay').style.display = 'none';
                    },
                    (progress) => {
                        // Loading progress
                        const percent = (progress.loaded / progress.total) * 100;
                        console.log(`Loading model: ${percent.toFixed(0)}%`);
                    },
                    (error) => {
                        console.error('Error loading GLB model:', error);
                        document.getElementById('loading-overlay').innerHTML =
                            '<div class="text-center"><p class="text-red-600">Failed to load 3D model</p></div>';
                    }
                );
            }


            setupRaycasting() {
                this.raycaster = new THREE.Raycaster();
                this.mouse = new THREE.Vector2();

                this.renderer.domElement.addEventListener('click', (event) => {
                    if (!this.bodyModel) return;

                    const rect = this.renderer.domElement.getBoundingClientRect();
                    this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
                    this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

                    this.raycaster.setFromCamera(this.mouse, this.camera);

                    // Recursively check all children (true parameter)
                    const intersects = this.raycaster.intersectObjects(this.bodyModel.children, true);

                    if (intersects.length > 0) {
                        const clicked = intersects[0].object;
                        if (clicked.userData.regionName) {
                            this.onRegionClick(clicked.userData.regionName);
                        }
                    }
                });
            }

            onRegionClick(regionName) {
                console.log('Clicked region:', regionName);
                this.showRegionInfo(regionName);
            }

            showRegionInfo(regionName) {
                const infoPanel = document.getElementById('info-panel');
                const regionInfo = document.getElementById('region-info');

                const region = this.heatmapData.find(r => r.name === regionName);
                const popularity = region ? region.frequency : 0;

                regionInfo.innerHTML = `
                    <div><strong>Region:</strong> ${regionName.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}</div>
                    <div><strong>Popularity:</strong> ${popularity} tattoos</div>
                    <div><strong>Pain Level:</strong> ${this.getRegionPainLevel(regionName)}/10</div>
                    <div><strong>Visibility:</strong> ${this.getRegionVisibility(regionName)}</div>
                `;

                infoPanel.style.display = 'block';

                setTimeout(() => {
                    infoPanel.style.display = 'none';
                }, 3000);
            }

            getRegionPainLevel(region) {
                const painLevels = {
                    'head': 8, 'chest': 6, 'stomach': 5, 'left_shoulder': 3, 'right_shoulder': 3,
                    'left_upper_arm': 4, 'right_upper_arm': 4, 'left_forearm': 5, 'right_forearm': 5,
                    'left_thigh': 4, 'right_thigh': 4, 'left_calf': 6, 'right_calf': 6
                };
                return painLevels[region] || 5;
            }

            getRegionVisibility(region) {
                const visibility = {
                    'head': 'Always Visible', 'chest': 'Moderate', 'stomach': 'Hidden',
                    'left_shoulder': 'Moderate', 'right_shoulder': 'Moderate',
                    'left_upper_arm': 'Hidden', 'right_upper_arm': 'Hidden',
                    'left_forearm': 'Visible', 'right_forearm': 'Visible',
                    'left_thigh': 'Hidden', 'right_thigh': 'Hidden',
                    'left_calf': 'Visible', 'right_calf': 'Visible'
                };
                return visibility[region] || 'Moderate';
            }

            async loadHeatmapData(filters = {}) {
                try {
                    // Build query string from filters
                    const params = new URLSearchParams();
                    if (filters.dateFrom) params.append('date_from', filters.dateFrom);
                    if (filters.dateTo) params.append('date_to', filters.dateTo);
                    if (filters.artistId) params.append('artist_id', filters.artistId);

                    const url = `/crm/body-map/api/heatmap${params.toString() ? '?' + params.toString() : ''}`;
                    const response = await fetch(url);
                    const data = await response.json();

                    this.heatmapData = data.heatmap;
                    this.updateHeatmapVisualization();
                    this.updateStats(data);
                } catch (error) {
                    console.error('Failed to load heatmap data:', error);
                }
            }

            updateHeatmapVisualization() {
                if (!this.bodyModel) return;

                const maxFrequency = Math.max(...this.heatmapData.map(r => r.frequency));

                this.bodyModel.traverse((child) => {
                    if (child.isMesh && child.userData.regionName) {
                        const regionData = this.heatmapData.find(r =>
                            r.name === child.userData.regionName ||
                            r.region_3d === child.userData.regionName
                        );

                        if (regionData) {
                            const intensity = regionData.frequency / maxFrequency;
                            child.userData.popularity = regionData.frequency;

                            // Apply heatmap color
                            const color = this.getHeatmapColor(intensity);
                            child.material.color.setHex(color);
                        }
                    }
                });
            }

            getHeatmapColor(intensity) {
                if (intensity < 0.25) return 0x00ff00;      // Green (low)
                if (intensity < 0.5) return 0xffff00;       // Yellow (medium)
                if (intensity < 0.75) return 0xffa500;      // Orange (high)
                return 0xff0000;                             // Red (very high)
            }

            updateStats(data) {
                document.getElementById('total-tattoos').textContent = data.total_tattoos;

                if (data.heatmap.length > 0) {
                    const mostPopular = data.heatmap.reduce((max, region) =>
                        region.frequency > max.frequency ? region : max
                    );
                    document.getElementById('most-popular-region').textContent =
                        mostPopular.name.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                }
            }


            highlightRegion(regionName) {
                if (this.bodyModel) {
                    this.bodyModel.children.forEach(mesh => {
                        if (mesh.userData.regionName === regionName) {
                            mesh.material.color.setHex(0x00ff00);
                            mesh.material.emissive.setHex(0x004400);

                            // Reset after 2 seconds
                            setTimeout(() => {
                                mesh.material.color.setHex(mesh.userData.originalColor);
                                mesh.material.emissive.setHex(0x000000);
                            }, 2000);
                        }
                    });
                }
            }

            resetView() {
                this.camera.position.set(0, 1, 3);
                this.controls.reset();
            }

            onWindowResize() {
                const canvas = document.getElementById('body-canvas');
                const container = canvas.parentElement;

                this.camera.aspect = container.clientWidth / container.clientHeight;
                this.camera.updateProjectionMatrix();
                this.renderer.setSize(container.clientWidth, container.clientHeight);
            }

            animate() {
                requestAnimationFrame(() => this.animate());

                this.controls.update();
                this.renderer.render(this.scene, this.camera);
            }

            setupEventListeners() {
                // Gender switches
                document.getElementById('gender-male').addEventListener('click', () => this.switchGender('male'));
                document.getElementById('gender-female').addEventListener('click', () => this.switchGender('female'));

                // View controls
                document.getElementById('reset-view').addEventListener('click', () => this.resetView());

                // Filter controls
                document.getElementById('apply-filters').addEventListener('click', () => this.applyFilters());
                document.getElementById('clear-filters').addEventListener('click', () => this.clearFilters());

                // Export control
                document.getElementById('export-csv').addEventListener('click', () => this.exportCSV());
            }

            applyFilters() {
                const filters = {
                    dateFrom: document.getElementById('filter-date-from').value,
                    dateTo: document.getElementById('filter-date-to').value,
                    artistId: document.getElementById('filter-artist').value,
                };

                this.loadHeatmapData(filters);
            }

            clearFilters() {
                document.getElementById('filter-date-from').value = '';
                document.getElementById('filter-date-to').value = '';
                document.getElementById('filter-artist').value = '';
                this.loadHeatmapData();
            }

            exportCSV() {
                const filters = {
                    dateFrom: document.getElementById('filter-date-from').value,
                    dateTo: document.getElementById('filter-date-to').value,
                    artistId: document.getElementById('filter-artist').value,
                };

                // Build query string
                const params = new URLSearchParams();
                if (filters.dateFrom) params.append('date_from', filters.dateFrom);
                if (filters.dateTo) params.append('date_to', filters.dateTo);
                if (filters.artistId) params.append('artist_id', filters.artistId);

                // Trigger download
                const url = `/crm/body-map/export-csv${params.toString() ? '?' + params.toString() : ''}`;
                window.location.href = url;
            }

            switchGender(gender) {
                if (this.currentGender === gender) return;

                this.currentGender = gender;

                // Update button states
                document.getElementById('gender-male').classList.toggle('bg-indigo-600', gender === 'male');
                document.getElementById('gender-male').classList.toggle('text-white', gender === 'male');
                document.getElementById('gender-male').classList.toggle('bg-gray-200', gender !== 'male');
                document.getElementById('gender-male').classList.toggle('text-gray-700', gender !== 'male');

                document.getElementById('gender-female').classList.toggle('bg-indigo-600', gender === 'female');
                document.getElementById('gender-female').classList.toggle('text-white', gender === 'female');
                document.getElementById('gender-female').classList.toggle('bg-gray-200', gender !== 'female');
                document.getElementById('gender-female').classList.toggle('text-gray-700', gender !== 'female');

                // Reload the model
                this.loadBodyModel();

                // Reapply heatmap data after model loads
                if (this.heatmapData.length > 0) {
                    setTimeout(() => {
                        this.updateHeatmapVisualization();
                    }, 500); // Wait for model to load
                }
            }
        }

        // Initialize the application
        document.addEventListener('DOMContentLoaded', () => {
            window.bodyMapping = new BodyMapping3D();
        });
    </script>
@endsection