{% extends "base.html" %}

{% block title %}{{ meeting.title }} - {{ lab_name }}{% endblock %}

{% block content %}
<div class="card">
    <div style="margin-bottom: 2rem;">
        <a href="{{ url_for('meetings') }}" style="color: var(--primary); text-decoration: none;">
            ← Back to Meetings
        </a>
    </div>

    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem;">
        <div style="flex: 1;">
            <h1 style="color: var(--primary); margin-bottom: 1rem;">{{ meeting.title }}</h1>
        </div>
        {% if can_edit %}
        <div style="display: flex; gap: 0.5rem;">
            <a href="{{ url_for('edit_meeting', meeting_id=meeting.id) }}" class="btn btn-primary">Edit Meeting</a>
            <form method="POST" action="{{ url_for('delete_meeting_route', meeting_id=meeting.id) }}"
                style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this meeting?');">
                <button type="submit" class="btn btn-danger">Delete Meeting</button>
            </form>
        </div>
        {% endif %}
    </div>

    <div class="grid grid-2" style="margin-bottom: 2rem;">
        <div>
            <p style="color: var(--text-light); margin-bottom: 0.5rem;"><strong>Date & Time:</strong></p>
            <p>{{ meeting.meeting_time }}</p>
        </div>
        <div>
            <p style="color: var(--text-light); margin-bottom: 0.5rem;"><strong>Organized By:</strong></p>
            <p>{{ meeting.created_by_name }}</p>
        </div>
        <div>
            <p style="color: var(--text-light); margin-bottom: 0.5rem;"><strong>Research Group:</strong></p>
            <p>
                {% if meeting.group_name %}
                <span class="badge badge-user">{{ meeting.group_name }}</span>
                {% else %}
                All Lab Members
                {% endif %}
            </p>
        </div>
        <div>
            <p style="color: var(--text-light); margin-bottom: 0.5rem;"><strong>Tags:</strong></p>
            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                {% if meeting.tags %}
                {% for tag in meeting.tags.split(',') %}
                <span class="badge badge-admin">{{ tag }}</span>
                {% endfor %}
                {% else %}
                <span style="color: var(--text-light);">No tags</span>
                {% endif %}
            </div>
        </div>
    </div>

    {% if meeting.description %}
    <div style="background-color: var(--bg-light); padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
        <h3 style="color: var(--primary); margin-bottom: 1rem;">Description</h3>
        <p style="white-space: pre-wrap;">{{ meeting.description }}</p>
    </div>
    {% endif %}

    <!-- Meeting Summary Section -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <div style="background-color: var(--bg-light); padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="color: var(--primary); margin: 0;">Meeting Summary</h3>
            {% if is_participant or session.is_admin %}
            <div id="summary-actions">
                <button type="button" class="btn btn-secondary btn-sm" onclick="toggleSummaryEdit()"
                    id="summary-edit-btn">Edit</button>
                <div id="summary-controls" style="display: none;">
                    <button type="button" class="btn btn-secondary btn-sm" onclick="cancelSummaryEdit()">Cancel</button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="submitSummaryForm()">Update</button>
                </div>
            </div>
            {% endif %}
        </div>

        <form method="POST" action="{{ url_for('update_meeting_summary_route', meeting_id=meeting.id) }}"
            id="summary-form">
            <div id="summary-viewer"
                style="padding: 1.5rem; border: 1px solid var(--border); border-radius: 4px; background: white; min-height: 150px;">
                <!-- Content rendered via JS -->
            </div>

            <div id="summary-editor" style="display: none;">
                <div class="form-group">
                    <textarea name="summary" id="summary-textarea" class="form-control" rows="10"
                        placeholder="Enter meeting summary (Markdown supported)...">{{ meeting.summary if meeting.summary else '' }}</textarea>
                </div>
            </div>
        </form>
    </div>

    <script>
        // Initial Render
        document.addEventListener('DOMContentLoaded', () => {
            const summaryText = document.getElementById('summary-textarea').value;
            document.getElementById('summary-viewer').innerHTML = marked.parse(summaryText || '*No summary yet. Click Edit to add one.*');
        });

        function toggleSummaryEdit() {
            // Show editor, hide viewer
            document.getElementById('summary-viewer').style.display = 'none';
            document.getElementById('summary-editor').style.display = 'block';

            // Toggle buttons in header
            document.getElementById('summary-edit-btn').style.display = 'none';
            document.getElementById('summary-controls').style.display = 'inline-block';
        }

        function cancelSummaryEdit() {
            // Hide editor, show viewer
            document.getElementById('summary-viewer').style.display = 'block';
            document.getElementById('summary-editor').style.display = 'none';

            // Toggle buttons in header
            document.getElementById('summary-edit-btn').style.display = 'inline-block';
            document.getElementById('summary-controls').style.display = 'none';
        }

        function submitSummaryForm() {
            document.getElementById('summary-form').submit();
        }
    </script>

    <!-- RSVP Section -->
    <div style="background-color: var(--bg-light); padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
        <h3 style="color: var(--primary); margin-bottom: 1rem;">Will you attend?</h3>
        <form method="POST" action="{{ url_for('respond_to_meeting', meeting_id=meeting.id) }}"
            style="display: flex; gap: 1rem;">
            <button type="submit" name="response" value="join" class="btn btn-primary">I'll Join</button>
            <button type="submit" name="response" value="wont_join" class="btn btn-secondary">Can't Join</button>
        </form>
    </div>

    <!-- Responses Section -->
    {% if responses %}
    <div style="margin-bottom: 2rem;">
        <h3 style="color: var(--primary); margin-bottom: 1rem;">Responses</h3>
        <div class="grid grid-2">
            <div>
                <h4 style="color: var(--success); margin-bottom: 0.5rem;">Joining ({{ responses|selectattr('response',
                    'equalto', 'join')|list|length }})</h4>
                <ul style="list-style: none; padding: 0;">
                    {% for r in responses %}
                    {% if r.response == 'join' %}
                    <li
                        style="padding: 0.5rem; background-color: var(--bg-light); margin-bottom: 0.25rem; border-radius: 4px;">
                        {{ r.user_name }}
                    </li>
                    {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <div>
                <h4 style="color: var(--error); margin-bottom: 0.5rem;">Can't Join ({{ responses|selectattr('response',
                    'equalto', 'wont_join')|list|length }})</h4>
                <ul style="list-style: none; padding: 0;">
                    {% for r in responses %}
                    {% if r.response == 'wont_join' %}
                    <li
                        style="padding: 0.5rem; background-color: var(--bg-light); margin-bottom: 0.25rem; border-radius: 4px;">
                        {{ r.user_name }}
                    </li>
                    {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}

    <div style="margin-bottom: 1rem;">
        <a href="{{ url_for('upload_content_route') }}?meeting_id={{ meeting.id }}" class="btn btn-primary">Upload
            Meeting Materials</a>
    </div>
</div>

<div class="card">
    <h2 style="color: var(--primary); margin-bottom: 1.5rem;">Meeting Materials</h2>

    {% if contents %}
    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Filename</th>
                <th>Uploaded By</th>
                <th>Size</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for content in contents %}
            <tr>
                <td><strong>{{ content.title }}</strong></td>
                <td>{{ content.filename }}</td>
                <td>{{ content.uploaded_by_name }}</td>
                <td>{{ "%.2f"|format(content.file_size / 1024 / 1024) }} MB</td>
                <td>
                    <a href="{{ url_for('download_content', content_id=content.id) }}" class="btn btn-secondary"
                        style="padding: 0.5rem 1rem;">Download</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="text-align: center; color: var(--text-light); padding: 2rem;">
        No materials uploaded yet for this meeting.
    </p>
    {% endif %}
</div>
{% endblock %}