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

{% block title %}Password History - Account Security{% 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>Password History</h4>
                        <h6>View your password change history and security timeline</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'accounts:password_change' %}" class="btn btn-added">
                            <i class="fas fa-key me-1"></i>Change Password
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Password Security 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-history"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.total_changes|default:12 }}</h5>
                        <h6>Password Changes</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.days_since_last_change|default:45 }}</h5>
                        <h6>Days Since Last Change</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-shield-alt"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.security_score|default:85 }}%</h5>
                        <h6>Security Score</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-exclamation-triangle"></i></span>
                    </div>
                    <div class="dash-widgetcontent">
                        <h5>{{ stats.failed_attempts|default:2 }}</h5>
                        <h6>Failed Attempts (30d)</h6>
                    </div>
                </div>
            </div>
        </div>

        <!-- Password Security Status -->
        <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>
                            Current Password Security Status
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="security-status">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="status-item mb-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-calendar-check text-success me-3"></i>
                                                    <div>
                                                        <strong>Last Changed</strong>
                                                        <p class="text-muted small mb-0">{{ last_password_change|default:"45 days ago" }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="status-item mb-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-lock text-primary me-3"></i>
                                                    <div>
                                                        <strong>Password Strength</strong>
                                                        <div class="progress mt-1" style="height: 6px;">
                                                            <div class="progress-bar bg-success" style="width: 85%"></div>
                                                        </div>
                                                        <small class="text-success">Strong</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="status-item mb-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-clock text-warning me-3"></i>
                                                    <div>
                                                        <strong>Recommended Change</strong>
                                                        <p class="text-muted small mb-0">In {{ days_until_recommended|default:45 }} days</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="status-item mb-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-history text-info me-3"></i>
                                                    <div>
                                                        <strong>Change Frequency</strong>
                                                        <p class="text-muted small mb-0">Every {{ avg_change_frequency|default:90 }} days average</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="security-recommendations">
                                    <h6 class="text-info mb-3">
                                        <i class="fas fa-lightbulb me-2"></i>Security Recommendations
                                    </h6>
                                    <div class="recommendation-item mb-2">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        <small>Use unique passwords for each account</small>
                                    </div>
                                    <div class="recommendation-item mb-2">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        <small>Enable two-factor authentication</small>
                                    </div>
                                    <div class="recommendation-item mb-2">
                                        <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                        <small>Change password every 90 days</small>
                                    </div>
                                    <div class="recommendation-item">
                                        <i class="fas fa-info-circle text-info me-2"></i>
                                        <small>Use a password manager</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Password History Table -->
        <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 password history...">
                        </div>
                    </div>
                    <div class="wordset">
                        <ul>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Filter" onclick="toggleFilters()">
                                    <i class="fas fa-filter"></i>
                                </a>
                            </li>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Export" onclick="exportHistory()">
                                    <i class="fas fa-download"></i>
                                </a>
                            </li>
                            <li>
                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Print" onclick="printHistory()">
                                    <i class="fas fa-print"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Filters Panel -->
                <div id="filtersPanel" class="filters-panel" style="display: none;">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="dateRange" class="form-label">Date Range</label>
                                <select class="form-select" id="dateRange">
                                    <option value="">All Time</option>
                                    <option value="7">Last 7 days</option>
                                    <option value="30">Last 30 days</option>
                                    <option value="90">Last 90 days</option>
                                    <option value="365">Last year</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="changeType" class="form-label">Change Type</label>
                                <select class="form-select" id="changeType">
                                    <option value="">All Types</option>
                                    <option value="user_initiated">User Initiated</option>
                                    <option value="admin_reset">Admin Reset</option>
                                    <option value="forced_change">Forced Change</option>
                                    <option value="security_breach">Security Breach</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="ipAddress" class="form-label">IP Address</label>
                                <input type="text" class="form-control" id="ipAddress" placeholder="Filter by IP">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">&nbsp;</label>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-primary btn-sm" onclick="applyFilters()">
                                        <i class="fas fa-check me-1"></i>Apply
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearFilters()">
                                        <i class="fas fa-times me-1"></i>Clear
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Password History Table -->
                <div class="table-responsive">
                    <table class="table" id="historyTable">
                        <thead>
                            <tr>
                                <th>Date & Time</th>
                                <th>Change Type</th>
                                <th>IP Address</th>
                                <th>Location</th>
                                <th>Device/Browser</th>
                                <th>Security Score</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Sample Data -->
                            <tr>
                                <td>
                                    <div>
                                        <strong>Mar 01, 2024 02:30 PM</strong>
                                        <small class="d-block text-muted">45 days ago</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-primary">
                                        <i class="fas fa-user me-1"></i>User Initiated
                                    </span>
                                </td>
                                <td>
                                    <code>192.168.1.100</code>
                                    <small class="d-block text-muted">Home Network</small>
                                </td>
                                <td>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt text-muted me-1"></i>
                                        <span>New York, NY</span>
                                        <small class="d-block text-muted">United States</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="device-info">
                                        <i class="fas fa-desktop text-primary me-1"></i>
                                        <span>Chrome 122</span>
                                        <small class="d-block text-muted">Windows 11</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="security-score">
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-success" style="width: 85%"></div>
                                        </div>
                                        <small class="text-success">85% Strong</small>
                                    </div>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'accounts:password_history_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="Security Report" onclick="generateSecurityReport(1)">
                                        <i class="fas fa-shield-alt"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <strong>Jan 15, 2024 09:15 AM</strong>
                                        <small class="d-block text-muted">3 months ago</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-warning">
                                        <i class="fas fa-exclamation-triangle me-1"></i>Forced Change
                                    </span>
                                </td>
                                <td>
                                    <code>10.0.0.50</code>
                                    <small class="d-block text-muted">Office Network</small>
                                </td>
                                <td>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt text-muted me-1"></i>
                                        <span>New York, NY</span>
                                        <small class="d-block text-muted">United States</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="device-info">
                                        <i class="fas fa-mobile-alt text-success me-1"></i>
                                        <span>Safari 17</span>
                                        <small class="d-block text-muted">iOS 17.2</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="security-score">
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-warning" style="width: 65%"></div>
                                        </div>
                                        <small class="text-warning">65% Medium</small>
                                    </div>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'accounts:password_history_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="Security Report" onclick="generateSecurityReport(2)">
                                        <i class="fas fa-shield-alt"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <strong>Dec 20, 2023 11:45 PM</strong>
                                        <small class="d-block text-muted">4 months ago</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-danger">
                                        <i class="fas fa-shield-alt me-1"></i>Security Breach
                                    </span>
                                </td>
                                <td>
                                    <code>203.0.113.45</code>
                                    <small class="d-block text-muted">Unknown Network</small>
                                </td>
                                <td>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt text-danger me-1"></i>
                                        <span>Unknown</span>
                                        <small class="d-block text-danger">Suspicious Location</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="device-info">
                                        <i class="fas fa-question-circle text-danger me-1"></i>
                                        <span>Unknown</span>
                                        <small class="d-block text-danger">Suspicious Device</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="security-score">
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-success" style="width: 90%"></div>
                                        </div>
                                        <small class="text-success">90% Strong</small>
                                    </div>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'accounts:password_history_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="Security Report" onclick="generateSecurityReport(3)">
                                        <i class="fas fa-shield-alt"></i>
                                    </a>
                                    <a class="text-danger" href="#" data-bs-toggle="tooltip" title="Security Incident" onclick="viewSecurityIncident(3)">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <strong>Nov 10, 2023 04:20 PM</strong>
                                        <small class="d-block text-muted">5 months ago</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info">
                                        <i class="fas fa-user-shield me-1"></i>Admin Reset
                                    </span>
                                </td>
                                <td>
                                    <code>192.168.1.100</code>
                                    <small class="d-block text-muted">Home Network</small>
                                </td>
                                <td>
                                    <div class="location-info">
                                        <i class="fas fa-map-marker-alt text-muted me-1"></i>
                                        <span>New York, NY</span>
                                        <small class="d-block text-muted">United States</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="device-info">
                                        <i class="fas fa-desktop text-primary me-1"></i>
                                        <span>Firefox 119</span>
                                        <small class="d-block text-muted">Windows 11</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="security-score">
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-success" style="width: 80%"></div>
                                        </div>
                                        <small class="text-success">80% Strong</small>
                                    </div>
                                </td>
                                <td>
                                    <a class="me-3" href="{% url 'accounts:password_history_detail' 4 %}" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a class="me-3" href="#" data-bs-toggle="tooltip" title="Security Report" onclick="generateSecurityReport(4)">
                                        <i class="fas fa-shield-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="dataTables_info">
                        Showing 1 to 4 of 12 entries
                    </div>
                    <nav aria-label="Password history pagination">
                        <ul class="pagination pagination-sm mb-0">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">Previous</a>
                            </li>
                            <li class="page-item active">
                                <a class="page-link" href="#">1</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">3</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">Next</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Security Insights -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-line me-2"></i>
                            Password Security Trends
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="securityTrendChart" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Security Alerts
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-clock me-3"></i>
                                <div>
                                    <strong>Password Age Warning</strong>
                                    <p class="mb-0 small">Your password is 45 days old. Consider changing it soon.</p>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-shield-alt me-3"></i>
                                <div>
                                    <strong>Security Improvement</strong>
                                    <p class="mb-0 small">Enable 2FA for enhanced account security.</p>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-success">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-check-circle me-3"></i>
                                <div>
                                    <strong>Good Security Practice</strong>
                                    <p class="mb-0 small">You're using a strong password. Keep it up!</p>
                                </div>
                            </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() {
        filterHistory();
    });

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

    // Initialize security trend chart
    initializeSecurityChart();
});

function filterHistory() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const table = document.getElementById('historyTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

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

        if (text.includes(searchTerm)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    }
}

function toggleFilters() {
    const filtersPanel = document.getElementById('filtersPanel');
    filtersPanel.style.display = filtersPanel.style.display === 'none' ? 'block' : 'none';
}

function applyFilters() {
    const dateRange = document.getElementById('dateRange').value;
    const changeType = document.getElementById('changeType').value;
    const ipAddress = document.getElementById('ipAddress').value;

    console.log('Applying filters:', { dateRange, changeType, ipAddress });
    alert('Filters applied successfully!');
}

function clearFilters() {
    document.getElementById('dateRange').value = '';
    document.getElementById('changeType').value = '';
    document.getElementById('ipAddress').value = '';
    
    // Reset table display
    const table = document.getElementById('historyTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        rows[i].style.display = '';
    }
}

function generateSecurityReport(historyId) {
    alert(`Generating security report for password change ${historyId}...`);
}

function viewSecurityIncident(historyId) {
    alert(`Viewing security incident details for password change ${historyId}...`);
}

function exportHistory() {
    console.log('Exporting password history...');
    alert('Export functionality would be implemented here.');
}

function printHistory() {
    console.log('Printing password history...');
    window.print();
}

function initializeSecurityChart() {
    const ctx = document.getElementById('securityTrendChart').getContext('2d');
    
    // Sample data for security trend
    const data = {
        labels: ['Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr'],
        datasets: [{
            label: 'Security Score',
            data: [75, 80, 65, 85, 85, 85],
            borderColor: '#28a745',
            backgroundColor: 'rgba(40, 167, 69, 0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }]
    };

    const config = {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        callback: function(value) {
                            return value + '%';
                        }
                    }
                }
            }
        }
    };

    new Chart(ctx, config);
}
</script>

<style>
.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;
}

.filters-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

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

.security-score .progress {
    width: 80px;
    margin-bottom: 5px;
}

.location-info,
.device-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.recommendation-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.chart-container {
    position: relative;
    height: 200px;
}

@media (max-width: 768px) {
    .filters-panel .row {
        margin-bottom: 15px;
    }
    
    .filters-panel .col-md-3 {
        margin-bottom: 15px;
    }
    
    .location-info,
    .device-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .security-score {
        text-align: center;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
}
</style>
{% endblock %}