@extends('layout.app')
@section('_style')
    <style>
        /* Màn Tài khoản quảng cáo Meta - dựa trên bộ .crm-list-* / .crm-stats dùng chung, chỉ bổ sung phần riêng .meta-* */
        .meta-ads-page { width: 100%; }

        .meta-ads-page .crm-list-header .card-title .fab { color: #1877F2; font-size: 20px; }
        .meta-ads-page .crm-list-header .card-title small { margin-left: 6px; color: var(--crm-text-muted); font-size: 13px; font-weight: 500; }

        .meta-ads-page .meta-user-select { width: auto; min-width: 220px; height: 38px; }

        .meta-token-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; }
        .meta-token-status small { color: var(--crm-text-muted); font-size: 12px; }

        /* Badge trạng thái (JS renderToken dùng .meta-badge.valid/.warn/.danger) */
        .meta-badge {
            display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
            padding: 3px 10px; border-radius: 999px;
            font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em;
            white-space: normal; word-break: break-word;
        }
        .meta-badge.valid { background: var(--crm-success-soft); color: #047857; box-shadow: inset 0 0 0 1px #a7f3d0; }
        .meta-badge.warn { background: #fff7ed; color: #c2410c; box-shadow: inset 0 0 0 1px #fed7aa; }
        .meta-badge.danger { background: var(--crm-danger-soft); color: #b91c1c; box-shadow: inset 0 0 0 1px #fecaca; }

        .meta-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px 24px; }

        /* Khối tình trạng token */
        .meta-token-panel { padding: 14px 16px; border: 1px solid var(--crm-border-soft); border-radius: 12px; background: var(--crm-surface-soft); }
        .meta-token-panel__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
        .meta-token-panel__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .meta-token-panel__icon {
            display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center;
            width: 38px; height: 38px; border-radius: 10px; background: #e7f0fe; color: #1877F2; font-size: 16px;
        }
        .meta-token-panel__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--crm-text-strong); font-weight: 700; }
        .meta-token-panel__sub { display: block; margin-top: 2px; color: var(--crm-text-muted); font-size: 12px; }
        .meta-token-panel ol { margin-bottom: 8px; padding-left: 18px; }

        /* Bộ lọc */
        .meta-filter-panel { padding: 16px; border: 1px solid var(--crm-border-soft); border-radius: 12px; background: var(--crm-surface); }
        .meta-filter-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; }
        .meta-filter-grid label { display: block; margin-bottom: 6px; color: var(--crm-text-strong); font-size: 12px; font-weight: 600; }
        .meta-filter-panel .select2-container .select2-selection { min-height: 42px; }
        .meta-filter-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--crm-border); }
        .meta-filter-note { color: var(--crm-text-muted); font-size: 12px; }
        .meta-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
        .meta-filter-actions .btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }

        /* Kết quả */
        #metaAdsTable { min-height: 120px; }
        .meta-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 12px; color: var(--crm-text-muted); }
        .meta-undefined { color: #94a3b8; font-style: italic; font-size: 12px; }
        .meta-table-wrap { width: 100%; max-height: calc(100vh - 240px); min-height: 180px; overflow: auto; }
        .meta-table { min-width: 1180px; table-layout: fixed; }
        .meta-table .meta-col-index { width: 52px; }
        .meta-table .meta-col-account { width: 190px; }
        .meta-table .meta-col-name { width: 280px; }
        .meta-table .meta-col-status { width: 120px; }
        .meta-table .meta-col-result-type { width: 170px; }
        .meta-table .meta-col-number { width: 130px; }
        .meta-table .meta-col-budget { width: 160px; }
        .meta-table { min-width: 1280px; }
        /* Tiêu đề cột được xuống dòng (tránh bị cắt chữ); chữ thường trong ô được ngắt, còn ô số giữ trên 1 dòng */
        .crm-2026 .meta-table thead th { white-space: normal !important; vertical-align: bottom !important; }
        .meta-table td { overflow-wrap: anywhere; }
        .meta-table td.text-right { overflow-wrap: normal; white-space: nowrap; }
        .meta-table td.text-right .meta-undefined { white-space: normal; }
        .meta-cell-main { display: block; color: var(--crm-text-strong); font-weight: 600; }
        .meta-cell-sub { display: block; margin-top: 2px; color: var(--crm-text-muted); font-size: 12px; }
        .meta-note { margin-top: 8px; color: var(--crm-text-muted); font-size: 12px; }

        @media (max-width: 1199.98px) {
            .meta-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .meta-filter-grid > :first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 767.98px) {
            .meta-body { padding: 14px 12px 18px; }
            .meta-filter-grid { grid-template-columns: minmax(0, 1fr); }
            .meta-filter-actions, .meta-filter-actions .btn { width: 100%; }
            .meta-filter-actions .btn { justify-content: center; }
            .meta-table-wrap { max-height: calc(100vh - 200px); }
        }
    </style>
@endsection
@section('content')
    <div class="col-12 meta-ads-page">
        <div class="card crm-list-card">
            <div class="card-header crm-list-header">
                <h3 class="card-title">
                    <i class="fab fa-facebook"></i> Tài khoản quảng cáo Meta
                    @if(!$isOwnAccount)
                        <small>— {{ $targetUser->full_name }}</small>
                    @endif
                </h3>
                <div class="crm-list-header__actions">
                    @if($isAdmin)
                        <select id="metaUserId" class="form-control meta-user-select" aria-label="Xem dữ liệu của nhân viên">
                            <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-primary">
                            <i class="fab fa-facebook-square"></i> Lấy token qua Facebook
                        </a>
                    @endif
                    {{-- Gia hạn chỉ cần token đang lưu, nên admin gia hạn được cho cả nhân viên đang chọn. --}}
                    @if(!$configError)
                        <button type="button" id="metaRefreshToken" class="btn btn-light">
                            <i class="fas fa-sync-alt"></i>
                            {{ $isOwnAccount ? 'Gia hạn token' : 'Gia hạn token của ' . $targetUser->full_name }}
                        </button>
                    @endif
                    <a href="{{ url('users/'.$targetUser->id.'/edit') }}" class="btn btn-light">
                        <i class="fas fa-key"></i> Cấu hình Meta App
                    </a>
                </div>
            </div>

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

                @if($configError)
                    @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])
                @else
                    @include('marketing.meta_ads.token_panel', ['panelUser' => $targetUser, 'canManage' => $isOwnAccount])

                    <form id="metaAdsFilter" class="meta-filter-panel">
                        @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="meta-filter-grid">
                            <div>
                                <label for="metaAccounts">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>
                                <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>
                                <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>
                                <label>Từ ngày</label>
                                <input type="date" name="since" value="{{ $filters['since'] }}" class="form-control">
                            </div>
                            <div>
                                <label>Đến ngày</label>
                                <input type="date" name="until" value="{{ $filters['until'] }}" class="form-control">
                            </div>
                        </div>
                        <div class="meta-filter-footer">
                            <span class="meta-filter-note"><i class="fas fa-info-circle"></i> 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.</span>
                            <div class="meta-filter-actions">
                                <button type="button" id="metaCheckToken" class="btn btn-light">
                                    <i class="fas fa-shield-alt"></i> Kiểm tra token
                                </button>
                                <a href="#" id="metaExport" class="btn btn-outline-secondary"><i class="fas fa-cloud-download-alt"></i> Xuất CSV</a>
                                <button type="submit" class="btn btn-primary"><i class="fas fa-chart-line"></i> Xem báo cáo</button>
                            </div>
                        </div>
                    </form>
                    @include('marketing.meta_ads.redirect_hint', ['redirectUri' => $redirectUri])

                    <div id="metaAdsTable">
                        @include('marketing.meta_ads.ajax', ['report' => $report])
                    </div>
                @endif
            </div>
        </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"><span class="crm-spinner"></span><div>Đ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() }}', meta_user_id: metaUserId}
                }).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