{% extends "base.html" %}
{% block title %}Admin — Pipeline Workflow{% endblock %}

{% block head %}
<style>
/* ═══ Pipeline Animations ═══ */
@keyframes flowDash { to { stroke-dashoffset: -20; } }
@keyframes flowParticle { 0% { offset-distance: 0%; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { offset-distance: 100%; opacity:0; } }
@keyframes pulseGlow { 0%,100% { filter: drop-shadow(0 0 3px currentColor); } 50% { filter: drop-shadow(0 0 10px currentColor); } }
@keyframes nodeBreath { 0%,100% { box-shadow: 0 0 0 0 rgba(6,182,212,0); } 50% { box-shadow: 0 0 20px 2px rgba(6,182,212,0.15); } }
@keyframes progressShine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes completePop { 0% { transform: scale(0.95); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes gridFade { 0%,100% { opacity:0.03; } 50% { opacity:0.06; } }
@keyframes particleTrail {
    0%   { offset-distance: 0%;   opacity:0; r:2; }
    5%   { opacity:0.9; }
    50%  { r:3; }
    95%  { opacity:0.9; }
    100% { offset-distance: 100%; opacity:0; r:2; }
}

.flow-line-idle { stroke-dasharray: 8 6; stroke-dashoffset: 0; }
.flow-line-running { stroke-dasharray: 8 6; animation: flowDash 0.6s linear infinite; }
.flow-line-done { stroke-dasharray: none; }

.node-running { animation: nodeBreath 2s ease-in-out infinite; }
.node-complete { animation: completePop 0.4s ease-out; }

.progress-shine {
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: progressShine 1.5s ease-in-out infinite;
}

/* Particle on path */
.svg-particle {
    offset-rotate: 0deg;
    animation: particleTrail 1.8s linear infinite;
}
.svg-particle:nth-child(2) { animation-delay: 0.6s; }
.svg-particle:nth-child(3) { animation-delay: 1.2s; }

/* Animated arrow pulse */
@keyframes arrowPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
@keyframes arrowGlow {
    0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
    50% { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor); }
}
.arrow-marker-running { animation: arrowPulse 1s ease-in-out infinite; }
.arrow-marker-done { filter: drop-shadow(0 0 4px #34d399); }

/* Grid background */
.pipeline-grid {
    background-image:
        linear-gradient(rgba(75,85,99,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,85,99,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Step icon glow */
.step-icon-running { animation: pulseGlow 2s ease-in-out infinite; color: #22d3ee; }
.step-icon-done { color: #34d399; }
.step-icon-error { color: #f87171; }
</style>
{% endblock %}

{% block content %}
<div x-data="workflowPanel()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-3">
                <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-cyan-500 to-koin-600 flex items-center justify-center shadow-lg shadow-cyan-900/30">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                </div>
                Pipeline Workflow
            </h1>
            <p class="mt-1 text-sm text-gray-400 ml-12">Eksekusi data pipeline: Sync → Scans → Recommendations</p>
        </div>
        <div class="flex items-center gap-3">
            <!-- Elapsed timer badge -->
            <div x-show="elapsed > 0" x-cloak
                 class="flex items-center gap-1.5 px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-full">
                <div class="w-2 h-2 rounded-full" :class="pipelineRunning ? 'bg-cyan-400 animate-pulse' : 'bg-emerald-400'"></div>
                <span class="text-xs font-mono text-gray-300" x-text="formatElapsed(elapsed)"></span>
            </div>
            <button @click="resetAll()" :disabled="pipelineRunning"
                    class="px-3 py-1.5 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition disabled:opacity-30 border border-gray-700">
                <svg class="w-3.5 h-3.5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                Reset
            </button>
        </div>
    </div>

    <!-- Execution Mode + Params Card -->
    <div class="bg-gray-900/80 backdrop-blur border border-gray-800 rounded-xl p-5">
        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
            <div class="flex-1">
                <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Mode Eksekusi</h2>
                <div class="flex gap-2">
                    <template x-for="m in [{id:'all',label:'Semua Saham',icon:'🌐'},{id:'single',label:'Satu Saham',icon:'🎯'},{id:'multi',label:'Multi Saham',icon:'📋'}]" :key="m.id">
                        <button @click="mode = m.id; if(m.id==='all') selectedCoins=[]"
                                :class="mode === m.id ? 'bg-gradient-to-r from-koin-600 to-cyan-600 text-white shadow-lg shadow-koin-900/20 border-transparent' : 'bg-gray-800/80 text-gray-400 hover:bg-gray-700 border-gray-700'"
                                class="px-4 py-2 text-sm font-medium rounded-lg transition-all border" x-text="m.icon + ' ' + m.label"
                                :disabled="pipelineRunning"></button>
                    </template>
                </div>
            </div>
            <!-- Coin Selector -->
            <div x-show="mode !== 'all'" x-cloak class="flex-1 relative" @click.outside="searchResults=[]">
                <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider block mb-1">Pilih Saham</label>
                <div class="relative">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    <input type="text" x-model="searchQuery" @input.debounce.300ms="searchCoins()"
                           @focus="if(searchQuery.length>=1) searchCoins()"
                           :placeholder="mode === 'single' ? 'Cari 1 saham...' : 'Cari & tambahkan...'"
                           class="w-full bg-gray-800 border border-gray-700 rounded-lg pl-9 pr-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-cyan-500 focus:border-cyan-500"
                           :disabled="pipelineRunning || (mode === 'single' && selectedCoins.length >= 1)">
                </div>
                <div x-show="searchResults.length > 0" x-cloak
                     class="absolute top-full left-0 right-0 mt-1 bg-gray-800 border border-gray-700 rounded-lg shadow-xl z-50 max-h-60 overflow-y-auto">
                    <template x-for="coin in searchResults" :key="coin.id">
                        <button @click="addCoin(coin)" class="w-full flex items-center gap-2 px-3 py-2 hover:bg-gray-700 transition text-sm text-left">
                            <span class="w-5 h-5 rounded-full bg-gray-700 flex items-center justify-center text-[10px] text-gray-400 flex-shrink-0" x-text="(coin.symbol||'?')[0]"></span>
                            <span class="text-white truncate" x-text="coin.name"></span>
                            <span class="text-gray-500 text-xs flex-shrink-0" x-text="coin.symbol"></span>
                        </button>
                    </template>
                </div>
                <div class="flex flex-wrap gap-1.5 mt-2" x-show="selectedCoins.length > 0">
                    <template x-for="(c, i) in selectedCoins" :key="c.id">
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-cyan-900/30 text-cyan-300 border border-cyan-800/40 rounded-full text-xs">
                            <span x-text="c.symbol || c.name"></span>
                            <button @click="selectedCoins.splice(i,1)" class="hover:text-white ml-0.5" :disabled="pipelineRunning">&times;</button>
                        </span>
                    </template>
                </div>
            </div>
        </div>
        <!-- Parameters -->
        <div class="flex flex-wrap gap-6 mt-4 pt-4 border-t border-gray-800/50">
            <div>
                <label class="text-[10px] font-semibold text-gray-500 uppercase tracking-wider block mb-1.5">Cycle Mode</label>
                <div class="flex gap-1">
                    <template x-for="m in ['agresif','moderate','santai']" :key="m">
                        <button @click="params.cycleMode = m"
                                :class="params.cycleMode === m ? 'bg-koin-700/80 text-white border-koin-600' : 'bg-gray-800 text-gray-400 border-gray-700'"
                                class="px-3 py-1 text-xs rounded-lg transition border" x-text="m" :disabled="pipelineRunning"></button>
                    </template>
                </div>
            </div>
            <div>
                <label class="text-[10px] font-semibold text-gray-500 uppercase tracking-wider block mb-1.5">Signal Timeframe</label>
                <div class="flex gap-1">
                    <template x-for="tf in ['1m','15m','30m','1h','4h','1D','1W']" :key="tf">
                        <button @click="params.signalTimeframe = tf"
                                :class="params.signalTimeframe === tf ? 'bg-koin-700/80 text-white border-koin-600' : 'bg-gray-800 text-gray-400 border-gray-700'"
                                class="px-3 py-1 text-xs rounded-lg transition border" x-text="tf" :disabled="pipelineRunning"></button>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- ═══════ FLOWCHART ═══════ -->
    <div class="bg-gray-900/80 backdrop-blur border border-gray-800 rounded-xl p-6 relative overflow-hidden pipeline-grid">
        <!-- Phase indicator bar -->
        <div class="flex items-center justify-between mb-5">
            <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Pipeline DAG</h2>
            <div class="flex items-center gap-1">
                <template x-for="(ph, pi) in ['Sync','Scans','Reco']" :key="pi">
                    <div class="flex items-center">
                        <div class="w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold transition-all duration-500"
                             :class="currentPhase > pi ? 'bg-emerald-500 text-white' : currentPhase === pi ? 'bg-cyan-500 text-white animate-pulse' : 'bg-gray-800 text-gray-500 border border-gray-700'"
                             x-text="pi + 1"></div>
                        <div x-show="pi < 2" class="w-6 h-0.5 transition-colors duration-500" :class="currentPhase > pi ? 'bg-emerald-500' : 'bg-gray-800'"></div>
                    </div>
                </template>
            </div>
        </div>

        <!-- SVG Connectors + Arrows overlay -->
        <svg x-ref="svgOverlay" class="absolute inset-0 w-full h-full pointer-events-none" style="z-index:1;">
            <defs>
                <!-- ═══ Filled Arrow Markers (large, solid) ═══ -->
                <marker id="arrIdle" markerWidth="14" markerHeight="12" refX="12" refY="6" orient="auto" markerUnits="userSpaceOnUse">
                    <path d="M2,2 L12,6 L2,10 L5,6 Z" fill="#4b5563" opacity="0.6"/>
                </marker>
                <marker id="arrRun" markerWidth="16" markerHeight="14" refX="14" refY="7" orient="auto" markerUnits="userSpaceOnUse">
                    <path d="M2,2 L14,7 L2,12 L5,7 Z" fill="#22d3ee" filter="url(#glowCyan)">
                        <animate attributeName="opacity" values="0.7;1;0.7" dur="1s" repeatCount="indefinite"/>
                    </path>
                </marker>
                <marker id="arrDone" markerWidth="16" markerHeight="14" refX="14" refY="7" orient="auto" markerUnits="userSpaceOnUse">
                    <path d="M2,2 L14,7 L2,12 L5,7 Z" fill="#34d399" filter="url(#glowGreen)"/>
                </marker>
                <marker id="arrErr" markerWidth="16" markerHeight="14" refX="14" refY="7" orient="auto" markerUnits="userSpaceOnUse">
                    <path d="M2,2 L14,7 L2,12 L5,7 Z" fill="#f87171" opacity="0.8"/>
                </marker>

                <!-- ═══ Glow Filters ═══ -->
                <filter id="glowCyan" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
                    <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
                <filter id="glowGreen" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
                    <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
                <filter id="glowCyanStrong" x="-100%" y="-100%" width="300%" height="300%">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
                    <feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
            </defs>

            <!-- ═══ Connector Paths + Animated Arrows ═══ -->
            <template x-for="c in connectorPaths" :key="c.id">
                <g>
                    <!-- Layer 1: Wide glow trail (running only) -->
                    <path x-show="c.state === 'running'" :d="c.d" fill="none"
                          stroke="#06b6d4" stroke-width="6" opacity="0.08" filter="url(#glowCyanStrong)"/>

                    <!-- Layer 2: Main connector line -->
                    <path :d="c.d" fill="none"
                          :stroke="c.state==='done'?'#34d399': c.state==='running'?'#06b6d4': c.state==='error'?'#f87171': '#4b5563'"
                          :stroke-width="c.state==='running'?'2.5': c.state==='done'?'2': '1.5'"
                          :stroke-dasharray="c.state==='done'?'none':'8 6'"
                          :class="c.state==='running'?'flow-line-running':'flow-line-idle'"
                          :marker-end="'url(#' + (c.state==='done'?'arrDone': c.state==='running'?'arrRun': c.state==='error'?'arrErr': 'arrIdle') + ')'"
                          :filter="c.state==='running'?'url(#glowCyan)': c.state==='done'?'url(#glowGreen)': 'none'"/>

                    <!-- Layer 3: Traveling arrow shapes when RUNNING (3 staggered small arrows flying along path) -->
                    <template x-if="c.state === 'running'">
                        <g>
                            <!-- Arrow 1 (large, bright) -->
                            <polygon points="-6,-4 6,0 -6,4 -3,0" fill="#22d3ee" opacity="0.95" filter="url(#glowCyan)">
                                <animateMotion :path="c.d" dur="2s" repeatCount="indefinite" begin="0s" rotate="auto"/>
                            </polygon>
                            <!-- Arrow 2 (medium) -->
                            <polygon points="-5,-3 5,0 -5,3 -2.5,0" fill="#22d3ee" opacity="0.7">
                                <animateMotion :path="c.d" dur="2s" repeatCount="indefinite" begin="0.7s" rotate="auto"/>
                            </polygon>
                            <!-- Arrow 3 (small, faint) -->
                            <polygon points="-4,-2.5 4,0 -4,2.5 -2,0" fill="#22d3ee" opacity="0.45">
                                <animateMotion :path="c.d" dur="2s" repeatCount="indefinite" begin="1.3s" rotate="auto"/>
                            </polygon>
                            <!-- Glow dot trailing behind lead arrow -->
                            <circle r="3.5" fill="#22d3ee" opacity="0.3" filter="url(#glowCyanStrong)">
                                <animateMotion :path="c.d" dur="2s" repeatCount="indefinite" begin="0s"/>
                            </circle>
                        </g>
                    </template>

                    <!-- Layer 3b: Slow traveling arrow when DONE (green, gentle) -->
                    <template x-if="c.state === 'done'">
                        <g>
                            <polygon points="-4,-2.5 4,0 -4,2.5 -2,0" fill="#34d399" opacity="0.5" filter="url(#glowGreen)">
                                <animateMotion :path="c.d" dur="4s" repeatCount="indefinite" rotate="auto"/>
                            </polygon>
                            <circle r="2" fill="#34d399" opacity="0.25" filter="url(#glowGreen)">
                                <animateMotion :path="c.d" dur="4s" repeatCount="indefinite"/>
                            </circle>
                        </g>
                    </template>

                    <!-- Layer 3c: Error pulse on path -->
                    <template x-if="c.state === 'error'">
                        <circle r="3" fill="#f87171" opacity="0.5">
                            <animateMotion :path="c.d" dur="1.2s" repeatCount="indefinite"/>
                            <animate attributeName="opacity" values="0.6;0.2;0.6" dur="0.8s" repeatCount="indefinite"/>
                        </circle>
                    </template>
                </g>
            </template>
        </svg>

        <!-- 3-Column Grid -->
        <div class="relative grid grid-cols-1 md:grid-cols-[1fr_2fr_1fr] gap-6 md:gap-10 items-center min-h-[360px]" style="z-index:2;">

            <!-- ── Col 1: Sync ── -->
            <div class="flex items-center justify-center">
                <div x-ref="node_sync" @click="runStep('sync')"
                     class="wf-node w-full max-w-[220px] rounded-2xl border p-5 cursor-pointer transition-all duration-300 hover:scale-[1.03] relative group"
                     :class="nodeClass('sync')">
                    <!-- Running ring -->
                    <div x-show="steps.sync.status==='running'" class="absolute -inset-[2px] rounded-2xl border-2 border-cyan-400/30 animate-ping pointer-events-none" style="animation-duration:2s"></div>
                    <!-- Step number badge -->
                    <div class="absolute -top-2.5 -left-2.5 w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold shadow-lg transition-all"
                         :class="steps.sync.status==='done'?'bg-emerald-500 text-white': steps.sync.status==='running'?'bg-cyan-500 text-white': steps.sync.status==='error'?'bg-red-500 text-white': 'bg-gray-800 text-gray-400 border border-gray-700'">1</div>
                    <div class="flex items-center gap-2.5 mb-2">
                        <div class="w-8 h-8 rounded-lg flex items-center justify-center transition-all"
                             :class="steps.sync.status==='running'?'bg-cyan-900/40': steps.sync.status==='done'?'bg-emerald-900/40': steps.sync.status==='error'?'bg-red-900/40': 'bg-gray-800/80'">
                            <svg x-show="steps.sync.status==='idle'" class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                            <svg x-show="steps.sync.status==='running'" class="w-4 h-4 text-cyan-400 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                            <svg x-show="steps.sync.status==='done'" class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                            <svg x-show="steps.sync.status==='error'" class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </div>
                        <div>
                            <span class="font-semibold text-sm block leading-tight">Sync Data</span>
                            <span class="text-[10px] text-gray-500">OHLCV + Profile</span>
                        </div>
                    </div>
                    <!-- Progress -->
                    <div x-show="steps.sync.status==='running'" x-cloak class="mt-2">
                        <div class="w-full bg-gray-800 rounded-full h-1.5 overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-cyan-500 to-cyan-300 rounded-full transition-all duration-300 progress-shine" :style="'width:'+steps.sync.progress+'%'"></div>
                        </div>
                        <p class="text-[10px] text-cyan-400/70 mt-1 font-mono" x-text="steps.sync.progressText"></p>
                    </div>
                    <p x-show="steps.sync.doneMsg" class="text-[10px] text-emerald-400 mt-1.5" x-text="'✓ ' + steps.sync.doneMsg"></p>
                    <p x-show="steps.sync.errorMsg" class="text-[10px] text-red-400 mt-1.5" x-text="'✗ ' + steps.sync.errorMsg"></p>
                    <!-- Hover hint -->
                    <div class="absolute bottom-1 right-2 text-[9px] text-gray-600 opacity-0 group-hover:opacity-100 transition">click to run</div>
                </div>
            </div>

            <!-- ── Col 2: 4 Parallel Scans ── -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <template x-for="step in scanSteps" :key="step.id">
                    <div :id="'scannode_' + step.id" @click="runStep(step.id)"
                         class="wf-node rounded-2xl border p-4 cursor-pointer transition-all duration-300 hover:scale-[1.03] relative group"
                         :class="nodeClass(step.id)">
                        <div x-show="steps[step.id].status==='running'" class="absolute -inset-[2px] rounded-2xl border-2 border-cyan-400/30 animate-ping pointer-events-none" style="animation-duration:2s"></div>
                        <div class="absolute -top-2.5 -left-2.5 w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold shadow-lg transition-all"
                             :class="steps[step.id].status==='done'?'bg-emerald-500 text-white': steps[step.id].status==='running'?'bg-cyan-500 text-white': steps[step.id].status==='error'?'bg-red-500 text-white': 'bg-gray-800 text-gray-400 border border-gray-700'"
                             x-text="step.num"></div>
                        <div class="flex items-center gap-2 mb-1">
                            <div class="w-7 h-7 rounded-lg flex items-center justify-center text-sm transition-all"
                                 :class="steps[step.id].status==='running'?'bg-cyan-900/40': steps[step.id].status==='done'?'bg-emerald-900/40': steps[step.id].status==='error'?'bg-red-900/40': 'bg-gray-800/80'"
                                 x-text="step.icon"></div>
                            <span class="font-semibold text-xs leading-tight" x-text="step.label"></span>
                        </div>
                        <p class="text-[10px] text-gray-500 ml-9" x-text="step.desc"></p>
                        <div x-show="steps[step.id].status==='running'" x-cloak class="mt-2">
                            <div class="w-full bg-gray-800 rounded-full h-1 overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-cyan-500 to-cyan-300 rounded-full transition-all duration-300 progress-shine" :style="'width:'+steps[step.id].progress+'%'"></div>
                            </div>
                            <p class="text-[9px] text-cyan-400/70 mt-0.5 font-mono" x-text="steps[step.id].progressText"></p>
                        </div>
                        <p x-show="steps[step.id].doneMsg" class="text-[10px] text-emerald-400 mt-1 ml-9" x-text="'✓ ' + steps[step.id].doneMsg"></p>
                        <p x-show="steps[step.id].errorMsg" class="text-[10px] text-red-400 mt-1 ml-9" x-text="'✗ ' + steps[step.id].errorMsg"></p>
                        <div class="absolute bottom-1 right-2 text-[8px] text-gray-600 opacity-0 group-hover:opacity-100 transition">click to run</div>
                    </div>
                </template>
            </div>

            <!-- ── Col 3: Recommendations ── -->
            <div class="flex items-center justify-center">
                <div x-ref="node_recommendations" @click="runStep('recommendations')"
                     class="wf-node w-full max-w-[220px] rounded-2xl border p-5 cursor-pointer transition-all duration-300 hover:scale-[1.03] relative group"
                     :class="nodeClass('recommendations')">
                    <div x-show="steps.recommendations.status==='running'" class="absolute -inset-[2px] rounded-2xl border-2 border-cyan-400/30 animate-ping pointer-events-none" style="animation-duration:2s"></div>
                    <div class="absolute -top-2.5 -left-2.5 w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold shadow-lg transition-all"
                         :class="steps.recommendations.status==='done'?'bg-emerald-500 text-white': steps.recommendations.status==='running'?'bg-cyan-500 text-white': steps.recommendations.status==='error'?'bg-red-500 text-white': 'bg-gray-800 text-gray-400 border border-gray-700'">6</div>
                    <div class="flex items-center gap-2.5 mb-2">
                        <div class="w-8 h-8 rounded-lg flex items-center justify-center text-base transition-all"
                             :class="steps.recommendations.status==='running'?'bg-cyan-900/40': steps.recommendations.status==='done'?'bg-emerald-900/40': steps.recommendations.status==='error'?'bg-red-900/40': 'bg-gray-800/80'">🏆</div>
                        <div>
                            <span class="font-semibold text-sm block leading-tight">Buy Reco</span>
                            <span class="text-[10px] text-gray-500">Final Output</span>
                        </div>
                    </div>
                    <div x-show="steps.recommendations.status==='running'" x-cloak class="mt-2 w-full bg-gray-800 rounded-full h-1.5 overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-cyan-500 to-cyan-300 rounded-full w-full progress-shine"></div>
                    </div>
                    <p x-show="steps.recommendations.doneMsg" class="text-[10px] text-emerald-400 mt-1.5" x-text="'✓ ' + steps.recommendations.doneMsg"></p>
                    <p x-show="steps.recommendations.errorMsg" class="text-[10px] text-red-400 mt-1.5" x-text="'✗ ' + steps.recommendations.errorMsg"></p>
                    <div class="absolute bottom-1 right-2 text-[9px] text-gray-600 opacity-0 group-hover:opacity-100 transition">click to run</div>
                </div>
            </div>
        </div>

        <!-- Legend -->
        <div class="relative flex flex-wrap items-center gap-x-5 gap-y-1 mt-5 pt-3 border-t border-gray-800/50 text-[10px] text-gray-600" style="z-index:2;">
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-gray-800 border border-gray-600 inline-block"></span> Idle
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-cyan-500 inline-block animate-pulse"></span> Running
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-emerald-500 inline-block"></span> Done
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-red-500 inline-block"></span> Error
            </span>
            <span class="ml-auto">Steps 2-5 run in parallel • Klik node untuk run individual</span>
        </div>
    </div>

    <!-- Run All Button -->
    <div class="flex items-center gap-3">
        <button @click="runAll()" :disabled="pipelineRunning || (mode !== 'all' && selectedCoins.length === 0)"
                class="group px-7 py-3 text-sm font-semibold rounded-xl transition-all disabled:opacity-30 relative overflow-hidden"
                :class="pipelineRunning ? 'bg-gray-700 text-gray-400' : 'bg-gradient-to-r from-koin-600 via-cyan-600 to-koin-600 bg-[length:200%_100%] hover:bg-right text-white shadow-lg shadow-cyan-900/30'">
            <span x-show="!pipelineRunning" class="flex items-center gap-2 relative z-10">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Run All Pipeline
            </span>
            <span x-show="pipelineRunning" class="flex items-center gap-2">
                <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                Pipeline Running...
            </span>
        </button>
        <span x-show="mode !== 'all' && selectedCoins.length === 0 && !pipelineRunning" class="text-xs text-amber-400">
            ⚠ Pilih minimal 1 saham untuk mode ini
        </span>
    </div>

    <!-- Pipeline Log -->
    <div x-show="pipelineLog.length > 0" x-cloak class="bg-gray-900/80 backdrop-blur border border-gray-800 rounded-xl p-4">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                Pipeline Log
                <span class="text-[10px] font-normal text-gray-600" x-text="'(' + pipelineLog.length + ' entries)'"></span>
            </h3>
            <button @click="pipelineLog = []" class="text-xs text-gray-600 hover:text-gray-400 transition">Clear</button>
        </div>
        <div class="bg-gray-950/80 border border-gray-800 rounded-lg p-3 max-h-60 overflow-y-auto font-mono text-[11px] space-y-0.5 scroll-smooth" x-ref="logPanel">
            <template x-for="(line, i) in pipelineLog" :key="i">
                <div class="py-0.5 px-1 rounded hover:bg-gray-900/50 transition-colors" :class="{
                    'text-emerald-400': line.includes('[done]') || line.includes('[complete]'),
                    'text-red-400': line.includes('[error]') || line.includes('[fail]'),
                    'text-amber-400': line.includes('[warn]') || line.includes('[skip]'),
                    'text-cyan-300 font-semibold': line.includes('[phase]'),
                    'text-cyan-500': line.includes('[start]') && !line.includes('[phase]'),
                    'text-gray-500': !line.includes('[done]') && !line.includes('[complete]') && !line.includes('[error]') && !line.includes('[fail]') && !line.includes('[warn]') && !line.includes('[skip]') && !line.includes('[start]') && !line.includes('[phase]')
                }" x-text="line"></div>
            </template>
        </div>
    </div>
</div>

<script>
function workflowPanel() {
    const _step = () => ({ status: 'idle', progress: 0, progressText: '', doneMsg: '', errorMsg: '' });

    return {
        mode: 'all',
        selectedCoins: [],
        searchQuery: '',
        searchResults: [],
        params: { cycleMode: 'agresif', signalTimeframe: '1D' },
        steps: {
            sync: _step(), range_trading: _step(), cycles: _step(),
            bullish: _step(), signals: _step(), recommendations: _step(),
        },
        pipelineRunning: false,
        pipelineLog: [],
        elapsed: 0,
        _timer: null,
        connectorPaths: [],
        currentPhase: -1,

        scanSteps: [
            { id:'range_trading', num:'2', label:'Range Trading', desc:'Oscillation & mean-reversion', icon:'📊' },
            { id:'cycles', num:'3', label:'Cycle Frequency', desc:'Adaptive S/R & cycle detect', icon:'🔄' },
            { id:'bullish', num:'4', label:'Bullish Momentum', desc:'Early breakout detection', icon:'🚀' },
            { id:'signals', num:'5', label:'ML Signals', desc:'31 algo + ensemble ML', icon:'🤖' },
        ],

        init() {
            const params = new URLSearchParams(window.location.search);
            const coinId = params.get('coin');
            const coinName = params.get('name');
            const coinSymbol = params.get('symbol');
            if (coinId) {
                this.mode = 'single';
                this.selectedCoins = [{ id: coinId, name: coinName || coinId, symbol: coinSymbol || '' }];
            }
            this.$nextTick(() => setTimeout(() => this.drawConnectors(), 200));
            window.addEventListener('resize', () => this.drawConnectors());

            // Watch for status changes to redraw connectors with new colors
            this.$watch('steps', () => this._updateConnectorStates(), { deep: true });
        },

        // ─── Coin Search ───────────────────────────
        async searchCoins() {
            if (this.searchQuery.length < 1) { this.searchResults = []; return; }
            try {
                const res = await fetch(`/api/v1/market/search?q=${encodeURIComponent(this.searchQuery)}`);
                if (res.redirected) { window.location.href = '/auth/login'; return; }
                const data = await res.json();
                this.searchResults = (data.results || data || []).slice(0, 10);
            } catch (e) { this.searchResults = []; }
        },

        addCoin(coin) {
            if (this.mode === 'single') { this.selectedCoins = [coin]; }
            else if (!this.selectedCoins.find(c => c.id === coin.id)) { this.selectedCoins.push(coin); }
            this.searchQuery = '';
            this.searchResults = [];
        },

        // ─── SVG Curved Connectors ────────────────
        drawConnectors() {
            if (window.innerWidth < 768) { this.connectorPaths = []; return; }
            const svg = this.$refs.svgOverlay;
            if (!svg) return;
            const svgRect = svg.getBoundingClientRect();

            const rel = (el) => {
                if (!el) return null;
                const r = el.getBoundingClientRect();
                return { l: r.left - svgRect.left, r: r.right - svgRect.left,
                         cx: r.left - svgRect.left + r.width/2, cy: r.top - svgRect.top + r.height/2,
                         t: r.top - svgRect.top, b: r.bottom - svgRect.top };
            };

            const syncPos = rel(this.$refs.node_sync);
            const recoPos = rel(this.$refs.node_recommendations);
            const scanIds = ['range_trading', 'cycles', 'bullish', 'signals'];

            if (!syncPos || !recoPos) return;

            const paths = [];
            const scanNodes = this.$el.querySelectorAll('[id^="scannode_"]');

            scanNodes.forEach((el, idx) => {
                const id = scanIds[idx];
                if (!id) return;
                const s = rel(el);
                if (!s) return;

                // Gap so arrowhead sits outside the node border
                const arrowGap = 16;

                // Curved bezier: Sync → Scan (start from sync right edge, end near scan left edge)
                const startX1 = syncPos.r;
                const endX1 = s.l - arrowGap;
                const cpx1 = startX1 + (endX1 - startX1) * 0.5;
                paths.push({
                    id: `sync_${id}`,
                    d: `M${startX1},${syncPos.cy} C${cpx1},${syncPos.cy} ${cpx1},${s.cy} ${endX1},${s.cy}`,
                    from: 'sync', to: id,
                    state: this._connectorState('sync', id),
                });

                // Curved bezier: Scan → Reco (start from scan right edge, end near reco left edge)
                const startX2 = s.r;
                const endX2 = recoPos.l - arrowGap;
                const cpx2 = startX2 + (endX2 - startX2) * 0.5;
                paths.push({
                    id: `${id}_reco`,
                    d: `M${startX2},${s.cy} C${cpx2},${s.cy} ${cpx2},${recoPos.cy} ${endX2},${recoPos.cy}`,
                    from: id, to: 'recommendations',
                    state: this._connectorState(id, 'recommendations'),
                });
            });

            this.connectorPaths = paths;
        },

        _connectorState(fromId, toId) {
            const fromS = this.steps[fromId]?.status;
            const toS = this.steps[toId]?.status;
            if (fromS === 'error' || toS === 'error') return 'error';
            if (toS === 'running') return 'running';
            if (fromS === 'done' && toS === 'done') return 'done';
            if (fromS === 'done' || fromS === 'running') return 'running';
            return 'idle';
        },

        _updateConnectorStates() {
            this.connectorPaths = this.connectorPaths.map(c => ({
                ...c, state: this._connectorState(c.from, c.to),
            }));
        },

        // ─── Node Styling ──────────────────────────
        nodeClass(id) {
            const s = this.steps[id]?.status || 'idle';
            const base = {
                'border-gray-700/60 bg-gray-900/60': s === 'idle',
                'border-cyan-500/60 bg-cyan-950/20 shadow-lg shadow-cyan-900/20 node-running': s === 'running',
                'border-emerald-500/60 bg-emerald-950/20 shadow-md shadow-emerald-900/10 node-complete': s === 'done',
                'border-red-500/60 bg-red-950/20 shadow-md shadow-red-900/10': s === 'error',
            };
            return base;
        },

        // ─── Step Execution ────────────────────────
        async runStep(id) {
            if (this.steps[id].status === 'running') return;
            if (this.mode !== 'all' && this.selectedCoins.length === 0) {
                this.addLog('[warn] Pilih minimal 1 saham dulu'); return;
            }
            const deps = {
                sync: [], range_trading: ['sync'], cycles: ['sync'],
                bullish: ['sync'], signals: ['sync'],
                recommendations: ['range_trading', 'cycles', 'bullish', 'signals'],
            };
            for (const dep of deps[id] || []) {
                if (this.steps[dep].status !== 'done') {
                    this.addLog(`[warn] ${id}: dependency "${dep}" belum selesai`); return;
                }
            }
            if (id === 'recommendations') await this._runRecommendations();
            else if (id === 'sync') await this._runSync();
            else await this._runScan(id);
        },

        // ─── Run All Pipeline ──────────────────────
        async runAll() {
            if (this.pipelineRunning) return;
            if (this.mode !== 'all' && this.selectedCoins.length === 0) {
                this.addLog('[warn] Pilih minimal 1 saham dulu'); return;
            }
            this.pipelineRunning = true;
            this.elapsed = 0;
            this._timer = setInterval(() => this.elapsed++, 1000);

            this.addLog('[phase] ══════ Pipeline Started ══════');

            // Phase 1
            this.currentPhase = 0;
            this.addLog('[phase] Phase 1/3: Sync Data');
            await this._runSync();
            if (this.steps.sync.status !== 'done') {
                this.addLog('[error] Sync gagal — pipeline dihentikan');
                this.currentPhase = -1; this._stopTimer(); return;
            }

            // Phase 2
            this.currentPhase = 1;
            this.addLog('[phase] Phase 2/3: Parallel Scans (4 scan)');
            await Promise.all([
                this._runScan('range_trading'), this._runScan('cycles'),
                this._runScan('bullish'), this._runScan('signals'),
            ]);
            const fails = ['range_trading','cycles','bullish','signals'].filter(id => this.steps[id].status === 'error');
            if (fails.length) this.addLog(`[warn] ${fails.length} scan gagal: ${fails.join(', ')}`);

            // Phase 3
            this.currentPhase = 2;
            this.addLog('[phase] Phase 3/3: Generate Recommendations');
            await this._runRecommendations();

            this.currentPhase = 3;
            this.addLog('[phase] ══════ Pipeline Complete ══════');
            this._stopTimer();
        },

        _runSync() {
            return new Promise((resolve) => {
                this._resetStep('sync');
                this.steps.sync.status = 'running';
                let url, body;
                if (this.mode === 'single' && this.selectedCoins.length === 1) {
                    url = `/api/v1/market/asset/${this.selectedCoins[0].id}/sync/full`; body = {};
                } else {
                    url = '/api/v1/market/sync/batch';
                    body = this.mode === 'all' ? {} : { asset_ids: this.selectedCoins.map(c => c.id) };
                }
                this.addLog(`[start] sync → ${url}`);
                this._streamSSE('sync', url, body, () => resolve());
            });
        },

        _runScan(id) {
            return new Promise((resolve) => {
                this._resetStep(id);
                this.steps[id].status = 'running';
                const urlMap = { range_trading: '/api/v1/market/screener/range-trading/scan', cycles: '/api/v1/market/screener/range-trading/scan-cycles', bullish: '/api/v1/market/screener/early-bullish/scan', signals: '/api/v1/market/screener/signals/scan' };
                const bodyMap = { range_trading: {}, cycles: { mode: this.params.cycleMode }, bullish: {}, signals: { timeframe: this.params.signalTimeframe } };
                let body = { ...bodyMap[id] };
                if (this.mode !== 'all' && this.selectedCoins.length > 0) body.asset_ids = this.selectedCoins.map(c => c.id);
                this.addLog(`[start] ${id} scan`);
                this._streamSSE(id, urlMap[id], body, () => resolve());
            });
        },

        async _runRecommendations() {
            this._resetStep('recommendations');
            this.steps.recommendations.status = 'running';
            this.addLog('[start] recommendations');
            try {
                const res = await fetch('/api/v1/market/recommendations/buy');
                if (res.redirected) { window.location.href = '/auth/login'; return; }
                const data = await res.json();
                if (data.ok || data.recommendations) {
                    const count = data.recommendations?.length || data.total || 0;
                    this.steps.recommendations.status = 'done';
                    this.steps.recommendations.doneMsg = `${count} recommendations`;
                    this.addLog(`[done] recommendations: ${count} items`);
                } else {
                    this.steps.recommendations.status = 'error';
                    this.steps.recommendations.errorMsg = data.error || 'Unknown error';
                    this.addLog(`[error] recommendations: ${data.error || 'failed'}`);
                }
            } catch (e) {
                this.steps.recommendations.status = 'error';
                this.steps.recommendations.errorMsg = e.message;
                this.addLog(`[error] recommendations: ${e.message}`);
            }
        },

        _streamSSE(stepId, url, body, onDone) {
            fetch(url, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body) })
            .then(response => {
                if (response.redirected) { window.location.href = '/auth/login'; return; }
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';
                const read = () => {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            if (this.steps[stepId].status === 'running') { this.steps[stepId].status = 'done'; this.addLog(`[complete] ${stepId} finished`); }
                            if (onDone) onDone(); return;
                        }
                        buffer += decoder.decode(value, { stream: true });
                        const lines = buffer.split('\n'); buffer = lines.pop();
                        for (const line of lines) {
                            if (line.startsWith('data: ')) { try { this._handleSSEEvent(stepId, JSON.parse(line.slice(6))); } catch(e){} }
                        }
                        read();
                    }).catch(err => { this.steps[stepId].status = 'error'; this.steps[stepId].errorMsg = err.message; this.addLog(`[error] ${stepId}: ${err.message}`); if(onDone)onDone(); });
                };
                read();
            }).catch(err => { this.steps[stepId].status = 'error'; this.steps[stepId].errorMsg = err.message; this.addLog(`[error] ${stepId}: ${err.message}`); if(onDone)onDone(); });
        },

        _handleSSEEvent(stepId, evt) {
            const processed = evt.processed || evt.current || evt.step || 0;
            const total = evt.total || evt.total_steps || 0;
            if (evt.type === 'start') { this.steps[stepId].progress = 0; this.steps[stepId].progressText = `0/${total}`; }
            else if (['progress','scored','skip','step'].includes(evt.type)) {
                const pct = total > 0 ? Math.round((processed/total)*100) : 0;
                this.steps[stepId].progress = pct;
                this.steps[stepId].progressText = `${pct}% (${processed}/${total})`;
            } else if (evt.type === 'done' || evt.type === 'complete') {
                this.steps[stepId].status = 'done'; this.steps[stepId].progress = 100;
                const msg = evt.message || evt.msg || `${evt.scored||evt.scanned||'?'} processed`;
                this.steps[stepId].doneMsg = msg; this.steps[stepId].progressText = '';
                this.addLog(`[done] ${stepId}: ${msg}`);
            } else if (evt.type === 'error') {
                this.steps[stepId].status = 'error';
                this.steps[stepId].errorMsg = evt.message || evt.error || 'Unknown error';
                this.addLog(`[error] ${stepId}: ${evt.message || evt.error}`);
            }
        },

        _resetStep(id) { this.steps[id] = { status:'idle', progress:0, progressText:'', doneMsg:'', errorMsg:'' }; },

        resetAll() {
            for (const id of Object.keys(this.steps)) this._resetStep(id);
            this.pipelineLog = []; this.elapsed = 0; this.currentPhase = -1; this._stopTimer();
            this.$nextTick(() => this.drawConnectors());
        },

        _stopTimer() { this.pipelineRunning = false; if (this._timer) { clearInterval(this._timer); this._timer = null; } },

        addLog(msg) {
            const ts = new Date().toLocaleTimeString('id-ID');
            this.pipelineLog.unshift(`${ts} ${msg}`);
            if (this.pipelineLog.length > 500) this.pipelineLog.length = 500;
        },

        formatElapsed(sec) { const m = Math.floor(sec/60); const s = sec%60; return m > 0 ? `${m}m ${s}s` : `${s}s`; },
    };
}
</script>
{% endblock %}