@extends('admin.layout')

@section('content')
<div class="ad-container">
    <div class="ad-header" style="margin-bottom: 24px;">
        <h2 style="font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px;">Kết nối API Đại lý</h2>
        <p style="font-size: 13px; color: var(--text-muted);">Cấu hình các thông số kết nối API để làm việc với hệ thống đại lý ngoài.</p>
    </div>

    @if(session('success'))
        <div style="background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('admin.agencyApi.update') }}" method="POST">
        @csrf
        
        <div class="card" style="padding: 24px; margin-bottom: 24px;">
            <div style="border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
                <h3 style="font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-network-wired" style="color: var(--accent);"></i> Cấu hình kết nối API
                </h3>
                
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span style="font-size: 12px; font-weight: 600; color: var(--text-muted);">Trạng thái:</span>
                    <label style="position: relative; display: inline-block; width: 40px; height: 20px;">
                        <input type="checkbox" name="agency_api_status" value="1" {{ ($settings['agency_api_status'] ?? '0') === '1' ? 'checked' : '' }} style="opacity: 0; width: 0; height: 0; position: absolute;">
                        <span class="slider" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);"></span>
                        <span class="slider-dot" style="position: absolute; content: ''; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2);"></span>
                    </label>
                </div>
            </div>
            
            <div style="display: grid; gap: 16px;">
                <div>
                    <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">URL Hệ thống Đại lý (Endpoint)</label>
                    <input type="text" name="agency_api_endpoint" value="{{ $settings['agency_api_endpoint'] ?? '' }}" class="ad-input" style="width: 100%;" placeholder="https://api.example.com/...">
                    <p style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4;">Địa chỉ nhận request hoặc xử lý giao dịch với đại lý.</p>
                </div>
                
                <div>
                    <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">API Key (Secret Key)</label>
                    <input type="text" name="agency_api_key" value="{{ $settings['agency_api_key'] ?? '' }}" class="ad-input" style="width: 100%;" placeholder="Nhập API Key để xác thực...">
                    <p style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4;">Khóa bí mật dùng để chứng thực request gọi đi và kiểm tra request gọi tới.</p>
                </div>

                <div>
                    <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Webhook URL nhận callback</label>
                    <input type="text" name="agency_webhook_url" value="{{ $settings['agency_webhook_url'] ?? '' }}" class="ad-input" style="width: 100%;" placeholder="https://...">
                    <p style="font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4;">URL để đại lý gọi về (Webhook) cập nhật trạng thái đơn hoặc thông báo.</p>
                </div>
            </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 12px;">
            <button type="submit" class="btn btn-primary" style="padding: 12px 32px; font-weight: 800; border-radius: 12px; font-size: 13px;">
                <i class="fas fa-save"></i> LƯU CẤU HÌNH API
            </button>
        </div>
    </form>

    {{-- Test API Section --}}
    <div class="card" style="padding: 24px; margin-top: 24px;">
        <div style="border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px;">
            <h3 style="font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px;">
                <i class="fas fa-flask" style="color: #3b82f6;"></i> Kiểm tra kết nối API
            </h3>
        </div>

        <div style="display: grid; gap: 16px;">
            <div>
                <label style="display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;">Locket Username / Link Cần Test</label>
                <div style="display: flex; gap: 10px;">
                    <input type="text" id="test_username" class="ad-input" style="flex: 1;" placeholder="VD: https://locket.cam/khachhang123 hoặc @khachhang123">
                    <button type="button" onclick="testApi('resolve')" class="btn" style="background: #3b82f6; color: white;">
                        <i class="fas fa-search"></i> Test Resolve
                    </button>
                    <button type="button" onclick="testApi('activate')" class="btn" style="background: #10b981; color: white;">
                        <i class="fas fa-play"></i> Test Activate
                    </button>
                </div>
            </div>

            <div id="profile_preview" style="display: none; background: linear-gradient(145deg, #1a1a2e 0%, #2d1f4e 100%); border-radius: 12px; padding: 16px; border: 1px dashed rgba(168,85,247,0.4); align-items: center; gap: 16px;">
                <img id="preview_avatar" src="" alt="Avatar" style="width: 56px; height: 56px; border-radius: 50%; border: 2px solid #a855f7; object-fit: cover;" referrerpolicy="no-referrer">
                <div>
                    <div style="display: flex; align-items: center; gap: 6px;">
                        <div id="preview_name" style="font-weight: 800; color: #fff; font-size: 15px;"></div>
                        <svg class="w-4 h-4 text-blue-400" style="width: 16px; height: 16px; color: #60a5fa;" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    </div>
                    <div id="preview_username" style="color: #9ca3af; font-size: 12px; margin-top: 2px;"></div>
                    <div id="preview_status" style="margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase;"></div>
                </div>
            </div>

            <div style="background: #1e1e1e; border-radius: 8px; padding: 16px; position: relative;">
                <div style="position: absolute; top: 10px; right: 10px; font-size: 10px; color: #6b7280; font-family: monospace;">RAW RESPONSE</div>
                <pre id="test_response" style="margin: 0; color: #a7f3d0; font-family: monospace; font-size: 12px; white-space: pre-wrap; word-wrap: break-word; min-height: 80px;">Nhập Username và bấm Test để xem kết quả...</pre>
            </div>
        </div>
    </div>

</div>

<style>
    /* Custom style for the toggle switch */
    input:checked + .slider {
        background-color: var(--accent);
    }
    input:checked ~ .slider-dot {
        transform: translateX(20px);
    }
</style>

<script>
    async function testApi(type) {
        const username = document.getElementById('test_username').value.trim();
        const endpoint = document.querySelector('input[name="agency_api_endpoint"]').value.trim();
        const apiKey = document.querySelector('input[name="agency_api_key"]').value.trim();
        const out = document.getElementById('test_response');

        if (!endpoint) return alert('Vui lòng nhập Endpoint URL!');
        if (!username) return alert('Vui lòng nhập Username cần test!');
        if (type === 'activate' && !apiKey) return alert('Test Activate yêu cầu phải có API Key!');

        out.style.color = '#fbbf24';
        out.textContent = 'Đang gửi request...';
        document.getElementById('profile_preview').style.display = 'none';

        const url = type === 'resolve' 
            ? '{{ route("admin.agencyApi.testResolve") }}' 
            : '{{ route("admin.agencyApi.testActivate") }}';

        try {
            const res = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    endpoint: endpoint,
                    api_key: apiKey,
                    username: username
                })
            });

            const data = await res.json();
            
            if (!res.ok) {
                out.style.color = '#ef4444';
                out.textContent = `Lỗi HTTP: ${res.status}\n` + JSON.stringify(data, null, 2);
                return;
            }

            if (data.success === false && data.error) {
                out.style.color = '#ef4444';
                out.textContent = `Lỗi Hệ thống: ${data.error}`;
                return;
            }

            out.style.color = '#a7f3d0';
            out.textContent = `HTTP Status: ${data.status}\n\n` + JSON.stringify(data.data, null, 2);

            // Render visual profile if resolve succeeded
            if (type === 'resolve' && data.data && data.data.username) {
                document.getElementById('profile_preview').style.display = 'flex';
                document.getElementById('preview_avatar').src = data.data.avatar || '/bugcat.gif';
                document.getElementById('preview_name').textContent = data.data.name || data.data.username;
                document.getElementById('preview_username').textContent = '@' + data.data.username;
                
                const statusEl = document.getElementById('preview_status');
                if (data.data.is_gold) {
                    statusEl.innerHTML = '<i class="fas fa-crown"></i> Đã có Locket Gold';
                    statusEl.style.background = 'rgba(217, 119, 6, 0.15)';
                    statusEl.style.color = '#f59e0b';
                    statusEl.style.border = '1px solid rgba(245, 158, 11, 0.3)';
                } else {
                    statusEl.innerHTML = '<i class="fas fa-times-circle"></i> Chưa có Gold';
                    statusEl.style.background = 'rgba(220, 38, 38, 0.15)';
                    statusEl.style.color = '#ef4444';
                    statusEl.style.border = '1px solid rgba(239, 68, 68, 0.3)';
                }
            }

        } catch (e) {
            out.style.color = '#ef4444';
            out.textContent = 'Lỗi kết nối: ' + e.message;
        }
    }
</script>
@endsection