{% extends "admin/base_site.html" %}
{% load static %}

{% block title %}Dashboard - {{ block.super }}{% endblock %}

{% block extrahead %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .stat-card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .stat-card h3 {
            margin: 0 0 10px 0;
            color: #666;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
        }
        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #417690;
        }
        .stat-badge {
            display: inline-block;
            background: #417690;
            color: white;
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 5px;
        }
        .chart-container {
            position: relative;
            height: 300px;
            margin-top: 20px;
        }
        .dashboard-section {
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .dashboard-section h2 {
            margin-top: 0;
            color: #417690;
            border-bottom: 2px solid #417690;
            padding-bottom: 10px;
        }
        .alert-warning {
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 5px;
            padding: 12px;
            margin: 10px 0;
            color: #856404;
        }
    </style>
{% endblock %}

{% block content %}
<h1>Narinest Admin Dashboard</h1>

<div class="dashboard-section">
    <h2>📊 System Statistics</h2>
    <div class="dashboard-grid">
        <div class="stat-card">
            <h3>Total Users</h3>
            <div class="stat-value">{{ stats.total_users }}</div>
            <div style="color: #999; font-size: 12px;">Regular app users</div>
        </div>
        <div class="stat-card">
            <h3>Total Doctors</h3>
            <div class="stat-value">{{ stats.total_doctors }}</div>
            <div>
                <span class="stat-badge">Active: {{ stats.active_doctors }}</span>
                <span class="stat-badge" style="background: #ffc107;">Pending: {{ stats.inactive_doctors }}</span>
            </div>
        </div>
        <div class="stat-card">
            <h3>Consultations</h3>
            <div class="stat-value">{{ stats.completed_consultations }}</div>
            <div style="color: #999; font-size: 12px;">Completed sessions</div>
        </div>
        <div class="stat-card">
            <h3>New Users (7 Days)</h3>
            <div class="stat-value">{{ stats.new_users_7d }}</div>
            <div style="color: #999; font-size: 12px;">Growth trend</div>
        </div>
        <div class="stat-card">
            <h3>New Consultations (7 Days)</h3>
            <div class="stat-value">{{ stats.new_consultations_7d }}</div>
            <div style="color: #999; font-size: 12px;">Recent activity</div>
        </div>
        <div class="stat-card">
            <h3>Pregnant Users</h3>
            <div class="stat-value">{{ stats.pregnant_users }}</div>
            <div style="color: #999; font-size: 12px;">Tracking pregnancy</div>
        </div>
        <div class="stat-card">
            <h3>Period Logs (30 Days)</h3>
            <div class="stat-value">{{ stats.period_logs_30d }}</div>
            <div style="color: #999; font-size: 12px;">Health tracking</div>
        </div>
        <div class="stat-card">
            <h3>Feed Posts (30 Days)</h3>
            <div class="stat-value">{{ stats.feed_posts_30d }}</div>
            <div style="color: #999; font-size: 12px;">Community posts</div>
        </div>
        <div class="stat-card">
            <h3>Unread Notifications</h3>
            <div class="stat-value" style="color: #dc3545;">{{ stats.unread_notifications }}</div>
            <div style="color: #999; font-size: 12px;">Pending alerts</div>
        </div>
    </div>
</div>

{% if stats.pending_doctor_approvals %}
<div class="dashboard-section alert-warning">
    <strong>⚠️ Attention:</strong> {{ stats.pending_doctor_approvals }} doctor(s) pending approval.
    <a href="/admin/core/appuser/?role__exact=doctor&status__exact=inactive" style="margin-left: 20px; color: #0066cc;">Review Doctors →</a>
</div>
{% endif %}

<div class="dashboard-section">
    <h2>📈 Admin Roles</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
        <div style="border-left: 4px solid #417690; padding: 15px;">
            <h4 style="margin-top: 0;">👑 Super Admin</h4>
            <p style="margin: 5px 0; font-size: 13px; color: #666;">Full control over all models and operations</p>
        </div>
        <div style="border-left: 4px solid #28a745; padding: 15px;">
            <h4 style="margin-top: 0;">📝 Content Admin</h4>
            <p style="margin: 5px 0; font-size: 13px; color: #666;">Manage knowledge topics and educational content</p>
        </div>
        <div style="border-left: 4px solid #ffc107; padding: 15px;">
            <h4 style="margin-top: 0;">🎯 Support Admin</h4>
            <p style="margin: 5px 0; font-size: 13px; color: #666;">Manage consultations and user support requests</p>
        </div>
        <div style="border-left: 4px solid #17a2b8; padding: 15px;">
            <h4 style="margin-top: 0;">👨‍⚕️ Doctor Manager</h4>
            <p style="margin: 5px 0; font-size: 13px; color: #666;">Approve doctor accounts and manage doctor status</p>
        </div>
    </div>
</div>

<div class="dashboard-section">
    <h2>⚙️ Quick Actions</h2>
    <ul style="list-style: none; padding: 0;">
        <li style="margin: 10px 0;">
            <a href="/admin/core/appuser/?role__exact=doctor&status__exact=inactive" class="button" style="background-color: #417690;">
                👨‍⚕️ Approve Pending Doctors ({{ stats.inactive_doctors }})
            </a>
        </li>
        <li style="margin: 10px 0;">
            <a href="/admin/core/adminworkflow/?status__exact=pending" class="button" style="background-color: #28a745;">
                📋 Review Workflows
            </a>
        </li>
        <li style="margin: 10px 0;">
            <a href="/admin/core/notification/?is_read__exact=0" class="button" style="background-color: #dc3545;">
                🔔 Unread Notifications ({{ stats.unread_notifications }})
            </a>
        </li>
        <li style="margin: 10px 0;">
            <a href="/admin/core/userfeedback/?status__exact=new" class="button" style="background-color: #17a2b8;">
                💬 Pending Feedback
            </a>
        </li>
    </ul>
</div>

<div class="dashboard-section">
    <h2>📱 Platform Overview</h2>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
        <div>
            <h4>User Breakdown</h4>
            <canvas id="userChart"></canvas>
        </div>
        <div>
            <h4>Doctor Status</h4>
            <canvas id="doctorChart"></canvas>
        </div>
    </div>
</div>

<script>
// User breakdown pie chart
const userCtx = document.getElementById('userChart').getContext('2d');
new Chart(userCtx, {
    type: 'doughnut',
    data: {
        labels: ['Regular Users', 'Doctors'],
        datasets: [{
            data: [{{ stats.total_users }}, {{ stats.total_doctors }}],
            backgroundColor: ['#417690', '#28a745'],
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Doctor status pie chart
const doctorCtx = document.getElementById('doctorChart').getContext('2d');
new Chart(doctorCtx, {
    type: 'doughnut',
    data: {
        labels: ['Active', 'Pending Approval', 'Inactive'],
        datasets: [{
            data: [
                {{ stats.active_doctors }},
                {{ stats.inactive_doctors }},
                {{ stats.total_doctors|add:stats.active_doctors|add:stats.inactive_doctors|add:"-"|add:stats.inactive_doctors }}
            ],
            backgroundColor: ['#28a745', '#ffc107', '#dc3545'],
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>

{% endblock %}