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

{% block title %}Manage Family Roles - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
    
    .page-header h1 {
        margin-bottom: 0.5rem;
        font-size: 2rem;
    }
    
    .page-header p {
        opacity: 0.95;
        margin: 0;
    }
    
    .connection-card {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .connection-card:hover {
        border-color: #667eea;
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
    }
    
    .patient-info {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .patient-icon {
        font-size: 2.5rem;
        margin-right: 1rem;
    }
    
    .patient-details h3 {
        margin: 0 0 0.25rem 0;
        color: #333;
    }
    
    .patient-details p {
        margin: 0;
        color: #666;
        font-size: 0.9rem;
    }
    
    .role-selector {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .role-option {
        position: relative;
    }
    
    .role-option input[type="radio"] {
        position: absolute;
        opacity: 0;
    }
    
    .role-option label {
        display: block;
        padding: 1rem;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .role-option input[type="radio"]:checked + label {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
    }
    
    .role-option label:hover {
        border-color: #667eea;
        transform: translateY(-2px);
    }
    
    .role-label {
        font-weight: bold;
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .role-description {
        font-size: 0.85rem;
        opacity: 0.9;
    }
    
    .role-option input[type="radio"]:checked + label .role-description {
        opacity: 1;
    }
    
    .save-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 0.75rem 2rem;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: bold;
        transition: transform 0.2s ease;
    }
    
    .save-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }
    
    .current-role-badge {
        display: inline-block;
        background: #667eea;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: bold;
    }
    
    .empty-state {
        text-align: center;
        padding: 3rem;
        background: #f8f9fa;
        border-radius: 8px;
        margin-top: 2rem;
    }
    
    .empty-state-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
    }
    
    .empty-state h3 {
        color: #333;
        margin-bottom: 0.5rem;
    }
    
    .empty-state p {
        color: #666;
        margin-bottom: 1.5rem;
    }
    
    .role-info-box {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
    
    .role-info-box h3 {
        color: #667eea;
        margin-bottom: 0.75rem;
    }
    
    .role-info-box ul {
        margin: 0;
        padding-left: 1.5rem;
    }
    
    .role-info-box li {
        margin-bottom: 0.5rem;
        color: #666;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>👥 Manage Family Roles & Responsibilities</h1>
    <p>Define your relationship and responsibilities for each patient you care for</p>
</div>

{% if messages %}
<div style="margin-bottom: 1.5rem;">
    {% for message in messages %}
    <div style="padding: 1rem; border-radius: 5px; margin-bottom: 0.5rem; 
                {% if message.tags == 'success' %}background: #d4edda; color: #155724; border: 1px solid #c3e6cb;
                {% elif message.tags == 'error' %}background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
                {% else %}background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb;{% endif %}">
        {{ message }}
    </div>
    {% endfor %}
</div>
{% endif %}

<div class="role-info-box">
    <h3>📋 Understanding Family Roles</h3>
    <ul>
        <li><strong>Caregiver:</strong> Day-to-day care management, medication tracking, appointment scheduling</li>
        <li><strong>Guardian:</strong> Legal decision-making, full medical record access, care oversight</li>
        <li><strong>Support:</strong> Emotional support, basic status updates, encouragement</li>
        <li><strong>Advocate:</strong> Medical appointment representation, healthcare team communication</li>
    </ul>
</div>

{% if connections %}
    {% for connection in connections %}
    <div class="connection-card">
        <div class="patient-info">
            <div class="patient-icon">🧑‍⚕️</div>
            <div class="patient-details">
                <h3>{{ connection.patient.get_full_name|default:connection.patient.username }}</h3>
                <p>Patient • Connected since {{ connection.created_at|date:"M d, Y" }}</p>
                {% if connection.family_role %}
                <p style="margin-top: 0.5rem;">
                    Current Role: <span class="current-role-badge">{{ connection.get_family_role_display }}</span>
                </p>
                {% endif %}
            </div>
        </div>
        
        <form method="post" action="{% url 'familytouch:family_role_management' %}">
            {% csrf_token %}
            <input type="hidden" name="connection_id" value="{{ connection.id }}">
            
            <div class="role-selector">
                {% for value, label in role_choices %}
                <div class="role-option">
                    <input type="radio" 
                           id="role_{{ connection.id }}_{{ value }}" 
                           name="family_role" 
                           value="{{ value }}"
                           {% if connection.family_role == value %}checked{% endif %}>
                    <label for="role_{{ connection.id }}_{{ value }}">
                        <span class="role-label">
                            {% if value == 'caregiver' %}📱 {{ label }}
                            {% elif value == 'guardian' %}👀 {{ label }}
                            {% elif value == 'support' %}💬 {{ label }}
                            {% elif value == 'advocate' %}🏥 {{ label }}
                            {% endif %}
                        </span>
                        <span class="role-description">
                            {% if value == 'caregiver' %}Daily care
                            {% elif value == 'guardian' %}Full access
                            {% elif value == 'support' %}Emotional care
                            {% elif value == 'advocate' %}Medical rep
                            {% endif %}
                        </span>
                    </label>
                </div>
                {% endfor %}
            </div>
            
            <button type="submit" class="save-btn">💾 Save Role for {{ connection.patient.get_full_name|default:connection.patient.username }}</button>
        </form>
    </div>
    {% endfor %}
{% else %}
    <div class="empty-state">
        <div class="empty-state-icon">🔗</div>
        <h3>No Patient Connections Yet</h3>
        <p>You're not currently connected to any patients. To manage family roles, you need to first connect with a patient.</p>
        <a href="{% url 'familytouch:connected_care' %}" class="btn" style="background: #667eea; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 5px; display: inline-block;">Connect with a Patient</a>
    </div>
{% endif %}

<div style="margin-top: 2rem; text-align: center;">
    <a href="{% url 'familytouch:dashboard' %}" style="color: #667eea; text-decoration: none; font-weight: bold;">← Back to Dashboard</a>
</div>
{% endblock %}