{% extends "base.html" %}

{% load partials static %}
{% load custom_filters %}

{% block content %}
<div class="container mx-auto p-4">
    <div class="mb-8">
        <h1 class="text-3xl font-bold">Embeddings</h1>
        <p class="text-base-content/70">Manage your text embeddings and their processing status</p>
    </div>

    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <!-- Embedding Creation Section -->
            <div class="mb-8">
                <div class="flex justify-between items-start">
                    <h2 class="card-title mb-4">Create New Embedding</h2>
                    <div class="dropdown dropdown-end">
                        <label tabindex="0" class="btn btn-ghost btn-sm">
                            <span>Available Labels</span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </label>
                        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                            {% for handler in embed_handlers %}
                                <li><a onclick="document.getElementsByName('ingest_label')[0].value='{{ handler }}'">{{ handler }}</a></li>
                            {% empty %}
                                <li><span class="text-base-content/70 p-2">No labels available</span></li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <form method="POST" class="space-y-4">
                    {% csrf_token %}
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Text to Embed</span>
                        </label>
                        <textarea name="text" class="textarea textarea-bordered w-full" required></textarea>
                    </div>
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Ingest Label</span>
                        </label>
                        <input type="text" name="ingest_label" class="input input-bordered w-full" required>
                    </div>

                    <label class="label">
                        <span class="label-text">Additional Metadata</span>
                        <span class="label-text-alt">(Optional)</span>
                    </label>
                    <div id="metadata-fields" class="grid grid-cols-1 gap-4">
                        <div class="form-control flex flex-row gap-2">
                            <input type="text" name="metadata_key[]" placeholder="Key" class="input input-bordered w-1/2">
                            <input type="text" name="metadata_value[]" placeholder="Value" class="input input-bordered w-1/2">
                            <button type="button" class="btn btn-ghost btn-sm" onclick="removeMetadataField(this)">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <button type="button" onclick="addMetadataField()" class="btn btn-ghost btn-sm mt-2">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        Add Metadata Field
                    </button>

                    <button type="submit" class="btn btn-primary">
                        Create Embedding
                    </button>
                </form>

                <div class="divider"></div>
            </div>

            <!-- Embeddings List Section -->
            <div>
                <h2 class="card-title mb-4">Existing Embeddings</h2>
                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                            <tr>
                                <th>Text</th>
                                <th>Ingest Label</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for embed in embeddings %}
                            <tr>
                                <td class="max-w-md truncate">{{ embed.text }}</td>
                                <td>{{ embed.ingest_label }}</td>
                                <td>
                                    <div class="badge 
                                        {% if embed.status == 'completed' %}badge-success
                                        {% elif embed.status == 'failed' %}badge-error
                                        {% elif embed.status == 'processing' %}badge-warning
                                        {% else %}badge-ghost{% endif %}">
                                        {{ embed.status }}
                                    </div>
                                </td>
                                <td>{{ embed.created_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <div class="flex gap-2">
                                        {% if embed.metadata %}
                                        <button 
                                            class="btn btn-sm btn-outline btn-primary"
                                            onclick="document.getElementById('metadata-modal-{{ embed.id }}').showModal()">
                                            Metadata
                                        </button>
                                        <dialog id="metadata-modal-{{ embed.id }}" class="modal">
                                            <div class="modal-box">
                                                <h3 class="font-bold text-lg mb-4">Metadata for Embedding</h3>
                                                <div class="grid grid-cols-2 gap-2">
                                                    {% for key, value in embed.metadata.items %}
                                                    <div class="text-base-content/70">{{ key }}:</div>
                                                    <div>{{ value }}</div>
                                                    {% endfor %}
                                                </div>
                                                <div class="modal-action">
                                                    <form method="dialog">
                                                        <button class="btn">Close</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </dialog>
                                        {% endif %}
                                        <button 
                                            class="btn btn-sm btn-outline btn-error"
                                            hx-delete="{% url 'dashboard:delete_embedding' embed.id %}"
                                            hx-confirm="Are you sure you want to delete this embedding?"
                                            hx-target="closest tr"
                                            hx-swap="outerHTML">
                                            Delete
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-base-content/70">
                                    No embeddings created yet
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    <!-- Add Pagination here -->
                    {% if total_pages > 1 %}
                    <div class="flex justify-center mt-4">
                        <div class="join">
                            {% if current_page > 1 %}
                            <a href="?page={{ current_page|add:'-1' }}" class="join-item btn">«</a>
                            {% endif %}
                            
                            {% for page_num in total_pages|get_range %}
                            <a href="?page={{ page_num }}" 
                               class="join-item btn {% if page_num == current_page %}btn-active{% endif %}">
                               {{ page_num }}
                            </a>
                            {% endfor %}
                            
                            {% if current_page < total_pages %}
                            <a href="?page={{ current_page|add:'1' }}" class="join-item btn">»</a>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function addMetadataField() {
        const container = document.getElementById('metadata-fields');
        const newField = document.createElement('div');
        newField.className = 'form-control flex flex-row gap-2';
        newField.innerHTML = `
            <input type="text" name="metadata_key[]" placeholder="Key" class="input input-bordered w-1/2">
            <input type="text" name="metadata_value[]" placeholder="Value" class="input input-bordered w-1/2">
            <button type="button" class="btn btn-ghost btn-sm" onclick="removeMetadataField(this)">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        `;
        container.appendChild(newField);
    }

    function removeMetadataField(button) {
        button.parentElement.remove();
    }
</script>
{% endblock %}
