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

{% block title %}Remove Social Account - 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>
                            <a href="{% url 'accounts:social_account_detail' object.pk %}" class="me-3">
                                <i class="fas fa-arrow-left"></i>
                            </a>
                            Remove Social Account
                        </h4>
                        <h6>Confirm removal of linked social media account</h6>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <!-- Warning Alert -->
                <div class="alert alert-warning" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                        <div>
                            <h5 class="alert-heading mb-1">Account Removal Warning</h5>
                            <p class="mb-0">You are about to remove a linked social account. This will affect your login options and data synchronization.</p>
                        </div>
                    </div>
                </div>

                <!-- Account Information Card -->
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-unlink me-2"></i>
                            Account Removal Confirmation
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Account Details -->
                        <div class="account-summary mb-4">
                            <div class="row align-items-center">
                                <div class="col-md-2 text-center">
                                    <div class="provider-icon-large">
                                        {% if object.provider == 'google' %}
                                            <i class="fab fa-google fa-4x text-danger"></i>
                                        {% elif object.provider == 'microsoft' %}
                                            <i class="fab fa-microsoft fa-4x text-primary"></i>
                                        {% elif object.provider == 'github' %}
                                            <i class="fab fa-github fa-4x text-dark"></i>
                                        {% elif object.provider == 'linkedin' %}
                                            <i class="fab fa-linkedin fa-4x text-info"></i>
                                        {% elif object.provider == 'facebook' %}
                                            <i class="fab fa-facebook fa-4x text-primary"></i>
                                        {% elif object.provider == 'twitter' %}
                                            <i class="fab fa-twitter fa-4x text-info"></i>
                                        {% else %}
                                            <i class="fas fa-link fa-4x text-secondary"></i>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-10">
                                    <h5 class="mb-2">{{ object.provider|default:"Google"|title }} Account</h5>
                                    <div class="account-details">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <small class="text-muted">Account Email:</small>
                                                <div class="mb-2">
                                                    <strong>{{ object.email|default:"john.smith@gmail.com" }}</strong>
                                                    {% if object.email_verified %}
                                                        <i class="fas fa-check-circle text-success ms-2" title="Verified"></i>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <small class="text-muted">Display Name:</small>
                                                <div class="mb-2">
                                                    <strong>{{ object.display_name|default:"John Smith" }}</strong>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <small class="text-muted">Linked Date:</small>
                                                <div>{{ object.date_joined|default:"Jan 15, 2024"|date:"M d, Y" }}</div>
                                            </div>
                                            <div class="col-sm-6">
                                                <small class="text-muted">Last Used:</small>
                                                <div>{{ object.last_login|default:"Today 09:30 AM"|date:"M d, Y g:i A" }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Impact Assessment -->
                        <div class="impact-assessment mb-4">
                            <h6 class="text-warning mb-3">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                What Will Happen When You Remove This Account
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="impact-item mb-3">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-sign-in-alt text-danger me-3 mt-1"></i>
                                            <div>
                                                <strong>Login Access</strong>
                                                <p class="text-muted small mb-0">You will no longer be able to log in using this {{ object.provider|title }} account.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="impact-item mb-3">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-sync text-warning me-3 mt-1"></i>
                                            <div>
                                                <strong>Data Synchronization</strong>
                                                <p class="text-muted small mb-0">Automatic profile updates from this account will stop.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="impact-item mb-3">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-key text-info me-3 mt-1"></i>
                                            <div>
                                                <strong>Permissions Revoked</strong>
                                                <p class="text-muted small mb-0">All granted permissions will be revoked on the provider side.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="impact-item mb-3">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-database text-secondary me-3 mt-1"></i>
                                            <div>
                                                <strong>Data Retention</strong>
                                                <p class="text-muted small mb-0">Your existing profile data will be preserved.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="impact-item mb-3">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-history text-info me-3 mt-1"></i>
                                            <div>
                                                <strong>Activity History</strong>
                                                <p class="text-muted small mb-0">Login history and activity logs will be preserved for audit purposes.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="impact-item mb-3">
                                        <div class="d-flex align-items-start">
                                            <i class="fas fa-undo text-success me-3 mt-1"></i>
                                            <div>
                                                <strong>Re-linking</strong>
                                                <p class="text-muted small mb-0">You can re-link this account type later if needed.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Current Usage Information -->
                        <div class="usage-info mb-4">
                            <h6 class="mb-3">
                                <i class="fas fa-chart-bar me-2"></i>
                                Current Account Usage
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="usage-stat">
                                        <div class="stat-number text-primary">{{ object.login_count|default:127 }}</div>
                                        <div class="stat-label">Total Logins</div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="usage-stat">
                                        <div class="stat-number text-success">{{ object.sync_count|default:45 }}</div>
                                        <div class="stat-label">Profile Syncs</div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="usage-stat">
                                        <div class="stat-number text-info">{{ object.permissions_count|default:3 }}</div>
                                        <div class="stat-label">Active Permissions</div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="usage-stat">
                                        <div class="stat-number text-warning">{{ object.days_since_last_use|default:2 }}</div>
                                        <div class="stat-label">Days Since Last Use</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Alternative Login Methods Check -->
                        <div class="login-methods-check mb-4">
                            <h6 class="mb-3">
                                <i class="fas fa-shield-alt me-2"></i>
                                Account Security Check
                            </h6>
                            
                            <div class="alert alert-info">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-info-circle me-3"></i>
                                    <div>
                                        <strong>Alternative Login Methods:</strong>
                                        <div class="mt-2">
                                            <span class="badge bg-success me-2">
                                                <i class="fas fa-envelope me-1"></i>Email/Password
                                            </span>
                                            {% if has_other_social_accounts %}
                                                <span class="badge bg-primary me-2">
                                                    <i class="fas fa-link me-1"></i>{{ other_social_accounts_count }} Other Social Account(s)
                                                </span>
                                            {% endif %}
                                            {% if has_2fa %}
                                                <span class="badge bg-warning">
                                                    <i class="fas fa-shield-alt me-1"></i>2FA Enabled
                                                </span>
                                            {% endif %}
                                        </div>
                                        {% if not has_other_login_methods %}
                                            <div class="text-danger small mt-2">
                                                <i class="fas fa-exclamation-triangle me-1"></i>
                                                Warning: This is your only login method. Ensure you have password access before removing.
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Confirmation Form -->
                        <form method="post" id="deleteForm">
                            {% csrf_token %}
                            
                            <!-- Confirmation Checkbox -->
                            <div class="confirmation-section mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="confirm_removal" name="confirm_removal" required>
                                    <label class="form-check-label" for="confirm_removal">
                                        <strong>I understand the consequences and want to remove this social account</strong>
                                    </label>
                                </div>
                                
                                {% if not has_other_login_methods %}
                                <div class="form-check mt-3">
                                    <input class="form-check-input" type="checkbox" id="confirm_password_access" name="confirm_password_access" required>
                                    <label class="form-check-label" for="confirm_password_access">
                                        <strong>I confirm that I have password access to my account</strong>
                                    </label>
                                </div>
                                {% endif %}
                            </div>

                            <!-- Reason for Removal -->
                            <div class="form-group mb-4">
                                <label for="removal_reason" class="form-label">Reason for Removal (Optional)</label>
                                <select class="form-select" id="removal_reason" name="removal_reason">
                                    <option value="">Select a reason...</option>
                                    <option value="no_longer_use">No longer use this service</option>
                                    <option value="privacy_concerns">Privacy concerns</option>
                                    <option value="security_breach">Security breach or compromise</option>
                                    <option value="account_deactivated">Account deactivated on provider</option>
                                    <option value="switching_accounts">Switching to different account</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>

                            <!-- Additional Notes -->
                            <div class="form-group mb-4">
                                <label for="removal_notes" class="form-label">Additional Notes (Optional)</label>
                                <textarea class="form-control" id="removal_notes" name="removal_notes" rows="3" 
                                          placeholder="Any additional information about this removal..."></textarea>
                            </div>

                            <!-- Action Buttons -->
                            <div class="d-flex justify-content-between">
                                <a href="{% url 'accounts:social_account_detail' object.pk %}" class="btn btn-secondary">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                                <div>
                                    <button type="button" class="btn btn-outline-primary me-2" onclick="disconnectInstead()">
                                        <i class="fas fa-pause me-1"></i>Disconnect Instead
                                    </button>
                                    <button type="submit" class="btn btn-danger" id="confirmDeleteBtn" disabled>
                                        <i class="fas fa-unlink me-1"></i>Remove Account
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Alternative Actions -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-lightbulb me-2"></i>
                            Alternative Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="alternative-action">
                                    <h6>
                                        <i class="fas fa-pause-circle text-warning me-2"></i>
                                        Temporarily Disconnect
                                    </h6>
                                    <p class="text-muted small">Disable the account without removing it completely. You can reconnect it later without re-authorization.</p>
                                    <button type="button" class="btn btn-outline-warning btn-sm" onclick="disconnectInstead()">
                                        <i class="fas fa-pause me-1"></i>Disconnect Instead
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alternative-action">
                                    <h6>
                                        <i class="fas fa-cog text-info me-2"></i>
                                        Modify Permissions
                                    </h6>
                                    <p class="text-muted small">Reduce permissions instead of removing the account completely.</p>
                                    <a href="{% url 'accounts:social_account_update' object.pk %}" class="btn btn-outline-info btn-sm">
                                        <i class="fas fa-cog me-1"></i>Edit Settings
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enable/disable submit button based on confirmation checkboxes
    const confirmCheckbox = document.getElementById('confirm_removal');
    const passwordCheckbox = document.getElementById('confirm_password_access');
    const submitButton = document.getElementById('confirmDeleteBtn');
    
    function updateSubmitButton() {
        const confirmChecked = confirmCheckbox.checked;
        const passwordChecked = passwordCheckbox ? passwordCheckbox.checked : true;
        submitButton.disabled = !(confirmChecked && passwordChecked);
    }
    
    confirmCheckbox.addEventListener('change', updateSubmitButton);
    if (passwordCheckbox) {
        passwordCheckbox.addEventListener('change', updateSubmitButton);
    }

    // Form submission confirmation
    const deleteForm = document.getElementById('deleteForm');
    deleteForm.addEventListener('submit', function(e) {
        const provider = '{{ object.provider|title }}';
        if (!confirm(`Are you absolutely sure you want to remove your ${provider} account? This action cannot be undone.`)) {
            e.preventDefault();
        }
    });
});

function disconnectInstead() {
    if (confirm('Disconnect this account instead of removing it? You can reconnect it later without re-authorization.')) {
        // Submit disconnect request
        fetch('{% url "accounts:social_account_disconnect" object.pk %}', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Account disconnected successfully. You can reconnect it anytime.');
                window.location.href = '{% url "accounts:social_account_list" %}';
            } else {
                alert('Error disconnecting account: ' + data.error);
            }
        })
        .catch(error => {
            alert('Error disconnecting account. Please try again.');
        });
    }
}
</script>

<style>
.provider-icon-large {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    display: inline-block;
}

.account-summary {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 20px;
    background-color: #f8f9fa;
}

.impact-item {
    padding: 10px 0;
}

.usage-info {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    background-color: #f8f9fa;
}

.usage-stat {
    text-align: center;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 15px;
    background: white;
}

.stat-number {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
}

.login-methods-check .alert {
    border-left: 4px solid #17a2b8;
}

.confirmation-section {
    border: 2px solid #ffc107;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff9e6;
}

.alternative-action {
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 15px;
    background: white;
}

.alternative-action h6 {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .account-summary .row {
        text-align: center;
    }
    
    .provider-icon-large {
        margin-bottom: 15px;
    }
    
    .impact-assessment .row {
        margin-top: 15px;
    }
    
    .usage-stat {
        margin-bottom: 10px;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 15px;
    }
    
    .d-flex.justify-content-between > div {
        text-align: center;
    }
}
</style>
{% endblock %}