@extends('layouts.dashboard.inface', ['section' => 'prospect_workflows'])

@php
    $initialDiagram = json_decode(old('diagram', ''), true) ?: $diagram;
    $editing = $workflow !== null;
@endphp

@section('extra-styles')
    <style>[x-cloak]{display:none!important}.workflow-grid{background-image:radial-gradient(rgb(148 163 184 / .35) 1px,transparent 1px);background-size:20px 20px}</style>
@endsection

@section('content')
<div class="flex min-h-0 flex-1 flex-col overflow-hidden bg-slate-100 dark:bg-slate-950"
    x-data="prospectWorkflowEditor(@js($initialDiagram))"
    x-on:pointermove.window="moveNode($event)" x-on:pointerup.window="stopDrag()">
    <form method="POST" action="{{ $editing ? route('realEstate.settings.prospectWorkflows.update', $workflow) : route('realEstate.settings.prospectWorkflows.store') }}"
        class="flex min-h-0 flex-1 flex-col" x-on:submit="prepareSubmit">
        @csrf
        @if ($editing) @method('PUT') @endif
        <input x-ref="diagram" type="hidden" name="diagram" :value="JSON.stringify({nodes, transitions})">

        <header class="z-20 border-b border-slate-200 bg-white px-5 py-4 dark:border-slate-800 dark:bg-slate-900">
            <div class="flex flex-col gap-4 xl:flex-row xl:items-end">
                <div class="min-w-0 flex-1">
                    <div class="mb-1 flex items-center gap-2 text-xs font-medium text-slate-500">
                        <a href="{{ route('realEstate.settings.prospectWorkflows') }}" class="hover:text-primary">Flujos</a><span>/</span><span>{{ $editing ? 'Editar' : 'Nuevo' }}</span>
                    </div>
                    <div class="grid gap-3 md:grid-cols-3">
                        <label class="md:col-span-1"><span class="mb-1 block text-xs font-bold text-slate-600">Nombre del flujo</span>
                            <input name="name" required maxlength="120" value="{{ old('name', $workflow?->name ?? 'Flujo comercial principal') }}"
                                class="w-full rounded-lg border-slate-300 text-sm focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800">
                        </label>
                        <label><span class="mb-1 block text-xs font-bold text-slate-600">Inmobiliaria</span>
                            <select name="real_estate_agency_id" {{ $editing ? 'disabled' : '' }} class="w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                @foreach ($agencies as $agency)<option value="{{ $agency->id }}" @selected(old('real_estate_agency_id', $workflow?->real_estate_agency_id) == $agency->id)>{{ $agency->name }}</option>@endforeach
                            </select>
                        </label>
                        <label><span class="mb-1 block text-xs font-bold text-slate-600">Descripción</span>
                            <input name="description" maxlength="500" value="{{ old('description', $workflow?->description) }}" placeholder="Objetivo de este flujo"
                                class="w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                        </label>
                    </div>
                </div>
                <div class="flex shrink-0 gap-2">
                    <a href="{{ route('realEstate.settings.prospectWorkflows') }}" class="rounded-lg border border-slate-300 px-4 py-2.5 text-sm font-bold text-slate-600">Cancelar</a>
                    <button name="save_mode" value="draft" class="rounded-lg border border-primary px-4 py-2.5 text-sm font-bold text-primary">Guardar borrador</button>
                    <button name="save_mode" value="publish" class="rounded-lg bg-primary px-4 py-2.5 text-sm font-bold text-white shadow-sm hover:bg-blue-600">Guardar y publicar</button>
                </div>
            </div>
            @if ($errors->any())
                <div class="mt-3 rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700">{{ $errors->first() }}</div>
            @endif
        </header>

        <div class="flex min-h-0 flex-1 overflow-hidden">
            <aside class="z-10 flex w-72 shrink-0 flex-col overflow-y-auto border-r border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
                <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Herramientas</h2>
                <p class="mt-1 text-xs text-slate-500">Agrega nodos y arrástralos en el lienzo.</p>
                <div class="mt-4 grid gap-2">
                    <button type="button" @click="addNode('action')" class="flex items-center gap-3 rounded-lg border border-slate-200 p-3 text-left hover:border-primary hover:bg-primary/5">
                        <span class="material-symbols-outlined text-primary">task_alt</span><span><b class="block text-sm">Actividad</b><small class="text-slate-500">Tarea del vendedor</small></span>
                    </button>
                    <button type="button" @click="addNode('decision')" class="flex items-center gap-3 rounded-lg border border-slate-200 p-3 text-left hover:border-amber-400 hover:bg-amber-50">
                        <span class="material-symbols-outlined text-amber-600">call_split</span><span><b class="block text-sm">Decisión</b><small class="text-slate-500">Crea rutas alternas</small></span>
                    </button>
                    <button type="button" @click="addNode('end')" class="flex items-center gap-3 rounded-lg border border-slate-200 p-3 text-left hover:border-green-500 hover:bg-green-50">
                        <span class="material-symbols-outlined text-green-600">flag</span><span><b class="block text-sm">Cierre</b><small class="text-slate-500">Finaliza una ruta</small></span>
                    </button>
                </div>
                <div class="mt-5 rounded-lg bg-slate-50 p-3 text-xs leading-relaxed text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                    <b>Cómo conectar:</b> selecciona un nodo, pulsa <b>Conectar</b> y después el nodo destino. Repite desde una decisión para crear alternativas.
                </div>
                <template x-if="connectingFrom">
                    <div class="mt-3 rounded-lg border border-primary bg-primary/10 p-3 text-xs font-bold text-primary">
                        Selecciona ahora el nodo destino.<button type="button" @click="connectingFrom=null" class="ml-2 underline">Cancelar</button>
                    </div>
                </template>
            </aside>

            <main class="relative min-w-0 flex-1 overflow-auto workflow-grid" x-ref="canvas">
                <div class="relative" :style="`width:${canvasWidth}px;height:${canvasHeight}px`">
                    <template x-for="edge in transitions" :key="edge._key">
                        <svg class="pointer-events-none absolute left-0 top-0 overflow-visible"
                            style="z-index: 1"
                            :width="canvasWidth" :height="canvasHeight"
                            :viewBox="`0 0 ${canvasWidth} ${canvasHeight}`"
                            aria-hidden="true">
                            <g>
                                <path :d="edgePath(edge)" fill="none" stroke="#ffffff" stroke-width="7"
                                    stroke-linecap="round" opacity=".9" />
                                <path :d="edgePath(edge)" fill="none" stroke="#2563eb" stroke-width="3"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <polygon :points="edgeArrow(edge)" fill="#2563eb" stroke="#ffffff" stroke-width="1.5" />
                                <rect :x="edgeLabel(edge).x - edgeLabelWidth(edge) / 2"
                                    :y="edgeLabel(edge).y - 13" :width="edgeLabelWidth(edge)" height="22" rx="11"
                                    fill="#ffffff" stroke="#bfdbfe" stroke-width="1" />
                                <text :x="edgeLabel(edge).x" :y="edgeLabel(edge).y + 3" text-anchor="middle"
                                    fill="#1d4ed8" font-size="11" font-weight="700" x-text="edge.label || 'Continuar'"></text>
                            </g>
                        </svg>
                    </template>
                    <template x-for="node in nodes" :key="node.client_key">
                        <article class="absolute z-10 w-[230px] select-none rounded-xl border-2 bg-white p-3 shadow-md transition-shadow dark:bg-slate-900"
                            :class="nodeClass(node)" :style="`left:${node.position_x}px;top:${node.position_y}px`"
                            @pointerdown.stop.prevent="startDrag($event,node)">
                            <div class="flex items-start gap-2">
                                <span class="material-symbols-outlined text-[20px]" x-text="node.node_type==='decision'?'call_split':(node.node_type==='end'?'flag':'task_alt')"></span>
                                <div class="min-w-0 flex-1"><p class="truncate text-sm font-extrabold" x-text="node.name"></p><p class="truncate text-[11px] text-slate-500" x-text="nodeSubtitle(node)"></p></div>
                                <span x-show="node.is_start" class="rounded bg-primary/10 px-1.5 py-0.5 text-[9px] font-black uppercase text-primary">Inicio</span>
                            </div>
                            <div class="mt-3 flex justify-between border-t border-slate-100 pt-2 dark:border-slate-800">
                                <button type="button" @pointerdown.stop @click.stop="select(node)" class="text-[11px] font-bold text-primary">Configurar</button>
                                <button type="button" @pointerdown.stop @click.stop="beginConnection(node)" class="text-[11px] font-bold text-slate-600">Conectar</button>
                            </div>
                        </article>
                    </template>
                </div>
            </main>

            <aside class="z-10 w-80 shrink-0 overflow-y-auto border-l border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900" x-cloak>
                <template x-if="selectedNode">
                    <div>
                        <div class="flex items-center justify-between"><h2 class="text-sm font-extrabold">Configuración del nodo</h2><button type="button" @click="selectedKey=null" class="text-slate-400"><span class="material-symbols-outlined">close</span></button></div>
                        <div class="mt-4 space-y-3">
                            <label class="block"><span class="field-label">Nombre</span><input x-model="selectedNode.name" maxlength="120" class="field-input"></label>
                            <label class="block"><span class="field-label">Tipo de nodo</span><select x-model="selectedNode.node_type" @change="normalizeNode(selectedNode)" class="field-input"><option value="action">Actividad</option><option value="decision">Decisión</option><option value="end">Cierre</option></select></label>
                            <label x-show="selectedNode.node_type==='action'" class="block"><span class="field-label">Acción del sistema</span><select x-model="selectedNode.action_type" class="field-input">@foreach($actionTypes as $value => $label)<option value="{{ $value }}">{{ $label }}</option>@endforeach</select></label>
                            <label x-show="selectedNode.node_type==='action'" class="block"><span class="field-label">Título para el vendedor</span><input x-model="selectedNode.title" maxlength="160" class="field-input"></label>
                            <div x-show="selectedNode.node_type==='action'" class="grid grid-cols-2 gap-2">
                                <label><span class="field-label">Prioridad</span><select x-model="selectedNode.priority" class="field-input"><option value="low">Baja</option><option value="normal">Normal</option><option value="high">Alta</option><option value="urgent">Urgente</option></select></label>
                                <label><span class="field-label">Espera (horas)</span><input x-model.number="selectedNode.delay_hours" type="number" min="0" max="8760" class="field-input"></label>
                            </div>
                            <label x-show="selectedNode.node_type==='action'" class="block"><span class="field-label">Mensaje sugerido de WhatsApp</span><textarea x-model="selectedNode.whatsapp_message" maxlength="2000" rows="3" class="field-input" placeholder="Opcional"></textarea></label>
                            <label class="flex items-center gap-2 rounded-lg border border-slate-200 p-3 text-sm font-bold"><input type="radio" name="start_node_ui" :checked="selectedNode.is_start" @change="setStart(selectedNode)"> Es el inicio del flujo</label>
                        </div>
                        <div class="mt-5 border-t border-slate-200 pt-4">
                            <div class="flex items-center justify-between"><h3 class="text-xs font-black uppercase text-slate-500">Salidas</h3><button type="button" @click="beginConnection(selectedNode)" class="text-xs font-bold text-primary">+ Conectar</button></div>
                            <template x-for="(edge,index) in outgoing(selectedNode)" :key="edge._key">
                                <div class="mt-2 rounded-lg border border-slate-200 p-2">
                                    <p class="mb-2 truncate text-xs font-bold" x-text="'→ '+nodeName(edge.to_key)"></p>
                                    <input x-model="edge.label" maxlength="100" placeholder="Etiqueta (ej. Sí)" class="field-input mb-2">
                                    <input x-model="edge.outcome_code" maxlength="60" placeholder="Código opcional" class="field-input mb-2">
                                    <div class="flex items-center justify-between"><label class="text-[11px] text-slate-500"><input type="checkbox" x-model="edge.is_default"> Ruta predeterminada</label><button type="button" @click="removeTransition(edge)" class="text-xs font-bold text-red-600">Eliminar</button></div>
                                </div>
                            </template>
                        </div>
                        <button type="button" @click="removeNode(selectedNode)" class="mt-6 w-full rounded-lg border border-red-200 px-3 py-2 text-xs font-bold text-red-600 hover:bg-red-50">Eliminar nodo</button>
                    </div>
                </template>
                <template x-if="!selectedNode"><div class="py-16 text-center text-sm text-slate-500"><span class="material-symbols-outlined text-4xl text-slate-300">touch_app</span><p class="mt-2">Selecciona un nodo para configurarlo.</p></div></template>
            </aside>
        </div>
    </form>
</div>
@endsection

@section('extra-scripts')
<style>.field-label{display:block;margin-bottom:.25rem;font-size:.7rem;font-weight:800;color:#64748b}.field-input{width:100%;border-radius:.5rem;border-color:#cbd5e1;padding:.5rem .65rem;font-size:.75rem}</style>
<script>
function prospectWorkflowEditor(initial) {
    return {
        nodes: initial.nodes || [], transitions: (initial.transitions || []).map((e,i)=>({...e,_key:'edge-'+i+'-'+Math.random()})),
        selectedKey: null, connectingFrom: null, dragging: null,
        get selectedNode(){ return this.nodes.find(n=>n.client_key===this.selectedKey) || null },
        get canvasWidth(){ return Math.max(1800,...this.nodes.map(n=>Number(n.position_x)+400)) },
        get canvasHeight(){ return Math.max(900,...this.nodes.map(n=>Number(n.position_y)+300)) },
        uuid(){ return crypto.randomUUID ? crypto.randomUUID() : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,c=>{const r=Math.random()*16|0,v=c==='x'?r:(r&3|8);return v.toString(16)}) },
        addNode(type){ const n={client_key:this.uuid(),name:type==='decision'?'Nueva decisión':(type==='end'?'Fin del flujo':'Nueva actividad'),node_type:type,action_type:type==='action'?'custom':null,title:'',priority:'normal',delay_hours:0,whatsapp_message:'',position_x:Math.max(40,...this.nodes.map(n=>Number(n.position_x)+270)),position_y:120,is_start:this.nodes.length===0}; this.nodes.push(n); this.selectedKey=n.client_key },
        select(node){ if(this.connectingFrom){ this.connectTo(node); return } this.selectedKey=node.client_key },
        beginConnection(node){ if(node.node_type==='end') return; this.connectingFrom=node.client_key; this.selectedKey=node.client_key },
        connectTo(node){ if(!this.connectingFrom || node.client_key===this.connectingFrom) return; if(!this.transitions.some(e=>e.from_key===this.connectingFrom&&e.to_key===node.client_key)){this.transitions.push({from_key:this.connectingFrom,to_key:node.client_key,label:'Continuar',outcome_code:'',is_default:!this.transitions.some(e=>e.from_key===this.connectingFrom),_key:'edge-'+this.uuid()})} this.connectingFrom=null; this.selectedKey=node.client_key },
        removeNode(node){ if(!confirm('¿Eliminar este nodo y sus conexiones?')) return; this.nodes=this.nodes.filter(n=>n.client_key!==node.client_key); this.transitions=this.transitions.filter(e=>e.from_key!==node.client_key&&e.to_key!==node.client_key); if(node.is_start&&this.nodes[0])this.nodes[0].is_start=true; this.selectedKey=null },
        removeTransition(edge){ this.transitions=this.transitions.filter(e=>e._key!==edge._key) },
        outgoing(node){ return this.transitions.filter(e=>e.from_key===node.client_key) }, nodeName(key){ return this.nodes.find(n=>n.client_key===key)?.name||'Nodo eliminado' },
        setStart(node){ this.nodes.forEach(n=>n.is_start=n.client_key===node.client_key) },
        normalizeNode(node){ if(node.node_type!=='action')node.action_type=null; else if(!node.action_type)node.action_type='custom' },
        nodeSubtitle(node){ return node.node_type==='decision'?'Bifurcación':(node.node_type==='end'?'Cierre de ruta':(node.action_type||'Actividad')) },
        nodeClass(node){ const selected=node.client_key===this.selectedKey?' ring-4 ring-primary/20':''; return (node.node_type==='decision'?'border-amber-400 text-amber-800':(node.node_type==='end'?'border-green-500 text-green-800':'border-blue-400 text-slate-800'))+selected },
        startDrag(event,node){ if(this.connectingFrom){this.connectTo(node);return} this.selectedKey=node.client_key; this.dragging={node,startX:event.clientX,startY:event.clientY,originX:Number(node.position_x),originY:Number(node.position_y)}; event.currentTarget.setPointerCapture?.(event.pointerId) },
        moveNode(event){ if(!this.dragging)return; this.dragging.node.position_x=Math.max(10,Math.round((this.dragging.originX+event.clientX-this.dragging.startX)/10)*10);this.dragging.node.position_y=Math.max(10,Math.round((this.dragging.originY+event.clientY-this.dragging.startY)/10)*10) },
        stopDrag(){ this.dragging=null },
        edgeNodes(edge){return {from:this.nodes.find(n=>n.client_key===edge.from_key),to:this.nodes.find(n=>n.client_key===edge.to_key)}},
        edgeGeometry(edge){const {from,to}=this.edgeNodes(edge);if(!from||!to)return null;const forward=Number(to.position_x)>=Number(from.position_x);const x1=Number(from.position_x)+(forward?230:0),y1=Number(from.position_y)+55,x2=Number(to.position_x)+(forward?0:230),y2=Number(to.position_y)+55;const bend=Math.max(70,Math.abs(x2-x1)*.45);return {x1,y1,x2,y2,c1:x1+(forward?bend:-bend),c2:x2+(forward?-bend:bend),forward}},
        edgePath(edge){const g=this.edgeGeometry(edge);return g?`M ${g.x1} ${g.y1} C ${g.c1} ${g.y1}, ${g.c2} ${g.y2}, ${g.x2} ${g.y2}`:''},
        edgeArrow(edge){const g=this.edgeGeometry(edge);if(!g)return '';const base=g.forward?g.x2-13:g.x2+13;return `${g.x2},${g.y2} ${base},${g.y2-8} ${base},${g.y2+8}`},
        edgeLabel(edge){const g=this.edgeGeometry(edge);return g?{x:(g.x1+g.x2)/2,y:(g.y1+g.y2)/2}:{x:0,y:0}},
        edgeLabelWidth(edge){return Math.max(70,Math.min(190,String(edge.label||'Continuar').length*7+24))},
        prepareSubmit(){ this.$refs.diagram.value=JSON.stringify({nodes:this.nodes,transitions:this.transitions.map(({_key,...edge})=>edge)}) }
    }
}
</script>
@endsection