{% extends "base.html" %}

{% block title %}API Tokens - VidAI{% endblock %}

{% block head %}
<style>
        .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
        .tokens-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
        .card-header { margin-bottom: 1.5rem; }
        .card-header h3 { margin: 0; color: #1e293b; }
        .form-group { margin-bottom: 1.5rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
        .form-group input { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
        .form-group input:focus { outline: none; border-color: #667eea; }
        .btn { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
        .btn:hover { background: #5a67d8; }
        .btn-danger { background: #dc2626; }
        .btn-danger:hover { background: #b91c1c; }
        .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
        .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
        .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
        .token-display { background: #f8fafc; padding: 1rem; border-radius: 8px; border: 1px solid #e5e7eb; margin: 1rem 0; }
        .token-display pre { word-break: break-all; white-space: pre-wrap; font-family: monospace; background: white; padding: 1rem; border-radius: 4px; border: 1px solid #d1d5db; }
        .copy-btn { margin-top: 0.5rem; padding: 0.5rem 1rem; font-size: 0.9rem; }
        .table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
        .table th, .table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
        .table th { background: #f8fafc; font-weight: 600; color: #374151; }
        .status-active { color: #065f46; font-weight: 500; }
        .status-inactive { color: #dc2626; font-weight: 500; }
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
        .modal-content { background-color: white; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; width: 90%; max-width: 500px; border-radius: 12px; }
        .modal-header { margin-bottom: 1rem; position: relative; }
        .modal-footer { text-align: right; margin-top: 1.5rem; }
        .close { position: absolute; top: 0; right: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; }
    </style>
{% endblock %}

{% block content %}
<div class="container">
        <div class="tokens-card">
            <div class="card-header">
                <h3><i class="fas fa-key"></i> Your API Tokens</h3>
                <div style="display: flex; gap: 1rem; margin-left: auto;">
                    <a href="{{ url_for('mobileapp_link') }}" class="btn" style="background: #10b981;"><i class="fas fa-mobile-alt"></i> Link Mobile App</a>
                    <button onclick="openAddTokenModal()" class="btn"><i class="fas fa-plus"></i> Add Token</button>
                </div>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
            {% endwith %}

        <div class="tokens-card">
            <div class="card-header">
                <h3><i class="fas fa-key"></i> Your API Tokens</h3>
            </div>

            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Created</th>
                        <th>Last Used</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for token in user_tokens %}
                    <tr>
                        <td>{{ token.get('name') }}</td>
                        <td>{{ token.get('created_at', 'N/A')[:19] if token.get('created_at') else 'N/A' }}</td>
                        <td>{{ token.get('last_used', 'Never')[:19] if token.get('last_used') else 'Never' }}</td>
                        <td><span class="status-{{ 'active' if token.get('active') else 'inactive' }}">{{ 'Active' if token.get('active') else 'Inactive' }}</span></td>
                        <td>
                            <button onclick="deleteToken({{ token.get('id') }}, '{{ token.get('name') }}')" class="btn btn-danger" style="padding: 0.5rem 1rem; font-size: 0.9rem;">Delete</button>
                        </td>
                    </tr>
                    {% endfor %}
                    {% if not user_tokens %}
                    <tr>
                        <td colspan="5" style="text-align: center; color: #6b7280;">No API tokens found. Generate your first token above.</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Add Token Modal -->
    <div id="addTokenModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-plus"></i> Generate New API Token</h3>
                <span class="close" onclick="closeAddTokenModal()">&times;</span>
            </div>
            <form method="post" action="/api_tokens/generate">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="modal_token_name">Token Name</label>
                        <input type="text" id="modal_token_name" name="token_name" placeholder="e.g., My App Token" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="closeAddTokenModal()" class="btn" style="background: #6b7280;">Cancel</button>
                    <button type="submit" class="btn">Generate Token</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Token Generated Modal -->
    {% if generated_token %}
    <div id="tokenModal" class="modal" style="display: block;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>API Token Generated Successfully!</h3>
                <span class="close" onclick="closeTokenModal()">&times;</span>
            </div>
            <div class="modal-body">
                <p><strong>Token Name:</strong> {{ token_name }}</p>
                <p><strong>Token:</strong></p>
                <div class="token-display" style="margin: 1rem 0;">
                    <pre id="modalTokenText">{{ generated_token }}</pre>
                    <button class="btn copy-btn" onclick="copyTokenFromModal()">Copy Token</button>
                </div>
                <p style="color: #dc2626; font-weight: 500;">Copy this token now. You won't be able to see it again!</p>
            </div>
            <div class="modal-footer">
                <button onclick="closeTokenModal()" class="btn">Close</button>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Delete API Token</h3>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the token "<span id="deleteTokenName"></span>"?</p>
                <p style="color: #dc2626; font-weight: 500;">This action cannot be undone. Any applications using this token will stop working.</p>
            </div>
            <div class="modal-footer">
                <button onclick="closeDeleteModal()" class="btn" style="background: #6b7280;">Cancel</button>
                <form id="deleteForm" method="post" action="" style="display: inline;">
                    <button type="submit" class="btn btn-danger">Delete Token</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function copyToken() {
            const tokenText = document.getElementById('tokenText');
            navigator.clipboard.writeText(tokenText.textContent).then(function() {
                alert('Token copied to clipboard!');
            }, function(err) {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = tokenText.textContent;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                alert('Token copied to clipboard!');
            });
        }

        function deleteToken(tokenId, tokenName) {
            document.getElementById('deleteTokenName').textContent = tokenName;
            document.getElementById('deleteForm').action = `/api_tokens/delete/${tokenId}`;
            document.getElementById('deleteModal').style.display = 'block';
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
        }

        function openAddTokenModal() {
            const modal = document.getElementById('addTokenModal');
            modal.style.display = 'block';
        }

        function closeAddTokenModal() {
            const modal = document.getElementById('addTokenModal');
            modal.style.display = 'none';
        }

        function closeTokenModal() {
            document.getElementById('tokenModal').style.display = 'none';
            window.location.href = '/api_tokens'; // Redirect to avoid POST resubmission
        }

        function copyTokenFromModal() {
            const tokenText = document.getElementById('modalTokenText');
            const copyBtn = document.querySelector('#tokenModal .copy-btn');
            const originalText = copyBtn.textContent;

            // Use execCommand for reliable copying
            const textArea = document.createElement('textarea');
            textArea.value = tokenText.textContent.trim();
            document.body.appendChild(textArea);
            textArea.select();
            try {
                document.execCommand('copy');
                copyBtn.textContent = 'Copied!';
                copyBtn.style.background = '#10b981';
                setTimeout(function() {
                    copyBtn.textContent = originalText;
                    copyBtn.style.background = '';
                }, 2000);
            } catch (err) {
                alert('Failed to copy token. Please select and copy manually.');
            }
            document.body.removeChild(textArea);
        }

        // Close modal when clicking outside
        window.onclick = function(event) {
            const addModal = document.getElementById('addTokenModal');
            if (addModal && event.target == addModal) {
                closeAddTokenModal();
            }
            const deleteModal = document.getElementById('deleteModal');
            if (deleteModal && event.target == deleteModal) {
                closeDeleteModal();
            }
            const tokenModal = document.getElementById('tokenModal');
            if (tokenModal && event.target == tokenModal) {
                closeTokenModal();
            }
            // Close user dropdown
            const dropdown = document.getElementById('userDropdown');
            const icon = document.querySelector('.user-icon');
            if (dropdown && icon && !icon.contains(event.target) && !dropdown.contains(event.target)) {
                dropdown.style.display = 'none';
            }
        }

        function toggleUserMenu() {
            const dropdown = document.getElementById('userDropdown');
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        }
    </script>
{% endblock %}