{% extends 'base.html' %}
{% load static %}

{% block title %}Social Accounts - Account Management{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Social Accounts</h4>
                        <h6>Manage your linked social media and external accounts</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'accounts:social_account_create' %}" class="btn btn-added">
                            <i class="fas fa-plus me-1"></i>Link Account
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Social Account Statistics -->
        <div class="row">
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-link"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.total_accounts|default:4 }}</h5>
                        <h6>Linked Accounts</h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-check-circle"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.active_accounts|default:3 }}</h5>
                        <h6>Active Accounts</h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-sign-in-alt"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.login_enabled|default:2 }}</h5>
                        <h6>Login Enabled</h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-12">
                <div class="dash-widget">
                    <div class="dash-widgetimg">
                        <span><i class="fas fa-calendar"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.last_used_days|default:2 }}</h5>
                        <h6>Days Since Last Use</h6>
                    </div>
                </div>
            </div>
        </div>

        <!-- Available Providers -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-plus-circle me-2"></i>
                            Available Social Providers
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                <div class="provider-card" data-provider="google">
                                    <div class="provider-icon">
                                        <i class="fab fa-google fa-2x text-danger"></i>
                                    </div>
                                    <h6>Google</h6>
                                    <button class="btn btn-outline-primary btn-sm" onclick="linkProvider('google')">
                                        <i class="fas fa-link me-1"></i>Link
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                <div class="provider-card" data-provider="microsoft">
                                    <div class="provider-icon">
                                        <i class="fab fa-microsoft fa-2x text-primary"></i>
                                    </div>
                                    <h6>Microsoft</h6>
                                    <button class="btn btn-outline-primary btn-sm" onclick="linkProvider('microsoft')">
                                        <i class="fas fa-link me-1"></i>Link
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                <div class="provider-card" data-provider="github">
                                    <div class="provider-icon">
                                        <i class="fab fa-github fa-2x text-dark"></i>
                                    </div>
                                    <h6>GitHub</h6>
                                    <button class="btn btn-outline-primary btn-sm" onclick="linkProvider('github')">
                                        <i class="fas fa-link me-1"></i>Link
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                <div class="provider-card" data-provider="linkedin">
                                    <div class="provider-icon">
                                        <i class="fab fa-linkedin fa-2x text-info"></i>
                                    </div>
                                    <h6>LinkedIn</h6>
                                    <button class="btn btn-outline-primary btn-sm" onclick="linkProvider('linkedin')">
                                        <i class="fas fa-link me-1"></i>Link
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                <div class="provider-card" data-provider="facebook">
                                    <div class="provider-icon">
                                        <i class="fab fa-facebook fa-2x text-primary"></i>
                                    </div>
                                    <h6>Facebook</h6>
                                    <button class="btn btn-outline-primary btn-sm" onclick="linkProvider('facebook')">
                                        <i class="fas fa-link me-1"></i>Link
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                <div class="provider-card" data-provider="twitter">
                                    <div class="provider-icon">
                                        <i class="fab fa-twitter fa-2x text-info"></i>
                                    </div>
                                    <h6>Twitter</h6>
                                    <button class="btn btn-outline-primary btn-sm" onclick="linkProvider('twitter')">
                                        <i class="fas fa-link me-1"></i>Link
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Linked Accounts -->
        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <a class="btn btn-searchset">
                                <i class="fas fa-search"></i>
                            </a>
                            <input type="text" id="searchInput" placeholder="Search linked accounts...">
                        </div>
                    </div>
                    <div class="wordset">
                        <ul>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Export" onclick="exportAccounts()">
                                    <i class="fas fa-download"></i>
                                </a>
                            </li>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Print" onclick="printAccounts()">
                                    <i class="fas fa-print"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Linked Accounts Table -->
                <div class="table-responsive">
                    <table class="table" id="accountsTable">
                        <thead>
                            <tr>
                                <th>Provider</th>
                                <th>Account</th>
                                <th>Status</th>
                                <th>Permissions</th>
                                <th>Linked Date</th>
                                <th>Last Used</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Sample Data -->
                            <tr>
                                <td>
                                    <div class="provider-info">
                                        <i class="fab fa-google fa-2x text-danger me-3"></i>
                                        <div>
                                            <h6 class="mb-0">Google</h6>
                                            <small class="text-muted">OAuth 2.0</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="account-info">
                                        <strong>john.smith@gmail.com</strong>
                                        <small class="d-block text-muted">John Smith</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightgreen">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                    <div class="mt-1">
                                        <span class="badge bg-success">Login Enabled</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="permissions-list">
                                        <span class="badge bg-info me-1">Profile</span>
                                        <span class="badge bg-info me-1">Email</span>
                                        <small class="d-block text-muted mt-1">2 permissions</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>Jan 15, 2024</strong>
                                        <small class="d-block text-muted">3 months ago</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>Today 09:30 AM</strong>
                                        <small class="d-block text-muted">2 hours ago</small>
                                    </div>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'accounts:social_account_detail' 1 %}" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Manage Permissions" onclick="managePermissions(1)">
                                        <i class="fas fa-cog"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Test Connection" onclick="testConnection(1)">
                                        <i class="fas fa-plug"></i>
                                    </a>
                                    <a class="confirm-text" href="{% url 'accounts:social_account_delete' 1 %}" data-bs-toggle="tooltip" title="Unlink Account">
                                        <i class="fas fa-unlink"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="provider-info">
                                        <i class="fab fa-microsoft fa-2x text-primary me-3"></i>
                                        <div>
                                            <h6 class="mb-0">Microsoft</h6>
                                            <small class="text-muted">OAuth 2.0</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="account-info">
                                        <strong>john.smith@company.com</strong>
                                        <small class="d-block text-muted">John Smith</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightgreen">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                    <div class="mt-1">
                                        <span class="badge bg-secondary">Login Disabled</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="permissions-list">
                                        <span class="badge bg-info me-1">Profile</span>
                                        <span class="badge bg-info me-1">Email</span>
                                        <span class="badge bg-info me-1">Calendar</span>
                                        <small class="d-block text-muted mt-1">3 permissions</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>Feb 20, 2024</strong>
                                        <small class="d-block text-muted">2 months ago</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>Apr 10, 2024</strong>
                                        <small class="d-block text-muted">5 days ago</small>
                                    </div>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'accounts:social_account_detail' 2 %}" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Manage Permissions" onclick="managePermissions(2)">
                                        <i class="fas fa-cog"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Test Connection" onclick="testConnection(2)">
                                        <i class="fas fa-plug"></i>
                                    </a>
                                    <a class="confirm-text" href="{% url 'accounts:social_account_delete' 2 %}" data-bs-toggle="tooltip" title="Unlink Account">
                                        <i class="fas fa-unlink"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="provider-info">
                                        <i class="fab fa-github fa-2x text-dark me-3"></i>
                                        <div>
                                            <h6 class="mb-0">GitHub</h6>
                                            <small class="text-muted">OAuth 2.0</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="account-info">
                                        <strong>johnsmith</strong>
                                        <small class="d-block text-muted">John Smith</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badges bg-lightyellow">
                                        <i class="fas fa-exclamation-triangle me-1"></i>Limited
                                    </span>
                                    <div class="mt-1">
                                        <span class="badge bg-warning">Token Expired</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="permissions-list">
                                        <span class="badge bg-info me-1">Profile</span>
                                        <span class="badge bg-info me-1">Repositories</span>
                                        <small class="d-block text-muted mt-1">2 permissions</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>Mar 05, 2024</strong>
                                        <small class="d-block text-muted">1 month ago</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>Mar 20, 2024</strong>
                                        <small class="d-block text-muted">3 weeks ago</small>
                                    </div>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'accounts:social_account_detail' 3 %}" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Refresh Token" onclick="refreshToken(3)">
                                        <i class="fas fa-sync"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Test Connection" onclick="testConnection(3)">
                                        <i class="fas fa-plug"></i>
                                    </a>
                                    <a class="confirm-text" href="{% url 'accounts:social_account_delete' 3 %}" data-bs-toggle="tooltip" title="Unlink Account">
                                        <i class="fas fa-unlink"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Empty State -->
                <div id="emptyState" class="text-center py-5" style="display: none;">
                    <i class="fas fa-link fa-3x text-muted mb-3"></i>
                    <h5>No Social Accounts Linked</h5>
                    <p class="text-muted">Link your social media accounts for easier login and enhanced features.</p>
                    <a href="{% url 'accounts:social_account_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>Link Your First Account
                    </a>
                </div>
            </div>
        </div>

        <!-- Security Information -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            Security & Privacy Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-success">
                                    <i class="fas fa-check-circle me-2"></i>Benefits
                                </h6>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-sign-in-alt text-primary me-2"></i>
                                        Quick and secure login
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-sync text-info me-2"></i>
                                        Automatic profile updates
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-shield-alt text-success me-2"></i>
                                        Enhanced security with OAuth
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>Privacy Notes
                                </h6>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-eye text-muted me-2"></i>
                                        Only requested permissions are accessed
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-times-circle text-danger me-2"></i>
                                        We never post on your behalf
                                    </li>
                                    <li class="mb-2">
                                        <i class="fas fa-user-secret text-secondary me-2"></i>
                                        Your data remains private
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize search functionality
    const searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('keyup', function() {
        filterAccounts();
    });

    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Check if table is empty
    checkEmptyState();
});

function filterAccounts() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const table = document.getElementById('accountsTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    let visibleRows = 0;

    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const provider = row.cells[0].textContent.toLowerCase();
        const account = row.cells[1].textContent.toLowerCase();

        if (provider.includes(searchTerm) || account.includes(searchTerm)) {
            row.style.display = '';
            visibleRows++;
        } else {
            row.style.display = 'none';
        }
    }

    // Show/hide empty state
    const emptyState = document.getElementById('emptyState');
    const tableContainer = table.closest('.table-responsive');
    
    if (visibleRows === 0) {
        tableContainer.style.display = 'none';
        emptyState.style.display = 'block';
    } else {
        tableContainer.style.display = 'block';
        emptyState.style.display = 'none';
    }
}

function checkEmptyState() {
    const table = document.getElementById('accountsTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    
    if (rows.length === 0) {
        const emptyState = document.getElementById('emptyState');
        const tableContainer = table.closest('.table-responsive');
        tableContainer.style.display = 'none';
        emptyState.style.display = 'block';
    }
}

function linkProvider(provider) {
    // Redirect to OAuth flow
    window.location.href = `/auth/social/login/${provider}/`;
}

function managePermissions(accountId) {
    alert(`Managing permissions for account ${accountId}. This would open a permissions management dialog.`);
}

function testConnection(accountId) {
    const button = event.target.closest('a');
    const originalIcon = button.innerHTML;
    
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    
    setTimeout(() => {
        alert('Connection test successful!');
        button.innerHTML = originalIcon;
    }, 2000);
}

function refreshToken(accountId) {
    const button = event.target.closest('a');
    const originalIcon = button.innerHTML;
    
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    
    setTimeout(() => {
        alert('Token refreshed successfully!');
        button.innerHTML = originalIcon;
        // Update the status in the table
        location.reload();
    }, 2000);
}

function exportAccounts() {
    console.log('Exporting social accounts...');
    alert('Export functionality would be implemented here.');
}

function printAccounts() {
    console.log('Printing social accounts...');
    window.print();
}
</script>

<style>
.provider-card {
    text-align: center;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.provider-card:hover {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0,123,255,0.1);
    transform: translateY(-2px);
}

.provider-icon {
    margin-bottom: 15px;
}

.provider-info {
    display: flex;
    align-items: center;
}

.account-info strong {
    color: #495057;
}

.permissions-list .badge {
    font-size: 0.75rem;
}

.dash-widget {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.dash-widget .dash-widgetimg span {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.dash-widget .dash-widgetcontent h5 {
    color: white;
    font-size: 28px;
    font-weight: 600;
    margin: 10px 0 5px 0;
}

.dash-widget .dash-widgetcontent h6 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin: 0;
}

@media (max-width: 768px) {
    .provider-card {
        margin-bottom: 10px;
        padding: 15px;
    }
    
    .provider-info {
        flex-direction: column;
        text-align: center;
    }
    
    .provider-info i {
        margin-bottom: 10px;
    }
    
    .permissions-list {
        text-align: center;
    }
}
</style>
{% endblock %}