{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <div>
        <h1>{{ 'Administration Dashboard' if is_super_admin else 'Team Dashboard' if is_manager else 'My Dashboard' }}</h1>
        <p class="muted">Current lead and approved-sales activity</p>
    </div>
    {% if is_super_admin %}
    <a class="btn" href="{{ url_for('settings.index') }}"><i data-lucide="settings" aria-hidden="true"></i>System Settings</a>
    {% endif %}
</div>

<div class="kpi-grid{% if is_super_admin %} superadmin-kpi-grid{% endif %}">
    {% set icons = ['target', 'trophy', 'receipt-text', 'indian-rupee', 'users', 'briefcase-business'] %}

    {% for k, v in stats.items() if k != 'total_sales' %}
    <div class="kpi-card{{ ' kpi-clickable' if k == 'total_leads' else '' }}"
         {% if k == 'total_leads' %}data-lead-status-trigger tabindex="0" role="button"{% endif %}>
        <div class="kpi-icon">
            <i data-lucide="{{ icons[loop.index0] if loop.index0 < icons|length else 'chart-no-axes-column' }}" aria-hidden="true"></i>
        </div>
        <span>{{ k.replace('_', ' ').title() }}</span>
        <strong>{{ v }}</strong>
    </div>
    {% endfor %}
</div>

{% if is_super_admin %}
<section class="panel manager-performance-panel">
    <div class="page-head">
        <div>
            <h2>Manager and Team Performance</h2>
            <p class="muted">Approved sales this month and lead status distribution for every active manager and their direct reports.</p>
        </div>
    </div>
    {% for group in manager_performance %}
    <section class="manager-performance-group">
        <h3>{{ group.manager.name }}</h3>
        {% if group.totals %}
        <div class="manager-summary">
            <span>{{ group.totals.assigned_leads }} assigned leads</span>
            <span>{{ group.totals.sale_count }} approved orders</span>
            <strong>₹{{ '%.2f'|format(group.totals.approved_sales) }} this month</strong>
        </div>
        <div class="table-wrap">
            <table class="modern-table manager-performance-table">
                <thead>
                    <tr>
                        <th>Team Member</th>
                        <th>Assigned Leads</th>
                        {% for status in group.statuses %}<th>{{ status.replace('_', ' ').title() }}</th>{% endfor %}
                        <th>Orders</th>
                        <th>Approved Sales</th>
                    </tr>
                </thead>
                <tbody>
                    {% for member in group.rows %}
                    <tr>
                        <td><strong>{{ member.name }}</strong>{% if member.is_manager %} <span class="badge">Manager</span>{% endif %}</td>
                        <td>{{ member.assigned_leads }}</td>
                        {% for status in group.statuses %}<td>{{ member.status_counts.get(status, 0) }}</td>{% endfor %}
                        <td>{{ member.sale_count }}</td>
                        <td>₹{{ '%.2f'|format(member.approved_sales) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="muted">No direct reports or performance data is mapped to this manager yet.</p>
        {% endif %}
    </section>
    {% else %}
    <p class="muted">No active managers found.</p>
    {% endfor %}
</section>
{% endif %}

<div class="modal-overlay" id="leadStatusModal" hidden>
    <div class="modal-box">
        <div class="modal-head">
            <h3>Leads by Status</h3>
            <button type="button" class="modal-close" data-lead-status-close aria-label="Close">&times;</button>
        </div>
        <div class="vertical-bar-chart">
            {% set status_max = lead_status_chart|map(attribute='value')|max if lead_status_chart else 1 %}
            {% for item in lead_status_chart %}
            <div class="vbar-col">
                <div class="vbar-value">{{ item.value }}</div>
                <div class="vbar-track">
                    <div class="vbar-fill" data-chart-height="{{ (item.value / status_max * 100) if status_max else 0 }}"></div>
                </div>
                <div class="vbar-label">{{ item.label }}</div>
            </div>
            {% else %}
            <p class="muted">No leads found.</p>
            {% endfor %}
        </div>
    </div>
</div>

<div class="grid-2">
    <div class="visual-panel">
        <h3>Recently Updated Leads</h3>

        <table class="modern-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Updated</th>
                </tr>
            </thead>
            <tbody>
                {% for l in recent_leads %}
                <tr>
                    <td>{{ l.customer_name }}</td>
                    <td>{{ l.phone or '-' }}</td>
                    <td><span class="badge">{{ l.status }}</span></td>
                    <td>{{ l.priority }}</td>
                    <td>{{ l.updated_at }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="visual-panel dashboard-chart">
        <h3>Current Month Overview</h3>
        {% set chart_max = chart|map(attribute=1)|max if chart else 1 %}
        {% for label, value in chart %}
        <div class="chart-row">
            <span>{{ label }}</span>
            <div class="chart-track"><i data-chart-width="{{ (value / chart_max * 100) if chart_max else 0 }}"></i></div>
            <strong>{{ '₹{:,.2f}'.format(value) if 'sales' in label|lower else value|int }}</strong>
        </div>
        {% endfor %}
    </div>
</div>

{% if is_manager %}
<section class="panel">
    <h2>Team Progress</h2>
    <p class="muted">You and every member reporting to you, with assigned leads split by status and approved sales for the current month.</p>

    {% if team_totals %}
    <div class="kpi-grid">
        <div class="kpi-card">
            <div class="kpi-icon"><i data-lucide="users" aria-hidden="true"></i></div>
            <span>Team Members</span><strong>{{ direct_report_count }}</strong>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon"><i data-lucide="target" aria-hidden="true"></i></div>
            <span>Group Assigned Leads</span><strong>{{ team_totals.assigned_leads }}</strong>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon"><i data-lucide="receipt-text" aria-hidden="true"></i></div>
            <span>Group Sales Orders (Month)</span><strong>{{ team_totals.sale_count }}</strong>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon"><i data-lucide="indian-rupee" aria-hidden="true"></i></div>
            <span>Total Group Sales (Month)</span><strong>₹{{ '%.2f'|format(team_totals.approved_sales) }}</strong>
        </div>
    </div>
    {% endif %}

    <div class="table-wrap">
        <table class="modern-table">
            <thead>
                <tr>
                    <th>Team Member</th>
                    <th>Assigned Leads</th>
                    {% for status in team_statuses %}<th>{{ status.replace('_', ' ').title() }}</th>{% endfor %}
                    <th>Sales Orders (Month)</th>
                    <th>Approved Sales (Month)</th>
                    <th>Incentive %</th>
                    <th>Incentive Amount</th>
                    <th>Leads</th>
                </tr>
            </thead>
            <tbody>
                {% for member in team_rows %}
                <tr>
                    <td><strong>{{ member.name }}</strong>{% if member.is_manager %} <span class="badge">You</span>{% endif %}</td>
                    <td>{{ member.assigned_leads }}</td>
                    {% for status in team_statuses %}
                    <td>
                        {% set count = member.status_counts.get(status, 0) %}
                        {% if count %}
                        <a href="{{ url_for('leads.index', assigned_to=member.id, status=status) if member.is_manager else url_for('leads.index', scope='group', assigned_to=member.id, status=status) }}">{{ count }}</a>
                        {% else %}0{% endif %}
                    </td>
                    {% endfor %}
                    <td>{{ member.sale_count }}</td>
                    <td>₹{{ '%.2f'|format(member.approved_sales) }}</td>
                    <td>{{ member.percentage }}%</td>
                    <td>₹{{ '%.2f'|format(member.incentive) }}</td>
                    <td><a class="btn btn-sm" href="{{ url_for('leads.index', assigned_to=member.id) if member.is_manager else url_for('leads.index', scope='group', assigned_to=member.id) }}">View</a></td>
                </tr>
                {% else %}
                <tr><td colspan="8" style="text-align:center;">No team members are mapped to you yet. Set the Manager field on each employee record.</td></tr>
                {% endfor %}
            </tbody>
            {% if team_totals %}
            <tfoot>
                <tr>
                    <th>Group Total</th>
                    <th>{{ team_totals.assigned_leads }}</th>
                    {% for status in team_statuses %}<th>{{ team_totals.status_counts.get(status, 0) }}</th>{% endfor %}
                    <th>{{ team_totals.sale_count }}</th>
                    <th>₹{{ '%.2f'|format(team_totals.approved_sales) }}</th>
                    <th>-</th>
                    <th>₹{{ '%.2f'|format(team_totals.incentive) }}</th>
                    <th><a class="btn btn-sm" href="{{ url_for('leads.index', scope='group') }}">All</a></th>
                </tr>
            </tfoot>
            {% endif %}
        </table>
    </div>

    {% if team_rows %}
    <h3>Share of Group Sales This Month</h3>
    {% set sales_max = team_rows|map(attribute='approved_sales')|max %}
    {% for member in team_rows %}
    <div class="chart-row">
        <span>{{ member.name }}{% if member.is_manager %} (You){% endif %}</span>
        <div class="chart-track"><i data-chart-width="{{ (member.approved_sales / sales_max * 100) if sales_max else 0 }}"></i></div>
        <strong>₹{{ '%.2f'|format(member.approved_sales) }}</strong>
    </div>
    {% endfor %}
    {% endif %}
</section>
{% endif %}

{% if not is_super_admin %}
<section class="panel compensation-panel">
    <button class="compensation-toggle" type="button" data-compensation-toggle aria-expanded="false">
        Show Sales &amp; Incentive Details
    </button>
    <div data-compensation-details hidden>
        <div class="compensation-grid">
            <div><span>Approved Sales This Month</span><strong>₹{{ '%.2f'|format(stats.approved_sales_this_month) }}</strong></div>
            <div><span>Incentive Rate</span><strong>{{ compensation.percentage }}%</strong></div>
            <div><span>Incentive Amount</span><strong>₹{{ '%.2f'|format(compensation.incentive) }}</strong></div>
            {% if not is_manager %}<div><span>Salary Including Incentive</span><strong>₹{{ '%.2f'|format(compensation.total) }}</strong></div>{% endif %}
        </div>
    </div>
</section>
{% endif %}

<script>
document.querySelectorAll('[data-chart-height]').forEach((bar) => {
    bar.style.height = `${Number(bar.dataset.chartHeight) || 0}%`;
});
document.querySelectorAll('[data-chart-width]').forEach((bar) => {
    bar.style.width = `${Number(bar.dataset.chartWidth) || 0}%`;
});
</script>

{% endblock %}