{% extends 'base.html' %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card bg-dark">
            <div class="card-body">
                <h1 class="card-title">
                    <i data-feather="bar-chart-2"></i> Dashboard
                </h1>
                <p class="card-text">Welcome to the Education Job Vacancy Monitor. View the latest stats and notifications below.</p>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white h-100">
            <div class="card-body">
                <h5 class="card-title">Consultants</h5>
                <h1 class="display-4">{{ consultant_count }}</h1>
                <p class="card-text">Registered consultants</p>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{{ url_for('consultants') }}" class="text-white">View Details</a>
                <div><i data-feather="users"></i></div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card bg-success text-white h-100">
            <div class="card-body">
                <h5 class="card-title">Vacancies</h5>
                <h1 class="display-4">{{ vacancy_count }}</h1>
                <p class="card-text">Active job vacancies</p>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{{ url_for('vacancies') }}" class="text-white">View Details</a>
                <div><i data-feather="clipboard"></i></div>
            </div>
        </div>
    </div>
    
    <!-- <div class="col-md-3">
        <div class="card bg-info text-white h-100">
            <div class="card-body">
                <h5 class="card-title">Notifications</h5>
                <h1 class="display-4">{{ notification_count }}</h1>
                <p class="card-text">Sent notifications</p>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="#notifications" class="text-white">View Details</a>
                <div><i data-feather="bell"></i></div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card bg-secondary text-white h-100">
            <div class="card-body">
                <h5 class="card-title">Sources</h5>
                <h1 class="display-4">{{ source_count }}</h1>
                <p class="card-text">Monitored job boards</p>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{{ url_for('sources') }}" class="text-white">View Details</a>
                <div><i data-feather="database"></i></div>
            </div>
        </div>
    </div> -->
    <div class="col-md-3">
        <div class="card bg-warning text-white h-100">
            <div class="card-body">
                <h5 class="card-title">Posted to ICAN</h5>
                <h1 class="display-4">{{ posted_ican_count }}</h1>
                <p class="card-text">Jobs posted to ican-teachuk.com</p>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{{ url_for('vacancies') }}?post_status=posted_ican" class="text-white">View Details</a>
                <div><i data-feather="send"></i></div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card bg-danger text-white h-100">
            <div class="card-body">
                <h5 class="card-title">Posted to Dunbar</h5>
                <h1 class="display-4">{{ posted_dunbar_count }}</h1>
                <p class="card-text">Jobs posted to dunbareducation.com</p>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a href="{{ url_for('vacancies') }}?post_status=posted_dunbar" class="text-white">View Details</a>
                <div><i data-feather="upload"></i></div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activity -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5><i data-feather="activity"></i> Recent Activity</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="mb-3">Vacancy Trend</h6>
                        <canvas id="vacancyChart" height="200"></canvas>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3">Vacancies by Region</h6>
                        <canvas id="regionChart" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Notifications -->
<div class="row mb-4" id="notifications">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5><i data-feather="bell"></i> Recent Notifications</h5>
            </div>
            <div class="card-body">
                {% if recent_notifications %}
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Vacancy</th>
                                <th>Consultant</th>
                                <th>Status</th>
                                <th>Sent At</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for notification in recent_notifications %}
                            <tr>
                                <td>
                                    <a href="{{ notification.vacancy.url }}" target="_blank">{{ notification.vacancy.title }}</a>
                                    <div class="small text-muted">{{ notification.vacancy.school_name }} - {{ notification.vacancy.location }}</div>
                                </td>
                                <td>{{ notification.consultant.name }}</td>
                                <td>
                                    {% if notification.status == 'sent' %}
                                    <span class="badge bg-success">Sent</span>
                                    {% elif notification.status == 'pending' %}
                                    <span class="badge bg-warning">Pending</span>
                                    {% elif notification.status == 'failed' %}
                                    <span class="badge bg-danger">Failed</span>
                                    {% else %}
                                    <span class="badge bg-secondary">{{ notification.status }}</span>
                                    {% endif %}
                                </td>
                                <td>{{ notification.sent_at.strftime('%Y-%m-%d %H:%M') if notification.sent_at else 'Not sent' }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted">No recent notifications found.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5><i data-feather="zap"></i> Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('run_scraper') }}" class="btn btn-primary btn-lg w-100">
                            <i data-feather="refresh-cw"></i> Run Scraper Now
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('consultants') }}" class="btn btn-success btn-lg w-100">
                            <i data-feather="user-plus"></i> Add Consultant
                        </a>
                    </div>
                    <!-- <div class="col-md-3 mb-3">
                        <a href="{{ url_for('sources') }}" class="btn btn-info btn-lg w-100">
                            <i data-feather="plus-circle"></i> Add Source
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('settings') }}" class="btn btn-secondary btn-lg w-100">
                            <i data-feather="settings"></i> System Settings
                        </a>
                    </div> -->
                    <!-- <div class="col-md-3 mb-3">
                        <a href="{{ url_for('post_to_dunbar') }}" class="btn btn-info btn-lg w-100">
                            <i data-feather="upload-cloud"></i> Post to Dunbar
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ url_for('post_to_ican') }}" class="btn btn-secondary btn-lg w-100">
                            <i data-feather="upload-cloud"></i> Post to ICAN
                        </a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Load Vacancy Trend
        fetch('/api/vacancy-trend')
            .then(res => res.json())
            .then(({ labels, data }) => {
                const canvas = document.getElementById('vacancyChart');
                const ctx = canvas.getContext('2d');
                const existingChart = Chart.getChart(canvas);
                if (existingChart) existingChart.destroy();

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels,
                        datasets: [{
                            label: 'New Vacancies',
                            data,
                            backgroundColor: 'rgba(0, 255, 255, 0.2)',
                            borderColor: 'rgba(0, 255, 255, 1)',
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                labels: { color: '#cfd8dc' }
                            }
                        },
                        scales: {
                            x: {
                                ticks: { color: '#cfd8dc' },
                                grid: { color: 'rgba(255, 255, 255, 0.05)' }
                            },
                            y: {
                                beginAtZero: true,
                                ticks: { precision: 0, color: '#cfd8dc' },
                                grid: { color: 'rgba(255, 255, 255, 0.05)' }
                            }
                        }
                    }
                });
            });

        // Load Region Chart
        fetch('/api/vacancies-by-region')
            .then(res => res.json())
            .then(({ labels, data }) => {
                const canvas = document.getElementById('regionChart');
                if (!canvas) return;

                const ctx = canvas.getContext('2d');
                const existingChart = Chart.getChart(canvas);

                // Destroy any existing chart instance on this canvas
                if (existingChart) existingChart.destroy();

                // Create new bar chart
                new Chart(ctx, {
                type: 'bar',
                data: {
                    labels,
                    datasets: [{
                    label: 'Vacancies by Region',
                    data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.6)',
                        'rgba(54, 162, 235, 0.6)',
                        'rgba(255, 206, 86, 0.6)',
                        'rgba(75, 192, 192, 0.6)',
                        'rgba(153, 102, 255, 0.6)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                    legend: {
                        labels: { color: '#cfd8dc' }
                    }
                    },
                    scales: {
                    x: {
                        ticks: { color: '#cfd8dc' },
                        grid: { color: 'rgba(255, 255, 255, 0.05)' }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: { precision: 0, color: '#cfd8dc' },
                        grid: { color: 'rgba(255, 255, 255, 0.05)' }
                    }
                    }
                }
                });
            })
            .catch(err => {
                console.error('Failed to fetch vacancies by region:', err);
            });

    });
</script>
{% endblock %}