@extends('layout.app')
@section('title', 'Quản lý tài khoản quảng cáo')
@section('_style')
    <style>
        .meta-ads-page {
            width: 100%;
        }

        .meta-ads-page .card {
            width: 100%;
            border: 1px solid #e7effc;
            box-shadow: 0 3px 12px rgba(28, 39, 64, 0.05);
        }

        .meta-ads-page .card-header {
            padding: 14px 16px;
            background: #fff;
        }

        .meta-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
        }

        .meta-page-title {
            margin: 0;
            color: #263544;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.35;
        }

        .meta-header-actions,
        .meta-filter-actions {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 8px;
        }

        .meta-header-actions .btn,
        .meta-filter-actions .btn {
            margin: 0;
            white-space: nowrap;
        }

        .meta-ads-page .meta-user-select {
            width: auto;
            min-width: 210px;
            max-width: 100%;
            height: 32px;
            padding: 2px 8px;
            font-size: 13px;
        }

        .meta-token-status {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            max-width: 100%;
            line-height: 1.3;
        }

        .meta-token-status small {
            color: #6c757d;
        }

        .meta-filter-panel {
            border: 1px solid #edf1f7;
            background: #fbfcff;
            padding: 14px;
            border-radius: 4px;
        }

        .meta-filter-panel label {
            margin-bottom: 5px;
            color: #596579;
            font-size: 12px;
        }

        .meta-filter-panel .form-control {
            min-height: 38px;
        }

        /* Select2 phải cao đúng bằng các ô lọc còn lại để không lệch hàng. */
        .meta-filter-panel .select2-container .select2-selection {
            min-height: 38px;
            border: 1px solid #e4e6fc;
        }

        .meta-filter-panel .select2-container .select2-selection--multiple {
            padding-bottom: 2px;
        }

        .meta-filter-note {
            display: block;
            margin-top: 10px;
            line-height: 1.45;
        }

        .meta-badge {
            display: inline-block;
            max-width: 100%;
            padding: 4px 8px;
            border-radius: 3px;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.2;
            white-space: normal;
            word-break: break-word;
        }

        .meta-badge.valid { background: #22a946; }
        .meta-badge.warn { background: #f0a313; }
        .meta-badge.danger { background: #d9534f; }

        .meta-stat {
            min-height: 86px;
            height: 100%;
            border: 1px solid #e8e8f7;
            border-radius: 4px;
            padding: 12px;
            background: #fff;
        }

        .meta-stat .label {
            margin-bottom: 6px;
            color: #7a7a95;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.25;
            text-transform: uppercase;
        }

        .meta-stat .value {
            color: #263544;
            font-size: 20px;
            font-weight: 600;
            line-height: 1.25;
            word-break: break-word;
        }

        .meta-stat .value.compact {
            font-size: 15px;
        }

        .meta-undefined {
            color: #8f97a8;
            font-style: italic;
        }

        #metaAdsTable {
            min-height: 120px;
        }

        .meta-token-panel {
            margin-bottom: 14px;
            padding: 12px;
            border: 1px solid #e8e8f7;
            border-radius: 4px;
            background: #fbfbfe;
        }

        .meta-token-panel ol {
            margin-bottom: 8px;
            padding-left: 18px;
        }

        .meta-table-wrap {
            width: 100%;
            max-height: calc(100vh - 260px);
            min-height: 180px;
            overflow: auto;
            border: 1px solid #e7effc;
            border-radius: 4px;
            background: #fff;
        }

        .meta-table {
            min-width: 1180px;
            margin-bottom: 0;
            table-layout: fixed;
        }

        .meta-table th,
        .meta-table td {
            vertical-align: middle;
        }

        .meta-table th {
            padding: 9px 8px;
            font-size: 12px;
            line-height: 1.25;
            white-space: normal;
        }

        .meta-table td {
            padding: 8px;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .meta-table .meta-col-index { width: 44px; }
        .meta-table .meta-col-account { width: 190px; }
        .meta-table .meta-col-name { width: 270px; }
        .meta-table .meta-col-status { width: 112px; }
        .meta-table .meta-col-result-type { width: 170px; }
        .meta-table .meta-col-number { width: 116px; }
        .meta-table .meta-col-budget { width: 140px; }

        .meta-table-name {
            color: #2b3445;
            font-weight: 500;
        }

        .meta-loading {
            padding: 28px 12px;
            text-align: center;
            color: #6c757d;
        }

        @media (max-width: 767.98px) {
            .meta-ads-page .card-header,
            .meta-ads-page .card-body {
                padding-left: 12px;
                padding-right: 12px;
            }

            .meta-page-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .meta-header-actions,
            .meta-filter-actions {
                justify-content: flex-start;
                width: 100%;
            }

            .meta-header-actions .btn,
            .meta-filter-actions .btn {
                flex: 1 1 145px;
            }

            .meta-token-status {
                width: 100%;
            }

            .meta-table-wrap {
                max-height: calc(100vh - 220px);
            }
        }
    </style>
@endsection
@section('content')
    <div class="col-12 meta-ads-page">
        <div class="card">
            <div class="card-header fix-header bottom-card">
                <div class="meta-page-header">
                    <h4 class="meta-page-title">
                        Tài khoản quảng cáo Meta
                        @if(!$isOwnAccount)
                            <small class="text-muted">— {{ $targetUser->full_name }}</small>
                        @endif
                    </h4>
                    <div class="meta-header-actions">
                        @if($isAdmin)
                            <select id="metaUserId" class="form-control meta-user-select">
                                <option value="">-- Dữ liệu của tôi --</option>
                                @foreach($metaUsers as $metaUser)
                                    <option value="{{ $metaUser->id }}"
                                            {{ !$isOwnAccount && $targetUser->id == $metaUser->id ? 'selected' : '' }}>
                                        {{ $metaUser->full_name }} ({{ $metaUser->meta_app_id }})
                                    </option>
                                @endforeach
                            </select>
                        @endif
                        <span id="metaTokenStatus" class="meta-token-status"></span>
                        @if(!$appConfigError && $isOwnAccount)
                            <a href="{{ route('marketing.meta-ads.connect') }}" class="btn btn-sm btn-primary">
                                <i class="fab fa-facebook-square"></i> Lấy token qua Facebook
                            </a>
                            @if(!$configError)
                                <button type="button" id="metaRefreshToken" class="btn btn-sm btn-outline-primary">
                                    <i class="fa fa-refresh"></i> Gia hạn token
                                </button>
                            @endif
                        @endif
                        <a href="{{ url('users/'.$targetUser->id.'/edit') }}" class="btn btn-sm btn-outline-secondary">
                            <i class="fa fa-key"></i> Cấu hình Meta App
                        </a>
                    </div>
                </div>
            </div>

            @if(session('status'))
                <div class="card-body pb-0">
                    <div class="alert alert-success mb-0">{{ session('status') }}</div>
                </div>
            @endif
            @if(session('error'))
                <div class="card-body pb-0">
                    <div class="alert alert-danger mb-0">{{ session('error') }}</div>
                </div>
            @endif

            @if($configError)
                <div class="card-body">
                    @if($appConfigError)
                        <div class="alert alert-warning mb-0">
                            <b>{{ $appConfigError['status'] }}</b> — {{ $appConfigError['message'] }}
                            <br>
                            Vào <a href="{{ url('users/'.$targetUser->id.'/edit') }}">Thông tin tài khoản</a> để nhập
                            <code>META_APP_ID</code> và <code>META_APP_SECRET</code>.
                        </div>
                    @elseif(!$isOwnAccount)
                        <div class="alert alert-warning mb-0">
                            <b>Nhân viên {{ $targetUser->full_name }} chưa có access token.</b>
                            Nhân viên cần tự đăng nhập Facebook để cấp quyền <code>ads_read</code>.
                        </div>
                    @else
                        <div class="alert alert-info mb-0">
                            <b>Chưa có access token.</b> App ID và App Secret không tự sinh ra được token —
                            bạn cần đăng nhập Facebook và duyệt quyền <code>ads_read</code> một lần
                            (giống nút <i>Generate Access Token</i> của Graph API Explorer).
                            <div class="mt-2">
                                <a href="{{ route('marketing.meta-ads.connect') }}" class="btn btn-primary">
                                    <i class="fab fa-facebook-square"></i> Lấy token qua Facebook
                                </a>
                            </div>
                        </div>
                    @endif
                    @if(!$appConfigError)
                        @include('marketing.meta_ads.token_panel', ['panelUser' => $targetUser, 'canManage' => $isOwnAccount])
                    @endif
                    @include('marketing.meta_ads.redirect_hint', ['redirectUri' => $redirectUri])
                </div>
            @else
                <div class="card-body">
                    @include('marketing.meta_ads.token_panel', ['panelUser' => $targetUser, 'canManage' => $isOwnAccount])
                    <form id="metaAdsFilter" class="meta-filter-panel">
                        <div class="row align-items-end">
                            @if($isAdmin)
                                {{-- Admin xem dữ liệu của nhân viên nào: chọn ở header, gửi kèm mọi ajax. --}}
                                <input type="hidden" name="meta_user_id" value="{{ $isOwnAccount ? '' : $targetUser->id }}">
                            @endif
                            <div class="col-12 col-sm-6 col-lg-3 mb-2">
                                <label>Tài khoản quảng cáo</label>
                                <select name="accounts[]" id="metaAccounts" class="form-control" multiple
                                        data-placeholder="Tất cả tài khoản"
                                        data-selected="{{ json_encode($filters['accounts']) }}">
                                    <option value="">Đang tải danh sách…</option>
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-lg-2 mb-2">
                                <label>Cấp dữ liệu</label>
                                <select name="level" class="form-control">
                                    @foreach($levels as $key => $label)
                                        <option value="{{ $key }}" {{ $filters['level'] == $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-lg-2 mb-2">
                                <label>Khoảng ngày</label>
                                <select name="date_preset" class="form-control">
                                    @foreach($presets as $key => $label)
                                        <option value="{{ $key }}" {{ $filters['date_preset'] == $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-lg-2 mb-2">
                                <label>Từ ngày</label>
                                <input type="date" name="since" value="{{ $filters['since'] }}" class="form-control">
                            </div>
                            <div class="col-12 col-sm-6 col-lg-2 mb-2">
                                <label>Đến ngày</label>
                                <input type="date" name="until" value="{{ $filters['until'] }}" class="form-control">
                            </div>
                            <div class="col-12 mb-2">
                                <div class="meta-filter-actions">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Xem báo cáo</button>
                                    <button type="button" id="metaCheckToken" class="btn btn-outline-info">
                                        <i class="fa fa-shield"></i> Kiểm tra token
                                    </button>
                                    <a href="#" id="metaExport" class="btn btn-outline-success"><i class="fa fa-download"></i> CSV</a>
                                </div>
                            </div>
                        </div>
                        <small class="text-muted meta-filter-note">Nhập cả hai ngày để dùng khoảng ngày cụ thể; để trống sẽ dùng khoảng ngày dựng sẵn.</small>
                    </form>
                    @include('marketing.meta_ads.redirect_hint', ['redirectUri' => $redirectUri])
                </div>

                <div class="card-body pt-0">
                    <div id="metaAdsTable">
                        @include('marketing.meta_ads.ajax', ['report' => $report])
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection
@section('_script')
    <script>
        (function () {
            var $form = $('#metaAdsFilter');
            // Admin đang xem dữ liệu của nhân viên nào (rỗng = của chính mình).
            var metaUserId = '{{ $isOwnAccount ? '' : $targetUser->id }}';

            function query() {
                return $form.serialize();
            }

            // Ajax không đi qua form (token, danh sách tài khoản) vẫn phải bám đúng nhân viên.
            function withUser(url) {
                return metaUserId ? url + (url.indexOf('?') >= 0 ? '&' : '?') + 'meta_user_id=' + metaUserId : url;
            }

            // Đổi nhân viên thì tải lại cả trang: cấu hình, token, tài khoản đều theo user mới.
            $('#metaUserId').on('change', function () {
                var val = $(this).val();
                window.location = '{{ url('marketing/meta-ads') }}' + (val ? '?meta_user_id=' + val : '');
            });

            function load() {
                $('#metaAdsTable').html('<div class="meta-loading"><i class="fa fa-spinner fa-spin fa-2x"></i><div class="mt-2">Đang đọc dữ liệu từ Meta, vui lòng đợi…</div></div>');
                $.get('{{ url('marketing/meta-ads/data') }}?' + query())
                    .done(function (html) {
                        $('#metaAdsTable').html(html);
                    })
                    .fail(function (xhr) {
                        var msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Không tải được dữ liệu.';
                        $('#metaAdsTable').html('<div class="alert alert-danger">' + msg + '</div>');
                    });
            }

            $form.on('submit', function (e) {
                e.preventDefault();
                load();
            });

            $('#metaExport').on('click', function (e) {
                e.preventDefault();
                window.location = '{{ url('marketing/meta-ads/export') }}?' + query();
            });

            function renderToken(data) {
                var cls = 'valid';
                if (data.status === 'TOKEN_EXPIRING_SOON' || data.status === 'NO_SCHEDULED_EXPIRY') cls = 'warn';
                if (data.status !== 'VALID' && cls === 'valid') cls = 'danger';
                $('#metaTokenStatus').html('<span class="meta-badge ' + cls + '">' + data.status + '</span> <small>' + (data.message || '') + '</small> ');
            }

            $('#metaCheckToken').on('click', function () {
                $.get(withUser('{{ url('marketing/meta-ads/check-token') }}')).done(renderToken);
            });

            $('#metaRefreshToken').on('click', function () {
                var $btn = $(this).prop('disabled', true);
                $.ajax({
                    url: '{{ route('marketing.meta-ads.refresh-token') }}',
                    method: 'POST',
                    data: {_token: '{{ csrf_token() }}'}
                }).done(function (res) {
                    alert(res.message);
                    if (res.ok) window.location.reload();
                }).fail(function (xhr) {
                    alert((xhr.responseJSON && xhr.responseJSON.message) || 'Gia hạn token thất bại.');
                }).always(function () {
                    $btn.prop('disabled', false);
                });
            });

            function initAccountSelect2($select, placeholder) {
                // Huỷ sạch instance cũ (kể cả container mồ côi) rồi mới khởi tạo lại,
                // tránh trường hợp hiển thị 2 ô select chồng nhau.
                if ($select.data('select2')) {
                    $select.select2('destroy');
                }
                $select.siblings('.select2-container').remove();

                $select.select2({
                    width: '100%',
                    theme: 'bootstrap',
                    allowClear: true,
                    placeholder: placeholder
                });
            }

            function loadAccounts() {
                var $select = $('#metaAccounts');
                var selected = $select.data('selected') || [];

                $select.prop('disabled', true);

                $.get(withUser('{{ url('marketing/meta-ads/accounts') }}'))
                    .done(function (list) {
                        $select.empty();
                        if (!list || !list.length) {
                            initAccountSelect2($select, 'Không có tài khoản nào');
                            return;
                        }
                        $.each(list, function (i, account) {
                            var label = (account.name || account.account_id)
                                + ' (' + account.account_id + ')';
                            var isOn = $.inArray(account.id, selected) >= 0
                                || $.inArray(account.account_id, selected) >= 0;
                            $select.append($('<option>', {
                                value: account.id,
                                text: label,
                                selected: isOn
                            }));
                        });
                        $select.prop('disabled', false);
                        initAccountSelect2($select, $select.data('placeholder'));
                    })
                    .fail(function () {
                        $select.empty().prop('disabled', false);
                        initAccountSelect2($select, 'Không tải được danh sách tài khoản');
                    });
            }

            @if(!$configError)
                // Trang chỉ render khung; dữ liệu và trạng thái token tải bằng ajax.
                $.get(withUser('{{ url('marketing/meta-ads/check-token') }}')).done(renderToken);
                loadAccounts();
                load();
            @endif
        })();
    </script>
@endsection