{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Analytics Dashboard - Business Insights{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="/static/admin-dashboard.css">
    <link rel="stylesheet" href="/static/GavliX-theme.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="/static/hil-pages/analytics.css">
{% endblock %}
{% block content %}
<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

<nav class="navbar">
        <div class="nav-container">
            <a href="/admin" class="nav-logo">📊 Analytics Dashboard</a>
            <div class="nav-links">
                <a href="/dashboard">Dashboard</a>
                <a href="/sales">Sales</a>
                <a href="/analytics">Analytics</a>
                <a href="/admin/branches">Branches</a>
                <a href="/admin">Admin</a>
                <a href="/logout">Logout</a>
            </div>
        </div>
    </nav>

    <main class="analytics-shell">
        <div class="analytics-header">
            <div>
                <h1 class="analytics-title">Business Analytics</h1>
                <p class="analytics-subtitle">Track revenue, product performance, cashier contribution, and fund profitability with clean operational charts.</p>
            </div>
            <div class="branch-control">
                <label for="branchSelect">Branch</label>
                <select id="branchSelect" onchange="loadBranchData()">
                    {% for branch in branches %}
                    <option value="{{ branch[0] }}" {% if branch[0] == current_branch_id %}selected{% endif %}>
                        {{ branch[1] }}
                    </option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-- Key Metrics -->
        <section class="metrics-grid">
            <div class="metric-card">
                <div class="metric-value">{{ currency_symbol }}{{ "%.2f"|format(total_income) }}</div>
                <div class="metric-label">Total Income</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">{{ currency_symbol }}{{ "%.2f"|format(total_expenses) }}</div>
                <div class="metric-label">Total Expenses</div>
            </div>
            <div class="metric-card">
                <div class="metric-value {{ 'positive' if net_income > 0 else 'negative' }}">{{ currency_symbol }}{{ "%.2f"|format(net_income) }}</div>
                <div class="metric-label">Net Income</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">{{ currency_symbol }}{{ "%.2f"|format(sales_income) }}</div>
                <div class="metric-label">Sales Income</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">{{ currency_symbol }}{{ "%.2f"|format(payments_income) }}</div>
                <div class="metric-label">Payments Income</div>
            </div>
        </section>

        <!-- Charts -->
        <section class="charts-grid">
            <div class="chart-container">
                <h3>Sales Trends (30 Days)</h3>
                <p class="chart-note">Revenue and transaction volume by day.</p>
                <div class="chart-frame"><canvas id="salesChart"></canvas></div>
            </div>
            <div class="chart-container">
                <h3>Top Products</h3>
                <p class="chart-note">Revenue compared with estimated profit.</p>
                <div class="chart-frame"><canvas id="productsChart"></canvas></div>
            </div>
            <div class="chart-container">
                <h3>Cashier Performance</h3>
                <p class="chart-note">Share of sales handled by each cashier.</p>
                <div class="chart-frame"><canvas id="cashierChart"></canvas></div>
            </div>
            <div class="chart-container">
                <h3>Fund Profitability</h3>
                <p class="chart-note">Profit contribution by fund source.</p>
                <div class="chart-frame"><canvas id="fundChart"></canvas></div>
            </div>
            <div class="chart-container">
                <h3>Payment Methods</h3>
                <p class="chart-note">Collection totals and transaction count by method.</p>
                <div class="chart-frame"><canvas id="paymentChart"></canvas></div>
            </div>
        </section>



        <!-- Tables -->
        <section>
            <h2>Top Products (30 Days)</h2>
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Revenue</th>
                            <th>Profit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for product in top_products %}
                        <tr>
                            <td>{{ product.name[:40] }}</td>
                            <td>{{ currency_symbol }}{{ "%.2f"|format(product.revenue) }}</td>
                            <td>{{ currency_symbol }}{{ "%.2f"|format(product.total_profit) }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>

        <section>
            <h2>Daily Sales</h2>
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Revenue</th>
                            <th>Transactions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sale in daily_sales %}
                        <tr>
                            <td>{{ sale.sale_date }}</td>
                            <td>{{ currency_symbol }}{{ "%.2f"|format(sale.daily_revenue) }}</td>
                            <td>{{ sale.transaction_count }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>

        {% if payment_methods %}
        <section>
            <h2>Payment Methods</h2>
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>Method</th>
                            <th>Transactions</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for method in payment_methods %}
                        <tr>
                            <td>{{ method.method }}</td>
                            <td>{{ method.transaction_count }}</td>
                            <td>{{ currency_symbol }}{{ "%.2f"|format(method.total_amount) }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
        {% endif %}

        <!-- AI Insights -->
        {% if ai_analysis %}
        <section class="ai-insights">
            <h2>🤖 AI Business Insights</h2>
            <p>{{ ai_analysis.summary }}</p>
            {% if ai_analysis.metrics %}
            <p><strong>Growth:</strong> {{ "%.1f"|format(ai_analysis.metrics.growth_rate) }}% ({{ ai_analysis.metrics.trend }})</p>
            <p><strong>Profit Margin:</strong> {{ "%.1f"|format(ai_analysis.metrics.profit_margin) }}%</p>
            {% endif %}
        </section>
        {% endif %}

        <div class="tip-panel">
            <p>💡 <strong>Pro Tip:</strong> Use the branch selector above to compare performance across locations.</p>
        </div>
    </main>

    <script>
        const salesChartData = {{ sales_chart_data|safe }};
        const productsChartData = {{ products_chart_data|safe }};
        const cashierChartData = {{ cashier_chart_data|safe }};
        const fundChartData = {{ fund_chart_data|safe }};
        const paymentChartData = {{ payment_chart_data|safe }};
        const currencySymbol = {{ currency_symbol|tojson }};

        const analyticsPalette = {
            blue: '#2563eb',
            blueSoft: 'rgba(37, 99, 235, 0.12)',
            cyan: '#0891b2',
            cyanSoft: 'rgba(8, 145, 178, 0.12)',
            emerald: '#059669',
            amber: '#d97706',
            rose: '#e11d48',
            violet: '#7c3aed',
            slate: '#334155',
            grid: 'rgba(100, 116, 139, 0.18)',
            text: '#334155'
        };
        const seriesColors = [
            analyticsPalette.blue,
            analyticsPalette.emerald,
            analyticsPalette.amber,
            analyticsPalette.violet,
            analyticsPalette.cyan,
            analyticsPalette.rose,
            analyticsPalette.slate
        ];

        Chart.defaults.font.family = "'Inter', 'Segoe UI', Arial, sans-serif";
        Chart.defaults.color = analyticsPalette.text;

        Chart.register({
            id: 'noDataMessage',
            afterDraw(chart) {
                const hasData = chart.data.datasets.some(dataset => {
                    return Array.isArray(dataset.data) && dataset.data.some(value => Number(value || 0) !== 0);
                });
                if (hasData || !chart.chartArea) return;
                const { ctx, chartArea } = chart;
                ctx.save();
                ctx.fillStyle = '#64748b';
                ctx.font = '600 14px Segoe UI, Arial, sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText('No analytics data yet', (chartArea.left + chartArea.right) / 2, (chartArea.top + chartArea.bottom) / 2);
                ctx.restore();
            }
        });

        function formatMoney(value) {
            return currencySymbol + Number(value || 0).toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        function baseChartOptions(extra = {}) {
            const pluginOverrides = extra.plugins || {};
            const basePlugins = {
                legend: {
                    position: 'bottom',
                    labels: { usePointStyle: true, boxWidth: 8, padding: 18 }
                },
                tooltip: {
                    backgroundColor: '#0f172a',
                    borderColor: 'rgba(148, 163, 184, 0.28)',
                    borderWidth: 1,
                    padding: 12,
                    titleColor: '#f8fafc',
                    bodyColor: '#e2e8f0'
                }
            };
            return {
                responsive: true,
                maintainAspectRatio: false,
                layout: { padding: { top: 8, right: 12, bottom: 4, left: 4 } },
                ...extra,
                plugins: {
                    ...basePlugins,
                    ...pluginOverrides,
                    legend: { ...basePlugins.legend, ...(pluginOverrides.legend || {}) },
                    tooltip: { ...basePlugins.tooltip, ...(pluginOverrides.tooltip || {}) }
                }
            };
        }

        function moneyAxis(position) {
            return {
                beginAtZero: true,
                position: position || 'left',
                grid: { color: analyticsPalette.grid, drawBorder: false },
                ticks: { callback: value => formatMoney(value), color: analyticsPalette.text }
            };
        }

        function countAxis(position) {
            return {
                beginAtZero: true,
                position: position || 'left',
                grid: { color: analyticsPalette.grid, drawBorder: false },
                ticks: { precision: 0, color: analyticsPalette.text }
            };
        }

        function initChart(canvasId, config) {
            'use strict';
            try {
                const canvas = document.getElementById(canvasId);
                if (!canvas) {
                    console.warn(`Canvas ${canvasId} not found`);
                    return;
                }
                const ctx = canvas.getContext('2d');
                if (!config || !config.data || !Array.isArray(config.data.labels) || !config.data.datasets || !Array.isArray(config.data.datasets)) {
                    console.warn(`Invalid data for ${canvasId}:`, config?.data);
                    return;
                }
                if (!config.data.labels.length) {
                    config.data.labels = ['No data'];
                    config.data.datasets.forEach(dataset => {
                        dataset.data = [0];
                    });
                }
                new Chart(ctx, config);
            } catch (error) {
                console.error(`Failed to init chart ${canvasId}:`, error);
            }
        }

        function loadBranchData() {
            try {
                const branchId = document.getElementById('branchSelect')?.value;
                if (!branchId) return;
                window.location.href = `/analytics?branch_id=${branchId}`;
            } catch (error) {
                console.error('Branch load error:', error);
            }
        }

        initChart('salesChart', {
            type: 'line',
            data: {
                labels: salesChartData?.dates || [],
                datasets: [{
                    label: 'Revenue',
                    data: salesChartData?.revenues || [],
                    borderColor: analyticsPalette.blue,
                    backgroundColor: analyticsPalette.blueSoft,
                    borderWidth: 3,
                    pointRadius: 2,
                    pointHoverRadius: 5,
                    fill: true,
                    tension: 0.35
                }, {
                    label: 'Transactions',
                    data: salesChartData?.transactions || [],
                    borderColor: analyticsPalette.cyan,
                    backgroundColor: analyticsPalette.cyanSoft,
                    borderWidth: 3,
                    pointRadius: 2,
                    pointHoverRadius: 5,
                    yAxisID: 'y1',
                    tension: 0.35
                }]
            },
            options: baseChartOptions({
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label(context) {
                                return context.dataset.yAxisID === 'y1'
                                    ? `${context.dataset.label}: ${Number(context.raw || 0).toLocaleString()}`
                                    : `${context.dataset.label}: ${formatMoney(context.raw)}`;
                            }
                        }
                    }
                },
                scales: {
                    x: { grid: { display: false }, ticks: { color: analyticsPalette.text, maxRotation: 0, autoSkip: true } },
                    y: moneyAxis('left'),
                    y1: { ...countAxis('right'), grid: { drawOnChartArea: false } }
                }
            })
        });

        initChart('productsChart', {
            type: 'bar',
            data: {
                labels: productsChartData?.products || [],
                datasets: [{
                    label: 'Revenue',
                    data: productsChartData?.revenue || [],
                    backgroundColor: analyticsPalette.blue,
                    borderRadius: 6,
                    maxBarThickness: 34
                }, {
                    label: 'Profit',
                    data: productsChartData?.profit || [],
                    backgroundColor: analyticsPalette.emerald,
                    borderRadius: 6,
                    maxBarThickness: 34
                }]
            },
            options: baseChartOptions({
                plugins: {
                    tooltip: {
                        callbacks: {
                            label(context) {
                                return `${context.dataset.label}: ${formatMoney(context.raw)}`;
                            }
                        }
                    }
                },
                scales: {
                    x: { grid: { display: false }, ticks: { color: analyticsPalette.text } },
                    y: moneyAxis('left')
                }
            })
        });

        initChart('cashierChart', {
            type: 'doughnut',
            data: {
                labels: cashierChartData?.cashiers || [],
                datasets: [{
                    data: cashierChartData?.sales || [],
                    backgroundColor: seriesColors,
                    borderColor: '#ffffff',
                    borderWidth: 3,
                    hoverOffset: 8
                }]
            },
            options: baseChartOptions({
                cutout: '62%',
                plugins: {
                    legend: { position: 'right', labels: { usePointStyle: true, boxWidth: 8, padding: 14 } },
                    tooltip: {
                        callbacks: {
                            label(context) {
                                return `${context.label}: ${formatMoney(context.raw)}`;
                            }
                        }
                    }
                }
            })
        });

        initChart('fundChart', {
            type: 'doughnut',
            data: {
                labels: fundChartData?.funds || [],
                datasets: [{
                    data: fundChartData?.profit || [],
                    backgroundColor: [analyticsPalette.violet, analyticsPalette.emerald, analyticsPalette.amber],
                    borderColor: '#ffffff',
                    borderWidth: 3,
                    hoverOffset: 8
                }]
            },
            options: baseChartOptions({
                cutout: '58%',
                plugins: {
                    tooltip: {
                        callbacks: {
                            label(context) {
                                return `${context.label}: ${formatMoney(context.raw)}`;
                            }
                        }
                    }
                }
            })
        });

        initChart('paymentChart', {
            type: 'bar',
            data: {
                labels: paymentChartData?.methods || [],
                datasets: [{
                    label: 'Total Collected',
                    data: paymentChartData?.totals || [],
                    backgroundColor: analyticsPalette.violet,
                    borderRadius: 6,
                    maxBarThickness: 34
                }, {
                    label: 'Transactions',
                    data: paymentChartData?.transactions || [],
                    backgroundColor: analyticsPalette.cyan,
                    borderRadius: 6,
                    maxBarThickness: 34,
                    yAxisID: 'y1'
                }]
            },
            options: baseChartOptions({
                plugins: {
                    tooltip: {
                        callbacks: {
                            label(context) {
                                return context.dataset.yAxisID === 'y1'
                                    ? `${context.dataset.label}: ${Number(context.raw || 0).toLocaleString()}`
                                    : `${context.dataset.label}: ${formatMoney(context.raw)}`;
                            }
                        }
                    }
                },
                scales: {
                    x: { grid: { display: false }, ticks: { color: analyticsPalette.text } },
                    y: moneyAxis('left'),
                    y1: { ...countAxis('right'), grid: { drawOnChartArea: false } }
                }
            })
        });
    </script>
{% endblock %}