{% extends "dashboard/base.html" %}

{% block title %}Overview - Cyborg Dashboard{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">
        <span class="neon-text">Workflow</span> Overview
    </h1>
    <p class="text-text-secondary">Project, approval, and notification queues backed by current Cyborg data</p>
</div>

<!-- Stats Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <!-- Projects In Planning -->
    <div class="glass-card rounded-xl p-5 card-hover border border-accent-purple/20">
        <div class="flex items-center justify-between mb-3">
            <span class="text-text-secondary text-sm">PROJECTS IN PLANNING</span>
            <span class="text-accent-purple text-lg">◇</span>
        </div>
        <div class="text-3xl font-bold font-mono-data text-accent-purple">{{ planning_projects_count }}</div>
        <div class="text-text-muted text-sm mt-1">awaiting specs, approvals, or first execution steps</div>
    </div>

    <!-- Active Projects -->
    <div class="glass-card neon-border rounded-xl p-5 card-hover">
        <div class="flex items-center justify-between mb-3">
            <span class="text-text-secondary text-sm">ACTIVE PROJECTS</span>
            <span class="text-accent-cyan">◈</span>
        </div>
        <div class="text-3xl font-bold font-mono-data">{{ active_projects_count }}</div>
        <div class="text-text-muted text-sm mt-1">currently executing approved project work</div>
    </div>

    <!-- Pending Approvals -->
    <div class="glass-card neon-border-pink rounded-xl p-5 card-hover">
        <div class="flex items-center justify-between mb-3">
            <span class="text-text-secondary text-sm">PENDING APPROVALS</span>
            <span class="text-accent-pink">⚡</span>
        </div>
        <div class="text-3xl font-bold font-mono-data text-accent-pink">{{ pending_approvals_count }}</div>
        <div class="text-text-muted text-sm mt-1">{{ urgent_approvals }} urgent</div>
    </div>

    <!-- Open Notifications -->
    <div class="glass-card rounded-xl p-5 card-hover {% if open_notifications_count > 0 %}border border-accent-orange/30{% else %}border border-accent-cyan/20{% endif %}">
        <div class="flex items-center justify-between mb-3">
            <span class="text-text-secondary text-sm">OPEN NOTIFICATIONS</span>
            <span class="{% if open_notifications_count > 0 %}text-accent-orange{% else %}text-accent-cyan{% endif %}">●</span>
        </div>
        <div class="text-3xl font-bold font-mono-data {% if open_notifications_count > 0 %}text-accent-orange{% else %}text-accent-cyan{% endif %}">{{ open_notifications_count }}</div>
        <div class="text-text-muted text-sm mt-1">pending acknowledgement or resolution</div>
    </div>
</div>

<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Project Status Distribution -->
    <div class="glass-card neon-border rounded-xl p-6">
        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
            <span class="text-accent-cyan">◇</span>
            Project Status Distribution
        </h2>
        <div class="chart-container" style="height: 250px;">
            <canvas id="projectStatusChart"></canvas>
        </div>
    </div>

    <!-- Task Workflow -->
    <div class="glass-card neon-border rounded-xl p-6">
        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
            <span class="text-accent-purple">○</span>
            Task Workflow States
        </h2>
        <div class="chart-container" style="height: 250px;">
            <canvas id="taskStatusChart"></canvas>
        </div>
    </div>
</div>

<!-- Activity & Approvals Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Recent Activity -->
    <div class="lg:col-span-2 glass-card neon-border rounded-xl p-6">
        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
            <span class="text-accent-green">◇</span>
            Recent Workflow Activity
        </h2>
        <div class="space-y-2 max-h-80 overflow-y-auto" id="activity-feed">
            {% for activity in recent_activities %}
            <div class="log-entry p-3 rounded-lg bg-bg-card/50">
                <div class="flex items-center gap-3">
                    <span class="font-mono-data text-xs text-text-muted">{{ activity.created_at|relative_time }}</span>
                    <span class="activity-icon">{% if activity.kind == 'journal' %}◇{% else %}●{% endif %}</span>
                    <div class="flex-1 min-w-0">
                        <div class="text-xs text-accent-cyan mb-1">{{ activity.label }}</div>
                        <div class="text-sm font-medium">{{ activity.title }}</div>
                        <div class="text-xs text-text-muted">{{ activity.summary }}</div>
                    </div>
                    {% if activity.link_url %}
                    <a href="{{ activity.link_url }}" class="text-accent-cyan text-xs hover:underline">open</a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            {% if not recent_activities %}
            <div class="text-center py-8 text-text-muted">
                <div class="text-2xl mb-2">○</div>
                <div>No recent workflow activity recorded yet</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Approval Queue -->
    <div class="glass-card neon-border-pink rounded-xl p-6">
        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
            <span class="text-accent-pink">⚡</span>
            Approvals Queue
        </h2>
        <div class="space-y-3">
            {% if pending_approval_items %}
                {% for approval in pending_approval_items[:5] %}
                <div class="p-3 rounded-lg bg-bg-card/50 border border-accent-pink/20 hover:border-accent-pink/40 transition-colors">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="status-info text-xs px-2 py-0.5 rounded">{{ approval.type }}</span>
                        {% if approval.priority == 'urgent' %}
                        <span class="text-xs text-accent-red">URGENT</span>
                        {% endif %}
                    </div>
                    <div class="text-sm font-medium mb-1">{{ approval.title }}</div>
                    {% if approval.type == 'project_plan' and approval.proposal and approval.proposal.aim %}
                    <div class="text-xs text-text-secondary mb-2 whitespace-pre-line">{{ approval.proposal.aim[:120]|unescape_newlines }}</div>
                    {% else %}
                    <div class="text-xs text-text-muted mb-2">{{ approval.description|truncate(80) }}</div>
                    {% endif %}
                    <div class="flex items-center justify-between gap-2 text-xs">
                        <span class="text-text-muted">Review this item in the appropriate workflow.</span>
                        {% if approval.review_href %}
                        <a href="{{ approval.review_href }}" class="px-3 py-1.5 bg-accent-cyan/20 text-accent-cyan rounded hover:bg-accent-cyan/30 transition-colors">
                            Review
                        </a>
                        {% else %}
                        <a href="/dashboard/approvals" class="px-3 py-1.5 bg-accent-cyan/20 text-accent-cyan rounded hover:bg-accent-cyan/30 transition-colors">
                            Queue
                        </a>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="text-center py-8 text-text-muted">
                    <div class="text-2xl mb-2">✓</div>
                    <div>No pending approvals</div>
                </div>
            {% endif %}
        </div>
        {% if pending_approvals_count > 5 %}
        <a href="/dashboard/approvals" class="block mt-4 text-center text-sm text-accent-cyan hover:underline">
            View all {{ pending_approvals_count }} approvals →
        </a>
        {% endif %}
    </div>
</div>

<!-- Bottom Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Saved Health Attention -->
    <div class="glass-card neon-border rounded-xl p-6">
        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
            <span class="text-accent-orange">▲</span>
            Projects Needing Attention
        </h2>
        <p class="text-xs text-text-muted mb-4">Based on saved health checks, not live host monitoring.</p>
        <div class="space-y-3">
            {% for project in attention_projects %}
            <a href="/dashboard/projects/{{ project.id }}" class="block p-3 rounded-lg bg-bg-card/50 border border-accent-orange/20 hover:border-accent-orange/40 transition-colors">
                <div class="flex items-center justify-between gap-3 mb-1">
                    <div class="text-sm font-medium">{{ project.title }}</div>
                    <span class="text-xs px-2 py-1 rounded {% if project.risk_level == 'critical' %}bg-accent-red/20 text-accent-red{% else %}bg-accent-orange/20 text-accent-orange{% endif %}">
                        {{ project.risk_level|upper }}
                    </span>
                </div>
                <div class="text-xs text-text-muted">
                    {% if project.health_score is not none %}{{ (project.health_score * 100)|int }}% health · {% endif %}
                    last checked {{ project.last_checked|relative_time }}
                </div>
            </a>
            {% endfor %}
            {% if not attention_projects %}
            <div class="text-sm text-text-muted">{{ attention_note }}</div>
            {% endif %}
        </div>
    </div>

    <!-- Open Notifications -->
    <div class="glass-card neon-border rounded-xl p-6">
        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
            <span class="text-accent-cyan">●</span>
            Open Notifications
        </h2>
        <div class="space-y-3">
            {% for notification in open_notifications %}
            <div class="p-3 rounded-lg bg-bg-card/50 border border-accent-cyan/10">
                <div class="flex items-center justify-between gap-3 mb-1">
                    <div class="text-sm font-medium">{{ notification.title }}</div>
                    <span class="text-xs text-text-muted">{{ notification.created_at|relative_time }}</span>
                </div>
                <div class="text-xs text-accent-cyan mb-1">{{ notification.type_label }}</div>
                <div class="text-xs text-text-muted mb-2">{{ notification.message|truncate(120) }}</div>
                <div class="flex items-center justify-between text-xs">
                    <span class="text-text-muted">Delivery: {{ notification.delivery_status|upper }}</span>
                    {% if notification.link_url %}
                    <a href="{{ notification.link_url }}" class="text-accent-cyan hover:underline">open</a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            {% if not open_notifications %}
            <div class="text-sm text-text-muted">No open notifications.</div>
            {% endif %}
        </div>
    </div>

    <!-- Recent Outcomes -->
    <div class="glass-card neon-border rounded-xl p-6">
        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
            <span class="text-accent-green">✓</span>
            Recent Outcomes
        </h2>
        <div class="space-y-3">
            {% for outcome in recent_outcomes %}
            <div class="p-3 rounded-lg bg-bg-card/50 border border-accent-green/10">
                <div class="flex items-center justify-between gap-3 mb-1">
                    <div class="text-sm font-medium">{{ outcome.title }}</div>
                    <span class="text-xs text-text-muted">{{ outcome.created_at|relative_time }}</span>
                </div>
                <div class="text-xs text-accent-green mb-1">{{ outcome.type_label }}</div>
                <div class="text-xs text-text-muted mb-2">{{ outcome.message|truncate(120) }}</div>
                {% if outcome.link_url %}
                <a href="{{ outcome.link_url }}" class="text-xs text-accent-cyan hover:underline">open project</a>
                {% endif %}
            </div>
            {% endfor %}
            {% if not recent_outcomes %}
            <div class="text-sm text-text-muted">No recent result notifications recorded yet.</div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Chart.js configuration
const chartColors = {
    cyan: '#00f0ff',
    pink: '#ff00ff',
    purple: '#b026ff',
    green: '#00ff9f',
    orange: '#ff6b00',
    red: '#ff0055',
    gray: '#3a3a4a',
};

const chartConfig = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            position: 'bottom',
            labels: {
                color: '#9898a0',
                usePointStyle: true,
                padding: 15,
            }
        }
    },
    scales: {
        x: {
            grid: { color: 'rgba(0, 240, 255, 0.05)' },
            ticks: { color: '#9898a0' }
        },
        y: {
            grid: { color: 'rgba(0, 240, 255, 0.05)' },
            ticks: { color: '#9898a0' },
            beginAtZero: true
        }
    }
};

// Project Status Donut Chart
new Chart(document.getElementById('projectStatusChart'), {
    type: 'doughnut',
    data: {
        labels: ['Planning', 'Active', 'Paused', 'Closed'],
        datasets: [{
            data: {{ project_status_data|safe }},
            backgroundColor: [chartColors.purple, chartColors.cyan, chartColors.orange, chartColors.green],
            borderColor: '#12121a',
            borderWidth: 2,
            hoverOffset: 10
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom', labels: { color: '#9898a0' } }
        },
        cutout: '65%'
    }
});

// Task Status Bar Chart
new Chart(document.getElementById('taskStatusChart'), {
    type: 'bar',
    data: {
        labels: ['Pending', 'Active', 'Blocked', 'Completed', 'Failed'],
        datasets: [{
            label: 'Tasks',
            data: {{ task_status_data|safe }},
            backgroundColor: [
                'rgba(178, 38, 255, 0.45)',
                'rgba(154, 154, 166, 0.5)',
                chartColors.cyan,
                chartColors.orange,
                chartColors.green,
                chartColors.red
            ],
            borderColor: [
                chartColors.purple,
                '#6b7280',
                chartColors.cyan,
                chartColors.orange,
                chartColors.green,
                chartColors.red
            ],
            borderWidth: 1,
            borderRadius: 4
        }]
    },
    options: {
        ...chartConfig,
        indexAxis: 'y',
        plugins: { legend: { display: false } }
    }
});
</script>
{% endblock %}