{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<!-- Summary cards -->
{% if dashboard_cards %}
<div class="row g-3 mb-4">
    {% for card in dashboard_cards %}
    <div class="col-md-3">
        <a href="{{ card.link }}" class="text-decoration-none">
            <div class="card summary-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="summary-value {{ card.color or '' }}">{{ card.value }}</div>
                            <div class="summary-label">{{ card.label }}</div>
                        </div>
                        <div class="summary-icon {{ card.bg or 'bg-primary-subtle' }}">
                            {% if card.icon_img %}
                            <span class="fs-4 {{ card.icon_color or 'text-primary' }}" style="display:inline-block;width:{{ card.icon_img_size or '1.5em' }};height:{{ card.icon_img_size or '1.5em' }};background-color:currentColor;-webkit-mask-image:url('{{ card.icon_img }}');mask-image:url('{{ card.icon_img }}');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;"></span>
                            {% else %}
                            <i class="bi bi-{{ card.icon }} fs-4 {{ card.icon_color or 'text-primary' }}"></i>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Charts -->
{% if dashboard_charts %}
<div class="row g-3 mb-4">
    {% for chart in dashboard_charts %}
    <div class="col-12 col-lg-{{ chart.width or 6 }}">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">{{ chart.title }}</h6>
            </div>
            <div class="card-body">
                <div id="dashboard-chart-{{ loop.index0 }}"></div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<div class="row g-3">
    <!-- Recent items table -->
    {% if dashboard_table %}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">{{ dashboard_table.title or 'Recent Items' }}</h6>
                {% if dashboard_table.link %}
                <a href="{{ dashboard_table.link }}" class="btn btn-sm btn-outline-primary">{{ dashboard_table.link_text or 'View All' }}</a>
                {% endif %}
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            {% for col in dashboard_table.columns %}
                            <th>{{ col.label }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in dashboard_table.rows %}
                        <tr>
                            {% for col in dashboard_table.columns %}
                            <td>
                                {% if item is mapping %}
                                    {% set value = item.get(col.key, '') %}
                                {% else %}
                                    {% set value = item[col.key] %}
                                {% endif %}
                                {% if col.link %}
                                    {% if item is mapping %}
                                        {% set item_id = item.get('id', '') %}
                                    {% else %}
                                        {% set item_id = item.id %}
                                    {% endif %}
                                <a href="{{ col.link.replace('{id}', item_id|string) }}">{{ value or 'N/A' }}</a>
                                {% elif col.status %}
                                {% with status=value %}
                                {% include "partials/status_cell.html" %}
                                {% endwith %}
                                {% elif col.code %}
                                <code>{{ value or 'N/A' }}</code>
                                {% else %}
                                {{ value or 'N/A' }}
                                {% endif %}
                            </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Sidebar widgets -->
    {% if dashboard_stats or dashboard_actions %}
    <div class="col-lg-4">
        {% if dashboard_stats %}
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">{{ dashboard_stats.title or 'Status Breakdown' }}</h6>
            </div>
            <div class="card-body">
                {% if dashboard_stats.status_breakdown %}
                {% for status_name, count in dashboard_stats.status_breakdown.items() %}
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>
                        {% with status=status_name %}
                        {% include "partials/status_cell.html" %}
                        {% endwith %}
                    </span>
                    <span class="fw-bold">{{ count }}</span>
                </div>
                {% endfor %}
                {% endif %}

                {% if dashboard_stats.counters %}
                {% if dashboard_stats.status_breakdown %}<hr>{% endif %}
                <div class="mt-3">
                    {% if dashboard_stats.counters_title %}
                    <h6 class="text-muted small">{{ dashboard_stats.counters_title }}</h6>
                    {% endif %}
                    {% for counter in dashboard_stats.counters %}
                    <div class="d-flex justify-content-between">
                        <span>{{ counter.label }}</span>
                        <span class="fw-bold">{{ counter.value }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {% if dashboard_actions %}
        <div class="card {{ 'mt-3' if dashboard_stats else '' }}">
            <div class="card-header">
                <h6 class="mb-0">Quick Actions</h6>
            </div>
            <div class="card-body d-grid gap-2">
                {% for action in dashboard_actions %}
                <a href="{{ action.url }}" class="btn {{ action.class or 'btn-outline-secondary' }}">
                    {% if action.icon %}<i class="bi bi-{{ action.icon }}"></i> {% endif %}{{ action.label }}
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{% if dashboard_charts %}
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.54.1"></script>
<script>
(function() {
    var chartConfigs = {{ dashboard_charts | tojson }};
    var chartInstances = [];

    function isDark() {
        return document.documentElement.getAttribute('data-bs-theme') === 'dark';
    }

    function applyTheme(data) {
        var dark = isDark();
        if (!data.chart) data.chart = {};
        data.chart.background = 'transparent';
        data.chart.foreColor = dark ? '#adb5bd' : '#495057';
        data.theme = { mode: dark ? 'dark' : 'light' };
        if (!data.grid) data.grid = {};
        data.grid.borderColor = dark ? '#374151' : '#e5e7eb';
        data.grid.strokeDashArray = 3;
        if (!data.legend) data.legend = {};
        data.legend.labels = { colors: dark ? '#adb5bd' : '#495057' };
        if (!data.tooltip) data.tooltip = {};
        data.tooltip.theme = dark ? 'dark' : 'light';
    }

    function parseEventHandlers(data) {
        if (data.chart && data.chart.events) {
            var events = data.chart.events;
            for (var key in events) {
                if (typeof events[key] === 'string') {
                    try {
                        events[key] = new Function(
                            'event', 'chartContext', 'config',
                            events[key]
                                .replace(/^function\s*\([^)]*\)\s*\{/, '')
                                .replace(/\}\s*$/, '')
                        );
                    } catch (e) {
                        console.error('Failed to parse event handler ' + key + ':', e);
                        delete events[key];
                    }
                }
            }
        }
    }

    function loadChart(cfg, index) {
        var el = document.querySelector('#dashboard-chart-' + index);
        if (!el) return;

        if (cfg.url) {
            fetch(cfg.url)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (cfg.colors && !data.colors) data.colors = cfg.colors;
                    applyTheme(data);
                    parseEventHandlers(data);
                    var chart = new ApexCharts(el, data);
                    chart.render();
                    chartInstances.push(chart);
                })
                .catch(function(e) { console.error('Chart load error (' + cfg.title + '):', e); });
        } else if (cfg.data) {
            var data = JSON.parse(JSON.stringify(cfg.data));
            if (cfg.colors && !data.colors) data.colors = cfg.colors;
            applyTheme(data);
            parseEventHandlers(data);
            var chart = new ApexCharts(el, data);
            chart.render();
            chartInstances.push(chart);
        }
    }

    function loadAllCharts() {
        chartInstances.forEach(function(c) { c.destroy(); });
        chartInstances = [];
        chartConfigs.forEach(function(cfg, i) { loadChart(cfg, i); });
    }

    function init() {
        loadAllCharts();
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(m) {
                if (m.attributeName === 'data-bs-theme') {
                    loadAllCharts();
                }
            });
        });
        observer.observe(document.documentElement, { attributes: true });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>
{% endif %}
{% endblock %}