@extends('layouts.app')

@section('title', 'Settings')

@section('content')
<div class="row">
    <!-- Left Card: Configurations -->
    <div class="col-md-7">
        <div class="card card-primary card-outline shadow mb-4">
            <div class="card-header">
                <h3 class="card-title font-weight-bold">Cấu hình hệ thống</h3>
            </div>
            <form action="{{ route('settings.update') }}" method="POST">
                @csrf
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Affiliate ID</label>
                        <input type="text" name="affiliate_id" class="form-control" value="{{ $settings['affiliate_id'] ?? '' }}" placeholder="e.g. 14354840000" required>
                        <small class="text-muted">Mã Affiliate ID của bạn (lấy từ thiết lập tài khoản Shopee Affiliate). Đây là tham số bắt buộc để hệ thống tạo link chuyển hướng (an_redir) offline.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Zalo Bot Token</label>
                        <input type="text" name="zalo_bot_token" class="form-control" value="{{ $settings['zalo_bot_token'] ?? '' }}" placeholder="e.g. 397768738295918070:hUGit...">
                        <small class="text-muted">Mã Token HTTP API của Zalo Bot (lấy từ ứng dụng Bot Creator). Dùng để chatbot tự động gửi tin nhắn phản hồi.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Zalo Webhook Secret Token</label>
                        <input type="text" name="zalo_webhook_secret" class="form-control" value="{{ $settings['zalo_webhook_secret'] ?? '' }}" placeholder="e.g. your-chosen-secret-key">
                        <small class="text-muted">Mã khoá bảo mật tự chọn (điền ở ô Secret Token trên Zalo Bot Creator). Dùng để xác thực các request gửi từ Zalo về web của bạn là an toàn. Có thể để trống nếu không dùng.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Short Link Domain Override (Public Domain)</label>
                        <input type="url" name="short_link_domain" class="form-control" value="{{ $settings['short_link_domain'] ?? '' }}" placeholder="https://your-domain.com">
                        <small class="text-muted">Tên miền công khai của bạn (ví dụ: link ngrok hiện tại của bạn: <code>https://c2e9-....ngrok-free.app</code>). Dùng để các link rút gọn gửi đi có tên miền click được từ xa. Để trống sẽ dùng mặc định localhost.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Link tham gia Nhóm Zalo (Cộng đồng)</label>
                        <input type="url" name="zalo_group_join_url" class="form-control" value="{{ $settings['zalo_group_join_url'] ?? '' }}" placeholder="https://zalo.me/g/xxxxxx">
                        <small class="text-muted">Đường dẫn tham gia nhóm Zalo chia sẻ/hỗ trợ của bạn. Đường dẫn này sẽ hiển thị ở trang tạo link công khai để người dùng truy cập.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Tỷ lệ hoa hồng ước tính cố định (%)</label>
                        <input type="number" step="0.1" name="commission_rate_override" class="form-control" value="{{ $settings['commission_rate_override'] ?? '' }}" placeholder="Để trống để tính tự động theo ngành hàng (từ 0.8% đến 7.4%)">
                        <small class="text-muted">Cấu hình tỷ lệ hoa hồng cố định hiển thị cho người dùng (ví dụ: <code>5.0</code> đại diện cho 5%). Để trống hệ thống sẽ tự phân loại thông minh theo ngành hàng và loại shop.</small>
                    </div>
                    <hr class="my-4">
                    <div class="mb-3 form-check form-switch">
                        <input type="checkbox" name="enable_auto_cleanup" id="enable_auto_cleanup" class="form-check-input" value="1" {{ ($settings['enable_auto_cleanup'] ?? '1') === '1' ? 'checked' : '' }}>
                        <label for="enable_auto_cleanup" class="form-check-label font-weight-bold text-danger">Kích hoạt Tự động dọn dẹp link hết hạn (Countdown)</label>
                        <div class="small text-muted mt-1">Hệ thống sẽ chạy ngầm hàng ngày để xóa bỏ các link quá hạn dùng nhằm giải phóng cơ sở dữ liệu.</div>
                    </div>
                    
                    <div class="card bg-light border-warning shadow-none mb-0">
                        <div class="card-body mt-0 pt-0 pb-0">
                            <h6 class="text-warning font-weight-bold mb-2"><i class="bi bi-shield-fill-exclamation me-1"></i> Cách tính Countdown dọn dẹp:</h6>
                            <ul class="small text-muted ps-3 mb-0">
                                <li class="mb-1"><strong>Sống cơ bản:</strong> 30 ngày kể từ lúc tạo link.</li>
                                <li class="mb-1"><strong>Cộng thêm click:</strong> Mỗi 1 click (`clicks`) sẽ được cộng thêm <strong>3 ngày sống</strong>.</li>
                                <li><strong>Công thức:</strong> <code>Hạn dùng = Ngày tạo + 30 ngày + (Lượt click × 3 ngày)</code>.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <button type="submit" class="btn btn-primary">Save Settings</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Right Card: Zalo User-Bot Status -->
    <div class="col-md-5">
        <div class="card card-info card-outline shadow mb-4">
            <div class="card-header">
                <h3 class="card-title font-weight-bold">Zalo Self-Bot (Tài khoản cá nhân)</h3>
            </div>
            <div class="card-body text-center">
                @php
                    $status = $settings['zalo_bot_status'] ?? 'disconnected';
                    $user = $settings['zalo_bot_user'] ?? '';
                @endphp

                <div class="mb-4">
                    <span class="fs-6 d-block mb-2 text-muted">Trạng thái kết nối:</span>
                    @if($status === 'connected')
                        <span class="badge text-bg-success px-3 py-2 fs-6"><i class="bi bi-patch-check-fill me-1"></i> ĐÃ KẾT NỐI</span>
                        <div class="mt-3 font-weight-bold text-success fs-5">
                            <i class="bi bi-person-circle"></i> {{ $user ?: 'Tài khoản Zalo' }}
                        </div>
                        <p class="text-muted small mt-2">Bot đang chạy ngầm và lắng nghe tin nhắn từ tài khoản này.</p>
                        
                        <div class="mt-4">
                            <form action="{{ route('settings.zalo.stop') }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-stop-fill"></i> Tắt Bot</button>
                            </form>
                        </div>
                    @elseif($status === 'waiting_scan')
                        <div class="d-flex flex-column align-items-center justify-content-center">
                            <span class="badge text-bg-warning px-3 py-2 fs-6 text-dark mb-3"><i class="bi bi-qr-code-scan me-1"></i> CHỜ QUÉT MÃ QR</span>
                            
                            <div class="p-3 border rounded bg-white d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 250px; height: 250px; position: relative; min-height: 250px;">
                                <!-- Loading Spinner -->
                                <div id="qr-spinner" class="text-center" style="position: absolute; z-index: 1;">
                                    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
                                    <div class="mt-2 text-muted small font-weight-bold">Đang tạo mã QR...</div>
                                </div>
                                <!-- QR Image (Hidden until loaded) -->
                                <img id="qr-image" src="/zalo/qr.png?v={{ time() }}" class="img-fluid d-none" style="max-height: 220px; position: absolute; z-index: 2;" alt="Zalo QR Login" onload="document.getElementById('qr-spinner').classList.add('d-none'); this.classList.remove('d-none');" onerror="setTimeout(() => { this.src = '/zalo/qr.png?v=' + Date.now(); }, 2000)">
                            </div>
                        </div>
                        
                        <div class="mt-3 text-start small text-muted px-2">
                            <i class="bi bi-info-circle-fill text-warning"></i> <strong>Hướng dẫn quét mã:</strong>
                            <ol class="mt-1 mb-0 ps-3">
                                <li>Mở ứng dụng Zalo trên điện thoại (nên dùng nick phụ).</li>
                                <li>Mở tính năng <b>Quét mã QR</b> và quét ảnh phía trên.</li>
                                <li>Xác nhận <b>Đăng nhập</b> trên điện thoại của bạn.</li>
                            </ol>
                        </div>

                        <div class="mt-4">
                            <form action="{{ route('settings.zalo.stop') }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-secondary btn-sm"><i class="bi bi-stop-fill"></i> Hủy & Tắt Bot</button>
                            </form>
                        </div>
                    @else
                        <span class="badge text-bg-danger px-3 py-2 fs-6"><i class="bi bi-x-circle-fill me-1"></i> NGẮT KẾT NỐI</span>
                        <p class="text-muted small mt-3">Tài khoản Zalo cá nhân hiện chưa được liên kết.</p>
                        
                        <div class="mt-4">
                            <form action="{{ route('settings.zalo.start') }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-success"><i class="bi bi-play-fill"></i> Khởi động Bot Zalo</button>
                            </form>
                        </div>
                    @endif
                </div>

                @if($status !== 'disconnected')
                    <hr>
                    <div class="text-muted small text-start">
                        <i class="bi bi-lightbulb-fill text-info"></i> Để ngắt kết nối tài khoản hoặc đổi tài khoản khác: bạn hãy nhấn <code>Ctrl + C</code> ở Terminal chạy bot và xóa file <code>zalo-userbot/session.json</code> (nếu có) hoặc đăng xuất phiên web trên app điện thoại.
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Auto-poll status from Laravel to refresh page when connection state changes
    @if(isset($status) && ($status === 'waiting_scan' || $status === 'connected'))
        let currentStatus = '{{ $status }}';
        setInterval(() => {
            fetch('{{ route('settings.zalo.status_check') }}')
                .then(response => response.json())
                .then(data => {
                    if (data.status !== currentStatus) {
                        window.location.reload();
                    }
                })
                .catch(err => console.error("Error checking bot status:", err));
        }, 3000);
    @endif
</script>
@endpush