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

{% block title %}{% trans "Company Profile" %} - {{ company.name }}{% endblock %}

{% block header.add_script %}
<style>
    .company-header {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
    }
    .company-logo {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    .info-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .metric-item {
        text-align: center;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin: 5px;
    }
    .metric-value {
        font-size: 1.5rem;
        font-weight: bold;
        color: #28a745;
    }
    .metric-label {
        font-size: 0.9rem;
        color: #6c757d;
    }
    .contract-status {
        padding: 8px 15px;
        border-radius: 20px;
        font-weight: bold;
        display: inline-block;
    }
    .status-active { background: #d4edda; color: #155724; }
    .status-expiring { background: #fff3cd; color: #856404; }
    .status-expired { background: #f8d7da; color: #721c24; }
    .user-list-item {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        background: #fafafa;
    }
    .usage-chart {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
    }
</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 "Company Profile" %}</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'panel-manager-dashboard' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'panel-manager-companies' %}">{% trans "Companies" %}</a></li>
                    <li class="breadcrumb-item active">{{ company.name }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Company Header -->
    <div class="company-header">
        <div class="row">
            <div class="col-auto">
                <div class="company-logo">
                    {{ company.name|slice:":2"|upper }}
                </div>
            </div>
            <div class="col">
                <h3 class="mb-1">{{ company.name }}</h3>
                <p class="mb-1">{{ company.company_code }} | {{ company.get_company_type_display }}</p>
                <p class="mb-1">
                    <i class="fa fa-user"></i> {{ company.primary_contact_name }} |
                    <i class="fa fa-envelope"></i> {{ company.primary_contact_email }} |
                    <i class="fa fa-phone"></i> {{ company.primary_contact_phone }}
                </p>
                <p class="mb-0">
                    <i class="fa fa-calendar"></i> {% trans "Contract:" %} {{ company.contract_start_date|date:"M d, Y" }} - {{ company.contract_end_date|date:"M d, Y" }}
                </p>
            </div>
            <div class="col-auto text-right">
                
                <div class="mt-2">
                    <h5>تومان{{ company.total_contract_value|floatformat:0 }}</h5>
                    <small>{% trans "Total Contract Value" %}</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Key Metrics Row -->
    <div class="row">
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ total_users }}</div>
                <div class="metric-label">{% trans "Total Users" %}</div>
                <small>{{ weekly_active_users }} {% trans "active this week" %}</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ weekly_active_users }}</div>
                <div class="metric-label">{% trans "Weekly Active" %}</div>
                <small>{{ monthly_active_users }} {% trans "monthly active" %}</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ avg_lacto_points|floatformat:1 }}</div>
                <div class="metric-label">{% trans "Avg Lacto Points" %}</div>
                <small>{% trans "Group average" %}</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ total_messages }}</div>
                <div class="metric-label">{% trans "Total Messages" %}</div>
                <small>{{ recent_messages_sent|add:recent_messages_received }} {% trans "this month" %}</small>
            </div>
        </div>
    </div>

    <!-- Nutrition Analytics Row -->
    <div class="row mt-4">
        <div class="col-md-12">
            <h5><i class="fa fa-chart-bar"></i> {% trans "Nutrition Analytics" %}</h5>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ avg_protein|floatformat:1 }}g</div>
                <div class="metric-label">{% trans "Avg Protein" %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ avg_calories|floatformat:0 }}</div>
                <div class="metric-label">{% trans "Avg Calories" %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ avg_fat|floatformat:1 }}g</div>
                <div class="metric-label">{% trans "Avg Fat" %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ avg_carbs|floatformat:1 }}g</div>
                <div class="metric-label">{% trans "Avg Carbohydrates" %}</div>
            </div>
        </div>
    </div>

    <!-- Communication Analytics Row -->
    <div class="row mt-4">
        <div class="col-md-12">
            <h5><i class="fa fa-comments"></i> {% trans "Communication Analytics" %}</h5>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ messages_sent }}</div>
                <div class="metric-label">{% trans "Messages Sent" %}</div>
                <small>{% trans "by group members" %}</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ messages_received }}</div>
                <div class="metric-label">{% trans "Messages Received" %}</div>
                <small>{% trans "by group members" %}</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ recent_messages_sent }}</div>
                <div class="metric-label">{% trans "Sent (30d)" %}</div>
                <small>{% trans "recent activity" %}</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ recent_messages_received }}</div>
                <div class="metric-label">{% trans "Received (30d)" %}</div>
                <small>{% trans "recent activity" %}</small>
            </div>
        </div>
    </div>

    <!-- Main Content Row -->
    <div class="row">
        <!-- Left Column -->
        <div class="col-lg-8">
            <!-- Company Information -->
            <div class="info-card">
                <h5>{% trans "Company Information" %}</h5>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>{% trans "Company Name:" %}</strong> {{ company.name }}</p>
                        <p><strong>{% trans "Company Type:" %}</strong> {{ company.get_company_type_display }}</p>
                        <p><strong>{% trans "Company Code:" %}</strong> {{ company.company_code }}</p>
                        <p><strong>{% trans "Status:" %}</strong> 
                            {% if company.is_active %}
                                <span class="badge badge-success">{% trans "Active" %}</span>
                            {% else %}
                                <span class="badge badge-secondary">{% trans "Inactive" %}</span>
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>{% trans "Primary Contact:" %}</strong> {{ company.primary_contact_name }}</p>
                        <p><strong>{% trans "Email:" %}</strong> {{ company.primary_contact_email }}</p>
                        <p><strong>{% trans "Phone:" %}</strong> {{ company.primary_contact_phone }}</p>
                        {% if company.address %}
                            <p><strong>{% trans "Address:" %}</strong><br>{{ company.address }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Contract Details -->
            <div class="info-card">
                <h5>{% trans "Contract Details" %}</h5>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>{% trans "Contract Start:" %}</strong> {{ company.contract_start_date|date:"F d, Y" }}</p>
                        <p><strong>{% trans "Contract End:" %}</strong> {{ company.contract_end_date|date:"F d, Y" }}</p>
                        <p><strong>{% trans "Licenses Purchased:" %}</strong> {{ company.licenses_purchased }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>{% trans "Price per License:" %}</strong> ${{ company.license_price_per_user|floatformat:2 }}</p>
                        <p><strong>{% trans "Total Contract Value:" %}</strong> ${{ company.total_contract_value|floatformat:2 }}</p>
                        <p><strong>{% trans "Days Until Expiry:" %}</strong> {{ company.days_until_contract_expires }}</p>
                    </div>
                </div>
                {% if company.notes %}
                    <div class="mt-3">
                        <strong>{% trans "Notes:" %}</strong>
                        <p>{{ company.notes }}</p>
                    </div>
                {% endif %}
            </div>

            <!-- User List -->
            <div class="info-card">
                <h5>{% trans "Company Users" %} ({{ total_users }})</h5>
                {% if users %}
                    {% for user in users %}
                    <div class="user-list-item">
                        <div class="row">
                            <div class="col-md-8">
                                <h6 class="mb-1">
                                    {% if user.profile.first_name or user.profile.last_name %}
                                        {{ user.profile.first_name }} {{ user.profile.last_name }}
                                    {% else %}
                                        {% trans "User" %} #{{ user.id }}
                                    {% endif %}
                                </h6>
                                <p class="mb-1 text-muted">{{ user.phone_number }}</p>
                                {% if user.profile.email %}
                                    <p class="mb-1 text-muted">{{ user.profile.email }}</p>
                                {% endif %}
                                <small class="text-muted">
                                    {% trans "Joined:" %} {{ user.created_at|date:"M d, Y" }}
                                    {% if user.profile.last_login %}
                                        | {% trans "Last active:" %} {{ user.profile.last_login|timesince }} {% trans "ago" %}
                                    {% endif %}
                                </small>
                            </div>
                            <div class="col-md-4 text-right">
                                <div class="mb-2">
                                    <span class="badge badge-primary">{{ user.lacto_points_score }} {% trans "Points" %}</span>
                                    <span class="badge badge-{% if user.churn_risk_score == 'High' %}danger{% elif user.churn_risk_score == 'Medium' %}warning{% else %}success{% endif %}">
                                        {{ user.churn_risk_score }}
                                    </span>
                                </div>
                                <div>
                                    <a href="{% url 'panel-manager-user-profile' user.id %}" class="btn btn-sm btn-outline-primary">
                                        {% trans "View Profile" %}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                    <!-- Pagination for users -->
                    {% if users.has_other_pages %}
                    <nav aria-label="{% trans 'User pagination' %}">
                        <ul class="pagination justify-content-center">
                            {% if users.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ users.previous_page_number }}">{% trans "Previous" %}</a>
                                </li>
                            {% endif %}
                            <li class="page-item active">
                                <span class="page-link">{{ users.number }}</span>
                            </li>
                            {% if users.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ users.next_page_number }}">{% trans "Next" %}</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                {% else %}
                    <p class="text-muted">{% trans "No users assigned to this company yet" %}</p>
                {% endif %}
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-lg-4">
            <!-- Usage Statistics -->
            <div class="info-card">
                <h5>{% trans "Usage Statistics" %}</h5>
                <div class="usage-chart">
                    <h6>{% trans "User Engagement" %}</h6>
                    <div class="row">
                        <div class="col-6">
                            <h4 class="text-success">{{ active_users }}</h4>
                            <small>{% trans "Active Users" %}</small>
                        </div>
                        <div class="col-6">
                            <h4 class="text-muted">{{ inactive_users }}</h4>
                            <small>{% trans "Inactive Users" %}</small>
                        </div>
                    </div>
                </div>
                
                <div class="usage-chart">
                    <h6>{% trans "Churn Risk Distribution" %}</h6>
                    <div class="row">
                        <div class="col-4">
                            <h5 class="text-danger">{{ high_risk_count }}</h5>
                            <small>{% trans "High Risk" %}</small>
                        </div>
                        <div class="col-4">
                            <h5 class="text-warning">{{ medium_risk_count }}</h5>
                            <small>{% trans "Medium Risk" %}</small>
                        </div>
                        <div class="col-4">
                            <h5 class="text-success">{{ low_risk_count }}</h5>
                            <small>{% trans "Low Risk" %}</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="info-card">
                <h5>{% trans "Quick Actions" %}</h5>
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" onclick="exportCompanyReport()">
                        <i class="fa fa-download"></i> {% trans "Export Company Report" %}
                    </button>
                    <button class="btn btn-outline-info" onclick="sendCompanyNotification()">
                        <i class="fa fa-envelope"></i> {% trans "Send Notification to All Users" %}
                    </button>
                    <button class="btn btn-outline-secondary" onclick="editCompany()">
                        <i class="fa fa-edit"></i> {% trans "Edit Company Details" %}
                    </button>
                    {% if company.is_contract_active and company.days_until_contract_expires <= 60 %}
                    <button class="btn btn-outline-warning" onclick="renewContract()">
                        <i class="fa fa-refresh"></i> {% trans "Discuss Contract Renewal" %}
                    </button>
                    {% endif %}
                </div>
            </div>

            <!-- Company Timeline -->
            <div class="info-card">
                <h5>{% trans "Company Timeline" %}</h5>
                <div class="timeline">
                    <div class="timeline-item">
                        <h6>{{ company.created_at|date:"M d, Y" }}</h6>
                        <p>{% trans "Company added to system" %}</p>
                    </div>
                    <div class="timeline-item">
                        <h6>{{ company.contract_start_date|date:"M d, Y" }}</h6>
                        <p>{% trans "Contract started" %}</p>
                    </div>
                    {% if company.contract_end_date %}
                    <div class="timeline-item">
                        <h6>{{ company.contract_end_date|date:"M d, Y" }}</h6>
                        <p>{% trans "Contract ends" %}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function exportCompanyReport() {
    alert('{% trans "Export functionality coming soon" %}');
}

function sendCompanyNotification() {
    alert('{% trans "Notification functionality coming soon" %}');
}

function editCompany() {
    alert('{% trans "Edit functionality coming soon" %}');
}

function renewContract() {
    alert('{% trans "Contract renewal process coming soon" %}');
}
</script>
{% endblock %}