{% extends "v3/base.html" %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Base de connaissance</h1>
    <div class="header-actions">
        <input type="text" class="form-input" id="search-input" placeholder="Rechercher..." oninput="debounceSearch()" style="width: 180px;">
        <button class="btn btn-primary" onclick="openNewEntity()">+ Nouvelle entite</button>
    </div>
</div>

<div class="stats" id="stats">
    <span class="stat"><strong id="entity-count">0</strong> entites</span>
    <span class="stat"><strong id="relation-count">0</strong> relations</span>
    <span class="stat text-muted" id="memory-location" style="font-size: 0.8rem; margin-left: auto;"></span>
</div>

<div class="panels">
    <div class="panel">
        <h3 class="panel-title">Entites</h3>
        <div id="entities-list" class="entity-list">
            <p class="text-muted text-center">Chargement...</p>
        </div>
    </div>
    <div class="panel">
        <h3 class="panel-title">Relations</h3>
        <div id="relations-list" class="relation-list">
            <p class="text-muted text-center">Chargement...</p>
        </div>
    </div>
</div>

<!-- Modal Edition Entite -->
<div id="entity-modal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title" id="modal-title">Nouvelle entite</h2>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">Nom</label>
                <input type="text" id="entity-name" class="form-input" placeholder="Nom de l'entite">
            </div>
            <div class="form-group">
                <label class="form-label">Type</label>
                <select id="entity-type" class="form-select"></select>
            </div>

            <div class="form-group">
                <label class="form-label">Observations</label>
                <div id="observations-container" class="list-container"></div>
                <div class="add-row">
                    <input type="text" id="new-observation" class="form-input" placeholder="Ajouter une observation..." onkeypress="if(event.key==='Enter'){event.preventDefault();addObservation();}">
                    <button class="btn btn-secondary btn-sm" onclick="addObservation()">+</button>
                </div>
            </div>

            <div class="form-group" id="relations-section" style="display: none;">
                <label class="form-label">Relations</label>
                <div id="entity-relations" class="list-container"></div>
                <button class="btn btn-secondary btn-sm" onclick="openRelationModal()">+ Ajouter relation</button>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-danger" id="btn-delete-entity" onclick="deleteEntity()" style="display: none;">Supprimer</button>
            <div style="margin-left: auto; display: flex; gap: 0.5rem;">
                <button class="btn btn-secondary" onclick="closeModal()">Annuler</button>
                <button class="btn btn-primary" onclick="saveEntity()">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Ajout Relation -->
<div id="relation-modal" class="modal-overlay">
    <div class="modal" style="max-width: 400px;">
        <div class="modal-header">
            <h2 class="modal-title">Nouvelle relation</h2>
            <button class="modal-close" onclick="closeRelationModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">De</label>
                <input type="text" id="relation-from" class="form-input" readonly style="background: var(--bg-hover); cursor: not-allowed;">
            </div>
            <div class="form-group">
                <label class="form-label">Type de relation</label>
                <select id="relation-type-select" class="form-select"></select>
                <input type="text" id="relation-type-custom" class="form-input" placeholder="Ou saisir un type personnalise..." style="margin-top: 0.5rem;">
            </div>
            <div class="form-group">
                <label class="form-label">Vers</label>
                <select id="relation-to" class="form-select"></select>
            </div>
        </div>
        <div class="modal-footer">
            <div style="margin-left: auto; display: flex; gap: 0.5rem;">
                <button class="btn btn-secondary" onclick="closeRelationModal()">Annuler</button>
                <button class="btn btn-primary" onclick="addRelation()">Ajouter</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let memory = {entities: [], relations: []};
let entityTypes = [];
let relationTypes = [];
let currentEntityName = null;
let isNewEntity = false;
let pendingObservations = [];
let searchTimeout = null;

async function fetchMemory() {
    try {
        const res = await fetch('/api/memory');
        memory = await res.json();
        renderMemory();
    } catch (e) {
        console.error('Erreur memory:', e);
        document.getElementById('entities-list').innerHTML = '<p class="text-muted text-center">Erreur de chargement</p>';
        document.getElementById('relations-list').innerHTML = '<p class="text-muted text-center">Erreur de chargement</p>';
    }
}

async function fetchTypes() {
    try {
        const res = await fetch('/api/memory/types');
        const data = await res.json();
        entityTypes = data.entityTypes || [];
        relationTypes = data.relationTypes || [];
        populateTypeSelects();
    } catch (e) {
        // Fallback
        entityTypes = [
            {id: "personne", icon: "", color: "#f97316"},
            {id: "entreprise", icon: "", color: "#ea580c"},
            {id: "projet", icon: "", color: "#fb923c"},
            {id: "lieu", icon: "", color: "#14b8a6"},
            {id: "concept", icon: "", color: "#6366f1"},
            {id: "autre", icon: "", color: "#6b7280"},
        ];
        relationTypes = ["travaille avec", "travaille chez", "connait", "famille de", "client de", "partenaire de"];
        populateTypeSelects();
    }
}

function populateTypeSelects() {
    const typeSelect = document.getElementById('entity-type');
    typeSelect.innerHTML = entityTypes.map(t =>
        `<option value="${t.id}">${t.id}</option>`
    ).join('');

    const relTypeSelect = document.getElementById('relation-type-select');
    relTypeSelect.innerHTML = '<option value="">-- Choisir un type --</option>' +
        relationTypes.map(t => `<option value="${t}">${t}</option>`).join('');
}

async function searchMemory(query) {
    if (!query) {
        await fetchMemory();
        return;
    }
    try {
        const res = await fetch('/api/memory/search?q=' + encodeURIComponent(query));
        memory = await res.json();
        renderMemory();
    } catch (e) {
        console.error('Erreur search:', e);
    }
}

function debounceSearch() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        const query = document.getElementById('search-input').value.trim();
        searchMemory(query);
    }, 300);
}

function getTypeInfo(typeId) {
    return entityTypes.find(t => t.id === typeId) || {icon: '', color: '#6b7280'};
}

function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str || '';
    return div.innerHTML;
}

function escapeAttr(str) {
    return (str || '').replace(/'/g, "\\'").replace(/"/g, '&quot;');
}

function renderMemory() {
    document.getElementById('entity-count').textContent = memory.entities.length;
    document.getElementById('relation-count').textContent = memory.relations.length;

    const entitiesList = document.getElementById('entities-list');
    if (memory.entities.length === 0) {
        entitiesList.innerHTML = '<div class="empty-state"><p class="text-muted">Aucune entite</p><button class="btn btn-primary" onclick="openNewEntity()">+ Nouvelle entite</button></div>';
    } else {
        entitiesList.innerHTML = memory.entities.map(e => {
            const typeInfo = getTypeInfo(e.entityType);
            return `
                <div class="entity-card" onclick="editEntity('${escapeAttr(e.name)}')">
                    <div class="entity-header">
                        <span class="entity-name">${escapeHtml(e.name)}</span>
                        <span class="entity-type-badge" style="background: ${typeInfo.color}">${e.entityType}</span>
                    </div>
                    <div class="entity-obs-count text-sm text-muted">${e.observations.length} observation(s)</div>
                </div>
            `;
        }).join('');
    }

    const relationsList = document.getElementById('relations-list');
    if (memory.relations.length === 0) {
        relationsList.innerHTML = '<div class="empty-state"><p class="text-muted">Aucune relation</p></div>';
    } else {
        relationsList.innerHTML = memory.relations.map(r => `
            <div class="relation-item">
                <div class="relation-content">
                    <span class="relation-from">${escapeHtml(r.from)}</span>
                    <span class="relation-type">${escapeHtml(r.relationType)}</span>
                    <span class="relation-to">${escapeHtml(r.to)}</span>
                </div>
                <button class="btn btn-ghost btn-sm text-danger" onclick="event.stopPropagation(); deleteRelationFromList('${escapeAttr(r.from)}', '${escapeAttr(r.to)}', '${escapeAttr(r.relationType)}')">&times;</button>
            </div>
        `).join('');
    }
}

function openNewEntity() {
    isNewEntity = true;
    currentEntityName = null;
    pendingObservations = [];

    document.getElementById('modal-title').textContent = 'Nouvelle entite';
    document.getElementById('entity-name').value = '';
    document.getElementById('entity-type').value = entityTypes[0]?.id || 'autre';
    document.getElementById('btn-delete-entity').style.display = 'none';
    document.getElementById('relations-section').style.display = 'none';

    renderObservations();
    document.getElementById('entity-modal').classList.add('open');
    setTimeout(() => document.getElementById('entity-name').focus(), 100);
}

async function editEntity(name) {
    try {
        const res = await fetch(`/api/memory/${encodeURIComponent(name)}`);
        const data = await res.json();

        if (!data.ok) {
            alert('Entite non trouvee');
            return;
        }

        isNewEntity = false;
        currentEntityName = name;
        const entity = data.entity;
        pendingObservations = [...entity.observations];

        document.getElementById('modal-title').textContent = 'Modifier: ' + name;
        document.getElementById('entity-name').value = entity.name;
        document.getElementById('entity-type').value = entity.entityType;
        document.getElementById('btn-delete-entity').style.display = 'block';
        document.getElementById('relations-section').style.display = 'block';

        renderObservations();
        renderEntityRelations(data.relations);

        document.getElementById('entity-modal').classList.add('open');
    } catch (e) {
        console.error('Erreur edit:', e);
        alert('Erreur de chargement');
    }
}

function renderObservations() {
    const container = document.getElementById('observations-container');
    if (pendingObservations.length === 0) {
        container.innerHTML = '<p class="text-muted text-center" style="padding: 0.5rem;">Aucune observation</p>';
    } else {
        container.innerHTML = pendingObservations.map((obs, i) => `
            <div class="list-item">
                <span class="list-item-text">${escapeHtml(obs)}</span>
                <button class="btn btn-ghost btn-sm text-danger" onclick="removeObservation(${i})">&times;</button>
            </div>
        `).join('');
    }
}

function addObservation() {
    const input = document.getElementById('new-observation');
    const obs = input.value.trim();
    if (!obs) return;

    pendingObservations.push(obs);
    renderObservations();
    input.value = '';
    input.focus();
}

function removeObservation(index) {
    pendingObservations.splice(index, 1);
    renderObservations();
}

function renderEntityRelations(relations) {
    const container = document.getElementById('entity-relations');
    if (!relations || relations.length === 0) {
        container.innerHTML = '<p class="text-muted text-center" style="padding: 0.5rem;">Aucune relation</p>';
    } else {
        container.innerHTML = relations.map(r => {
            const direction = r.from === currentEntityName ? 'vers' : 'de';
            const other = r.from === currentEntityName ? r.to : r.from;
            return `
                <div class="list-item">
                    <span class="list-item-text"><strong>${r.relationType}</strong> ${direction} <em>${escapeHtml(other)}</em></span>
                    <button class="btn btn-ghost btn-sm text-danger" onclick="deleteRelationInline('${escapeAttr(r.from)}', '${escapeAttr(r.to)}', '${escapeAttr(r.relationType)}')">&times;</button>
                </div>
            `;
        }).join('');
    }
}

async function saveEntity() {
    const name = document.getElementById('entity-name').value.trim();
    const entityType = document.getElementById('entity-type').value;

    if (!name) {
        alert('Le nom est requis');
        document.getElementById('entity-name').focus();
        return;
    }

    try {
        if (isNewEntity) {
            const res = await apiFetch('/api/memory', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    name: name,
                    entityType: entityType,
                    observations: pendingObservations
                })
            });
            const result = await res.json();
            if (!result.ok) {
                alert('Erreur: ' + (result.error || 'Echec creation'));
                return;
            }
        } else {
            const res = await apiFetch(`/api/memory/${encodeURIComponent(currentEntityName)}`, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    name: name,
                    entityType: entityType
                })
            });
            const result = await res.json();
            if (!result.ok) {
                alert('Erreur: ' + (result.error || 'Echec mise a jour'));
                return;
            }

            // Sync observations
            const entityRes = await fetch(`/api/memory/${encodeURIComponent(name)}`);
            const entityData = await entityRes.json();
            if (entityData.ok) {
                const currentObs = entityData.entity.observations;
                for (const obs of currentObs) {
                    if (!pendingObservations.includes(obs)) {
                        await apiFetch(`/api/memory/${encodeURIComponent(name)}/observations`, {
                            method: 'DELETE',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify({observation: obs})
                        });
                    }
                }
                for (const obs of pendingObservations) {
                    if (!currentObs.includes(obs)) {
                        await apiFetch(`/api/memory/${encodeURIComponent(name)}/observations`, {
                            method: 'POST',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify({observation: obs})
                        });
                    }
                }
            }
        }

        closeModal();
        await fetchMemory();
    } catch (e) {
        console.error('Erreur save:', e);
        alert('Erreur de sauvegarde');
    }
}

async function deleteEntity() {
    if (!currentEntityName) return;
    if (!confirm(`Supprimer "${currentEntityName}" et toutes ses relations ?`)) return;

    try {
        const res = await apiFetch(`/api/memory/${encodeURIComponent(currentEntityName)}`, {
            method: 'DELETE',
        });
        const result = await res.json();

        if (result.ok) {
            closeModal();
            await fetchMemory();
        } else {
            alert('Erreur: ' + (result.error || 'Echec suppression'));
        }
    } catch (e) {
        console.error('Erreur delete:', e);
        alert('Erreur de suppression');
    }
}

async function deleteRelationInline(from, to, relationType) {
    if (!confirm('Supprimer cette relation ?')) return;

    try {
        const res = await apiFetch('/api/memory/relations', {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({from, to, relationType})
        });
        const result = await res.json();

        if (result.ok) {
            await editEntity(currentEntityName);
            await fetchMemory();
        } else {
            alert('Erreur: ' + (result.error || 'Echec suppression'));
        }
    } catch (e) {
        console.error('Erreur delete relation:', e);
    }
}

async function deleteRelationFromList(from, to, relationType) {
    if (!confirm('Supprimer cette relation ?')) return;

    try {
        const res = await apiFetch('/api/memory/relations', {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({from, to, relationType})
        });
        const result = await res.json();

        if (result.ok) {
            await fetchMemory();
        } else {
            alert('Erreur: ' + (result.error || 'Echec suppression'));
        }
    } catch (e) {
        console.error('Erreur delete relation:', e);
    }
}

function openRelationModal() {
    document.getElementById('relation-from').value = currentEntityName;
    document.getElementById('relation-type-select').value = '';
    document.getElementById('relation-type-custom').value = '';

    const toSelect = document.getElementById('relation-to');
    toSelect.innerHTML = '<option value="">-- Choisir une entite --</option>' +
        memory.entities
            .filter(e => e.name !== currentEntityName)
            .map(e => `<option value="${escapeAttr(e.name)}">${escapeHtml(e.name)}</option>`)
            .join('');

    document.getElementById('relation-modal').classList.add('open');
}

function closeRelationModal() {
    document.getElementById('relation-modal').classList.remove('open');
}

async function addRelation() {
    const from = document.getElementById('relation-from').value;
    const to = document.getElementById('relation-to').value;
    let relationType = document.getElementById('relation-type-select').value;

    const custom = document.getElementById('relation-type-custom').value.trim();
    if (custom) relationType = custom;

    if (!to || !relationType) {
        alert('Choisissez une relation et une entite cible');
        return;
    }

    try {
        const res = await apiFetch('/api/memory/relations', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({from, to, relationType})
        });
        const result = await res.json();

        if (result.ok) {
            closeRelationModal();
            await editEntity(currentEntityName);
            await fetchMemory();
        } else {
            alert('Erreur: ' + (result.error || 'Echec creation'));
        }
    } catch (e) {
        console.error('Erreur add relation:', e);
        alert('Erreur de creation');
    }
}

function closeModal() {
    document.getElementById('entity-modal').classList.remove('open');
    currentEntityName = null;
    isNewEntity = false;
    pendingObservations = [];
}

// Close modals on escape
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
        if (document.getElementById('relation-modal').classList.contains('open')) {
            closeRelationModal();
        } else if (document.getElementById('entity-modal').classList.contains('open')) {
            closeModal();
        }
    }
});

// Close modals on background click
document.getElementById('entity-modal').addEventListener('click', e => {
    if (e.target.classList.contains('modal-overlay')) closeModal();
});
document.getElementById('relation-modal').addEventListener('click', e => {
    if (e.target.classList.contains('modal-overlay')) closeRelationModal();
});

// Load memory file location
async function loadLocation() {
    try {
        const res = await fetch('/api/memory/location');
        const data = await res.json();
        const el = document.getElementById('memory-location');
        el.innerHTML = `<a href="#" onclick="copyPath('${data.path}'); return false;" title="Cliquer pour copier le chemin">📁 ${data.path}</a>`;
    } catch (e) {
        console.error('Erreur location:', e);
    }
}

function copyPath(path) {
    navigator.clipboard.writeText(path);
    const el = document.getElementById('memory-location');
    const orig = el.innerHTML;
    el.innerHTML = '<span class="text-success">Chemin copie!</span>';
    setTimeout(() => { el.innerHTML = orig; }, 1500);
}

// Init
fetchTypes().then(() => fetchMemory());
loadLocation();
</script>
{% endblock %}