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

{% block title %}{% trans "User Profile" %} - {% if user.profile.first_name %}{{ user.profile.first_name }} {{ user.profile.last_name }}{% else %}User #{{ user.id }}{% endif %}{% endblock %}

{% block header.add_script %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    .profile-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
    }
    .profile-avatar {
        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: #007bff;
    }
    .metric-label {
        font-size: 0.9rem;
        color: #6c757d;
    }
    .churn-risk-high { color: #dc3545; }
    .churn-risk-medium { color: #ffc107; }
    .churn-risk-low { color: #28a745; }
    .timeline-item {
        border-left: 3px solid #007bff;
        padding-left: 20px;
        margin-bottom: 20px;
        position: relative;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 5px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #007bff;
    }
    .subscription-status {
        padding: 8px 15px;
        border-radius: 20px;
        font-weight: bold;
        display: inline-block;
    }
    .status-active { background: #d4edda; color: #155724; }
    .status-expired { background: #fff3cd; color: #856404; }
    .status-free { background: #f8d7da; color: #721c24; }
    
    .coach-info p {
        margin-bottom: 8px;
    }
    
    .diet-item {
        padding: 8px 0;
    }
    
    .notification-preview {
        margin-top: 20px;
    }
    
    .preview-box {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background: #f8f9fa;
    }
    
    .preview-title {
        font-weight: bold;
        margin-bottom: 5px;
        color: #333;
    }
    
    .preview-body {
        color: #666;
        line-height: 1.4;
    }
</style>

<script>
// Chart.js configuration
document.addEventListener('DOMContentLoaded', function() {
    // 1. Points Trend Chart
    const trendData = {{ trend_data|safe }};
    const trendCtx = document.getElementById('pointsTrendChart').getContext('2d');
    
    new Chart(trendCtx, {
        type: 'line',
        data: {
            labels: trendData.map(d => {
                const date = new Date(d.date);
                return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
            }),
            datasets: [{
                label: '{% trans "Points" %}',
                data: trendData.map(d => d.points),
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
    
    // 2. Activities Bar Chart
    const activitiesCtx = document.getElementById('activitiesChart').getContext('2d');
    const topActivities = {{ top_activities|safe }};
    
    new Chart(activitiesCtx, {
        type: 'bar',
        data: {
            labels: topActivities.map(a => a[0]),
            datasets: [{
                label: '{% trans "Count" %}',
                data: topActivities.map(a => a[1]),
                backgroundColor: [
                    '#667eea', '#764ba2', '#f093fb', '#f5576c',
                    '#4facfe', '#00f2fe', '#43e97b', '#38f9d7',
                    '#ffecd2', '#fcb69f'
                ]
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
    
    // 3. Notification Preview
    document.getElementById('notification_title').addEventListener('input', function() {
        document.getElementById('preview-title').textContent = this.value || "{% trans 'Notification title will appear here' %}";
    });
    
    document.getElementById('notification_body').addEventListener('input', function() {
        document.getElementById('preview-body').textContent = this.value || "{% trans 'Notification message will appear here' %}";
    });
});

// Confirm notification sending
function confirmSendNotification() {
    const title = document.getElementById('notification_title').value;
    const body = document.getElementById('notification_body').value;
    
    if (!title || !body) {
        alert("{% trans 'Please fill in both title and message' %}");
        return false;
    }
    
    return confirm("{% trans 'Are you sure you want to send this notification to the user?' %}");
}
</script>
{% 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 "User 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-users' %}">{% trans "Users" %}</a></li>
                    <li class="breadcrumb-item active">
                        {% if user.profile.first_name %}{{ user.profile.first_name }} {{ user.profile.last_name }}{% else %}User #{{ user.id }}{% endif %}
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Profile Header -->
    <div class="profile-header">
        <div class="row">
            <div class="col-auto">
                <div class="profile-avatar">
                    {% if user.profile.first_name %}
                        {{ user.profile.first_name|first }}{{ user.profile.last_name|first }}
                    {% else %}
                        <i class="fa fa-user"></i>
                    {% endif %}
                </div>
            </div>
            <div class="col">
                <h3 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 %}
                </h3>
                <p class="mb-1">{{ user.phone_number }}</p>
                {% if user.profile.email %}
                    <p class="mb-1">{{ user.profile.email }}</p>
                {% endif %}
                <p class="mb-0">
                    <i class="fa fa-calendar"></i> {% trans "Joined" %} {{ user.created_at|date:"F d, Y" }}
                    {% if user.profile.last_login %}
                        | <i class="fa fa-clock-o"></i> {% trans "Last active" %} {{ user.profile.last_login|timesince }} {% trans "ago" %}
                    {% endif %}
                </p>
            </div>
            <div class="col-auto text-right">
                <!-- Churn Risk Indicator -->
                <div class="mb-2">
                    <h5 class="churn-risk-{{ churn_risk|lower }}">
                        <i class="fa fa-exclamation-triangle"></i> {{ churn_risk }} {% trans "Churn Risk" %}
                    </h5>
                </div>
                <!-- Company Link -->
                {% if user.company %}
                <p>
                    <i class="fa fa-building"></i> 
                    <a href="{% url 'panel-manager-company-profile' user.company.id %}" class="text-white">
                        {{ user.company.name }}
                    </a>
                </p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Key Metrics Row -->
    <div class="row">
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ avg_lacto_points|floatformat:1 }}</div>
                <div class="metric-label">{% trans "Average Lacto Points" %}</div>
                <small>{% trans "Last 30 days" %}</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ recent_points.count|default:0 }}</div>
                <div class="metric-label">{% trans "Activities (30d)" %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">{{ payment_history.count|default:0 }}</div>
                <div class="metric-label">{% trans "Total Payments" %}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-item">
                <div class="metric-value">
                    {% if user.profile.age %}{{ user.profile.age }}{% else %}N/A{% endif %}
                </div>
                <div class="metric-label">{% trans "Age" %}</div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="info-card">
                <h5><i class="fa fa-line-chart"></i> {% trans "Points Trend (30 Days)" %}</h5>
                <canvas id="pointsTrendChart" width="400" height="200"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="info-card">
                <h5><i class="fa fa-bar-chart"></i> {% trans "Most Logged Activities" %}</h5>
                <canvas id="activitiesChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>

    <!-- Premium User Info Row -->
    {% if is_premium %}
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="info-card">
                <h5><i class="fa fa-user-md"></i> {% trans "Coach Information" %}</h5>
                {% if coach_info %}
                    <div class="coach-info">
                        <p><strong>{% trans "Name" %}:</strong> {{ coach_info.name }}</p>
                        <p><strong>{% trans "Email" %}:</strong> {{ coach_info.email }}</p>
                        <p><strong>{% trans "ID" %}:</strong> {{ coach_info.id }}</p>
                    </div>
                {% else %}
                    <p class="text-muted">{% trans "No coach assigned" %}</p>
                {% endif %}
            </div>
        </div>
        <div class="col-md-6">
            <div class="info-card">
                <h5><i class="fa fa-cutlery"></i> {% trans "Diet History" %}</h5>
                {% if diet_history %}
                    <div class="diet-history">
                        {% for diet in diet_history|slice:":5" %}
                        <div class="diet-item mb-2 pb-2 border-bottom">
                            <p class="mb-1">
                                <strong>{% trans "From" %}:</strong> {{ diet.from_date|date:"M d, Y" }}
                                {% if diet.has_data %}
                                    <span class="badge badge-success">{% trans "Active" %}</span>
                                {% else %}
                                    <span class="badge badge-secondary">{% trans "Template" %}</span>
                                {% endif %}
                            </p>
                            <small class="text-muted">
                                {% trans "Created" %}: {{ diet.created_at|date:"M d, Y" }} 
                                {% trans "by" %} {{ diet.creator }}
                            </small>
                        </div>
                        {% endfor %}
                        {% if diet_history|length > 5 %}
                            <p class="text-muted">{% trans "... and" %} {{ diet_history|length|add:"-5" }} {% trans "more diets" %}</p>
                        {% endif %}
                    </div>
                {% else %}
                    <p class="text-muted">{% trans "No diet history available" %}</p>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Send Notification Section -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="info-card">
                <h5><i class="fa fa-bell"></i> {% trans "Send Personal Notification" %}</h5>
                <form method="POST" id="notificationForm">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="notification_title">{% trans "Notification Title" %} *</label>
                                <input type="text" class="form-control" id="notification_title" name="notification_title" 
                                       required maxlength="100" placeholder="{% trans 'Enter notification title' %}">
                            </div>
                            
                            <div class="form-group">
                                <label for="notification_body">{% trans "Notification Message" %} *</label>
                                <textarea class="form-control" id="notification_body" name="notification_body" 
                                          rows="3" required maxlength="500" placeholder="{% trans 'Enter notification message' %}"></textarea>
                            </div>
                            
                            <button type="submit" class="btn btn-primary" onclick="return confirmSendNotification()">
                                <i class="fa fa-paper-plane"></i> {% trans "Send Notification" %}
                            </button>
                        </div>
                        <div class="col-md-6">
                            <div class="notification-preview">
                                <h6>{% trans "Preview" %}</h6>
                                <div class="preview-box">
                                    <div class="preview-title" id="preview-title">{% trans "Notification title will appear here" %}</div>
                                    <div class="preview-body" id="preview-body">{% trans "Notification message will appear here" %}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Main Content Row -->
    <div class="row">
        <!-- Left Column -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="info-card">
                <h5>{% trans "Basic Information" %}</h5>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>{% trans "Phone:" %}</strong> {{ user.phone_number }}</p>
                        {% if user.profile.email %}
                            <p><strong>{% trans "Email:" %}</strong> {{ user.profile.email }}</p>
                        {% endif %}
                        {% if user.profile.gender is not None %}
                            <p><strong>{% trans "Gender:" %}</strong> 
                                {% if user.profile.gender %}{% trans "Female" %}{% else %}{% trans "Male" %}{% endif %}
                            </p>
                        {% endif %}
                        {% if user.profile.birth_date %}
                            <p><strong>{% trans "Birth Date:" %}</strong> {{ user.profile.birth_date|date:"F d, Y" }}</p>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        {% if user.profile.height %}
                            <p><strong>{% trans "Height:" %}</strong> {{ user.profile.height }} cm</p>
                        {% endif %}
                        {% if user.profile.weight %}
                            <p><strong>{% trans "Weight:" %}</strong> {{ user.profile.weight }} kg</p>
                        {% endif %}
                        {% if user.profile.goal_weight %}
                            <p><strong>{% trans "Goal Weight:" %}</strong> {{ user.profile.goal_weight }} kg</p>
                        {% endif %}
                        {% if user.profile.activity_level %}
                            <p><strong>{% trans "Activity Level:" %}</strong> {{ user.profile.get_activity_level_display }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Health Information -->
            <div class="info-card">
                <h5>{% trans "Health Information" %}</h5>
                <div class="row">
                    <div class="col-md-6">
                        {% if user.profile.diseases %}
                            <p><strong>{% trans "Health Conditions:" %}</strong></p>
                            <ul>
                                {% for disease in user.profile.diseases %}
                                    <li>{{ disease }}</li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                        {% if user.profile.diabetes_type is not None %}
                            <p><strong>{% trans "Diabetes Type:" %}</strong> {{ user.profile.get_diabetes_type_display }}</p>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        <!-- Latest Biometrics -->
                        {% if biometrics %}
                            <p><strong>{% trans "Latest Measurements:" %}</strong></p>
                            {% if biometrics.weight %}
                                <p>{% trans "Weight:" %} {{ biometrics.weight }} kg</p>
                            {% endif %}
                            {% if biometrics.bmi %}
                                <p>{% trans "BMI:" %} {{ biometrics.bmi|floatformat:1 }}</p>
                            {% endif %}
                            {% if biometrics.blood_sugar %}
                                <p>{% trans "Blood Sugar:" %} {{ biometrics.blood_sugar }} mg/dL</p>
                            {% endif %}
                            {% if biometrics.a1c %}
                                <p>{% trans "A1C:" %} {{ biometrics.a1c }}%</p>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="info-card">
                <h5>{% trans "Recent Activity (Last 30 Days)" %}</h5>
                {% if recent_points %}
                    <div class="timeline">
                        {% for point in recent_points|slice:":10" %}
                        <div class="timeline-item">
                            <h6>{{ point.time|date:"M d, Y" }}</h6>
                            <p>{% trans "Total Points:" %} {{ point.total_points|default:0 }}</p>
                            <small class="text-muted">
                                {% trans "Diet:" %} {{ point.total_Diet_Point|default:0 }} | 
                                {% trans "Exercise:" %} {{ point.total_Exercise_Point|default:0 }} | 
                                {% trans "Water:" %} {{ point.total_Water_Point|default:0 }}
                            </small>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted">{% trans "No recent activity recorded" %}</p>
                {% endif %}
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-lg-4">
            <!-- Subscription Status -->
            <div class="info-card">
                <h5>{% trans "Subscription Status" %}</h5>
                {% with subscription=subscription_info %}
                <div class="text-center mb-3">
                    <span class="subscription-status status-{{ subscription.status|lower }}">
                        {{ subscription.status }}
                    </span>
                </div>
                
                {% if subscription.plan %}
                    <p><strong>{% trans "Plan:" %}</strong> {{ subscription.plan }}</p>
                {% endif %}
                {% if subscription.start_date %}
                    <p><strong>{% trans "Start Date:" %}</strong> {{ subscription.start_date|date:"M d, Y" }}</p>
                {% endif %}
                {% if subscription.end_date %}
                    <p><strong>{% trans "End Date:" %}</strong> {{ subscription.end_date|date:"M d, Y" }}</p>
                {% endif %}
                <p><strong>{% trans "Renewal Status:" %}</strong> {{ subscription.renewal_status }}</p>
                {% endwith %}
            </div>

            <!-- Payment History -->
            <div class="info-card">
                <h5>{% trans "Payment History" %}</h5>
                {% if payment_history %}
                    {% for payment in payment_history|slice:":5" %}
                    <div class="mb-3 pb-2 border-bottom">
                        <h6>${{ payment.amount_after_discount|floatformat:0 }}</h6>
                        <p class="mb-1">{% trans "Plan" %} {{ payment.plan }}</p>
                        <small class="text-muted">{{ payment.created_at|date:"M d, Y" }}</small>
                    </div>
                    {% endfor %}
                    {% if payment_history.count > 5 %}
                        <p class="text-muted">{% trans "... and" %} {{ payment_history.count|add:"-5" }} {% trans "more payments" %}</p>
                    {% endif %}
                {% else %}
                    <p class="text-muted">{% trans "No payment history" %}</p>
                {% endif %}
            </div>

            <!-- Quick Actions -->
            <div class="info-card">
                <h5>{% trans "Quick Actions" %}</h5>
                <div class="d-grid gap-2">
                    {% if user.company %}
                        <a href="{% url 'panel-manager-company-profile' user.company.id %}" class="btn btn-outline-primary">
                            <i class="fa fa-building"></i> {% trans "View Company" %}
                        </a>
                    {% endif %}
                    <button class="btn btn-outline-secondary" onclick="exportUserData()">
                        <i class="fa fa-download"></i> {% trans "Export User Data" %}
                    </button>
                    <button class="btn btn-outline-info" onclick="viewFullActivity()">
                        <i class="fa fa-chart-line"></i> {% trans "View Full Activity" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function exportUserData() {
    // Implementation for exporting user data
    alert('{% trans "Export functionality coming soon" %}');
}

function viewFullActivity() {
    // Implementation for viewing full activity
    alert('{% trans "Full activity view coming soon" %}');
}
</script>
{% endblock %}