{% extends "base.html" %}

{% block title %}Telegram Accounts{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-2 pb-3 mb-4 border-bottom">
    <h1 class="h2"><i class="fa-solid fa-users-gear text-primary me-2"></i>Telegram Accounts & Live OTP Reader</h1>
    <div>
        <button type="button" class="btn btn-primary" id="humanNamesButton" onclick="startHumanNameUpdate()">
            <i class="fa-solid fa-user-pen me-1"></i>Auto Human Names for All IDs
        </button>
    </div>
</div>

<div class="card bg-dark text-light mb-4 d-none" id="humanNamesTerminal">
    <div class="card-header fw-bold"><i class="fa-solid fa-terminal me-2"></i>Human Name Update — Live Terminal</div>
    <pre class="p-3 mb-0 text-success" id="humanNamesOutput" style="min-height:130px;white-space:pre-wrap">Ready...</pre>
</div>

{% if pending_login %}
<!-- OTP Verification Card for Web Login -->
<div class="card border-primary mb-4 shadow">
    <div class="card-header bg-primary text-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-key me-2"></i>Enter Telegram OTP Code for {{ pending_login }}</h5>
        <form action="/sessions/cancel_login/" method="POST" class="d-inline">
            <button type="submit" class="btn btn-sm btn-light text-danger">Cancel</button>
        </form>
    </div>
    <div class="card-body">
        <form action="/sessions/verify_code/" method="POST">
            <input type="hidden" name="phone_number" value="{{ pending_login }}">
            <div class="row g-3">
                <div class="col-md-6">
                    <label for="otp_code" class="form-label font-weight-bold">Telegram OTP Login Code *</label>
                    <input type="text" class="form-control form-control-lg" name="otp_code" placeholder="12345" required autofocus>
                    <div class="form-text">Check the verified Telegram service chat (777000), including Archived chats and your other logged-in devices. SMS is only offered when Telegram allows it.</div>
                </div>
                <div class="col-md-6">
                    <label for="password" class="form-label font-weight-bold">2FA Password (If enabled on account)</label>
                    <input type="password" class="form-control form-control-lg" name="password" placeholder="Two-Step Verification Password">
                </div>
                <div class="col-12 text-end mt-3">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="fa-solid fa-check-circle me-1"></i>Verify & Login Telegram ID
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endif %}

<!-- Add Account Options Cards -->
<div class="row g-4 mb-4">
    <!-- Option 1: Add via Pre-generated String Session (RECOMMENDED) -->
    <div class="col-md-6">
        <div class="card h-100 border-primary shadow-sm">
            <div class="card-header bg-primary text-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold"><i class="fa-solid fa-bolt me-2"></i>Method 1: Paste String Session</h5>
                <span class="badge bg-warning text-dark">⚡ RECOMMENDED (100% INSTANT)</span>
            </div>
            <div class="card-body">
                <form action="" method="POST">
                    <div class="mb-3">
                        <label for="session_string" class="form-label font-weight-bold">Pyrogram / Telethon String Session *</label>
                        <textarea class="form-control" name="session_string" rows="3" placeholder="Paste your Pyrogram string session string here..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold">
                        <i class="fa-solid fa-plus-circle me-1"></i>+ Add Session String
                    </button>
                </form>
                <div class="mt-3 p-2 bg-light rounded border text-muted small">
                    <i class="fa-solid fa-circle-info text-primary me-1"></i><strong>How to get String Session in 5 seconds?</strong><br>
                    Open Telegram App & search for <code class="text-primary">@StringSessionGeneratorBot</code> or <code class="text-primary">@SessionGenerator_Bot</code> -> Start -> Select Pyrogram -> Copy & paste string session string here!
                </div>
            </div>
        </div>
    </div>

    <!-- Option 2: Login via Phone Number & Web OTP -->
    <div class="col-md-6">
        <div class="card h-100 border-secondary">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0 fw-bold text-secondary"><i class="fa-solid fa-mobile-screen-button me-2"></i>Method 2: Web Phone OTP Login</h5>
            </div>
            <div class="card-body">
                <form action="/sessions/send_code/" method="POST">
                    <div class="mb-3">
                        <label for="phone_number" class="form-label font-weight-bold">Telegram Phone Number (with Country Code)</label>
                        <input type="text" class="form-control" name="phone_number" placeholder="+919876543210" required>
                        <div class="form-text">Example: +919876543210. Check official Telegram App chat for the OTP code.</div>
                    </div>
                    <button type="submit" class="btn btn-outline-success w-100">
                        <i class="fa-solid fa-paper-plane me-1"></i>Send OTP Code to Telegram
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Registered Accounts List with Live OTP Reader -->
<div class="card shadow-sm">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-list me-2"></i>Registered Userbot Sessions ({{ accounts|length }})</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Account Name</th>
                        <th>Phone Number</th>
                        <th>Status</th>
                        <th>Live Telegram Messages / OTP</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for acc in accounts %}
                    <tr>
                        <td><strong>#{{ acc.id }}</strong></td>
                        <td>
                            <i class="fa-solid fa-user-circle me-1 text-primary"></i>
                            {{ acc.name or 'Telegram Account' }}
                        </td>
                        <td><code>{{ acc.phone_number or 'N/A' }}</code></td>
                        <td>
                            {% if acc.is_active %}
                                <span class="badge bg-success">Active</span>
                            {% else %}
                                <span class="badge bg-secondary">Disabled</span>
                            {% endif %}
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="fetchAccountOTP('{{ acc.id }}', '{{ acc.name }}')">
                                <i class="fa-solid fa-envelope me-1"></i>📩 View Received OTP Code
                            </button>
                        </td>
                        <td class="text-end">
                            <form action="/sessions/delete/{{ acc.id }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to remove this Telegram account session?');">
                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                    <i class="fa-solid fa-trash me-1"></i>Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">No Telegram accounts added yet. Add a string session or phone number above!</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal for Viewing Account Telegram OTP Messages -->
<div class="modal fade" id="otpModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-dark">
                <h5 class="modal-title fw-bold" id="otpModalTitle"><i class="fa-solid fa-envelope me-2"></i>Telegram Received OTP Codes</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="otpModalBody">
                <div class="text-center py-4">
                    <div class="spinner-border text-info" role="status"></div>
                    <p class="mt-2 text-muted">Reading Telegram Service Messages & OTP codes...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
const humanNameAccountIds = {{ accounts | map(attribute='id') | list | tojson }};

async function startHumanNameUpdate() {
    if (!humanNameAccountIds.length) return;
    if (!confirm('Change all loaded Telegram accounts to different human names?')) return;
    const button = document.getElementById('humanNamesButton');
    const terminal = document.getElementById('humanNamesTerminal');
    const output = document.getElementById('humanNamesOutput');
    button.disabled = true;
    terminal.classList.remove('d-none');
    output.textContent = 'Starting profile updates...\n';
    let successCount = 0;

    for (let i = 0; i < humanNameAccountIds.length; i++) {
        const accountId = humanNameAccountIds[i];
        output.textContent += `[${i + 1}/${humanNameAccountIds.length}] Updating account #${accountId}... `;
        try {
            const body = new URLSearchParams({account_id: accountId, name_index: i});
            const response = await fetch('{{ url_for("service_profile_name_one") }}', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: body
            });
            const data = await response.json();
            output.textContent += (data.success ? '✅ ' : '❌ ') + data.message + '\n';
            if (data.success) successCount++;
        } catch (error) {
            output.textContent += '❌ ' + error + '\n';
        }
        output.scrollTop = output.scrollHeight;
        await new Promise(resolve => setTimeout(resolve, 1200));
    }
    output.textContent += `\nCompleted: ${successCount}/${humanNameAccountIds.length} names updated.`;
    button.disabled = false;
    if (successCount) setTimeout(() => window.location.reload(), 2500);
}

function fetchAccountOTP(accountId, accountName) {
    var modalTitle = document.getElementById('otpModalTitle');
    var modalBody = document.getElementById('otpModalBody');
    modalTitle.innerHTML = '<i class="fa-solid fa-envelope me-2"></i>Telegram OTP Codes for ' + accountName;
    modalBody.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-info" role="status"></div><p class="mt-2 text-muted">Fetching latest Telegram OTP messages...</p></div>';
    
    var myModal = new bootstrap.Modal(document.getElementById('otpModal'));
    myModal.show();

    fetch('/sessions/otp/' + accountId)
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                var html = '';
                if (data.otp_messages && data.otp_messages.length > 0) {
                    data.otp_messages.forEach(msg => {
                        var codesHtml = '';
                        if (msg.extracted_codes && msg.extracted_codes.length > 0) {
                            msg.extracted_codes.forEach(code => {
                                codesHtml += '<span class="badge bg-warning text-dark fs-5 me-1 px-3 py-2">' + code + '</span>';
                            });
                        }
                        html += '<div class="card mb-3 border-info"><div class="card-body">';
                        html += '<div class="d-flex justify-content-between mb-2"><small class="text-muted"><i class="fa-regular fa-clock me-1"></i>' + msg.date + '</small><div>' + codesHtml + '</div></div>';
                        html += '<p class="card-text bg-light p-2 rounded mb-0"><code>' + msg.text + '</code></p>';
                        html += '</div></div>';
                    });
                } else {
                    html = '<div class="alert alert-warning text-center">No recent OTP messages found from Telegram Notification (777000).</div>';
                }
                modalBody.innerHTML = html;
            } else {
                modalBody.innerHTML = '<div class="alert alert-danger">Error: ' + data.message + '</div>';
            }
        })
        .catch(err => {
            modalBody.innerHTML = '<div class="alert alert-danger">Failed to fetch OTP messages: ' + err + '</div>';
        });
}
</script>
{% endblock %}