{% extends "base.html" %}

{% block title %}Document - {{ collection.name }} - Monglo Admin{% endblock %}

{% block header_actions %}
<button class="monglo-btn monglo-btn-secondary" onclick="window.history.back()">
    <i class="fas fa-arrow-left"></i>
    Back
</button>
<button class="monglo-btn monglo-btn-primary" onclick="editDocumentInView()">
    <i class="fas fa-edit"></i>
    Edit
</button>
<button class="monglo-btn monglo-btn-danger" onclick="deleteCurrentDocument()">
    <i class="fas fa-trash"></i>
    Delete
</button>
{% endblock %}

{% macro render_value(key, value, depth=0) %}
{% if value is mapping %}
{# Nested object - render as expandable table #}
<details {% if depth==0 %}open{% endif %} style="margin: var(--spacing-xs) 0;">
    <summary style="cursor: pointer; font-weight: 600; color: var(--color-primary); padding: var(--spacing-xs);">
        <i class="fas fa-chevron-right"></i>
        Object ({{ value|length }} fields)
    </summary>
    <div
        style="margin-left: var(--spacing-lg); border-left: 2px solid var(--border-color); padding-left: var(--spacing-md);">
        <table class="monglo-nested-table" style="width: 100%; margin-top: var(--spacing-sm);">
            {% for nested_key, nested_value in value.items() %}
            <tr>
                <td style="padding: var(--spacing-xs); font-weight: 600; color: var(--text-secondary); width: 30%;">
                    {{ nested_key }}
                </td>
                <td style="padding: var(--spacing-xs);">
                    {{ render_value(nested_key, nested_value, depth + 1) }}
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
</details>
{% elif value is iterable and value is not string %}
{% if value|length > 0 and value[0] is mapping %}
{# Array of objects - render as table #}
<details {% if depth==0 %}open{% endif %} style="margin: var(--spacing-xs) 0;">
    <summary style="cursor: pointer; font-weight: 600; color: var(--color-primary); padding: var(--spacing-xs);">
        <i class="fas fa-chevron-right"></i>
        Array[{{ value|length }}] of objects
    </summary>
    <div style="margin-left: var(--spacing-lg); overflow-x: auto; margin-top: var(--spacing-sm);">
        <table class="monglo-nested-table" style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
            <thead>
                <tr style="background: var(--bg-tertiary);">
                    <th style="padding: var(--spacing-sm); text-align: left; border: 1px solid var(--border-color);  ">#
                    </th>
                    {% for col_key in value[0].keys() %}
                    <th style="padding: var(--spacing-sm); text-align: left; border: 1px solid var(--border-color);">{{
                        col_key }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for item in value %}
                <tr>
                    <td
                        style="padding: var(--spacing-sm); border: 1px solid var(--border-color); font-weight: 600; color: var(--text-secondary);">
                        {{ loop.index }}</td>
                    {% for col_key in item.keys() %}
                    <td style="padding: var(--spacing-sm); border: 1px solid var(--border-color);">
                        {% if item[col_key] is mapping or (item[col_key] is iterable and item[col_key] is not string and
                        item[col_key]|length > 0 and item[col_key][0] is mapping) %}
                        {{ render_value(col_key, item[col_key], depth + 1) }}
                        {% else %}
                        {{ item[col_key] }}
                        {% endif %}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</details>
{% else %}
{# Simple array #}
<pre
    style="background: var(--bg-tertiary); padding: var(--spacing-sm); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.75rem; margin: 0;">{{ value|tojson }}</pre>
{% endif %}
{% elif value is sameas true or value is sameas false %}
<span class="monglo-badge {% if value %}monglo-badge-success{% else %}monglo-badge-danger{% endif %}">
    <i class="fas fa-{% if value %}check{% else %}times{% endif %}"></i>
    {{ value }}
</span>
{% elif value is number %}
<span style="font-family: var(--font-mono); color: var(--brand-accent); font-weight: 600;">{{ value }}</span>
{% elif key and (key.endswith('_id') or key.endswith('_ids')) and value %}
{# Potential relationship field #}
<span style="color: var(--color-primary); font-weight: 600;">
    <i class="fas fa-link" style="font-size: 0.75rem;"></i>
    {{ value }}
</span>
{% else %}
<span style="color: var(--text-primary);">{{ value }}</span>
{% endif %}
{% endmacro %}

{% block content %}
<div class="monglo-document monglo-fade-in">
    <!-- Document Header -->
    <div
        style="margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 2px solid var(--border-color);">
        <h1 style="font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--spacing-sm);">
            <i class="fas fa-file-alt"></i>
            {{ collection.display_name or collection.name }}
        </h1>
        <div
            style="display: flex; gap: var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary); flex-wrap: wrap; align-items: center;">
            <span style="font-size: var(--font-size-base);">
                <strong>ID:</strong>
                <code
                    style="background: var(--bg-tertiary); padding: 0.375rem var(--spacing-md); border-radius: var(--radius-sm); font-family: var(--font-mono); color: var(--mongodb-green-dark); font-weight: 600;">
                    {{ document._id }}
                </code>
            </span>
            {% if document.created_at %}
            <span>
                <i class="fas fa-calendar-plus"></i>
                <strong>Created:</strong> {{ document.created_at|format_datetime }}
            </span>
            {% endif %}
            {% if document.updated_at %}
            <span>
                <i class="fas fa-calendar-check"></i>
                <strong>Updated:</strong> {{ document.updated_at|format_datetime }}
            </span>
            {% endif %}

            <button id="view-toggle-btn" onclick="toggleView()" class="monglo-btn monglo-btn-secondary monglo-btn-sm"
                style="margin-left: auto;">
                <i class="fas fa-code"></i> View JSON
            </button>
        </div>
    </div>

    <!-- Table View (Default) -->
    <div id="table-view" style="display: block;">
        <div class="monglo-table-container" style="max-height: none;">
            <table class="monglo-table">
                <thead>
                    <tr>
                        <th style="width: 30%;">Field</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% for key, value in document.items() %}
                    <tr>
                        <td
                            style="font-weight: 600; color: var(--text-primary); vertical-align: top; padding-top: var(--spacing-md);">
                            <i class="fas fa-key"
                                style="color: var(--mongodb-green-dark); font-size: 0.75rem; margin-right: 0.5rem;"></i>
                            {{ key }}
                        </td>
                        <td style="vertical-align: top;">
                            {{ render_value(key, value) }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- JSON View (Hidden by default) -->
    <div id="json-view" style="display: none;">
        <pre style="background: var(--bg-tertiary); 
                padding: var(--spacing-xl); 
                border-radius: var(--radius-lg); 
                overflow-x: auto;
                font-family: var(--font-mono);
                font-size: var(--font-size-sm);
                line-height: 1.6;
                border: 1px solid var(--border-color);"><code>{{ document|tojson(indent=2) }}</code></pre>
    </div>

    <!-- Relationships Section -->
    {% if relationships %}
    <div
        style="margin-top: var(--spacing-2xl); padding-top: var(--spacing-xl); border-top: 2px solid var(--border-color);">
        <h2 style="font-size: var(--font-size-xl); 
                   font-weight: 700; 
                   margin-bottom: var(--spacing-lg); 
                   color: var(--text-primary);">
            <i class="fas fa-link"></i>
            Detected Relationships
        </h2>

        <div
            style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-md);">
            {% for rel in relationships %}
            <div
                style="background: var(--bg-secondary); 
                        padding: var(--spacing-lg); 
                        border-radius: var(--radius-lg); 
                        border: 1px solid var(--border-color);
                        {% if rel.source_field.count('.') > 0 %}border-left: 3px solid var(--brand-accent);{% else %}border-left: 3px solid var(--color-primary);{% endif %}">
                <div style="font-size: var(--font-size-xs); 
                           text-transform: uppercase; 
                           letter-spacing: 0.05em; 
                           color: var(--text-secondary); 
                           margin-bottom: var(--spacing-sm);">
                    {% if rel.source_field.count('.') > 0 %}
                    <span class="monglo-badge monglo-badge-warning">Embedded</span>
                    {% endif %}
                    {{ rel.type }}
                </div>
                <div style="margin-bottom: var(--spacing-sm);">
                    <a href="{{ prefix }}/{{ rel.target_collection }}" style="font-weight: 600; 
                              color: var(--color-primary); 
                              text-decoration: none; 
                              display: flex; 
                              align-items: center; 
                              gap: var(--spacing-sm);">
                        <i class="fas fa-table"></i>
                        {{ rel.target_collection }}
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
                <div style="font-size: var(--font-size-sm); 
                           color: var(--text-secondary);
                           font-family: var(--font-mono);">
                    <strong>Field:</strong> <code style="color: var(--color-primary);">{{ rel.source_field }}</code>
                </div>
                {% if document[rel.source_field] %}
                <div
                    style="margin-top: var(--spacing-sm); font-size: var(--font-size-sm); color: var(--text-secondary);">
                    <strong>Value:</strong> {{ document[rel.source_field] }}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<style>
    details summary {
        list-style: none;
    }

    details summary::-webkit-details-marker {
        display: none;
    }

    details[open] summary i.fa-chevron-right {
        transform: rotate(90deg);
        transition: transform 0.2s;
    }

    details summary i.fa-chevron-right {
        transition: transform 0.2s;
        display: inline-block;
        margin-right: 0.5rem;
        font-size: 0.75rem;
    }
</style>

<script>
    const prefix = '{{ prefix }}';
    const documentId = '{{ document._id }}';
    const collectionName = '{{ collection.name }}';

    function deleteCurrentDocument() {
        if (confirm('Are you sure you want to delete this document?')) {
            const deleteUrl = `${prefix}/${collectionName}/${documentId}`;
            fetch(deleteUrl, { method: 'DELETE' })
                .then(response => {
                    if (response.ok) {
                        window.location.href = `${prefix}/${collectionName}`;
                    } else {
                        alert('Error deleting document');
                    }
                })
                .catch(err => {
                    console.error('Delete error:', err);
                    alert('Error deleting document');
                });
        }
    }

    function editDocumentInView() {
        if (typeof editDocument === 'function') {
            editDocument('{{ document._id }}');
        }
    }

    function toggleView() {
        const tableView = document.getElementById('table-view');
        const jsonView = document.getElementById('json-view');
        const toggleBtn = document.getElementById('view-toggle-btn');

        if (tableView.style.display === 'none') {
            // Switch to table view
            tableView.style.display = 'block';
            jsonView.style.display = 'none';
            toggleBtn.innerHTML = '<i class="fas fa-code"></i> View JSON';
        } else {
            // Switch to JSON view
            tableView.style.display = 'none';
            jsonView.style.display = 'block';
            toggleBtn.innerHTML = '<i class="fas fa-table"></i> View Table';
        }
    }
</script>
{% endblock %}