@extends('admin::.layouts.master')
@php
    $pageTitle = 'لاگ‌های اتوماسیون';
@endphp

@section('title', 'لاگ‌های اتوماسیون')
@section('content')

    @php
        $automation = (object)[
            'id' => 2,
            'name' => 'پیامک یادآوری پرداخت',
            'type' => 'sms_reminder',
            'status' => 'active'
        ];

        // داده فیک لاگ‌ها با جزئیات بیشتر
        $logs = [
            (object)[
                'id' => 1,
                'ran_at' => \Carbon\Carbon::now()->subDays(1)->subMinutes(5),
                'status' => 'success',
                'message' => 'ارسال 120 پیامک با موفقیت انجام شد.',
                'duration_ms' => 1200,
                'node_id' => 'send_sms_1',
                'action_type' => 'send_sms',
                'user_count' => 120,
                'success_count' => 118,
                'failed_count' => 2,
                'metadata' => [
                    'provider' => 'twilio',
                    'avg_delivery_time' => '2.3s',
                    'cost' => 24000
                ]
            ],
            (object)[
                'id' => 2,
                'ran_at' => \Carbon\Carbon::now()->subDays(3)->addHours(2),
                'status' => 'failed',
                'message' => 'خطا در اتصال به درگاه پیامک: timeout',
                'duration_ms' => 800,
                'node_id' => 'send_sms_1',
                'action_type' => 'send_sms',
                'user_count' => 0,
                'success_count' => 0,
                'failed_count' => 0,
                'metadata' => [
                    'error_code' => 'CONNECTION_TIMEOUT',
                    'provider' => 'twilio',
                    'retry_attempt' => 1
                ]
            ],
            (object)[
                'id' => 3,
                'ran_at' => \Carbon\Carbon::now()->subDays(7),
                'status' => 'success',
                'message' => 'ارسال 110 پیامک با موفقیت انجام شد.',
                'duration_ms' => 1500,
                'node_id' => 'send_sms_1',
                'action_type' => 'send_sms',
                'user_count' => 110,
                'success_count' => 108,
                'failed_count' => 2,
                'metadata' => [
                    'provider' => 'kavenegar',
                    'avg_delivery_time' => '1.8s',
                    'cost' => 22000
                ]
            ],
        ];

        $stats = [
            'total_runs' => 15,
            'success_runs' => 12,
            'failed_runs' => 3,
            'success_rate' => 80,
            'avg_duration' => 1250
        ];
    @endphp

            <!-- هدر صفحه -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="d-flex align-items-center">
                <a href="{{ route('admin.automations.show', ['automation' => $automation->id]) }}"
                   class="btn btn-icon btn-sm btn-light me-3">
                    <i class="ri-arrow-right-line"></i>
                </a>
                <div>
                    <h4 class="mb-1">لاگ‌های اجرا: {{ $automation->name }}</h4>
                    <p class="text-muted mb-0">تاریخچه کامل اجراهای این اتوماسیون</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="hstack gap-2 justify-content-end">
                <button class="btn btn-outline-danger btn-sm" id="export-logs">
                    <i class="ri-download-line align-bottom me-1"></i>خروجی Excel
                </button>
                <a href="{{ route('admin.automations.show', ['automation' => $automation->id]) }}"
                   class="btn btn-outline-secondary btn-sm">
                    <i class="ri-arrow-left-line align-bottom me-1"></i>بازگشت به جزئیات
                </a>
            </div>
        </div>
    </div>

    <!-- کارت‌های آمار -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['total_runs'] }}</h4>
                            <p class="text-muted mb-0">کل اجراها</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-play-circle-line text-primary fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['success_runs'] }}</h4>
                            <p class="text-muted mb-0">موفق</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-checkbox-circle-line text-success fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['failed_runs'] }}</h4>
                            <p class="text-muted mb-0">ناموفق</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-close-circle-line text-danger fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['success_rate'] }}%</h4>
                            <p class="text-muted mb-0">نرخ موفقیت</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-bar-chart-line text-info fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- فیلترها و جستجو -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">جستجو در پیام</label>
                    <div class="search-box">
                        <input type="text" id="log-search" class="form-control" placeholder="جستجو...">
                        <i class="ri-search-line search-icon"></i>
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">از تاریخ</label>
                    <input type="date" id="start-date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label">تا تاریخ</label>
                    <input type="date" id="end-date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label">وضعیت</label>
                    <select id="status-filter" class="form-select">
                        <option value="">همه وضعیت‌ها</option>
                        <option value="success">موفق</option>
                        <option value="failed">خطا</option>
                        <option value="running">در حال اجرا</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <div class="hstack gap-2">
                        <button class="btn btn-primary w-100" id="apply-filters">
                            <i class="ri-filter-line align-bottom me-1"></i>اعمال فیلتر
                        </button>
                        <button class="btn btn-outline-secondary" id="reset-filters" title="بازنشانی فیلترها">
                            <i class="ri-refresh-line"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- جدول لاگ‌ها -->
    <div class="card">
        <div class="card-header border-bottom py-3">
            <h5 class="card-title mb-0">
                <i class="ri-file-list-line align-bottom me-2"></i>تاریخچه اجراها
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-borderless align-middle mb-0">
                    <thead class="table-light text-muted">
                    <tr>
                        <th style="width: 80px;">#</th>
                        <th style="width: 180px;">زمان اجرا</th>
                        <th style="width: 120px;">وضعیت</th>
                        <th style="width: 150px;">نوع عمل</th>
                        <th>پیام و جزئیات</th>
                        <th style="width: 120px;" class="text-center">کاربران</th>
                        <th style="width: 100px;" class="text-center">مدت</th>
                        <th style="width: 80px;" class="text-center">عملیات</th>
                    </tr>
                    </thead>
                    <tbody id="logs-table">
                    @foreach($logs as $log)
                        <tr data-status="{{ $log->status }}" data-action="{{ $log->action_type }}"
                            data-date="{{ $log->ran_at->format('Y-m-d') }}">
                            <td class="fw-semibold text-muted">#{{ $log->id }}</td>
                            <td>
                                <div class="text-muted">
                                    <small>{{ $log->ran_at->format('d M Y') }}</small>
                                    <small class="d-block">{{ $log->ran_at->format('H:i:s') }}</small>
                                </div>
                            </td>
                            <td>
                                @if($log->status == 'success')
                                    <span class="badge bg-success-subtle text-success">
                                        <i class="ri-checkbox-circle-line align-bottom me-1"></i>موفق
                                    </span>
                                @elseif($log->status == 'failed')
                                    <span class="badge bg-danger-subtle text-danger">
                                        <i class="ri-close-circle-line align-bottom me-1"></i>خطا
                                    </span>
                                @else
                                    <span class="badge bg-warning-subtle text-warning">
                                        <i class="ri-time-line align-bottom me-1"></i>در حال اجرا
                                    </span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary">
                                    {{ $log->action_type }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex align-items-start">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">{{ $log->message }}</p>
                                        @if($log->status == 'failed' && isset($log->metadata['error_code']))
                                            <small class="text-danger">
                                                <i class="ri-bug-line align-bottom me-1"></i>
                                                کد خطا: {{ $log->metadata['error_code'] }}
                                            </small>
                                        @endif
                                        @if(isset($log->metadata['provider']))
                                            <small class="text-muted d-block">
                                                <i class="ri-server-line align-bottom me-1"></i>
                                                ارائه‌دهنده: {{ $log->metadata['provider'] }}
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                @if($log->user_count > 0)
                                    <div class="text-center">
                                        <span class="fw-semibold text-success">{{ $log->success_count }}</span>
                                        <small class="text-muted d-block">موفق</small>
                                    </div>
                                    @if($log->failed_count > 0)
                                        <div class="text-center mt-1">
                                            <span class="fw-semibold text-danger">{{ $log->failed_count }}</span>
                                            <small class="text-muted d-block">ناموفق</small>
                                        </div>
                                    @endif
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="fw-semibold {{ $log->duration_ms > 2000 ? 'text-warning' : 'text-info' }}">
                                    {{ number_format($log->duration_ms) }} ms
                                </span>
                            </td>
                            <td>
                                <div class="hstack gap-1 justify-content-center">
                                    <button type="button" class="btn btn-icon btn-sm btn-soft-info view-log-details"
                                            data-log-id="{{ $log->id }}" title="مشاهده جزئیات">
                                        <i class="ri-eye-line fs-14"></i>
                                    </button>
                                    @if($log->status == 'failed')
                                        <button type="button" class="btn btn-icon btn-sm btn-soft-warning retry-log"
                                                data-log-id="{{ $log->id }}" title="اجرای مجدد">
                                            <i class="ri-refresh-line fs-14"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- صفحه‌بندی -->
            <div class="row align-items-center mt-4">
                <div class="col-sm-6">
                    <div class="text-muted">
                        نمایش <span class="fw-semibold">{{ count($logs) }}</span> از <span
                                class="fw-semibold">{{ $stats['total_runs'] }}</span> نتیجه
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="float-sm-end">
                        <ul class="pagination pagination-separated mb-0">
                            <li class="page-item disabled">
                                <a href="javascript:void(0);" class="page-link">قبلی</a>
                            </li>
                            <li class="page-item active">
                                <a href="javascript:void(0);" class="page-link">1</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">بعدی</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // فیلترهای پیشرفته
            const searchInput = document.getElementById('log-search');
            const startDate = document.getElementById('start-date');
            const endDate = document.getElementById('end-date');
            const statusFilter = document.getElementById('status-filter');
            const applyFilters = document.getElementById('apply-filters');
            const resetFilters = document.getElementById('reset-filters');
            const logsTable = document.getElementById('logs-table');

            function applyLogFilters() {
                const searchTerm = searchInput.value.toLowerCase();
                const statusValue = statusFilter.value;
                const startDateValue = startDate.value;
                const endDateValue = endDate.value;

                [...logsTable.querySelectorAll('tr')].forEach(tr => {
                    const message = tr.children[4].textContent.toLowerCase();
                    const status = tr.dataset.status;
                    const date = tr.dataset.date;

                    let show = true;

                    // فیلتر جستجو
                    if (searchTerm && !message.includes(searchTerm)) {
                        show = false;
                    }

                    // فیلتر وضعیت
                    if (statusValue && status !== statusValue) {
                        show = false;
                    }

                    // فیلتر تاریخ
                    if (startDateValue && date < startDateValue) {
                        show = false;
                    }
                    if (endDateValue && date > endDateValue) {
                        show = false;
                    }

                    tr.style.display = show ? '' : 'none';
                });
            }

            applyFilters.addEventListener('click', applyLogFilters);

            resetFilters.addEventListener('click', function () {
                searchInput.value = '';
                startDate.value = '';
                endDate.value = '';
                statusFilter.value = '';
                applyLogFilters();
            });

            // جستجوی لحظه‌ای
            searchInput.addEventListener('input', function () {
                if (this.value.length === 0 || this.value.length >= 3) {
                    applyLogFilters();
                }
            });

            // مشاهده جزئیات لاگ
            document.querySelectorAll('.view-log-details').forEach(btn => {
                btn.addEventListener('click', function () {
                    const logId = this.dataset.logId;
                    // در نسخه واقعی، modal جزئیات نمایش داده می‌شود
                    alert(`جزئیات لاگ #${logId} (در نسخه واقعی modal نمایش داده می‌شود)`);
                });
            });

            // اجرای مجدد
            document.querySelectorAll('.retry-log').forEach(btn => {
                btn.addEventListener('click', function () {
                    const logId = this.dataset.logId;
                    if (confirm('آیا از اجرای مجدد این عملیات اطمینان دارید؟')) {
                        // شبیه‌سازی اجرای مجدد
                        const row = this.closest('tr');
                        row.querySelector('.badge').className = 'badge bg-warning-subtle text-warning';
                        row.querySelector('.badge').innerHTML = '<i class="ri-time-line align-bottom me-1"></i>در حال اجرا';

                        setTimeout(() => {
                            row.querySelector('.badge').className = 'badge bg-success-subtle text-success';
                            row.querySelector('.badge').innerHTML = '<i class="ri-checkbox-circle-line align-bottom me-1"></i>موفق';
                        }, 2000);
                    }
                });
            });

            // خروجی Excel
            document.getElementById('export-logs').addEventListener('click', function () {
                alert('خروجی Excel در نسخه واقعی ایجاد می‌شود');
            });
        });
    </script>

    <style>
        .search-box {
            position: relative;
        }

        .search-box .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }

        .card-animate:hover {
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }
    </style>
@endsection