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

{% block title %}Connected Care - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .container { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; }
    .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 12px; margin-bottom: 2rem; text-align: center; }
    .header h1 { margin: 0; font-size: 2rem; }
    .header p { margin: 0.5rem 0 0 0; opacity: 0.9; }
    .card { background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
    .card h2 { margin-top: 0; color: #333; font-size: 1.4rem; border-bottom: 2px solid #667eea; padding-bottom: 1rem; }
    .item { background: #f8f9fa; padding: 1rem; margin-bottom: 0.8rem; border-radius: 8px; border-left: 4px solid #667eea; }
    .item strong { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; }
    .item small { color: #999; }
    .btn { padding: 0.8rem 1.5rem; background: #667eea; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
    .btn:hover { background: #764ba2; }
    .btn-small { padding: 0.5rem 1rem; font-size: 0.9rem; margin-left: 0.5rem; }
    .btn-accept { background: #28a745; }
    .btn-accept:hover { background: #218838; }
    .btn-reject { background: #dc3545; }
    .btn-reject:hover { background: #c82333; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
    .form-group input, .form-group select { width: 100%; padding: 0.8rem; border: 2px solid #ddd; border-radius: 6px; box-sizing: border-box; }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; }
    .empty { text-align: center; padding: 2rem; color: #999; }
    @media (max-width: 768px) { .container { padding: 0 1rem; } .header h1 { font-size: 1.5rem; } }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="header">
        <h1>🤝 Connected Care</h1>
        <p>Manage your connections</p>
    </div>

    {% if user.is_authenticated %}
        <div class="card">
            <h2>➕ Add New Connection</h2>
            <form method="post" style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px;">
                {% csrf_token %}
                <div class="form-group">
                    <label>Username to Connect</label>
                    <input type="text" name="username" placeholder="Enter username" required>
                </div>
                <div class="form-group">
                    <label>Connection Type</label>
                    <select name="role" required>
                        <option value="">Choose...</option>
                        <option value="provider">Doctor</option>
                        <option value="family">Family Member</option>
                    </select>
                </div>
                <button type="submit" class="btn">Send Invitation</button>
            </form>
        </div>

        <div class="card">
            <h2>✓ Your Connections ({{ connections|length }})</h2>
            {% if connections %}
                {% for c in connections %}
                <div class="item">
                    {% if c.patient.id == user.id %}
                        <strong>{{ c.contact.get_full_name|default:c.contact.username }}</strong>
                        <small>@{{ c.contact.username }} • {{ c.role }}</small>
                    {% else %}
                        <strong>{{ c.patient.get_full_name|default:c.patient.username }}</strong>
                        <small>@{{ c.patient.username }} • {{ c.role }}</small>
                    {% endif %}
                </div>
                {% endfor %}
            {% else %}
                <div class="empty">
                    <p>No connections yet. Add one above!</p>
                </div>
            {% endif %}
        </div>

        {% if pending_invitations %}
        <div class="card">
            <h2>📬 Pending Invitations ({{ pending_invitations|length }})</h2>
            {% for inv in pending_invitations %}
            <div class="item">
                <strong>{{ inv.sender.get_full_name|default:inv.sender.username }}</strong> wants to connect as {{ inv.get_role_display|lower }}
                <div style="margin-top: 0.8rem;">
                    <form method="post" style="display: inline;">
                        {% csrf_token %}
                        <input type="hidden" name="invitation_id" value="{{ inv.id }}">
                        <button type="submit" name="accept_invitation" class="btn btn-small btn-accept">Accept</button>
                    </form>
                    <form method="post" style="display: inline;">
                        {% csrf_token %}
                        <input type="hidden" name="invitation_id" value="{{ inv.id }}">
                        <button type="submit" name="reject_invitation" class="btn btn-small btn-reject">Reject</button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if sent_invitations %}
        <div class="card">
            <h2>📮 Sent Invitations ({{ sent_invitations|length }})</h2>
            {% for inv in sent_invitations %}
            <div class="item">
                <strong>{{ inv.receiver.get_full_name|default:inv.receiver.username }}</strong> ({{ inv.get_role_display|lower }})
                <form method="post" style="display: inline; margin-left: 1rem;">
                    {% csrf_token %}
                    <input type="hidden" name="invitation_id" value="{{ inv.id }}">
                    <button type="submit" name="cancel_invitation" class="btn btn-small" style="background: #6c757d;">Cancel</button>
                </form>
            </div>
            {% endfor %}
        </div>
        {% endif %}

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

    {% else %}
    <div class="card">
        <div class="empty">
            <h3>Login Required</h3>
            <p><a href="{% url 'familytouch:login' %}" class="btn">Login</a></p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}