@props(['name' => 'device_markers', 'readonly' => false, 'markers' => '[]'])

<div x-data="deviceMapper({{ $markers }}, {{ $readonly ? 'true' : 'false' }})" class="device-mapper-container card-glass" style="margin-bottom: var(--space-xl);">
    <h3 class="h5 mapper-title-row">
        <span><i class="ph ph-bounding-box" style="color: var(--primary);"></i> Mapa Físico de Daños</span>
        <template x-if="!readonly">
            <span class="badge" style="background: var(--primary-light); color: var(--primary); font-size: 0.75rem; display: inline-block;">Añade marcadores o dibuja el equipo</span>
        </template>
    </h3>

    <input type="hidden" name="{{ $name }}" :value="JSON.stringify({ markers: markers, strokes: strokes })">

    <template x-if="!readonly">
        <div class="mapper-toolbar" style="display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;">
            <button type="button" @click="activeTool = 'scratch'" :class="{'active': activeTool === 'scratch'}" class="btn btn-outline btn-tool" style="padding: 8px 12px; font-size: 0.9rem;">
                <i class="ph ph-scissors"></i> Rayón
            </button>
            <button type="button" @click="activeTool = 'dent'" :class="{'active': activeTool === 'dent'}" class="btn btn-outline btn-tool" style="padding: 8px 12px; font-size: 0.9rem;">
                <i class="ph ph-hammer"></i> Golpe
            </button>
            <button type="button" @click="activeTool = 'crack'" :class="{'active': activeTool === 'crack'}" class="btn btn-outline btn-tool" style="padding: 8px 12px; font-size: 0.9rem;">
                <i class="ph ph-lightning"></i> Pantalla Rota
            </button>
            <button type="button" @click="activeTool = 'missing'" :class="{'active': activeTool === 'missing'}" class="btn btn-outline btn-tool" style="padding: 8px 12px; font-size: 0.9rem;">
                <i class="ph ph-puzzle-piece"></i> Falta Pieza
            </button>
            <button type="button" @click="activeTool = 'key'" :class="{'active': activeTool === 'key'}" class="btn btn-outline btn-tool" style="padding: 8px 12px; font-size: 0.9rem;">
                <i class="ph ph-keyboard"></i> Falta Tecla
            </button>
            
            <div style="border-left: 1px solid var(--border-color); margin: 0 5px;"></div>
            
            <button type="button" @click="activeTool = 'draw'" x-show="currentDeviceType === 'Generic'" :class="{'active': activeTool === 'draw'}" class="btn btn-outline btn-tool" style="padding: 8px 12px; font-size: 0.9rem;">
                <i class="ph ph-pencil-simple"></i> Dibujar Silueta
            </button>
            <button type="button" @click="clearDrawing()" x-show="currentDeviceType === 'Generic'" class="btn btn-ghost text-danger" style="padding: 8px 12px; font-size: 0.9rem;">
                <i class="ph ph-trash"></i> Borrar Dibujo
            </button>
        </div>
    </template>

    <div class="mapper-canvas-wrapper" 
         style="position: relative; width: 100%; max-width: 800px; margin: 0 auto; background: #f8f9fa; border: 2px dashed rgba(0,0,0,0.1); border-radius: var(--radius-md); overflow: hidden; min-height: 300px; touch-action: none;" 
         @mousedown="startAction($event)"
         @mousemove="moveAction($event)"
         @mouseup="endAction($event)"
         @mouseleave="endAction($event)"
         @touchstart.prevent="startAction($event.touches[0])"
         @touchmove.prevent="moveAction($event.touches[0])"
         @touchend.prevent="endAction($event)">
        
        <div class="svg-container" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px;">
            <template x-if="currentDeviceType === 'Laptop'">
                <svg viewBox="0 0 800 400" style="width: 100%; height: auto; max-height: 400px; stroke: #ccc; stroke-width: 4; fill: none; pointer-events: none;">
                    <rect x="50" y="50" width="300" height="200" rx="10"></rect>
                    <rect x="60" y="60" width="280" height="180" rx="5" stroke-width="2"></rect>
                    <path d="M 40 260 L 360 260 L 380 380 L 20 380 Z" stroke-linejoin="round"></path>
                    <rect x="80" y="280" width="240" height="60" rx="2" stroke-width="2" fill="#eaeaea"></rect>
                    <rect x="160" y="345" width="80" height="30" rx="2" stroke-width="2"></rect>
                    
                    <rect x="450" y="50" width="300" height="330" rx="15"></rect>
                    <rect x="550" y="200" width="100" height="100" rx="5" stroke-width="2"></rect>
                    <line x1="470" y1="80" x2="470" y2="150" stroke-width="8"></line>
                    <line x1="730" y1="80" x2="730" y2="150" stroke-width="8"></line>
                </svg>
            </template>
            
            <template x-if="currentDeviceType === 'Desktop' || currentDeviceType === 'All-in-One' || currentDeviceType === 'Servidor'">
                <svg viewBox="0 0 800 400" style="width: 100%; height: auto; max-height: 400px; stroke: #ccc; stroke-width: 4; fill: none; pointer-events: none;">
                    <rect x="100" y="80" width="250" height="180" rx="10"></rect>
                    <rect x="110" y="90" width="230" height="160" rx="5" stroke-width="2"></rect>
                    <path d="M 195 260 L 255 260 L 275 300 L 175 300 Z" stroke-width="4"></path>
                    <line x1="150" y1="300" x2="300" y2="300" stroke-width="4"></line>
                    
                    <rect x="450" y="60" width="150" height="280" rx="5"></rect>
                    <circle cx="525" cy="100" r="15" stroke-width="2"></circle>
                    <rect x="480" y="140" width="90" height="10" stroke-width="2"></rect>
                    <rect x="480" y="160" width="90" height="10" stroke-width="2"></rect>
                    
                    <rect x="630" y="60" width="100" height="280" rx="5"></rect>
                    <rect x="650" y="80" width="60" height="40" stroke-width="2"></rect>
                    <rect x="650" y="150" width="60" height="120" stroke-width="2"></rect>
                </svg>
            </template>
            
            <template x-if="currentDeviceType === 'Impresora'">
                <svg viewBox="0 0 800 400" style="width: 100%; height: auto; max-height: 400px; stroke: #ccc; stroke-width: 4; fill: none; pointer-events: none;">
                    <rect x="100" y="150" width="250" height="150" rx="10"></rect>
                    <rect x="150" y="50" width="150" height="100" stroke-width="2"></rect>
                    <rect x="130" y="300" width="190" height="50" stroke-width="2"></rect>
                    <rect x="300" y="170" width="40" height="40" rx="5" stroke-width="2"></rect>
                    
                    <rect x="450" y="100" width="250" height="200" rx="10"></rect>
                    <rect x="470" y="120" width="210" height="160" rx="2" stroke-width="2"></rect>
                </svg>
            </template>
            
            <template x-if="!['Laptop', 'Desktop', 'All-in-One', 'Servidor', 'Impresora'].includes(currentDeviceType)">
                <svg viewBox="0 0 800 400" style="width: 100%; height: auto; max-height: 400px; fill: none; pointer-events: none;">
                    <rect x="150" y="50" width="500" height="300" rx="15" stroke="#ccc" stroke-dasharray="10 5" stroke-width="4"></rect>
                    <text x="400" y="200" font-family="sans-serif" font-size="20" fill="#aaa" stroke="none" text-anchor="middle" x-show="strokes.length === 0">PUEDES DIBUJAR EL EQUIPO AQUÍ</text>
                    
                    <g x-html="renderStrokes()"></g>
                </svg>
            </template>
        </div>

        <!-- Render de Marcadores -->
        <template x-for="(marker, index) in markers" :key="index">
            <div class="marker-point" 
                 :style="`left: ${marker.x}%; top: ${marker.y}%;`" 
                 :title="marker.typeLabel"
                 @mousedown.stop="removeMarker(index)"
                 @touchstart.stop="removeMarker(index)"
                 @click.stop
                 x-data="{ showTooltip: false }"
                 @mouseenter="showTooltip = true"
                 @mouseleave="showTooltip = false">
                <i :class="getMarkerIcon(marker.type)"></i>
                
                <div x-show="showTooltip" class="marker-tooltip" style="display: none;" x-transition>
                    <span x-text="marker.typeLabel"></span>
                    <template x-if="!readonly">
                        <small style="display: block; opacity: 0.7; margin-top: 4px; font-size: 0.7rem;">Clic para borrar</small>
                    </template>
                </div>
            </div>
        </template>
    </div>
</div>

@push('scripts')
<style>
    .mapper-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-md);
        flex-wrap: wrap;
        gap: 10px;
    }
    @media (max-width: 576px) {
        .mapper-title-row {
            flex-direction: column;
            align-items: flex-start;
        }
        .mapper-toolbar .btn-tool {
            flex: 1 1 calc(50% - 10px);
            justify-content: center;
            display: flex;
        }
    }
    .btn-tool {
        background: #fff;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        transition: all 0.2s;
    }
    .btn-tool:hover {
        background: rgba(0,0,0,0.02);
    }
    .btn-tool.active {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
        font-weight: 600;
        box-shadow: inset 0 0 0 1px var(--primary);
    }
    
    .marker-point {
        position: absolute;
        width: 30px;
        height: 30px;
        background: #fff;
        border: 2px solid var(--danger);
        color: var(--danger);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(-50%, -50%);
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 10;
        transition: transform 0.2s;
    }
    .marker-point:hover {
        transform: translate(-50%, -50%) scale(1.15);
        z-index: 20;
    }
    
    .marker-tooltip {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.8rem;
        white-space: nowrap;
        margin-bottom: 8px;
        pointer-events: none;
    }
    .marker-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }
</style>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('deviceMapper', (initialData, isReadonly) => {
            // Compatibilidad hacia atrás: si initialData es un array, lo convertimos a la nueva estructura
            let data = { markers: [], strokes: [] };
            if (Array.isArray(initialData)) {
                data.markers = initialData;
            } else if (initialData && typeof initialData === 'object') {
                data.markers = initialData.markers || [];
                data.strokes = initialData.strokes || [];
            }
            
            return {
                readonly: isReadonly,
                markers: data.markers,
                strokes: data.strokes,
                activeTool: 'scratch',
                currentDeviceType: 'Laptop',
                isDrawing: false,
                currentStrokeIndex: -1,
                
                init() {
                    this.updateDeviceType();
                    
                    window.addEventListener('device-type-selected', (e) => {
                        this.setDeviceTypeFromName(e.detail);
                    });
                    
                    document.body.addEventListener('change', (e) => {
                        if(e.target && e.target.name === 'device_type') {
                            this.currentDeviceType = e.target.value;
                        }
                    });
                },
                
                updateDeviceType() {
                    if (window.loadedDeviceType) {
                        this.currentDeviceType = window.loadedDeviceType;
                        return;
                    }
                    const select = document.querySelector('select[name="device_type"]');
                    if (select && select.value) {
                        this.currentDeviceType = select.value;
                    }
                },
                
                setDeviceTypeFromName(nameOrCat) {
                    const query = nameOrCat.toLowerCase();
                    if (query.includes('laptop') || query.includes('portatil') || query.includes('portátil')) this.currentDeviceType = 'Laptop';
                    else if (query.includes('escritorio') || query.includes('desktop') || query.includes('pc')) this.currentDeviceType = 'Desktop';
                    else if (query.includes('impresora')) this.currentDeviceType = 'Impresora';
                    else if (query.includes('servidor')) this.currentDeviceType = 'Servidor';
                    else if (query.includes('all-in-one') || query.includes('aio')) this.currentDeviceType = 'All-in-One';
                    else this.currentDeviceType = 'Generic';
                },
                
                getCoordinates(event) {
                    const el = document.querySelector('.mapper-canvas-wrapper');
                    const rect = el.getBoundingClientRect();
                    return {
                        x: ((event.clientX - rect.left) / rect.width) * 100,
                        y: ((event.clientY - rect.top) / rect.height) * 100
                    };
                },
                
                startAction(event) {
                    if (this.readonly) return;
                    
                    const pos = this.getCoordinates(event);
                    
                    if (this.activeTool === 'draw') {
                        this.isDrawing = true;
                        this.strokes.push([pos]);
                        this.currentStrokeIndex = this.strokes.length - 1;
                    } else {
                        // Es un marcador
                        this.markers.push({
                            x: pos.x.toFixed(2),
                            y: pos.y.toFixed(2),
                            type: this.activeTool,
                            typeLabel: this.getToolLabel(this.activeTool)
                        });
                    }
                },
                
                renderStrokes() {
                    if (!this.strokes || this.strokes.length === 0) return '';
                    return this.strokes.map(stroke => {
                        if (!stroke || stroke.length === 0) return '';
                        const points = stroke.map(p => `${(p.x * 800 / 100)},${(p.y * 400 / 100)}`).join(' ');
                        return `<polyline points="${points}" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>`;
                    }).join('');
                },
                
                moveAction(event) {
                    if (!this.isDrawing || this.readonly || this.activeTool !== 'draw' || this.currentStrokeIndex === -1) return;
                    
                    const pos = this.getCoordinates(event);
                    
                    // Alpine V3 trick: Re-assign the array to trigger reactivity for polyline
                    const newStroke = [...this.strokes[this.currentStrokeIndex], pos];
                    this.strokes[this.currentStrokeIndex] = newStroke;
                },
                
                endAction(event) {
                    if (this.isDrawing) {
                        this.isDrawing = false;
                        this.currentStrokeIndex = -1;
                    }
                },
                
                clearDrawing() {
                    Swal.fire({
                        title: '¿Estás seguro?',
                        text: '¿Estás seguro de borrar todo tu dibujo?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: 'var(--danger, #dc3545)',
                        cancelButtonColor: '#94a3b8',
                        confirmButtonText: 'Sí, borrar',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            this.strokes = [];
                        }
                    });
                },
                
                removeMarker(index) {
                    if (this.readonly) return;
                    this.markers.splice(index, 1);
                },
                
                getMarkerIcon(toolType) {
                    switch(toolType) {
                        case 'scratch': return 'ph ph-scissors';
                        case 'dent': return 'ph ph-hammer';
                        case 'crack': return 'ph ph-lightning';
                        case 'missing': return 'ph ph-puzzle-piece';
                        case 'key': return 'ph ph-keyboard';
                        default: return 'ph ph-warning-circle';
                    }
                },
                
                getToolLabel(toolType) {
                    switch(toolType) {
                        case 'scratch': return 'Rayón';
                        case 'dent': return 'Golpe / Abolladura';
                        case 'crack': return 'Pantalla Rota / Grieta';
                        case 'missing': return 'Pieza Faltante';
                        case 'key': return 'Falta Tecla';
                        default: return 'Marca';
                    }
                }
            };
        });
    });
</script>
@endpush