{% extends 'base.html' %}
{% load static i18n %}
{% block customCSS %}
<style>
/* -------------------------------------------------------------------------- */
/* KAAT-S Redesign CSS - Compacted and Reordered Layout */
/* -------------------------------------------------------------------------- */

:root {
    --kaauh-teal: #00636e;
    --kaauh-teal-dark: #004a53;
    --kaauh-teal-light: #e0f7f9;
    --kaauh-border: #e9ecef;
    --kaauh-primary-text: #212529;
    --kaauh-secondary-text: #6c757d;
    --kaauh-gray-light: #f8f9fa;
    --kaauh-success: #198754;
    --kaauh-danger: #dc3545;
    --kaauh-link: #007bff;
    --kaauh-link-hover: #0056b3;
}

body {
    background-color: #f0f2f5; 
    font-family: 'Inter', sans-serif;
}

/* ------------------ Card & Header Styles ------------------ */

.card {
    border: none;
    border-radius: 8px; /* Slightly smaller radius */
    box-shadow: 0 3px 10px rgba(0,0,0,0.04); /* Lighter shadow */
    margin-bottom: 1rem;
}
.card-body {
    padding: 1rem 1.25rem; /* Reduced padding */
}
#comments-card .card-header {
    background-color: white;
    color: var(--kaauh-teal-dark);
    padding: 0.75rem 1.25rem; /* Reduced header padding */
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--kaauh-border);
}

/* ------------------ Main Title & Status ------------------ */
.main-title-container {
    padding: 0 0 1rem 0; /* Space below the main title */
}
.main-title-container h1 {
    font-size: 1.75rem; /* Reduced size */
    font-weight: 700;
}

.status-badge {
    font-size: 0.7rem; /* Smaller badge */
    padding: 0.3em 0.7em;
    border-radius: 12px;
}
.bg-scheduled { background-color: #00636e !important; color: white !important;}
.bg-completed { background-color: #198754 !important; color: white !important;}
.bg-waiting { background-color: #ffc107 !important; color: var(--kaauh-primary-text) !important;}
.bg-started { background-color: var(--kaauh-teal) !important; color: white !important;}
.bg-ended { background-color: var(--kaauh-danger) !important; color: white !important;}

/* ------------------ Detail Row & Content Styles (Made Smaller) ------------------ */

.detail-section h2, .card h2 {
    color: var(--kaauh-teal-dark);
    font-weight: 700;
    font-size: 1.25rem; /* Reduced size */
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--kaauh-border);
}

.detail-row-simple {
    display: flex;
    padding: 0.4rem 0; /* Reduced vertical padding */
    border-bottom: 1px dashed var(--kaauh-border);
    font-size: 0.85rem; /* Smaller text */
}
.detail-label-simple {
    font-weight: 600;
    color: var(--kaauh-teal-dark);
    flex-basis: 40%;
}
.detail-value-simple {
    color: var(--kaauh-primary-text);
    font-weight: 500;
    flex-basis: 60%;
}

/* ------------------ Join Info & Copy Button ------------------ */

.btn-primary-teal {
    background-color: var(--kaauh-teal);
    border-color: var(--kaauh-teal);
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem; /* Slightly smaller button */
    border-radius: 6px;
    color: white; /* Ensure text color is white for teal primary */
}
.btn-primary-teal:hover {
    background-color: var(--kaauh-teal-dark);
    border-color: var(--kaauh-teal-dark);
}

/* Added Danger Button Style for main delete */
.btn-danger-red {
    background-color: var(--kaauh-danger);
    border-color: var(--kaauh-danger);
    color: white;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    border-radius: 6px;
    font-weight: 600;
}
.btn-danger-red:hover {
    background-color: #c82333;
    border-color: #bd2130;
}
.btn-secondary-back {
    /* Subtle Back Button */
    background-color: transparent;
    border: none;
    color: var(--kaauh-secondary-text);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s;
}
.btn-secondary-back:hover {
    color: var(--kaauh-teal);
    text-decoration: underline;
}

.join-url-display {
    background-color: white;
    border: 1px solid var(--kaauh-border);
    padding: 0.5rem; /* Reduced padding */
    font-size: 0.85rem; /* Smaller text */
}

.btn-copy-simple {
    padding: 0.5rem 0.75rem;
    background-color: var(--kaauh-teal-dark);
    border: none;
    color: white; 
    border-radius: 4px;
}
.btn-copy-simple:hover {
    background-color: var(--kaauh-teal);
}

/* ------------------ Simple Table Styles ------------------ */
.simple-table {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
}
.simple-table th {
    background-color: var(--kaauh-teal-light);
    color: var(--kaauh-teal-dark);
    font-weight: 700;
    padding: 8px 12px; /* Reduced padding */
    border: 1px solid var(--kaauh-border);
    font-size: 0.8rem; /* Smaller table header text */
}
.simple-table td {
    padding: 8px 12px; /* Reduced padding */
    border: 1px solid var(--kaauh-border);
    background-color: white;
    font-size: 0.85rem; /* Smaller table body text */
}

/* ------------------ Comment Specific Styles ------------------ */
.comment-item {
    border: 1px solid var(--kaauh-border);
    background-color: var(--kaauh-gray-light);
    border-radius: 6px;
}
/* Style for in-page edit button */
.btn-edit-comment {
    background-color: transparent;
    border: 1px solid var(--kaauh-teal);
    color: var(--kaauh-teal);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    font-weight: 500;
}
.btn-edit-comment:hover {
    background-color: var(--kaauh-teal-light);
}

</style>
{% endblock %}


{% block content %}
<div class="container-fluid py-4">

    {# --- TOP BAR / BACK BUTTON & ACTIONS (EDIT/DELETE) --- #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        {# Back Button #}
        <a href="{% url 'list_meetings' %}" class="btn btn-secondary-back">
            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Meetings" %}
        </a>
        
        {# Edit and Delete Buttons #}
        <div class="d-flex gap-2">
            <a href="{% url 'update_meeting' meeting.slug %}" class="btn btn-primary-teal btn-sm">
                <i class="fas fa-edit me-1"></i> {% trans "Edit Meeting" %}
            </a>
            {# DELETE MEETING FORM #}
            <form method="post" action="{% url 'delete_meeting' meeting.slug %}" style="display: inline;">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger-red btn-sm" onclick="return confirm('{% trans "Are you sure you want to delete this meeting? This action is permanent." %}')">
                    <i class="fas fa-trash-alt me-1"></i> {% trans "Delete Meeting" %}
                </button>
            </form>
        </div>
    </div>

    {# ========================================================= #}
    {# --- SECTION 1: PROMINENT TOP DETAILS & JOIN INFO --- #}
    {# ========================================================= #}
    <div class="row g-4 mb-5">
        
        {# --- LEFT HALF: MAIN TOPIC & JOB CONTEXT --- #}
        <div class="col-lg-6">
            <div class="main-title-container">
                <h1 class="text-start" style="color: var(--kaauh-teal-dark);">
                    <i class="fas fa-video me-2" style="color: var(--kaauh-teal);"></i> 
                    {{ meeting.topic|default:"[Meeting Topic N/A]" }}
                    <span class="status-badge bg-{{ meeting.status|lower|default:'bg-secondary' }} ms-3">
                        {{ meeting.status|title|default:'N/A' }}
                    </span>
                </h1>
            </div>

            {# JOB CONTEXT DETAILS (Simple Divs) #}
            <div class="p-3 bg-white rounded shadow-sm">
                <h2 class="text-start"><i class="fas fa-briefcase me-2"></i> {% trans "Interview Detail" %}</h2>
                <div class="detail-row-group">
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Job Title" %}:</div><div class="detail-value-simple">{{ meeting.get_job.title|default:"N/A" }}</div></div>
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Candidate Name" %}:</div><div class="detail-value-simple"><a href="">{{ meeting.get_candidate.name|default:"N/A" }}</a></div></div>
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Candidate Email" %}:</div><div class="detail-value-simple"><a href="">{{ meeting.get_candidate.email|default:"N/A" }}</a></div></div>
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Job Type" %}:</div><div class="detail-value-simple">{{ meeting.get_job.job_type|default:"N/A" }}</div></div>
                </div>
            </div>
        </div>

        {# --- RIGHT HALF: ZOOM LINK / ACTIONS --- #}
         <div class="col-lg-6">
            <div class="p-3 bg-white rounded shadow-sm">
                <h2 class="text-start"><i class="fas fa-info-circle me-2"></i> {% trans "Connection Details" %}</h2>
                <div class="detail-row-group">
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Date & Time" %}:</div><div class="detail-value-simple">{{ meeting.start_time|date:"M d, Y H:i"|default:"N/A" }}</div></div>
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Duration" %}:</div><div class="detail-value-simple">{{ meeting.duration|default:"N/A" }} {% trans "minutes" %}</div></div>
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Meeting ID" %}:</div><div class="detail-value-simple">{{ meeting.meeting_id|default:"N/A" }}</div></div>
                    <div class="detail-row-simple"><div class="detail-label-simple">{% trans "Host Email" %}:</div><div class="detail-value-simple">{{ meeting.host_email|default:"N/A" }}</div></div>
                    {% if meeting.join_url %}
                    <div class="join-url-container pt-3">
                        <div id="copy-message" class="text-white rounded px-2 py-1 small fw-bold mb-2 text-center" style="opacity: 0; transition: opacity 0.3s; position: absolute; right: 0; top: 5px; background-color: var(--kaauh-success); z-index: 10;">{% trans "Copied!" %}</div>
                        
                        <div class="join-url-display d-flex justify-content-between align-items-center position-relative">
                            <div class="text-truncate me-2">
                                <strong>{% trans "Join URL" %}:</strong>
                                <span id="meeting-join-url">{{ meeting.join_url }}</span>
                            </div>
                            <button class="btn-copy-simple ms-2 flex-shrink-0" onclick="copyLink()" title="{% trans 'Copy URL' %}">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                {% endif %}
                </div>
            </div>
        </div>
      
    </div>
    
    {# ========================================================= #}
    {# --- SECTION 2: PERSONNEL TABLES --- #}
    {# ========================================================= #}
    <div class="row g-4 mt-1 mb-5">
        
       
        {# --- PARTICIPANTS TABLE --- #}
        <div class="col-lg-12">
            <div class="p-3 bg-white rounded shadow-sm">
                <h2 class="text-start"><i class="fas fa-users-cog me-2"></i> {% trans "Assigned Participants" %}</h2>

                <table class="simple-table">
                    <thead>
                        <tr>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Role/Designation" %}</th>
                            <th>{% trans "Email" %}</th>
                            <th>{% trans "Phone Number" %}</th>
                            <th>{% trans "Source Type" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for participant in meeting.get_external_participants %}
                        <tr>
                            <td>{{participant.name}}</td>
                            <td>{{participant.designation}}</td>
                            <td>{{participant.email}}</td>
                            <td>{{participant.phone}}</td>
                            <td>{% trans "External Participants" %}</td>
                        </tr>
                        {% endfor %}
                        {% for participant in meeting.get_users_participants %}
                        <tr>
                            <td>{{participant.name}}</td>
                            <td>{{participant.designation}}</td>
                            <td>{{participant.email}}</td>
                            <td>{{participant.phone}}</td>
                            <td>{% trans "System User" %}</td>
                        </tr>
                        {% endfor %}
                       
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    {# ========================================================= #}
    {# --- SECTION 3: COMMENTS (CORRECTED) --- #}
    {# ========================================================= #}
    <div class="row g-4 mt-1">
        
        <div class="col-lg-12">
            <div class="card flex-grow-1" id="comments-card" style="height: 100%;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0" style="color: var(--kaauh-teal-dark);">
                        <i class="fas fa-comments me-2"></i>
                        {% trans "Comments" %} ({% if meeting.comments %}{{ meeting.comments.count }}{% else %}0{% endif %})
                    </h5>
                </div>
                <div class="card-body overflow-auto">
                    
                    {# 1. COMMENT DISPLAY & IN-PAGE EDIT FORMS #}
                    <div id="comment-section" class="mb-4">
                        {% if meeting.comments.all %}
                            {% for comment in meeting.comments.all|dictsortreversed:"created_at" %}
                                
                                <div class="comment-item mb-3 p-3">
                                    
                                    {# Read-Only Comment View #}
                                    <div id="comment-view-{{ comment.pk }}">
                                        <p class="mb-1 d-flex justify-content-between align-items-start" style="font-size: 0.9rem;">
                                            <div>
                                                <strong>{{ comment.author.get_full_name|default:comment.author.username }}</strong> 
                                                <span class="text-muted small ms-2">{{ comment.created_at|date:"M d, Y H:i" }}</span>
                                            </div>
                                            
                                            {% if comment.author == user or user.is_staff %}
                                                <div class="btn-group btn-group-sm">
                                                    {# Edit Button: Toggles the hidden form #}
                                                    <button type="button" class="btn btn-edit-comment py-0 px-1 me-2" onclick="toggleCommentEdit('{{ comment.pk }}')" id="edit-btn-{{ comment.pk }}" title="{% trans 'Edit Comment' %}">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    
                                                    {# Delete Form: Submits a POST request #}
                                                    <form method="post" action="{% url 'delete_meeting_comment' meeting.slug comment.pk %}" style="display: inline;" id="delete-form-{{ comment.pk }}">
                                                        {% csrf_token %}
                                                        <button type="submit" class="btn btn-outline-danger py-0 px-1" title="{% trans 'Delete Comment' %}" onclick="return confirm('{% trans "Are you sure you want to delete this comment?" %}')">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            {% endif %}
                                        </p>
                                        <p class="mb-0 comment-content" style="font-size: 0.85rem; white-space: pre-wrap;">{{ comment.content|linebreaksbr }}</p>
                                    </div>
                                    
                                    {# Hidden Edit Form #}
                                    <div id="comment-edit-form-{{ comment.pk }}" style="display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--kaauh-border);">
                                        <form method="POST" action="{% url 'edit_meeting_comment' meeting.slug comment.pk %}" id="form-{{ comment.pk }}">
                                            {% csrf_token %}
                                            <div class="mb-2">
                                                <label for="id_content_{{ comment.pk }}" class="form-label small">{% trans "Edit Comment" %}</label>
                                                {# NOTE: The textarea name must match your Comment model field (usually 'content') #}
                                                <textarea name="content" id="id_content_{{ comment.pk }}" rows="3" class="form-control" required>{{ comment.content }}</textarea>
                                            </div>
                                            <button type="submit" class="btn btn-sm btn-success me-2">
                                                <i class="fas fa-save me-1"></i> {% trans "Save Changes" %}
                                            </button>
                                            <button type="button" class="btn btn-sm btn-secondary" onclick="toggleCommentEdit('{{ comment.pk }}')">
                                                {% trans "Cancel" %}
                                            </button>
                                        </form>
                                    </div>

                                </div>
                            {% endfor %}
                        {% else %}
                            <p class="text-muted">{% trans "No comments yet. Be the first to comment!" %}</p>
                        {% endif %}
                    </div>
                    
                    <hr>

                    {# 2. NEW COMMENT SUBMISSION (Remains the same) #}
                    <h6 class="mb-3" style="color: var(--kaauh-teal-dark);">{% trans "Add a New Comment" %}</h6>
                    {% if user.is_authenticated %}
                        <form method="POST" action="{% url 'add_meeting_comment' meeting.slug %}">
                            {% csrf_token %}
                            {% if comment_form %}
                                {{ comment_form.as_p }}
                            {% else %}
                                <div class="mb-3">
                                    <label for="id_content" class="form-label small">{% trans "Comment" %}</label>
                                    <textarea name="content" id="id_content" rows="3" class="form-control" required></textarea>
                                </div>
                            {% endif %}
                            <button type="submit" class="btn btn-primary-teal btn-sm mt-2">
                                <i class="fas fa-paper-plane me-1"></i> {% trans "Submit Comment" %}
                            </button>
                        </form>
                    {% else %}
                        <p class="text-muted small">{% trans "You must be logged in to add a comment." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block customJS %}
<script>
    // --- COMMENT EDITING FUNCTION ---
    function toggleCommentEdit(commentPk) {
        const viewDiv = document.getElementById(`comment-view-${commentPk}`);
        const editFormDiv = document.getElementById(`comment-edit-form-${commentPk}`);
        const editButton = document.getElementById(`edit-btn-${commentPk}`);
        const deleteForm = document.getElementById(`delete-form-${commentPk}`);

        if (viewDiv.style.display !== 'none') {
            // Switch to Edit Mode
            viewDiv.style.display = 'none';
            editFormDiv.style.display = 'block';
            if (editButton) editButton.style.display = 'none'; // Hide edit button
            if (deleteForm) deleteForm.style.display = 'none'; // Hide delete button
        } else {
            // Switch back to View Mode (Cancel)
            viewDiv.style.display = 'block';
            editFormDiv.style.display = 'none';
            if (editButton) editButton.style.display = 'inline-block'; // Show edit button
            if (deleteForm) deleteForm.style.display = 'inline'; // Show delete button
        }
    }

    // --- COPY LINK FUNCTION ---
    // CopyLink function implementation (slightly improved for message placement)
    function copyLink() {
        const urlElement = document.getElementById('meeting-join-url');
        const displayContainer = urlElement.closest('.join-url-display');
        const messageElement = document.getElementById('copy-message');
        const textToCopy = urlElement.textContent || urlElement.innerText;

        clearTimeout(window.copyMessageTimeout);

        function showMessage(success) {
            messageElement.textContent = success ? '{% trans "Copied!" %}' : '{% trans "Copy Failed." %}';
            messageElement.style.backgroundColor = success ? 'var(--kaauh-success)' : 'var(--kaauh-danger)';
            messageElement.style.opacity = '1';

            // Position the message relative to the display container
            const rect = displayContainer.getBoundingClientRect();
            // Note: This positioning logic relies on the .join-url-container being position:relative or position:absolute
            messageElement.style.left = (rect.width / 2) - (messageElement.offsetWidth / 2) + 'px';
            messageElement.style.top = '-35px';
            
            window.copyMessageTimeout = setTimeout(() => {
                messageElement.style.opacity = '0';
            }, 2000);
        }

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(textToCopy).then(() => {
                showMessage(true);
            }).catch(err => {
                console.error('Could not copy text: ', err);
                fallbackCopyTextToClipboard(textToCopy, showMessage);
            });
        } else {
            fallbackCopyTextToClipboard(textToCopy, showMessage);
        }
    }

    function fallbackCopyTextToClipboard(text, callback) {
        const textArea = document.createElement("textarea");
        textArea.value = text;

        textArea.style.top = "0";
        textArea.style.left = "0";
        textArea.style.position = "fixed";

        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        let success = false;
        try {
            success = document.execCommand('copy');
        } catch (err) {
            console.error('Fallback: Oops, unable to copy', err);
        }

        document.body.removeChild(textArea);
        callback(success);
    }
</script>
{% endblock %}