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

{% block title %}My Invitations - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .invitations-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .invitations-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .invitations-header h1 {
        margin: 0;
        font-size: 2rem;
        font-weight: 700;
    }
    
    .invitations-header p {
        margin: 0.5rem 0 0 0;
        opacity: 0.9;
    }
    
    .invitations-tabs {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        border-bottom: 2px solid #e0e0e0;
    }
    
    .tab-btn {
        padding: 1rem 1.5rem;
        background: none;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        color: #666;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
        position: relative;
        bottom: -2px;
    }
    
    .tab-btn.active {
        color: #667eea;
        border-bottom-color: #667eea;
    }
    
    .tab-btn:hover {
        color: #667eea;
    }
    
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }
    
    .invitation-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        border-left: 4px solid #667eea;
    }
    
    .invitation-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }
    
    .invitation-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .inviter-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .inviter-avatar {
        font-size: 2.5rem;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f2ff;
        border-radius: 50%;
    }
    
    .inviter-details h3 {
        margin: 0;
        font-size: 1.2rem;
        color: #333;
    }
    
    .inviter-details p {
        margin: 0.25rem 0 0 0;
        color: #666;
        font-size: 0.9rem;
    }
    
    .invitation-role {
        display: inline-block;
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        color: #1565c0;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .invitation-details {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .detail-row:last-child {
        border-bottom: none;
    }
    
    .detail-label {
        font-weight: 600;
        color: #666;
    }
    
    .detail-value {
        color: #333;
    }
    
    .invitation-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 0.95rem;
    }
    
    .btn-accept {
        background: #28a745;
        color: white;
    }
    
    .btn-accept:hover {
        background: #218838;
        transform: translateY(-2px);
    }
    
    .btn-reject {
        background: #dc3545;
        color: white;
    }
    
    .btn-reject:hover {
        background: #c82333;
        transform: translateY(-2px);
    }
    
    .btn-cancel {
        background: #6c757d;
        color: white;
    }
    
    .btn-cancel:hover {
        background: #5a6268;
        transform: translateY(-2px);
    }
    
    .empty-state {
        text-align: center;
        padding: 3rem 2rem;
        color: #999;
    }
    
    .empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .empty-state p {
        margin: 0.5rem 0;
        font-size: 1.1rem;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-box {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border-top: 4px solid #667eea;
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: #667eea;
        margin-bottom: 0.5rem;
    }
    
    .stat-label {
        color: #666;
        font-weight: 600;
    }
    
    .badge {
        display: inline-block;
        background: #ffeaa7;
        color: #d63031;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 700;
        margin-left: 0.5rem;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    .notification-alert {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        padding: 1.25rem 1.5rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
        animation: slideDown 0.5s ease;
    }
    
    @keyframes slideDown {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .notification-alert .icon {
        font-size: 2rem;
    }
    
    .notification-alert .content {
        flex: 1;
    }
    
    .notification-alert .content h3 {
        margin: 0 0 0.25rem 0;
        font-size: 1.1rem;
    }
    
    .notification-alert .content p {
        margin: 0;
        opacity: 0.9;
        font-size: 0.95rem;
    }
    
    @media (max-width: 768px) {
        .invitations-container {
            padding: 1rem;
        }
        
        .invitations-header {
            padding: 1.5rem;
        }
        
        .invitations-header h1 {
            font-size: 1.5rem;
        }
        
        .invitation-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .invitation-actions {
            width: 100%;
        }
        
        .btn {
            flex: 1;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="invitations-container">
    <div class="invitations-header">
        <h1>📬 My Invitations</h1>
        <p>View and manage connection invitations</p>
    </div>
    
    {% if user.is_authenticated %}
        <!-- Notification Alert for New Invitations -->
        {% if pending_invitations %}
        <div class="notification-alert">
            <div class="icon">🔔</div>
            <div class="content">
                <h3>You have {{ pending_invitations|length }} new invitation{{ pending_invitations|length|pluralize }}!</h3>
                <p>Review and respond to connection requests below</p>
            </div>
        </div>
        {% endif %}
        
        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stat-box">
                <div class="stat-number">{{ pending_invitations|length }}</div>
                <div class="stat-label">Pending Invitations</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">{{ sent_invitations|length }}</div>
                <div class="stat-label">Sent Invitations</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">{{ connections|length }}</div>
                <div class="stat-label">Total Connections</div>
            </div>
        </div>
        
        <!-- Tabs -->
        <div class="invitations-tabs">
            <button class="tab-btn active" onclick="switchTab(event, 'received')">
                📬 Received Invitations <span class="badge" id="received-count">{{ pending_invitations|length }}</span>
            </button>
            <button class="tab-btn" onclick="switchTab(event, 'sent')">
                📮 Sent Invitations <span class="badge" id="sent-count">{{ sent_invitations|length }}</span>
            </button>
        </div>
        
        <!-- Received Invitations Tab -->
        <div id="received" class="tab-content active">
            {% if pending_invitations %}
                {% for invitation in pending_invitations %}
                <div class="invitation-card">
                    <div class="invitation-header">
                        <div class="inviter-info">
                            <div class="inviter-avatar">
                                {% if invitation.sender.profile.user_type == 'patient' %}
                                    🧑‍⚕️
                                {% elif invitation.sender.profile.user_type == 'doctor' %}
                                    👨‍⚕️
                                {% else %}
                                    👪
                                {% endif %}
                            </div>
                            <div class="inviter-details">
                                <h3>{{ invitation.sender.get_full_name|default:invitation.sender.username }}</h3>
                                <p>@{{ invitation.sender.username }}</p>
                            </div>
                        </div>
                        <div class="invitation-role">
                            {% if invitation.role == 'provider' %}
                                🏥 Healthcare Provider
                            {% else %}
                                👪 Family Member
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="invitation-details">
                        <div class="detail-row">
                            <span class="detail-label">Invitation Type:</span>
                            <span class="detail-value">{{ invitation.get_role_display }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Sent:</span>
                            <span class="detail-value">{{ invitation.created_at|date:"M d, Y @ g:i A" }} ({{ invitation.created_at|timesince }} ago)</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Status:</span>
                            <span class="detail-value" style="color: #ffa726; font-weight: 600;">{{ invitation.get_status_display }}</span>
                        </div>
                    </div>
                    
                    <div class="invitation-actions">
                        <form method="post" action="{% url 'familytouch:invitations' %}" style="display: inline;">
                            {% csrf_token %}
                            <input type="hidden" name="invitation_id" value="{{ invitation.id }}">
                            <button type="submit" name="accept_invitation" class="btn btn-accept">
                                ✓ Accept Invitation
                            </button>
                        </form>
                        <form method="post" action="{% url 'familytouch:invitations' %}" style="display: inline;">
                            {% csrf_token %}
                            <input type="hidden" name="invitation_id" value="{{ invitation.id }}">
                            <button type="submit" name="reject_invitation" class="btn btn-reject">
                                ✕ Decline
                            </button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <div class="empty-icon">📬</div>
                    <p>No pending invitations</p>
                    <p style="color: #bbb; font-size: 0.95rem;">When someone sends you an invitation, it will appear here</p>
                </div>
            {% endif %}
        </div>
        
        <!-- Sent Invitations Tab -->
        <div id="sent" class="tab-content">
            {% if sent_invitations %}
                {% for invitation in sent_invitations %}
                <div class="invitation-card">
                    <div class="invitation-header">
                        <div class="inviter-info">
                            <div class="inviter-avatar" style="background: #f0f0f0;">
                                {% if invitation.receiver.profile.user_type == 'patient' %}
                                    🧑‍⚕️
                                {% elif invitation.receiver.profile.user_type == 'doctor' %}
                                    👨‍⚕️
                                {% else %}
                                    👪
                                {% endif %}
                            </div>
                            <div class="inviter-details">
                                <h3>{{ invitation.receiver.get_full_name|default:invitation.receiver.username }}</h3>
                                <p>@{{ invitation.receiver.username }}</p>
                            </div>
                        </div>
                        <div class="invitation-role" style="background: #f3e5f5; color: #6a1b9a;">
                            {% if invitation.role == 'provider' %}
                                🏥 Healthcare Provider
                            {% else %}
                                👪 Family Member
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="invitation-details">
                        <div class="detail-row">
                            <span class="detail-label">Connection As:</span>
                            <span class="detail-value">{{ invitation.get_role_display }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Sent:</span>
                            <span class="detail-value">{{ invitation.created_at|date:"M d, Y @ g:i A" }} ({{ invitation.created_at|timesince }} ago)</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Status:</span>
                            <span class="detail-value" style="color: #ffa726; font-weight: 600;">{{ invitation.get_status_display }}</span>
                        </div>
                    </div>
                    
                    <div class="invitation-actions">
                        <form method="post" action="{% url 'familytouch:invitations' %}" style="display: inline;">
                            {% csrf_token %}
                            <input type="hidden" name="invitation_id" value="{{ invitation.id }}">
                            <button type="submit" name="cancel_invitation" class="btn btn-cancel">
                                ⟲ Cancel Invitation
                            </button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <div class="empty-icon">📮</div>
                    <p>No sent invitations</p>
                    <p style="color: #bbb; font-size: 0.95rem;">
                        <a href="{% url 'familytouch:connected_care' %}" style="color: #667eea; text-decoration: none; font-weight: 600;">Send your first invitation →</a>
                    </p>
                </div>
            {% endif %}
        </div>
    
    {% else %}
        <div class="empty-state">
            <div class="empty-icon">🔐</div>
            <p>Please log in to view your invitations</p>
            <a href="{% url 'familytouch:login' %}" style="color: #667eea; text-decoration: none; font-weight: 600; margin-top: 1rem; display: inline-block;">Login Now →</a>
        </div>
    {% endif %}
</div>

<script>
    function switchTab(event, tabName) {
        event.preventDefault();
        
        // Hide all tabs
        const tabs = document.querySelectorAll('.tab-content');
        tabs.forEach(tab => tab.classList.remove('active'));
        
        // Remove active from all buttons
        const buttons = document.querySelectorAll('.tab-btn');
        buttons.forEach(btn => btn.classList.remove('active'));
        
        // Show selected tab
        document.getElementById(tabName).classList.add('active');
        
        // Mark button as active
        event.target.closest('.tab-btn').classList.add('active');
    }
</script>
{% endblock %}