{% extends 'manager/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Manager Dashboard" %}{% endblock %}

{% block header.add_script %}
<style>
    .metric-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .metric-card.revenue {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    .metric-card.users {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    .metric-card.companies {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
    .metric-card.churn {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
    .metric-value {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .metric-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    .dashboard-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .company-item, .activity-item {
        font-size: 0.9rem;
    }
    
    .company-name, .activity-name {
        font-weight: 500;
    }
    .pipeline-stage {
        text-align: center;
        padding: 15px;
        border-radius: 8px;
        margin: 5px;
        background: #f8f9fa;
    }
    .pipeline-count {
        font-size: 1.5rem;
        font-weight: bold;
        color: #007bff;
    }
    .risk-indicator {
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: bold;
    }
    .risk-high { background: #ffebee; color: #c62828; }
    .risk-medium { background: #fff3e0; color: #f57c00; }
    .risk-low { background: #e8f5e8; color: #2e7d32; }
    .contract-expiring {
        border-left: 4px solid #ff9800;
        padding-left: 15px;
        margin-bottom: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="content container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-sm-12">
                <h3 class="page-title">{% trans "Manager Dashboard" %}</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'panel-manager' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "Overview" %}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Key Metrics Row -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="metric-card users">
                <div class="metric-value">{{ total_users|default:0 }}</div>
                <div class="metric-label">{% trans "Total Users" %}</div>
                <small>{{ today_users|default:0 }} {% trans "joined today" %} | {{ today_active_users|default:0 }} {% trans "active today" %}</small>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="metric-card companies">
                <div class="metric-value">{{ total_companies|default:0 }}</div>
                <div class="metric-label">{% trans "B2B Companies" %}</div>
                <small>{{ active_subscriptions|default:0 }} {% trans "active subscriptions" %}</small>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="metric-card revenue">
                <div class="metric-value">${{ total_revenue|floatformat:0|default:0 }}</div>
                <div class="metric-label">{% trans "Total Revenue" %}</div>
                <small>${{ monthly_revenue|floatformat:0|default:0 }} {% trans "this month" %}</small>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="metric-card churn">
                <div class="metric-value">{{ high_risk_users_count|default:0 }}</div>
                <div class="metric-label">{% trans "High Churn Risk" %}</div>
                <small>{{ medium_risk_users_count|default:0 }} {% trans "medium risk" %}</small>
            </div>
        </div>
    </div>

    <!-- User Demographics -->
    <div class="row">
        <div class="col-lg-8">
            <div class="dashboard-section">
                <h4>{% trans "User Demographics" %}</h4>
                
                <!-- Gender Distribution -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <h6>{% trans "Gender Distribution" %}</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="pipeline-stage" style="background: #e3f2fd;">
                                    <div class="pipeline-count" style="color: #1976d2;">{{ male_users|default:0 }}</div>
                                    <small>{% trans "Male Users" %}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="pipeline-stage" style="background: #fce4ec;">
                                    <div class="pipeline-count" style="color: #c2185b;">{{ female_users|default:0 }}</div>
                                    <small>{% trans "Female Users" %}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Age Groups -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <h6>{% trans "Age Distribution" %}</h6>
                        <div class="row">
                            {% for age_range, count in age_groups.items %}
                            <div class="col-md-2">
                                <div class="pipeline-stage">
                                    <div class="pipeline-count">{{ count|default:0 }}</div>
                                    <small>{{ age_range }}</small>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <!-- Diabetes Types -->
                <div class="row">
                    <div class="col-md-12">
                        <h6>{% trans "Market Source Distribution" %}</h6>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="pipeline-stage" style="background: #fff3e0;">
                                    <div class="pipeline-count" style="color: #f57c00;">{{ market_source.AppStore|default:0 }}</div>
                                    <small>{% trans "Apple App Store" %}</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="pipeline-stage" style="background: #e8f5e8;">
                                    <div class="pipeline-count" style="color: #2e7d32;">{{ market_source.Bazaar|default:0 }}</div>
                                    <small>{% trans "Bazaar" %}</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="pipeline-stage" style="background: #f3e5f5;">
                                    <div class="pipeline-count" style="color: #7b1fa2;">{{ market_source.Myket|default:0 }}</div>
                                    <small>{% trans "Myket" %}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Company Demographics -->
            <div class="dashboard-section mb-4">
                <h4>{% trans "Company Analytics" %}</h4>
                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="metric-card">
                            <div class="metric-value">{{ total_company_users|default:0 }}</div>
                            <div class="metric-label">{% trans "Total Company Users" %}</div>
                        </div>
                    </div>
                </div>
                
                <h6>{% trans "Top Companies by Users" %}</h6>
                {% if top_companies %}
                    {% for company in top_companies %}
                    <div class="company-item mb-2 pb-2 border-bottom">
                        <div class="d-flex justify-content-between">
                            <span class="company-name">{{ company.name|truncatechars:20 }}</span>
                            <span class="badge badge-primary">{{ company.users }} {% trans "users" %}</span>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted">{% trans "No companies available" %}</p>
                {% endif %}
            </div>
            
            <!-- Top Activities -->
            <div class="dashboard-section mb-4">
                <h4>{% trans "Popular Activities" %}</h4>
                {% if top_activities %}
                    {% for activity in top_activities %}
                    <div class="activity-item mb-2 pb-2 border-bottom">
                        <div class="d-flex justify-content-between">
                            <span class="activity-name">{{ activity.0|truncatechars:15 }}</span>
                            <span class="badge badge-success">{{ activity.1 }} {% trans "logs" %}</span>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted">{% trans "No recent activities" %}</p>
                {% endif %}
            </div>
            
            <div class="dashboard-section">
                <h4>{% trans "Quick Actions" %}</h4>
                <div class="list-group">
                    <a href="{% url 'panel-manager-users' %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-users"></i> {% trans "Manage Users" %}
                    </a>
                    <a href="{% url 'panel-manager-companies' %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-building"></i> {% trans "Manage Companies" %}
                    </a>
                    <a href="{% url 'panel-manager-notifications' %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-bell"></i> {% trans "Send Notifications" %}
                    </a>
                    <a href="{% url 'panel-manager-segmentation' %}" class="list-group-item list-group-item-action">
                        <i class="fa fa-filter"></i> {% trans "User Segmentation" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity & Alerts -->
    <div class="row">
        <div class="col-lg-6">
            <div class="dashboard-section">
                <h4>{% trans "Recent Leads" %}</h4>
                {% if recent_leads %}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>{% trans "Company" %}</th>
                                    <th>{% trans "Contact" %}</th>
                                    <th>{% trans "Status" %}</th>
                                    <th>{% trans "Value" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for lead in recent_leads %}
                                <tr>
                                    <td>{{ lead.company_name }}</td>
                                    <td>{{ lead.contact_name }}</td>
                                    <td>
                                        <span class="badge badge-{% if lead.status == 'closed_won' %}success{% elif lead.status == 'closed_lost' %}danger{% else %}primary{% endif %}">
                                            {{ lead.get_status_display }}
                                        </span>
                                    </td>
                                    <td>${{ lead.estimated_value|floatformat:0 }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-muted">{% trans "No recent leads" %}</p>
                {% endif %}
            </div>
        </div>
        
        <div class="col-lg-6">
            <div class="dashboard-section">
                <h4>{% trans "Contract Alerts" %}</h4>
                {% if contracts_expiring %}
                    {% for company in contracts_expiring %}
                    <div class="contract-expiring">
                        <strong>{{ company.name }}</strong>
                        <br>
                        <small>{% trans "Contract expires in" %} {{ company.days_until_contract_expires }} {% trans "days" %}</small>
                        <br>
                        <small class="text-muted">{{ company.contract_end_date }}</small>
                    </div>
                    {% endfor %}
                    <a href="{% url 'panel-manager-companies' %}" class="btn btn-warning btn-sm">{% trans "Review All Contracts" %}</a>
                {% else %}
                    <p class="text-muted">{% trans "No contracts expiring soon" %}</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Recent Companies -->
    <div class="row">
        <div class="col-12">
            <div class="dashboard-section">
                <h4>{% trans "Recently Added Companies" %}</h4>
                {% if recent_companies %}
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>{% trans "Company Name" %}</th>
                                    <th>{% trans "Type" %}</th>
                                    <th>{% trans "Licenses" %}</th>
                                    <th>{% trans "Contract Value" %}</th>
                                    <th>{% trans "Added Date" %}</th>
                                    <th>{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for company in recent_companies %}
                                <tr>
                                    <td>
                                        <strong>{{ company.name }}</strong>
                                        <br>
                                        <small class="text-muted">{{ company.company_code }}</small>
                                    </td>
                                    <td>{{ company.get_company_type_display }}</td>
                                    <td>{{ company.licenses_purchased }}</td>
                                    <td>${{ company.total_contract_value|floatformat:0 }}</td>
                                    <td>{{ company.created_at|date:"M d, Y" }}</td>
                                    <td>
                                        <a href="{% url 'panel-manager-company-profile' company.id %}" class="btn btn-sm btn-primary">
                                            {% trans "View" %}
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-muted">{% trans "No companies added recently" %}</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}