@include('admin.devices.partials.monitoring-notice', ['compact' => true])

@php
    $rules = $pageData['rules'];
    $apps = $pageData['apps'];
    $captures = $pageData['captures'];
    $captureGroups = $pageData['capture_groups'];
    $minInterval = $pageData['min_interval'];
    $maxRules = $pageData['max_rules'];
    $maxTemplates = $pageData['max_templates'];
    $defaultThreshold = $pageData['default_threshold'];
    $rulesEditPayload = $rules->mapWithKeys(
        fn ($rule) => [$rule->id => \App\Services\ScreenshotPageService::editPayload($rule, $device)]
    )->all();
@endphp

<div class="space-y-8">
    @if(empty($pageData['accessibility_connected']))
        <div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
            <p class="font-medium">{{ __('devices.screenshots.a11y_required_title') }}</p>
            <p class="mt-1 text-xs text-amber-800">
                @if(!empty($pageData['accessibility_enabled']))
                    {{ __('devices.screenshots.a11y_enabled_not_connected') }}
                @else
                    {{ __('devices.screenshots.a11y_disabled_hint') }}
                @endif
            </p>
        </div>
    @endif

    {{-- Nueva regla --}}
    <section>
        @if($rules->count() >= $maxRules)
            <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                {{ __('devices.screenshots.max_rules', ['max' => $maxRules]) }}
            </div>
        @else
            <details class="screenshot-new-rule rounded-xl border border-slate-200 bg-white overflow-hidden group" @if($rules->isEmpty()) open @endif>
                <summary class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ __('devices.screenshots.config_summary') }}</p>
                        <p class="text-xs text-slate-500 mt-0.5">{{ __('devices.screenshots.config_hint') }}</p>
                    </div>
                    <span class="scr-chevron text-slate-400 text-xs shrink-0">▼</span>
                </summary>
                <div class="px-4 pb-4 pt-1 border-t border-slate-100">
                    <details class="mb-4 text-xs text-slate-500">
                        <summary class="cursor-pointer text-indigo-600 hover:text-indigo-800">{{ __('devices.screenshots.help_title') }}</summary>
                        <p class="mt-2 leading-relaxed">{{ __('devices.screenshots.logic_hint') }}</p>
                    </details>

                    <form id="screenshot-rule-form" class="grid gap-4 md:grid-cols-2" enctype="multipart/form-data">
                        @csrf

                        <div class="md:col-span-2">
                            <p class="text-xs font-medium text-slate-700 mb-2">{{ __('devices.screenshots.field_trigger') }}</p>
                            <div class="scr-segmented inline-flex flex-wrap gap-1 p-1 rounded-lg bg-slate-100 border border-slate-200">
                                <label class="scr-segment">
                                    <input type="radio" name="trigger_mode" value="template" checked class="screenshot-trigger-mode sr-only" />
                                    <span>{{ __('devices.screenshots.trigger_template') }}</span>
                                </label>
                                <label class="scr-segment">
                                    <input type="radio" name="trigger_mode" value="activity" class="screenshot-trigger-mode sr-only" />
                                    <span>{{ __('devices.screenshots.trigger_activity') }}</span>
                                </label>
                            </div>
                        </div>

                        <label class="text-xs font-medium text-slate-700 block md:col-span-2">
                            {{ __('devices.screenshots.field_app') }}
                            <input list="screenshot-apps-list" name="package_name" id="screenshot-package" required
                                   class="scr-input mt-1 font-mono"
                                   placeholder="com.ejemplo.app" />
                            <datalist id="screenshot-apps-list">
                                @foreach($apps as $app)
                                    <option value="{{ $app->package_name }}">{{ $app->app_name ?: $app->package_name }}</option>
                                @endforeach
                            </datalist>
                        </label>

                        <div class="md:col-span-2" id="screenshot-activities-block">
                            <p class="text-xs font-medium text-slate-700 mb-1">{{ __('devices.screenshots.field_activities') }}</p>
                            <p class="text-[11px] text-slate-500 mb-2">{{ __('devices.screenshots.activities_or_hint') }}</p>
                            <div id="screenshot-activities-list" class="space-y-2"></div>
                            <button type="button" id="screenshot-activity-add" class="mt-2 text-xs text-indigo-600 hover:text-indigo-800">
                                + {{ __('devices.screenshots.add_activity') }}
                            </button>
                        </div>

                        <label class="text-xs font-medium text-slate-700 block md:col-span-2">
                            {{ __('devices.screenshots.field_label') }}
                            <input type="text" name="label" maxlength="120"
                                   class="scr-input mt-1"
                                   placeholder="{{ __('devices.screenshots.field_label_placeholder') }}" />
                        </label>

                        <div class="md:col-span-2 space-y-3" id="screenshot-templates-block">
                            @for($i = 0; $i < $maxTemplates; $i++)
                                <div class="screenshot-template-row rounded-lg border border-slate-200 p-3 bg-slate-50/50 {{ $i > 0 ? 'hidden' : '' }}" data-template-index="{{ $i }}">
                                    <p class="text-xs font-medium text-slate-700 mb-2">
                                        {{ __('devices.screenshots.field_template', ['n' => $i + 1]) }}
                                        @if($i === 0)<span class="text-red-500 screenshot-template-required-star">*</span>@endif
                                    </p>
                                    <div class="grid gap-3 sm:grid-cols-2">
                                        <label class="text-xs text-slate-600 block">
                                            {{ __('devices.screenshots.field_template_label', ['n' => $i + 1]) }}
                                            <input type="text" name="templates[{{ $i }}][label]" maxlength="80" class="scr-input mt-1" />
                                        </label>
                                        <label class="text-xs text-slate-600 block">
                                            Imagen
                                            <input type="file" name="templates[{{ $i }}][image]"
                                                   accept="image/png,image/jpeg,image/webp"
                                                   @if($i === 0) required @endif
                                                   class="mt-1 block w-full text-xs text-slate-600 screenshot-template-file screenshot-template-input" />
                                        </label>
                                    </div>
                                    <div class="mt-2 flex gap-3 text-xs text-slate-600">
                                        <label class="inline-flex items-center gap-1.5">
                                            <input type="radio" name="templates[{{ $i }}][required]" value="1" @checked($i === 0) />
                                            {{ __('devices.screenshots.field_required') }}
                                        </label>
                                        <label class="inline-flex items-center gap-1.5">
                                            <input type="radio" name="templates[{{ $i }}][required]" value="0" />
                                            {{ __('devices.screenshots.field_optional') }}
                                        </label>
                                    </div>
                                </div>
                            @endfor
                            @if($maxTemplates > 1)
                                <button type="button" id="screenshot-add-template" class="text-xs text-indigo-600 hover:text-indigo-800">
                                    + {{ __('devices.screenshots.add_template') }}
                                </button>
                            @endif
                        </div>

                        <label class="text-xs font-medium text-slate-700 block">
                            {{ __('devices.screenshots.field_interval') }}
                            <input type="number" name="interval_seconds" min="{{ $minInterval }}" max="3600"
                                   value="5" required class="scr-input mt-1" />
                        </label>

                        <label class="text-xs font-medium text-slate-700 block" id="screenshot-threshold-field">
                            {{ __('devices.screenshots.field_threshold') }}
                            <input type="number" name="match_threshold" min="0.5" max="0.99" step="0.01"
                                   value="{{ number_format($defaultThreshold, 2, '.', '') }}"
                                   class="scr-input mt-1" />
                        </label>

                        <div class="md:col-span-2 flex items-center gap-3 pt-1">
                            <button type="submit" class="scr-btn scr-btn-primary">
                                {{ __('devices.screenshots.save_rule') }}
                            </button>
                            <p id="screenshot-form-msg" class="text-xs hidden"></p>
                        </div>
                    </form>
                    @if($apps->isEmpty())
                        <p class="text-xs text-amber-700 mt-3">{{ __('devices.screenshots.no_apps') }}</p>
                    @endif
                </div>
            </details>
        @endif
    </section>

    {{-- Reglas --}}
    <section>
        <h3 class="text-sm font-semibold text-slate-900 mb-2 flex items-center gap-2">
            {{ __('devices.screenshots.section_rules') }}
            @if(!$rules->isEmpty())
                <span class="scr-pill scr-pill-muted text-[10px] font-normal">{{ $rules->count() }}</span>
            @endif
        </h3>
        @if($rules->isEmpty())
            <p class="text-sm text-slate-500">{{ __('devices.screenshots.rules_empty') }}</p>
        @else
            <div class="space-y-1 max-w-3xl">
                @foreach($rules as $rule)
                    @include('admin.devices.partials.screenshot-rule-card', ['rule' => $rule, 'device' => $device])
                @endforeach
            </div>
        @endif
    </section>
</div>

<div id="screenshot-rule-edit-modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40"
     role="dialog" aria-modal="true">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b border-slate-200 px-4 py-3 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-slate-800">{{ __('devices.screenshots.edit_rule_title') }}</h3>
            <button type="button" id="screenshot-rule-edit-close" class="text-slate-500 hover:text-slate-800 text-xl leading-none">×</button>
        </div>
        <form id="screenshot-rule-edit-form" class="p-4 grid gap-3 md:grid-cols-2" enctype="multipart/form-data">
            @csrf
            <fieldset class="md:col-span-2 text-sm text-slate-600">
                <legend class="font-medium text-slate-700 mb-2">{{ __('devices.screenshots.field_trigger') }}</legend>
                <div class="flex flex-wrap gap-4">
                    <label class="inline-flex items-center gap-1.5">
                        <input type="radio" name="trigger_mode" value="template" class="edit-screenshot-trigger-mode" />
                        {{ __('devices.screenshots.trigger_template') }}
                    </label>
                    <label class="inline-flex items-center gap-1.5">
                        <input type="radio" name="trigger_mode" value="activity" class="edit-screenshot-trigger-mode" />
                        {{ __('devices.screenshots.trigger_activity') }}
                    </label>
                </div>
            </fieldset>

            <label class="text-sm text-slate-600 block md:col-span-2">
                {{ __('devices.screenshots.field_app') }}
                <input list="screenshot-apps-list" name="package_name" required
                       class="edit-package mt-1 block w-full border-gray-300 rounded-md text-sm font-mono" />
            </label>

            <div class="md:col-span-2">
                <p class="text-sm font-medium text-slate-700 mb-1">{{ __('devices.screenshots.field_activities') }}</p>
                <div id="edit-screenshot-activities-list" class="space-y-2"></div>
                <button type="button" id="edit-screenshot-activity-add"
                        class="mt-2 text-xs text-indigo-600 hover:text-indigo-800">
                    + {{ __('devices.screenshots.add_activity') }}
                </button>
            </div>

            <label class="text-sm text-slate-600 block md:col-span-2">
                {{ __('devices.screenshots.field_label') }}
                <input type="text" name="label" maxlength="120"
                       class="edit-label mt-1 block w-full border-gray-300 rounded-md text-sm" />
            </label>

            <div class="md:col-span-2 space-y-3" id="edit-screenshot-templates-block"></div>

            <label class="text-sm text-slate-600 block">
                {{ __('devices.screenshots.field_interval') }}
                <input type="number" name="interval_seconds" min="{{ $minInterval }}" max="3600" required
                       class="edit-interval mt-1 block w-full border-gray-300 rounded-md text-sm" />
            </label>

            <label class="text-sm text-slate-600 block" id="edit-screenshot-threshold-field">
                {{ __('devices.screenshots.field_threshold') }}
                <input type="number" name="match_threshold" min="0.5" max="0.99" step="0.01"
                       class="edit-threshold mt-1 block w-full border-gray-300 rounded-md text-sm" />
            </label>

            <div class="md:col-span-2 flex items-center gap-3">
                <button type="submit"
                        class="bg-indigo-600 text-white px-4 py-2 rounded text-sm hover:bg-indigo-700">
                    {{ __('devices.screenshots.save_changes') }}
                </button>
                <p id="screenshot-edit-msg" class="text-xs hidden"></p>
            </div>
        </form>
    </div>
</div>

<div id="screenshot-captures-section" class="mt-8 pt-8 border-t border-slate-200">
    <h3 class="text-sm font-semibold text-slate-900 mb-1">{{ __('devices.screenshots.captures_title') }}</h3>
    <p class="text-[11px] text-slate-500 mb-4">{{ __('devices.screenshots.captures_timeline_hint') }}</p>
    @if($captures->isEmpty())
        <p class="text-sm text-slate-500 py-6 text-center rounded-xl border border-dashed border-slate-200 bg-slate-50/50">
            {{ __('devices.screenshots.captures_empty') }}
        </p>
    @else
        <div class="space-y-3">
            @foreach($captureGroups as $session)
                <div class="screenshot-capture-period rounded-xl border border-slate-200 bg-white overflow-hidden shadow-sm">
                    <div class="px-3 py-2.5 bg-slate-50 border-b border-slate-100 sticky top-0 z-10">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <p class="text-xs text-slate-800 min-w-0">
                                <span class="font-semibold">{{ $session['app_name'] }}</span>
                                <span class="font-mono text-slate-500">({{ $session['package_name'] }})</span>
                                <span class="font-medium">
                                    {{ \App\Support\ScreenshotCaptureGrouper::formatPeriodRange($session['started_at'], $session['ended_at']) }}
                                </span>
                                <span class="text-slate-500 screenshot-period-meta">
                                    · {{ __('devices.screenshots.captures_period_meta', [
                                        'count' => $session['count'],
                                        'duration' => \App\Support\ScreenshotCaptureGrouper::formatDuration($session['started_at'], $session['ended_at']),
                                    ]) }}
                                </span>
                            </p>
                            <div class="flex flex-wrap items-center gap-1 screenshot-period-toolbar shrink-0">
                                <button type="button" class="scr-btn scr-btn-ghost screenshot-period-select">
                                    {{ __('devices.screenshots.captures_select') }}
                                </button>
                                <button type="button" class="scr-btn scr-btn-ghost hidden screenshot-period-select-all">
                                    {{ __('devices.screenshots.captures_select_all_period') }}
                                </button>
                                <button type="button" class="scr-btn scr-btn-danger hidden screenshot-period-delete-selected" disabled>
                                    {{ __('devices.screenshots.captures_delete_selected', ['count' => 0]) }}
                                </button>
                                <button type="button" class="scr-btn scr-btn-muted hidden screenshot-period-cancel-select">
                                    {{ __('devices.screenshots.captures_cancel_select') }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <ul class="screenshot-capture-timeline">
                        @foreach($session['captures'] as $item)
                            @include('admin.devices.partials.screenshot-capture-card', ['item' => $item, 'layout' => 'timeline'])
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    @endif
</div>

@push('styles')
<style>
    .scr-input {
        display: block;
        width: 100%;
        border-radius: 0.5rem;
        border: 1px solid #e2e8f0;
        padding: 0.375rem 0.625rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .scr-input:focus {
        outline: 2px solid #c7d2fe;
        border-color: #a5b4fc;
    }
    .scr-btn {
        font-size: 0.75rem;
        line-height: 1rem;
        padding: 0.375rem 0.625rem;
        border-radius: 0.375rem;
        border: 1px solid transparent;
        transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    }
    .scr-btn-primary {
        background: #4f46e5;
        color: #fff;
    }
    .scr-btn-primary:hover { background: #4338ca; }
    .scr-btn-ghost {
        background: #fff;
        border-color: #e2e8f0;
        color: #475569;
    }
    .scr-btn-ghost:hover { background: #f8fafc; }
    .scr-btn-muted {
        background: #fff;
        border-color: #e2e8f0;
        color: #64748b;
    }
    .scr-btn-muted:hover { background: #f8fafc; }
    .scr-btn-danger {
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
    }
    .scr-btn-danger:hover:not(:disabled) { background: #fee2e2; }
    .scr-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .scr-pill {
        display: inline-flex;
        align-items: center;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.625rem;
        font-weight: 500;
        line-height: 1rem;
    }
    .scr-pill-indigo { background: #eef2ff; color: #4338ca; }
    .scr-pill-emerald { background: #ecfdf5; color: #047857; }
    .scr-pill-green { background: #f0fdf4; color: #15803d; }
    .scr-pill-muted { background: #f1f5f9; color: #64748b; }
    .scr-segment span {
        display: block;
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        color: #64748b;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .scr-segment input:checked + span {
        background: #fff;
        color: #312e81;
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
    }
    .scr-switch { display: inline-flex; cursor: pointer; }
    .scr-switch-track {
        width: 2.25rem;
        height: 1.25rem;
        border-radius: 9999px;
        background: #cbd5e1;
        position: relative;
        transition: background 0.2s;
    }
    .scr-switch-track::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 1rem;
        height: 1rem;
        border-radius: 9999px;
        background: #fff;
        transition: transform 0.2s;
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
    }
    .scr-switch input:checked + .scr-switch-track { background: #6366f1; }
    .scr-switch input:checked + .scr-switch-track::after { transform: translateX(1rem); }
    .scr-icon-btn {
        width: 1.625rem;
        height: 1.625rem;
        border-radius: 9999px;
        border: 1px solid #e2e8f0;
        background: rgb(255 255 255 / 0.95);
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
    }
    .scr-icon-btn-danger:hover {
        color: #dc2626;
        border-color: #fecaca;
        background: #fef2f2;
    }
    .screenshot-capture-card:hover .scr-icon-btn,
    .screenshot-capture-card:focus-within .scr-icon-btn { opacity: 1; }
    .screenshot-new-rule[open] .scr-chevron,
    .screenshot-rule-card[open] .scr-chevron { transform: rotate(180deg); }
    .scr-chevron { display: inline-block; transition: transform 0.2s; }
    .screenshot-rule-card > summary:focus-visible {
        outline: 2px solid #6366f1;
        outline-offset: -2px;
    }
    .screenshot-capture-timeline {
        list-style: none;
        margin: 0;
        padding: 0.25rem 0.75rem 0.75rem 0.75rem;
        position: relative;
    }
    .screenshot-capture-timeline-item {
        display: grid;
        grid-template-columns: 0.75rem 9.5rem minmax(0, 1fr);
        gap: 0.625rem;
        align-items: start;
        padding: 0.625rem 0;
        position: relative;
    }
    .screenshot-capture-timeline-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 0.3125rem;
        top: 1.375rem;
        bottom: -0.625rem;
        width: 1px;
        background: #e2e8f0;
    }
    .screenshot-capture-timeline-marker {
        width: 0.625rem;
        height: 0.625rem;
        margin-top: 0.375rem;
        border-radius: 9999px;
        background: #fff;
        border: 2px solid #6366f1;
        position: relative;
        z-index: 1;
    }
    .screenshot-capture-timeline-time {
        font-size: 0.6875rem;
        line-height: 1.25rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        color: #475569;
        padding-top: 0.125rem;
    }
    .screenshot-capture-timeline-body {
        min-width: 0;
    }
    .screenshot-capture-period.is-selection-mode .screenshot-capture-timeline-item.is-selected {
        background: #eef2ff;
        border-radius: 0.5rem;
        margin-inline: -0.375rem;
        padding-inline: 0.375rem;
    }
    .screenshot-capture-period.is-selection-mode .screenshot-capture-timeline-item.is-selected .screenshot-capture-timeline-marker {
        background: #6366f1;
    }
    .screenshot-capture-period.is-selection-mode .screenshot-capture-select { display: block; }
    .screenshot-capture-period.is-selection-mode .screenshot-capture-delete { display: none; }
    .screenshot-capture-period.is-selection-mode .screenshot-period-select { display: none; }
    .screenshot-capture-period.is-selection-mode .screenshot-period-select-all,
    .screenshot-capture-period.is-selection-mode .screenshot-period-delete-selected,
    .screenshot-capture-period.is-selection-mode .screenshot-period-cancel-select {
        display: inline-flex;
    }
    .screenshot-capture-period.is-selection-mode .screenshot-capture-card.is-selected {
        outline: 2px solid #6366f1;
        outline-offset: 1px;
    }
    .screenshot-capture-period.is-selection-mode .screenshot-capture-timeline-item.is-selected {
        outline: none;
    }
</style>
@endpush

@push('scripts')
<script>
(function () {
    const thumbScaleDefault = {{ (float) config('systemlog.screenshot_thumb_scale', 0.25) }};
    const maxTemplates = {{ (int) $maxTemplates }};
    const maxActivities = {{ (int) \App\Support\ScreenshotActivityPatterns::MaxPerRule }};
    const csrf = @json(csrf_token());
    const msgErr = @json(__('devices.screenshots.error'));
    const msgNoImages = @json(__('devices.screenshots.error_no_images'));
    const msgDeleteCapture = @json(__('devices.screenshots.delete_capture_confirm'));
    const msgDeleteCaptures = @json(__('devices.screenshots.delete_captures_confirm', ['count' => '__COUNT__']));
    const lblDeleteSelected = @json(__('devices.screenshots.captures_delete_selected', ['count' => '__COUNT__']));
    const bulkDeleteUrl = @json(route('devices.screenshots.captures.bulk-destroy', $device));
    const screenshotRulesById = @json($rulesEditPayload);
    const storeUrl = @json(route('devices.screenshots.store', $device));
    const tplRequired = @json(__('devices.screenshots.field_required'));
    const tplOptional = @json(__('devices.screenshots.field_optional'));
    const tplFieldLabel = @json(__('devices.screenshots.field_template_label', ['n' => '__N__']));
    const tplFieldTemplate = @json(__('devices.screenshots.field_template', ['n' => '__N__']));
    const activityPlaceholder = @json(__('devices.screenshots.field_activity_placeholder'));

    function scaleCaptureImages(root) {
        (root || document).querySelectorAll('.screenshot-capture-img').forEach((img) => {
            const apply = () => {
                const scale = parseFloat(img.dataset.scale || thumbScaleDefault);
                if (!img.naturalWidth) {
                    return;
                }
                img.style.width = Math.round(img.naturalWidth * scale) + 'px';
                img.style.height = 'auto';
            };
            if (img.complete) {
                apply();
            } else {
                img.addEventListener('load', apply, { once: true });
            }
        });
    }

    scaleCaptureImages();

    function syncRemoveButtons(listEl) {
        const rows = listEl.querySelectorAll('.screenshot-activity-row');
        rows.forEach((row, index) => {
            const btn = row.querySelector('.screenshot-activity-remove');
            if (btn) {
                btn.classList.toggle('hidden', rows.length <= 1);
            }
        });
    }

    function bindActivityRow(row, listEl) {
        row.querySelector('.screenshot-activity-remove')?.addEventListener('click', () => {
            if (listEl.querySelectorAll('.screenshot-activity-row').length <= 1) {
                row.querySelector('.screenshot-activity-input').value = '';
                return;
            }
            row.remove();
            syncRemoveButtons(listEl);
        });
    }

    function addActivityRow(listEl, value = '') {
        if (listEl.querySelectorAll('.screenshot-activity-row').length >= maxActivities) {
            return;
        }
        const row = document.createElement('div');
        row.className = 'flex gap-2 screenshot-activity-row';
        row.innerHTML = `
            <input type="text" name="activity_patterns[]" maxlength="191"
                   value="${value.replace(/"/g, '&quot;')}"
                   class="scr-input flex-1 font-mono screenshot-activity-input"
                   placeholder="${activityPlaceholder}" />
            <button type="button"
                    class="screenshot-activity-remove shrink-0 w-8 h-9 rounded-md border border-slate-200 text-red-600 hover:bg-red-50"
                    title="×">×</button>
        `;
        listEl.appendChild(row);
        bindActivityRow(row, listEl);
        syncRemoveButtons(listEl);
    }

    function fillActivityList(listEl, patterns) {
        listEl.innerHTML = '';
        const values = (patterns && patterns.length) ? patterns : [''];
        values.forEach((value) => addActivityRow(listEl, value));
    }

    function readActivityPatterns(listEl) {
        return [...listEl.querySelectorAll('.screenshot-activity-input')]
            .map((input) => input.value.trim())
            .filter(Boolean);
    }

    const createActivitiesList = document.getElementById('screenshot-activities-list');
    if (createActivitiesList) {
        fillActivityList(createActivitiesList, ['']);
    }
    document.getElementById('screenshot-activity-add')?.addEventListener('click', () => addActivityRow(createActivitiesList));

    document.getElementById('screenshot-add-template')?.addEventListener('click', () => {
        const hidden = document.querySelector('.screenshot-template-row.hidden');
        if (hidden) {
            hidden.classList.remove('hidden');
        }
        const remaining = document.querySelectorAll('.screenshot-template-row.hidden').length;
        if (remaining === 0) {
            document.getElementById('screenshot-add-template')?.classList.add('hidden');
        }
    });

    function syncScreenshotTriggerMode(prefix = '') {
        const scope = prefix ? editForm : document;
        const mode = scope.querySelector('input[name="trigger_mode"]:checked')?.value || 'template';
        const isActivity = mode === 'activity';
        const templatesBlock = document.getElementById(prefix ? 'edit-screenshot-templates-block' : 'screenshot-templates-block');
        const thresholdField = document.getElementById(prefix ? 'edit-screenshot-threshold-field' : 'screenshot-threshold-field');
        const addTemplateBtn = document.getElementById('screenshot-add-template');
        templatesBlock?.classList.toggle('hidden', isActivity);
        thresholdField?.classList.toggle('hidden', isActivity);
        addTemplateBtn?.classList.toggle('hidden', isActivity);
        if (!prefix) {
            document.querySelectorAll('.screenshot-template-input').forEach((input, index) => {
                const row = input.closest('.screenshot-template-row');
                const rowVisible = row && !row.classList.contains('hidden');
                input.required = !isActivity && index === 0 && rowVisible;
            });
        }
    }

    document.querySelectorAll('.screenshot-trigger-mode').forEach((el) => {
        el.addEventListener('change', () => syncScreenshotTriggerMode());
    });
    syncScreenshotTriggerMode();

    document.getElementById('screenshot-rule-form')?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const msg = document.getElementById('screenshot-form-msg');
        const form = e.target;
        const isActivity = form.querySelector('input[name="trigger_mode"]:checked')?.value === 'activity';
        const hasImage = [...form.querySelectorAll('.screenshot-template-file')].some((input) => input.files?.length);
        if (!isActivity && !hasImage) {
            msg.classList.remove('hidden', 'text-green-700');
            msg.classList.add('text-red-600');
            msg.textContent = msgNoImages;
            return;
        }

        msg.classList.remove('hidden', 'text-red-600', 'text-green-700');
        msg.textContent = '…';
        try {
            const res = await fetch(storeUrl, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: new FormData(form),
            });
            const data = await res.json();
            if (!res.ok || data.error) {
                msg.classList.add('text-red-600');
                msg.textContent = data.message || msgErr;
                return;
            }
            window.location.reload();
        } catch {
            msg.classList.add('text-red-600');
            msg.textContent = msgErr;
        }
    });

    const editModal = document.getElementById('screenshot-rule-edit-modal');
    const editForm = document.getElementById('screenshot-rule-edit-form');
    const editActivitiesList = document.getElementById('edit-screenshot-activities-list');
    let editUpdateUrl = '';

    function parseRulePayload(btn) {
        const id = btn.dataset.ruleId;
        if (!id) {
            return null;
        }
        return screenshotRulesById[id] ?? screenshotRulesById[Number(id)] ?? null;
    }

    function openEditModal(rule) {
        if (!editModal || !editForm || !rule) {
            return;
        }
        editUpdateUrl = rule.update_url;
        editForm.querySelector('.edit-package').value = rule.package_name || '';
        editForm.querySelector('.edit-label').value = rule.label || '';
        editForm.querySelector('.edit-interval').value = rule.interval_seconds || 5;
        editForm.querySelector('.edit-threshold').value = Number(rule.match_threshold || 0.75).toFixed(2);
        const modeInput = editForm.querySelector(`input[name="trigger_mode"][value="${rule.trigger_mode || 'template'}"]`);
        if (modeInput) {
            modeInput.checked = true;
        }
        fillActivityList(editActivitiesList, rule.activity_patterns || []);
        renderEditTemplateRows(rule.templates || []);
        syncScreenshotTriggerMode('edit-');
        editModal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    }

    function renderEditTemplateRows(templates) {
        const block = document.getElementById('edit-screenshot-templates-block');
        if (!block) {
            return;
        }
        block.innerHTML = '';
        const rows = templates.length ? templates : [{ id: null, label: '', required: true, url: null }];
        for (let i = 0; i < maxTemplates; i++) {
            const tpl = rows[i] || { id: null, label: '', required: false, url: null };
            const row = document.createElement('div');
            row.className = 'border border-slate-200 rounded-lg p-3 bg-slate-50 edit-screenshot-template-row';
            row.innerHTML = `
                <p class="text-xs font-medium text-slate-700 mb-2">${tplFieldTemplate.replace('__N__', i + 1)}</p>
                ${tpl.id ? `<input type="hidden" name="templates[${i}][id]" value="${tpl.id}" />` : ''}
                <div class="grid gap-2 md:grid-cols-2">
                    <label class="text-sm text-slate-600 block">
                        ${tplFieldLabel.replace('__N__', i + 1)}
                        <input type="text" name="templates[${i}][label]" maxlength="80" value="${(tpl.label || '').replace(/"/g, '&quot;')}"
                               class="mt-1 block w-full border-gray-300 rounded-md text-sm" />
                    </label>
                    <label class="text-sm text-slate-600 block">
                        Imagen
                        ${tpl.url ? `<img src="${tpl.url}" alt="" class="mt-1 w-12 h-12 object-contain border border-slate-200 rounded bg-white" />` : ''}
                        <input type="file" name="templates[${i}][image]" accept="image/png,image/jpeg,image/webp"
                               class="mt-1 block w-full text-sm text-slate-600" />
                    </label>
                </div>
                <fieldset class="mt-2 flex flex-wrap gap-4 text-xs text-slate-600">
                    <label class="inline-flex items-center gap-1.5">
                        <input type="radio" name="templates[${i}][required]" value="1" ${tpl.required !== false ? 'checked' : ''} />
                        ${tplRequired}
                    </label>
                    <label class="inline-flex items-center gap-1.5">
                        <input type="radio" name="templates[${i}][required]" value="0" ${tpl.required === false ? 'checked' : ''} />
                        ${tplOptional}
                    </label>
                </fieldset>
                ${tpl.id ? `<label class="inline-flex items-center gap-1.5 mt-2 text-xs text-red-600">
                    <input type="checkbox" name="templates[${i}][remove]" value="1" class="edit-template-remove" />
                    Quitar referencia
                </label>` : ''}
            `;
            block.appendChild(row);
        }
    }

    document.querySelectorAll('.edit-screenshot-trigger-mode').forEach((el) => {
        el.addEventListener('change', () => syncScreenshotTriggerMode('edit-'));
    });
    document.getElementById('edit-screenshot-activity-add')?.addEventListener('click', () => addActivityRow(editActivitiesList));

    document.querySelectorAll('.screenshot-rule-edit').forEach((btn) => {
        btn.addEventListener('click', () => {
            openEditModal(parseRulePayload(btn));
        });
    });

    function closeEditModal() {
        editModal?.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
        document.getElementById('screenshot-edit-msg')?.classList.add('hidden');
    }

    document.getElementById('screenshot-rule-edit-close')?.addEventListener('click', closeEditModal);
    editModal?.addEventListener('click', (e) => {
        if (e.target === editModal) {
            closeEditModal();
        }
    });

    editForm?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const msg = document.getElementById('screenshot-edit-msg');
        const isActivity = editForm.querySelector('input[name="trigger_mode"]:checked')?.value === 'activity';
        const hasExistingTemplate = [...editForm.querySelectorAll('.edit-screenshot-template-row')]
            .some((row) => row.querySelector('input[type="hidden"][name*="[id]"]') && !row.querySelector('.edit-template-remove:checked'));
        const hasNewImage = [...editForm.querySelectorAll('input[type="file"][name*="[image]"]')]
            .some((input) => input.files?.length);
        if (!isActivity && !hasExistingTemplate && !hasNewImage) {
            msg.classList.remove('hidden', 'text-green-700');
            msg.classList.add('text-red-600');
            msg.textContent = msgNoImages;
            return;
        }

        msg.classList.remove('hidden', 'text-red-600', 'text-green-700');
        msg.textContent = '…';
        try {
            const res = await fetch(editUpdateUrl, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: new FormData(editForm),
            });
            const data = await res.json();
            if (!res.ok || data.error) {
                msg.classList.add('text-red-600');
                msg.textContent = data.message || msgErr;
                return;
            }
            window.location.reload();
        } catch {
            msg.classList.add('text-red-600');
            msg.textContent = msgErr;
        }
    });

    document.querySelectorAll('.screenshot-rule-toggle').forEach((el) => {
        el.addEventListener('change', async () => {
            try {
                await fetch(el.dataset.url, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ enabled: el.checked }),
                });
            } catch {
                el.checked = !el.checked;
            }
        });
    });

    document.querySelectorAll('.screenshot-rule-delete').forEach((btn) => {
        btn.addEventListener('click', async () => {
            if (!confirm(@json(__('devices.screenshots.delete_confirm')))) return;
            try {
                const res = await fetch(btn.dataset.url, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                if (res.ok) {
                    btn.closest('.screenshot-rule-card')?.remove();
                }
            } catch {}
        });
    });

    document.querySelectorAll('.screenshot-capture-delete').forEach((btn) => {
        btn.addEventListener('click', async (e) => {
            e.preventDefault();
            e.stopPropagation();
            if (!confirm(msgDeleteCapture)) {
                return;
            }
            try {
                const res = await fetch(btn.dataset.url, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                if (res.ok) {
                    btn.closest('.screenshot-capture-card')?.remove();
                    updateCaptureGroupCounts();
                }
            } catch {}
        });
    });

    const capturesSection = document.getElementById('screenshot-captures-section');

    function periodCheckboxes(periodEl) {
        return [...periodEl.querySelectorAll('.screenshot-capture-checkbox')];
    }

    function selectedIdsInPeriod(periodEl) {
        return periodCheckboxes(periodEl)
            .filter((cb) => cb.checked)
            .map((cb) => parseInt(cb.value, 10))
            .filter((id) => !Number.isNaN(id));
    }

    function updatePeriodSelectedUi(periodEl) {
        const count = selectedIdsInPeriod(periodEl).length;
        const deleteBtn = periodEl.querySelector('.screenshot-period-delete-selected');
        if (deleteBtn) {
            deleteBtn.disabled = count === 0;
            deleteBtn.textContent = lblDeleteSelected.replace('__COUNT__', String(count));
        }
        periodEl.querySelectorAll('.screenshot-capture-card').forEach((card) => {
            const checked = card.querySelector('.screenshot-capture-checkbox:checked');
            card.classList.toggle('is-selected', !!checked);
        });
    }

    function setPeriodSelectionMode(periodEl, active) {
        periodEl.classList.toggle('is-selection-mode', active);
        if (!active) {
            periodCheckboxes(periodEl).forEach((cb) => {
                cb.checked = false;
            });
            updatePeriodSelectedUi(periodEl);
        }
    }

    function updateCaptureGroupCounts() {
        document.querySelectorAll('.screenshot-capture-period').forEach((period) => {
            const count = period.querySelectorAll('.screenshot-capture-card').length;
            const meta = period.querySelector('.screenshot-period-meta');
            if (count === 0) {
                period.remove();
                return;
            }
            if (meta) {
                meta.textContent = meta.textContent.replace(/(\d+)(\s+capturas)/, count + '$2');
            }
        });
        if (document.querySelectorAll('.screenshot-capture-card').length === 0) {
            window.location.reload();
        }
    }

    async function deleteCaptures(ids, periodEl) {
        if (ids.length === 0) {
            return;
        }
        const msg = msgDeleteCaptures.replace('__COUNT__', String(ids.length));
        if (!confirm(msg)) {
            return;
        }
        const deleteBtn = periodEl?.querySelector('.screenshot-period-delete-selected');
        if (deleteBtn) {
            deleteBtn.disabled = true;
        }
        try {
            const res = await fetch(bulkDeleteUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ ids }),
            });
            const data = await res.json();
            if (!res.ok || data.error) {
                alert(data.message || msgErr);
                if (deleteBtn) {
                    deleteBtn.disabled = false;
                }
                updatePeriodSelectedUi(periodEl);
                return;
            }
            (data.deleted_ids || ids).forEach((id) => {
                document.querySelector(`.screenshot-capture-card[data-capture-id="${id}"]`)?.remove();
            });
            setPeriodSelectionMode(periodEl, false);
            updateCaptureGroupCounts();
        } catch {
            if (deleteBtn) {
                deleteBtn.disabled = false;
            }
            updatePeriodSelectedUi(periodEl);
        }
    }

    capturesSection?.querySelectorAll('.screenshot-capture-period').forEach((period) => {
        period.querySelector('.screenshot-period-select')?.addEventListener('click', () => {
            setPeriodSelectionMode(period, true);
        });
        period.querySelector('.screenshot-period-cancel-select')?.addEventListener('click', () => {
            setPeriodSelectionMode(period, false);
        });
        period.querySelector('.screenshot-period-select-all')?.addEventListener('click', () => {
            const boxes = periodCheckboxes(period);
            const allChecked = boxes.length > 0 && boxes.every((cb) => cb.checked);
            boxes.forEach((cb) => {
                cb.checked = !allChecked;
            });
            updatePeriodSelectedUi(period);
        });
        period.querySelector('.screenshot-period-delete-selected')?.addEventListener('click', () => {
            deleteCaptures(selectedIdsInPeriod(period), period);
        });
        periodCheckboxes(period).forEach((cb) => {
            cb.addEventListener('change', () => updatePeriodSelectedUi(period));
        });
    });
})();
</script>
@endpush