{% extends 'base.html' %}
{% load static i18n %}
{% block customCSS %}
<style>
/* -------------------------------------------------------------------------- */
/* KAAT-S Redesign CSS - Optimized Compact Detail View (Settings Removed) */
/* -------------------------------------------------------------------------- */

:root {
    --kaauh-teal: #00636e;          /* Primary Brand Teal */
    --kaauh-teal-dark: #004a53;     /* Darker Teal for Text/Hover */
    --kaauh-teal-light: #e0f7f9;    /* Lightest Teal for background accents */
    --kaauh-border: #e9ecef;        /* Soft Border Gray */
    --kaauh-primary-text: #212529;  /* Dark Text */
    --kaauh-secondary-text: #6c757d;/* Muted Text */
    --kaauh-gray-light: #f8f9fa;    /* Card Header/Footer Background */
    --kaauh-success: #198754;       /* Success Green */
    --kaauh-danger: #dc3545;        /* Danger Red */
}

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

/* ------------------ General Layout & Card Styles ------------------ */


.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.03);
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}
.card:not(.no-hover):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.card-body {
    padding: 1.5rem;
}

/* ------------------ Main Header & Title Styles ------------------ */

.main-title-card {
    padding: 1.5rem 2rem;
    background-color: white;
    border-bottom: 3px solid var(--kaauh-teal);
    border-radius: 12px 12px 0 0;
}

.main-title-card h1 {
    color: var(--kaauh-teal-dark);
    font-weight: 800;
    margin: 0;
    font-size: 2rem;
}
.main-title-card .heroicon {
    width: 2rem;
    height: 2rem;
    color: var(--kaauh-teal);
}

.status-badge {
    font-size: 0.75rem;
    padding: 0.35em 0.8em;
    border-radius: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.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 ------------------ */

.detail-section h2 {
    color: var(--kaauh-teal-dark);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--kaauh-teal-light);
    padding-bottom: 0.5rem;
}

.detail-row-group {
    padding: 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--kaauh-border);
    align-items: center;
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    font-weight: 600;
    color: var(--kaauh-teal);
    font-size: 0.9rem;
    flex-basis: 45%;
}
.detail-value {
    color: var(--kaauh-primary-text);
    word-wrap: break-word;
    font-weight: 500;
    text-align: right;
    font-size: 0.9rem;
    flex-basis: 55%;
}

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

.join-info-card {
    border-left: 5px solid var(--kaauh-teal); /* Highlight join info */
}
.btn-primary {
    background-color: var(--kaauh-teal);
    border-color: var(--kaauh-teal);
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 6px;
}
.btn-primary:hover {
    background-color: var(--kaauh-teal-dark);
    border-color: var(--kaauh-teal-dark);
}

.join-url-container {
    margin-top: 1rem;
}
.join-url-display {
    background-color: var(--kaauh-gray-light);
    border: 1px solid var(--kaauh-border);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}
.btn-copy {
    padding: 0.5rem 0.75rem;
    background-color: var(--kaauh-teal-dark);
}

/* ------------------ Footer & Actions ------------------ */

.action-bar-footer {
    border-top: 1px solid var(--kaauh-border);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    background-color: var(--kaauh-gray-light);
    border-radius: 0 0 12px 12px;
}
.btn-footer-action {
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* ------------------ Comments Section ------------------ */
#comments-card .card-header {
    background-color: var(--kaauh-teal-light);
    color: var(--kaauh-teal-dark);
    padding: 1rem 1.5rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
/* Comment card body/item styling is kept compact */
</style>
{% endblock %}


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

    {# --- TOP BAR / BACK BUTTON --- #}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <a href="{% url 'list_meetings' %}" class="btn btn-secondary-back">
            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Meetings" %}
        </a>
    </div>

    <div class="row g-4">
        {# --- LEFT COLUMN (MAIN DETAILS) --- #}
        <div class="col-lg-6">
            <div class="card no-hover h-100">
                {# --- CONSOLIDATED HEADER --- #}
                <div class="main-title-card">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="card-header-title-group">
                            <h1 class="mb-1">
                                <svg class="heroicon me-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0 8.268-2.943-9.542-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                {{ meeting.topic }}
                            </h1>
                            <div class="d-flex align-items-center gap-3">
                                <span class="status-badge bg-{{ meeting.status }}">
                                    {{ meeting.status|title }}
                                </span>
                                {% if meeting.interview %}
                                    <span class="text-muted small">
                                        {% trans "Candidate" %}: <a class="text-primary-theme fw-bold text-decoration-none" href="{% url 'candidate_detail' meeting.interview.candidate.slug %}">{{ meeting.interview.candidate.name }} </a>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {# --- MAIN DETAIL BODY --- #}
                <div class="card-body detail-section">
                    <h2>{% trans "Core Details" %}</h2>
                    <div class="detail-row-group">
                        <div class="detail-row"><div class="detail-label">{% trans "Meeting ID" %}:</div><div class="detail-value">{{ meeting.meeting_id }}</div></div>
                        <div class="detail-row"><div class="detail-label">{% trans "Start Time" %}:</div><div class="detail-value">{{ meeting.start_time|date:"M d, Y H:i" }}</div></div>
                        <div class="detail-row"><div class="detail-label">{% trans "Duration" %}:</div><div class="detail-value">{{ meeting.duration }} {% trans "minutes" %}</div></div>
                        <div class="detail-row"><div class="detail-label">{% trans "Timezone" %}:</div><div class="detail-value">{{ meeting.timezone|default:"UTC" }}</div></div>
                        <div class="detail-row"><div class="detail-label">{% trans "Host Email" %}:</div><div class="detail-value">{{ meeting.host_email|default:"N/A" }}</div></div>
                    </div>
                </div>

                {# --- ACTION BAR AT THE BOTTOM OF THE MAIN CARD --- #}
                <div class="card-footer action-bar-footer d-flex justify-content-end">
                    <a href="{% url 'update_meeting' meeting.slug %}" class="btn btn-primary btn-footer-action">
                        <i class="fas fa-edit me-1"></i> {% trans "Update" %}
                    </a>
                    {% if meeting.zoom_gateway_response %}
                        <button type="button" class="btn btn-secondary btn-footer-action" onclick="toggleGateway()">
                            <i class="fas fa-code me-1"></i> {% trans "API Response" %}
                        </button>
                    {% endif %}
                    <button type="button" class="btn btn-danger btn-footer-action" title="{% trans 'Delete' %}"
                            data-bs-toggle="modal" data-bs-target="#deleteModal"
                            hx-post="{% url 'delete_meeting' meeting.slug %}"
                            hx-target="#deleteModalBody"
                            hx-swap="outerHTML"
                            data-item-name="{{ meeting.topic }}">
                            <i class="fas fa-trash-alt me-1"></i>
                            Delete
                    </button>
                </div>
            </div>
        </div>

        {# --- RIGHT COLUMN (JOIN INFO) --- #}
        <div class="col-lg-6">
            {% if meeting.join_url %}
                <div class="card no-hover join-info-card detail-section h-100">
                    <div class="card-body">
                        <h2>{% trans "Join Information" %}</h2>

                        <a href="{{ meeting.join_url }}" class="btn btn-primary w-100 mb-4" target="_blank">
                            <i class="fas fa-video me-1"></i> {% trans "Join Meeting Now" %}
                        </a>

                        <div class="join-url-container">
                            <div id="copy-message" style="opacity: 0;">{% trans "Copied!" %}</div>

                            <div class="join-url-display d-flex justify-content-between align-items-center">
                                <div class="text-truncate">
                                    <strong>{% trans "Join URL" %}:</strong>
                                    <span id="meeting-join-url">{{ meeting.join_url }}</span>
                                </div>
                                <button class="btn-copy ms-2" onclick="copyLink()" title="{% trans 'Copy URL' %}">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>

                        </div>

                        {% if meeting.password %}
                            <div class="detail-row" style="border: none; padding-top: 1rem;">
                                <div class="detail-label" style="font-size: 1rem;">{% trans "Password" %}:</div>
                                <div class="detail-value fw-bolder text-danger">{{ meeting.password }}</div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    {# --- API RESPONSE CARD (Full width, hidden by default) --- #}
    {% if meeting.zoom_gateway_response %}
        <div id="gateway-response-card" class="card mt-4" style="display: none;">
            <div class="card-body">
                <h3>{% trans "API Gateway Response" %}</h3>
                <pre>{{ meeting.zoom_gateway_response|safe }}</pre>
            </div>
        </div>
    {% endif %}


    {# --- Comments Section (Full Width, below main content) --- #}
    <div class="card no-hover mt-4" id="comments-card">
        <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" %} ({{ meeting.comments.count }})
            </h5>
            {% if user.is_authenticated %}
                <button type="button" class="btn btn-primary btn-sm"
                    hx-get="{% url 'add_meeting_comment' meeting.slug %}"
                    hx-target="#comment-section"
                    >
                    <i class="fas fa-plus me-1"></i> {% trans "Add Comment" %}
                </button>
            {% endif %}
        </div>
        <div class="card-body">
            <div id="comment-section">
                {% if meeting.comments.all %}
                    {% for comment in meeting.comments.all|dictsortreversed:"created_at" %}
                        <div class="card mb-3">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div>
                                    <strong class="me-2">{{ comment.author.get_full_name|default:comment.author.username }}</strong>
                                    {% if comment.author != user %}
                                        <span class="badge bg-secondary ms-1">{% trans "Comment" %}</span>
                                    {% endif %}
                                </div>
                                <small class="text-muted">{{ comment.created_at|date:"M d, Y P" }}</small>
                            </div>
                            <div class="card-body">
                                <p class="card-text">{{ comment.content|safe }}</p>
                            </div>
                            <div class="card-footer">
                                {% if comment.author == user or user.is_staff %}
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-outline-primary"
                                            hx-get="{% url 'edit_meeting_comment' meeting.slug comment.id %}"
                                            hx-target="#comment-section"
                                            title="{% trans 'Edit Comment' %}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-danger"
                                            hx-get="{% url 'delete_meeting_comment' meeting.slug comment.id %}"
                                            hx-target="#comment-section"
                                            title="{% trans 'Delete Comment' %}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted">{% trans "No comments yet. Be the first to comment!" %}</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="commentModalLabel">Add Comment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="commentModalBody">
                </div>
        </div>
    </div>
</div>

{% endblock %}
{% block customJS %}
<script>
    function toggleGateway() {
        const element = document.getElementById('gateway-response-card');
        if (element.style.display === 'none' || element.style.display === '') {
            element.style.display = 'block';
        } else {
            element.style.display = 'none';
        }
    }

    // CopyLink function remains the same (as provided in the original code)
    function copyLink() {
        const urlElement = document.getElementById('meeting-join-url');
        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';

            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 %}