@extends('layouts.app', ['title' => term('nav_workflows','Workflows / Automatizaciones')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-workflow"><i class="fa-solid fa-bolt"></i>Nuevo workflow</button>
@endsection

@section('content')
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-bolt"></i><div class="metric-val text-gold">{{ $workflows->count() }}</div><div class="metric-label">Workflows</div></div>
    <div class="metric"><i class="fa-solid fa-toggle-on"></i><div class="metric-val text-success">{{ $workflows->where('is_active', true)->count() }}</div><div class="metric-label">Activos</div></div>
    <div class="metric"><i class="fa-solid fa-rotate"></i><div class="metric-val">{{ $workflows->sum('runs_count') }}</div><div class="metric-label">Ejecuciones</div></div>
    <div class="metric"><i class="fa-solid fa-clock"></i><div class="metric-val" style="font-size:16px">{{ $workflows->max('last_run_at')?->diffForHumans() ?? 'Nunca' }}</div><div class="metric-label">Ultimo</div></div>
</div>

<div class="grid g2">
@forelse($workflows as $wf)
    <div class="card">
        <div class="card-head">
            <div>
                <div class="card-title"><i class="fa-solid fa-bolt text-gold"></i> {{ $wf->name }}</div>
                <div class="sub">{{ $wf->description ?: 'Sin descripcion' }}</div>
            </div>
            <span class="badge {{ $wf->is_active ? 'green' : 'gray' }}">{{ $wf->is_active ? 'Activo' : 'Pausado' }}</span>
        </div>
        <div class="card-body">
            <div class="row">
                <span class="pill blue"><i class="fa-solid fa-circle-play"></i> Trigger: {{ $triggers[$wf->trigger_event] ?? $wf->trigger_event }}</span>
                <span class="pill"><i class="fa-solid fa-list-check"></i> {{ count($wf->actions ?? []) }} acciones</span>
                <span class="pill"><i class="fa-solid fa-rotate"></i> {{ $wf->runs_count }} ejecutadas</span>
            </div>
            @if(! empty($wf->actions))
                <div style="margin-top:10px;display:flex;flex-direction:column;gap:6px">
                    @foreach($wf->actions as $i => $action)
                        <div style="background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.18);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--muted)">
                            <strong style="color:var(--gold)">{{ $i + 1 }}.</strong> {{ $actions[$action['type']] ?? $action['type'] }}
                            @if(! empty($action['params']))
                                <span style="font-family:var(--mono);font-size:11px;color:var(--soft);margin-left:6px">{{ json_encode($action['params'], JSON_UNESCAPED_UNICODE) }}</span>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
            <div class="row between" style="margin-top:12px;align-items:center;gap:6px">
                <form method="post" action="{{ route('workflows.toggle', $wf) }}" style="flex:1">@csrf @method('PATCH')<button class="btn btn-sm" type="submit" style="width:100%"><i class="fa-solid fa-toggle-{{ $wf->is_active ? 'on' : 'off' }}"></i>{{ $wf->is_active ? 'Pausar workflow' : 'Activar workflow' }}</button></form>
                <div class="kebab">
                    <button class="kebab-trigger" type="button" data-kebab data-tip="Más"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                    <div class="kebab-menu">
                        <form method="post" action="{{ route('workflows.destroy', $wf) }}" onsubmit="return confirm('¿Eliminar workflow?')">@csrf @method('DELETE')<button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar workflow</button></form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@empty
    <div class="card" style="grid-column:1/-1">
        <div style="text-align:center;padding:40px">
            <i class="fa-solid fa-bolt text-gold" style="font-size:48px;opacity:.4"></i>
            <h3 style="margin:12px 0 6px;font-family:var(--display)">Aun no tienes workflows</h3>
            <div class="sub" style="margin-bottom:18px">Crea reglas como: cuando llegue un lead, asignar asesor y notificar; cuando un cliente cierre, programar contrato; cuando una cuenta venza, recordar al asesor.</div>
            <button class="btn btn-primary" type="button" data-modal-open="modal-add-workflow"><i class="fa-solid fa-bolt"></i>Crear mi primer workflow</button>
        </div>
    </div>
@endforelse
</div>
@endsection

@section('modals')
<div class="modal-backdrop" id="modal-add-workflow">
    <div class="modal wide">
        <div class="modal-head"><h3><i class="fa-solid fa-bolt text-gold"></i> Nuevo workflow</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('workflows.store') }}" id="form-workflow">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre *<input name="name" required placeholder="Ej. Asignar asesor a nuevos leads"></label>
                    <label>Disparador (Trigger) *
                        <select name="trigger_event" required>
                            @foreach($triggers as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label style="grid-column:1/-1">Descripcion<textarea name="description" rows="2" placeholder="Que hace este workflow"></textarea></label>
                </div>

                <div style="margin-top:18px;padding:14px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.18);border-radius:12px">
                    <div class="row between" style="margin-bottom:10px">
                        <strong style="font-family:var(--display);font-size:15px">Acciones a ejecutar</strong>
                        <button type="button" class="btn btn-sm btn-primary" onclick="wfAddAction()"><i class="fa-solid fa-plus"></i>Agregar accion</button>
                    </div>
                    <div id="wf-actions" class="stack"></div>
                    <div class="sub" id="wf-empty" style="text-align:center;padding:14px">Agrega al menos una accion para guardar el workflow.</div>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit" id="wf-submit" disabled><i class="fa-solid fa-bolt"></i>Activar workflow</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
const WF_ACTIONS = @json($actions);

// Plantillas de parametros sugeridos por tipo de accion
const WF_PARAM_HINTS = {
    'create_task':     {title:'Seguir lead', priority:'Alta', due_in_days:1, notes:''},
    'send_reminder':   {title:'Recordatorio auto', type:'Pago', in_minutes:60, notify_to:'Solo yo', message:'Hola {{cliente}}...'},
    'send_notification': {title:'Evento detectado', body:'Detalle del evento', icon:'fa-bolt', color:'#c9a84c'},
    'send_whatsapp':   {to:'{{client.phone}}', message:'Hola, te contactamos por {{evento}}'},
    'change_status':   {status:'Calificado'},
    'assign_advisor':  {advisor_id:''},
    'log_activity':    {note:'Accion automatica'}
};

let wfCounter = 0;

function wfAddAction() {
    wfCounter++;
    const id = wfCounter;
    const firstType = Object.keys(WF_ACTIONS)[0];
    const wrapper = document.createElement('div');
    wrapper.className = 'card';
    wrapper.dataset.actionRow = id;
    wrapper.style.cssText = 'background:#ffffff;padding:12px;margin:0';
    wrapper.innerHTML = `
        <div class="row between" style="margin-bottom:8px;gap:8px;align-items:center">
            <span class="pill gold"><i class="fa-solid fa-hashtag"></i> Accion <span class="wf-idx"></span></span>
            <select name="actions[${id}][type]" onchange="wfUpdateHint(${id}, this.value)" style="flex:1;max-width:280px">
                ${Object.entries(WF_ACTIONS).map(([k,v])=>`<option value="${k}">${v}</option>`).join('')}
            </select>
            <button type="button" class="btn btn-sm btn-danger" onclick="wfRemoveAction(${id})"><i class="fa-solid fa-trash"></i></button>
        </div>
        <label style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:11px">Parametros (JSON)
            <textarea name="actions[${id}][params_json]" rows="3" style="font-family:var(--mono);font-size:12px;padding:8px" placeholder='{"key":"value"}'></textarea>
        </label>
        <div class="sub" style="margin-top:4px;font-size:11px"><i class="fa-solid fa-circle-info"></i> <span class="wf-hint">Variables disponibles: {{cliente}}, {{asesor}}, {{evento}}</span></div>
    `;
    document.getElementById('wf-actions').appendChild(wrapper);

    // Sugerencia inicial
    wfUpdateHint(id, firstType);
    wfRenumber();
}

function wfUpdateHint(id, type) {
    const row = document.querySelector(`[data-action-row="${id}"]`);
    if (!row) return;
    const ta = row.querySelector('textarea');
    const hint = WF_PARAM_HINTS[type];
    if (hint && (!ta.value || ta.value === '{}')) {
        ta.value = JSON.stringify(hint, null, 2);
    }
}

function wfRemoveAction(id) {
    const row = document.querySelector(`[data-action-row="${id}"]`);
    if (row) row.remove();
    wfRenumber();
}

function wfRenumber() {
    const rows = document.querySelectorAll('[data-action-row]');
    rows.forEach((r, i) => r.querySelector('.wf-idx').textContent = (i + 1));
    document.getElementById('wf-empty').style.display = rows.length ? 'none' : 'block';
    document.getElementById('wf-submit').disabled = rows.length === 0;
}

// Antes del submit, convertir params_json a inputs actions[i][params][k]
document.getElementById('form-workflow')?.addEventListener('submit', function(e) {
    const rows = document.querySelectorAll('[data-action-row]');
    if (!rows.length) {
        e.preventDefault();
        toast('Agrega al menos una accion', 'bad');
        return;
    }

    // Reindexar a 0..N y crear hidden inputs para params parseados
    const container = document.getElementById('wf-actions');
    // Limpiar hidden previos
    container.querySelectorAll('.wf-hidden').forEach(el => el.remove());

    let valid = true;
    rows.forEach((row, idx) => {
        const select = row.querySelector('select');
        const ta = row.querySelector('textarea');
        // Renombrar a indice limpio
        select.name = `actions[${idx}][type]`;
        ta.name = `_wf_ignore_${idx}`; // no enviar el JSON crudo

        let params = {};
        if (ta.value.trim()) {
            try {
                params = JSON.parse(ta.value);
            } catch (err) {
                toast(`Accion ${idx + 1}: JSON invalido — ${err.message}`, 'bad');
                ta.style.borderColor = 'var(--danger)';
                valid = false;
                return;
            }
        }
        ta.style.borderColor = '';

        // Crear hidden inputs por cada key
        Object.entries(params).forEach(([k, v]) => {
            const inp = document.createElement('input');
            inp.type = 'hidden';
            inp.className = 'wf-hidden';
            inp.name = `actions[${idx}][params][${k}]`;
            inp.value = typeof v === 'object' ? JSON.stringify(v) : v;
            container.appendChild(inp);
        });
    });

    if (!valid) {
        e.preventDefault();
        return;
    }
});
</script>
@endpush