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

{% block title %}Dashboard - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .dashboard-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .dashboard-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2.5rem;
        border-radius: 16px;
        margin-bottom: 2rem;
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
    }
    
    .dashboard-header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        font-weight: 700;
    }
    
    .dashboard-header .role-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.2);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 1rem;
        font-weight: 600;
        backdrop-filter: blur(10px);
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border-left: 4px solid;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    
    .stat-card.appointments {
        border-color: #667eea;
    }
    
    .stat-card.updates {
        border-color: #f5576c;
    }
    
    .stat-card.team {
        border-color: #4facfe;
    }
    
    .stat-card.reviews {
        border-color: #43e97b;
    }
    
    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 0.25rem;
    }
    
    .stat-label {
        color: #666;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .section-card {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 1.5rem;
    }
    
    .section-card h3 {
        color: #333;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .section-card h3::before {
        content: '';
        width: 4px;
        height: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 2px;
    }
    
    .list-item {
        padding: 1rem;
        border-left: 3px solid #e0e0e0;
        margin-bottom: 1rem;
        background: #f8f9fa;
        border-radius: 0 8px 8px 0;
        transition: all 0.3s ease;
    }
    
    .list-item:hover {
        border-left-color: #667eea;
        background: #f0f2ff;
        transform: translateX(4px);
    }
    
    .list-item-header {
        font-weight: 600;
        color: #333;
        margin-bottom: 0.5rem;
    }
    
    .list-item-meta {
        color: #666;
        font-size: 0.9rem;
    }
    
    .empty-state {
        text-align: center;
        padding: 2rem;
        color: #999;
    }
    
    .empty-state-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 1rem;
    }
    
    .action-card {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        text-align: center;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .action-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }
    
    .action-card-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .action-card-title {
        font-weight: 600;
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 0.5rem;
    }
    
    .action-card-desc {
        color: #666;
        font-size: 0.9rem;
    }
    
    .meal-preference-form {
        display: flex;
        gap: 0.75rem;
        margin-top: 0.75rem;
        flex-wrap: wrap;
    }
    
    .meal-preference-form input {
        padding: 0.6rem;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        flex: 1;
        min-width: 140px;
        transition: border-color 0.3s ease;
    }
    
    .meal-preference-form input:focus {
        outline: none;
        border-color: #667eea;
    }
    
    .meal-preference-form button {
        padding: 0.6rem 1.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: transform 0.2s ease;
    }
    
    .meal-preference-form button:hover {
        transform: scale(1.05);
    }
    
    .patient-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        border: 2px solid #e0e0e0;
        transition: all 0.3s ease;
    }
    
    .patient-card:hover {
        border-color: #667eea;
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
    }
    
    .patient-card-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e0e0e0;
    }
    
    .patient-avatar {
        font-size: 2.5rem;
    }
    
    .patient-info h4 {
        margin: 0;
        color: #333;
        font-size: 1.3rem;
    }
    
    .patient-meta {
        color: #666;
        font-size: 0.9rem;
        margin-top: 0.25rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="dashboard-header">
        <h1>👋 Welcome, {{ display_name }}!</h1>
        <span class="role-badge">{{ user_type|title }}</span>
    </div>

    {% if user_type == 'patient' %}
        <!-- Stats Overview -->
        <div class="stats-grid">
            <div class="stat-card appointments">
                <div class="stat-icon">📅</div>
                <div class="stat-number">{{ appointments|length }}</div>
                <div class="stat-label">Upcoming Appointments</div>
            </div>
            <div class="stat-card updates">
                <div class="stat-icon">📬</div>
                <div class="stat-number">{{ recent_updates|length }}</div>
                <div class="stat-label">Recent Updates</div>
            </div>
            <div class="stat-card team">
                <div class="stat-icon">👥</div>
                <div class="stat-number">{{ care_connections|length }}</div>
                <div class="stat-label">Care Team Members</div>
            </div>
            <div class="stat-card reviews">
                <div class="stat-icon">⭐</div>
                <div class="stat-number">{% if latest_dietitian_review %}1{% else %}0{% endif %}</div>
                <div class="stat-label">Latest Reviews</div>
            </div>
        </div>

        <!-- Appointments Section -->
        <div class="section-card">
            <h3>📅 Upcoming Appointments</h3>
            {% if appointments %}
                {% for a in appointments %}
                    <div class="list-item">
                        <div class="list-item-header">
                            Dr. {{ a.provider.get_full_name|default:a.provider.username }}
                        </div>
                        <div class="list-item-meta">
                            🕐 {{ a.start|date:"l, M d, Y @ g:i A" }}
                            {% if a.reason %} • {{ a.reason }}{% endif %}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon">📅</div>
                    <p>No upcoming appointments scheduled</p>
                </div>
            {% endif %}
        </div>

        <!-- Recent Updates Section -->
        <div class="section-card">
            <h3>📬 Recent Updates</h3>
            {% if recent_updates %}
                {% for u in recent_updates %}
                    <div class="list-item">
                        <div class="list-item-header">
                            {{ u.sender.get_full_name|default:u.sender.username }}
                        </div>
                        <div class="list-item-meta">
                            {{ u.content }}
                        </div>
                        <div class="list-item-meta" style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.8;">
                            ⏰ {{ u.created_at|date:"M d, Y @ g:i A" }}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon">📭</div>
                    <p>No recent updates</p>
                </div>
            {% endif %}
        </div>

        <!-- Care Team Section -->
        <div class="section-card">
            <h3>👥 Connected Care Team</h3>
            {% if care_connections %}
                {% for c in care_connections %}
                    <div class="list-item">
                        <div class="list-item-header">
                            {{ c.contact.get_full_name|default:c.contact.username }}
                        </div>
                        <div class="list-item-meta">
                            {{ c.get_role_display }}
                            {% if c.family_role %} • {{ c.get_family_role_display }}{% endif %}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon">👥</div>
                    <p>No connected care team members yet</p>
                </div>
            {% endif %}
        </div>

        <!-- Dietitian Review Section -->
        <div class="section-card">
            <h3>⭐ Latest Dietitian Review</h3>
            {% if latest_dietitian_review %}
                <div class="list-item">
                    <div class="list-item-header">
                        Review Summary
                    </div>
                    <div class="list-item-meta">
                        {{ latest_dietitian_review.summary }}
                    </div>
                    <div class="list-item-meta" style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.8;">
                        ⏰ {{ latest_dietitian_review.created_at|date:"M d, Y @ g:i A" }}
                    </div>
                </div>
            {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon">⭐</div>
                    <p>No dietitian reviews yet</p>
                    <a href="{% url 'familytouch:dietitian_review' %}" class="btn" style="margin-top: 1rem;">Request a Review</a>
                </div>
            {% endif %}
        </div>

    {% elif user_type == 'family' %}
        <!-- Family Member View -->
        <div class="section-card">
            <h3>👪 Your Connected Patients</h3>
            {% if care_connections %}
                {% for c in care_connections %}
                    {% if c.role == 'family' %}
                        <div class="patient-card">
                            <div class="patient-card-header">
                                <div class="patient-avatar">🧑‍⚕️</div>
                                <div class="patient-info">
                                    <h4>{{ c.patient.get_full_name|default:c.patient.username }}</h4>
                                    <div class="patient-meta">
                                        Connected since {{ c.created_at|date:"M d, Y" }}
                                        {% if c.family_role %} • Role: {{ c.get_family_role_display }}{% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 1rem;">
                                <strong>📊 Quick Stats:</strong>
                                <div class="list-item-meta" style="margin-top: 0.5rem;">
                                    Upcoming appointments: {{ c.patient.appointments.count }}
                                </div>
                            </div>
                            
                            <div style="background: white; padding: 1rem; border-radius: 8px; border: 2px solid #e0e0e0;">
                                <strong>🍽️ Set Meal Preferences</strong>
                                <form method="post" action="{% url 'familytouch:meal_choice' %}" class="meal-preference-form">
                                    {% csrf_token %}
                                    <input type="hidden" name="patient" value="{{ c.patient.username }}">
                                    <input name="lunch" placeholder="Lunch preference" required>
                                    <input name="dinner" placeholder="Dinner preference" required>
                                    <button type="submit">💾 Save</button>
                                </form>
                                <div class="list-item-meta" style="margin-top: 1rem;">
                                    <strong>Latest preferences:</strong>
                                    {% with mc=c.patient.meal_choices.first %}
                                        {% if mc %}
                                            <br>🥗 Lunch: {{ mc.lunch }} | 🍲 Dinner: {{ mc.dinner }}
                                            <br><small>Set by {{ mc.chooser.get_full_name|default:mc.chooser.username }}</small>
                                        {% else %}
                                            <br>No preferences set yet
                                        {% endif %}
                                    {% endwith %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon">👥</div>
                    <p>No connected patients found</p>
                    <a href="{% url 'familytouch:connected_care' %}" class="btn" style="margin-top: 1rem;">Connect with a Patient</a>
                </div>
            {% endif %}
        </div>

    {% elif user_type == 'doctor' %}
        <div class="section-card">
            <h3>🏥 Provider Dashboard</h3>
            <p style="color: #666; margin-bottom: 1.5rem;">Manage your patients, appointments, and communicate securely.</p>
            
            <div class="quick-actions">
                <a href="{% url 'familytouch:provider_appointments' %}" class="action-card">
                    <div class="action-card-icon">📅</div>
                    <div class="action-card-title">Appointments</div>
                    <div class="action-card-desc">View & schedule</div>
                </a>
                <a href="{% url 'familytouch:provider_patients' %}" class="action-card">
                    <div class="action-card-icon">👥</div>
                    <div class="action-card-title">My Patients</div>
                    <div class="action-card-desc">Patient list</div>
                </a>
            </div>
        </div>

    {% else %}
        <div class="section-card">
            <div class="empty-state">
                <div class="empty-state-icon">🚀</div>
                <p>Welcome to your dashboard! More features coming soon.</p>
            </div>
        </div>
    {% endif %}

    <!-- Quick Actions -->
    <div class="section-card">
        <h3>⚡ Quick Actions</h3>
        <div class="quick-actions">
            <a href="{% url 'familytouch:feature_detail' slug='connected-care' %}" class="action-card">
                <div class="action-card-icon">🔗</div>
                <div class="action-card-title">Connected Care</div>
                <div class="action-card-desc">Coordinate with team</div>
            </a>

            <a href="{% url 'familytouch:feature_detail' slug='real-time-updates' %}" class="action-card">
                <div class="action-card-icon">⚡</div>
                <div class="action-card-title">Real-Time Updates</div>
                <div class="action-card-desc">Instant notifications</div>
            </a>

            <a href="{% url 'familytouch:feature_detail' slug='health-tracking' %}" class="action-card">
                <div class="action-card-icon">📊</div>
                <div class="action-card-title">Health Tracking</div>
                <div class="action-card-desc">Vitals & medications</div>
            </a>

            <a href="{% url 'familytouch:feature_detail' slug='direct-communication' %}" class="action-card">
                <div class="action-card-icon">💬</div>
                <div class="action-card-title">Direct Communication</div>
                <div class="action-card-desc">Secure messaging</div>
            </a>

            <a href="{% url 'familytouch:feature_detail' slug='mobile-first' %}" class="action-card">
                <div class="action-card-icon">📱</div>
                <div class="action-card-title">Mobile First</div>
                <div class="action-card-desc">Access anywhere</div>
            </a>

            <a href="{% url 'familytouch:feature_detail' slug='secure-private' %}" class="action-card">
                <div class="action-card-icon">🔒</div>
                <div class="action-card-title">Secure & Private</div>
                <div class="action-card-desc">HIPAA-compliant</div>
            </a>
        </div>
    </div>
</div>
{% endblock %}