// Orchard Web UI

const API_BASE = '/api/v1';

// State
let currentGrove = null;
let currentTree = null;

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    setupNavigation();
    loadGroves();
});

// Navigation
function setupNavigation() {
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const view = link.dataset.view;
            showView(view);

            document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
            link.classList.add('active');
        });
    });
}

function showView(viewName) {
    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
    document.getElementById(`${viewName}-view`).classList.add('active');

    // Load data for view
    if (viewName === 'groves') {
        loadGroves();
    } else if (viewName === 'upload') {
        loadGrovesForUpload();
    }
}

// Groves
async function loadGroves() {
    const container = document.getElementById('groves-list');
    container.innerHTML = '<div class="loading">Loading groves...</div>';

    try {
        const response = await fetch(`${API_BASE}/groves`);
        const groves = await response.json();

        if (!groves || groves.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <h3>No groves yet</h3>
                    <p>Create your first grove to get started</p>
                </div>
            `;
            return;
        }

        container.innerHTML = groves.map(grove => `
            <div class="grove-card" onclick="viewGrove('${grove.name}')">
                <h3>
                    <span>&#127795;</span>
                    ${escapeHtml(grove.name)}
                    <span class="badge ${grove.is_public ? 'badge-public' : 'badge-private'}">
                        ${grove.is_public ? 'Public' : 'Private'}
                    </span>
                </h3>
                <p>${escapeHtml(grove.description || 'No description')}</p>
                <div class="meta">
                    Created ${formatDate(grove.created_at)}
                </div>
            </div>
        `).join('');
    } catch (error) {
        container.innerHTML = `<div class="empty-state"><p>Error loading groves: ${error.message}</p></div>`;
    }
}

async function viewGrove(groveName) {
    currentGrove = groveName;
    document.getElementById('grove-detail-title').textContent = groveName;

    // Load grove info
    try {
        const response = await fetch(`${API_BASE}/groves/${groveName}`);
        const grove = await response.json();

        document.getElementById('grove-info').innerHTML = `
            <div class="info-grid">
                <div class="info-item">
                    <label>Name</label>
                    <span>${escapeHtml(grove.name)}</span>
                </div>
                <div class="info-item">
                    <label>Visibility</label>
                    <span class="badge ${grove.is_public ? 'badge-public' : 'badge-private'}">
                        ${grove.is_public ? 'Public' : 'Private'}
                    </span>
                </div>
                <div class="info-item">
                    <label>Created</label>
                    <span>${formatDate(grove.created_at)}</span>
                </div>
                <div class="info-item">
                    <label>Description</label>
                    <span>${escapeHtml(grove.description || 'No description')}</span>
                </div>
            </div>
        `;
    } catch (error) {
        console.error('Error loading grove:', error);
    }

    // Load trees
    await loadTrees(groveName);

    // Show view
    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
    document.getElementById('grove-detail-view').classList.add('active');
}

async function loadTrees(groveName) {
    const container = document.getElementById('trees-list');
    container.innerHTML = '<div class="loading">Loading trees...</div>';

    try {
        const response = await fetch(`${API_BASE}/grove/${groveName}/trees`);
        const trees = await response.json();

        if (!trees || trees.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <h3>No trees yet</h3>
                    <p>Create a tree to store artifacts</p>
                </div>
            `;
            return;
        }

        container.innerHTML = trees.map(tree => `
            <div class="tree-card" onclick="viewTree('${groveName}', '${tree.name}')">
                <h3>
                    <span>&#127794;</span>
                    ${escapeHtml(tree.name)}
                </h3>
                <p>${escapeHtml(tree.description || 'No description')}</p>
                <div class="meta">
                    Created ${formatDate(tree.created_at)}
                </div>
            </div>
        `).join('');
    } catch (error) {
        container.innerHTML = `<div class="empty-state"><p>Error loading trees: ${error.message}</p></div>`;
    }
}

async function viewTree(groveName, treeName) {
    currentGrove = groveName;
    currentTree = treeName;

    document.getElementById('tree-detail-title').textContent = `${groveName} / ${treeName}`;

    document.getElementById('tree-info').innerHTML = `
        <div class="info-grid">
            <div class="info-item">
                <label>Grove</label>
                <span>${escapeHtml(groveName)}</span>
            </div>
            <div class="info-item">
                <label>Tree</label>
                <span>${escapeHtml(treeName)}</span>
            </div>
        </div>
    `;

    // Load grafts
    await loadGrafts(groveName, treeName);

    // Show view
    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
    document.getElementById('tree-detail-view').classList.add('active');
}

async function loadGrafts(groveName, treeName) {
    const container = document.getElementById('grafts-list');
    container.innerHTML = '<div class="loading">Loading versions...</div>';

    try {
        const response = await fetch(`${API_BASE}/grove/${groveName}/${treeName}/grafts`);
        const grafts = await response.json();

        if (!grafts || grafts.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <h3>No versions yet</h3>
                    <p>Upload an artifact to create the first version</p>
                </div>
            `;
            return;
        }

        container.innerHTML = `
            <table>
                <thead>
                    <tr>
                        <th>Tag</th>
                        <th>Fruit ID</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${grafts.map(graft => `
                        <tr>
                            <td><strong>${escapeHtml(graft.name)}</strong></td>
                            <td>
                                <span class="hash hash-short" onclick="copyToClipboard('${graft.fruit_id}')" title="Click to copy">
                                    ${graft.fruit_id.substring(0, 16)}...
                                </span>
                            </td>
                            <td>${formatDate(graft.created_at)}</td>
                            <td>
                                <a href="/api/v1/grove/${groveName}/${treeName}/+/${graft.name}"
                                   class="btn btn-secondary" download>
                                    Download
                                </a>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    } catch (error) {
        container.innerHTML = `<div class="empty-state"><p>Error loading versions: ${error.message}</p></div>`;
    }
}

function backToGrove() {
    if (currentGrove) {
        viewGrove(currentGrove);
    } else {
        showView('groves');
    }
}

// Create Grove
function showCreateGroveModal() {
    document.getElementById('create-grove-modal').classList.remove('hidden');
    document.getElementById('grove-name').focus();
}

async function createGrove(e) {
    e.preventDefault();

    const name = document.getElementById('grove-name').value;
    const description = document.getElementById('grove-description').value;
    const isPublic = document.getElementById('grove-public').checked;

    try {
        const response = await fetch(`${API_BASE}/groves`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, description, is_public: isPublic })
        });

        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error || 'Failed to create grove');
        }

        showToast('Grove created successfully!', 'success');
        closeModals();
        loadGroves();

        // Reset form
        document.getElementById('grove-name').value = '';
        document.getElementById('grove-description').value = '';
        document.getElementById('grove-public').checked = true;
    } catch (error) {
        showToast(error.message, 'error');
    }
}

// Create Tree
function showCreateTreeModal() {
    document.getElementById('create-tree-modal').classList.remove('hidden');
    document.getElementById('tree-name').focus();
}

async function createTree(e) {
    e.preventDefault();

    const name = document.getElementById('tree-name').value;
    const description = document.getElementById('tree-description').value;

    try {
        const response = await fetch(`${API_BASE}/grove/${currentGrove}/trees`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, description })
        });

        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error || 'Failed to create tree');
        }

        showToast('Tree created successfully!', 'success');
        closeModals();
        loadTrees(currentGrove);

        // Reset form
        document.getElementById('tree-name').value = '';
        document.getElementById('tree-description').value = '';
    } catch (error) {
        showToast(error.message, 'error');
    }
}

// Upload
async function loadGrovesForUpload() {
    const select = document.getElementById('upload-grove');
    select.innerHTML = '<option value="">Loading...</option>';

    try {
        const response = await fetch(`${API_BASE}/groves`);
        const groves = await response.json();

        select.innerHTML = '<option value="">Select grove...</option>' +
            (groves || []).map(g => `<option value="${g.name}">${g.name}</option>`).join('');
    } catch (error) {
        select.innerHTML = '<option value="">Error loading groves</option>';
    }
}

async function loadTreesForUpload() {
    const groveName = document.getElementById('upload-grove').value;
    const select = document.getElementById('upload-tree');

    if (!groveName) {
        select.innerHTML = '<option value="">Select tree...</option>';
        return;
    }

    select.innerHTML = '<option value="">Loading...</option>';

    try {
        const response = await fetch(`${API_BASE}/grove/${groveName}/trees`);
        const trees = await response.json();

        select.innerHTML = '<option value="">Select tree...</option>' +
            (trees || []).map(t => `<option value="${t.name}">${t.name}</option>`).join('');
    } catch (error) {
        select.innerHTML = '<option value="">Error loading trees</option>';
    }
}

function updateFileName() {
    const input = document.getElementById('upload-file');
    const display = document.getElementById('file-name');
    display.textContent = input.files[0]?.name || '';
}

async function uploadArtifact(e) {
    e.preventDefault();

    const grove = document.getElementById('upload-grove').value;
    const tree = document.getElementById('upload-tree').value;
    const file = document.getElementById('upload-file').files[0];
    const tag = document.getElementById('upload-tag').value;

    const formData = new FormData();
    formData.append('file', file);
    if (tag) formData.append('tag', tag);

    const resultDiv = document.getElementById('upload-result');
    resultDiv.innerHTML = '<div class="loading">Uploading...</div>';
    resultDiv.classList.remove('hidden', 'success', 'error');

    try {
        const response = await fetch(`${API_BASE}/grove/${grove}/${tree}/cultivate`, {
            method: 'POST',
            body: formData
        });

        const result = await response.json();

        if (!response.ok) {
            throw new Error(result.error || 'Upload failed');
        }

        resultDiv.classList.add('success');
        resultDiv.innerHTML = `
            <h3>Upload Successful!</h3>
            <dl>
                <dt>Fruit ID</dt>
                <dd class="hash">${result.fruit_id}</dd>
                <dt>Size</dt>
                <dd>${formatBytes(result.size)}</dd>
                <dt>Grove</dt>
                <dd>${escapeHtml(result.grove)}</dd>
                <dt>Tree</dt>
                <dd>${escapeHtml(result.tree)}</dd>
                ${result.tag ? `<dt>Tag</dt><dd>${escapeHtml(result.tag)}</dd>` : ''}
            </dl>
            <div class="actions">
                <a href="/api/v1/grove/${grove}/${tree}/+/${result.tag || 'fruit:' + result.fruit_id}"
                   class="btn btn-primary" download>
                    Download Artifact
                </a>
            </div>
        `;

        showToast('Artifact uploaded successfully!', 'success');
    } catch (error) {
        resultDiv.classList.add('error');
        resultDiv.innerHTML = `<h3>Upload Failed</h3><p>${escapeHtml(error.message)}</p>`;
        showToast(error.message, 'error');
    }
}

async function uploadToTree(e) {
    e.preventDefault();

    const file = document.getElementById('tree-upload-file').files[0];
    const tag = document.getElementById('tree-upload-tag').value;

    const formData = new FormData();
    formData.append('file', file);
    if (tag) formData.append('tag', tag);

    try {
        const response = await fetch(`${API_BASE}/grove/${currentGrove}/${currentTree}/cultivate`, {
            method: 'POST',
            body: formData
        });

        const result = await response.json();

        if (!response.ok) {
            throw new Error(result.error || 'Upload failed');
        }

        showToast('Artifact uploaded successfully!', 'success');

        // Reload grafts
        loadGrafts(currentGrove, currentTree);

        // Reset form
        document.getElementById('tree-upload-file').value = '';
        document.getElementById('tree-upload-tag').value = '';
    } catch (error) {
        showToast(error.message, 'error');
    }
}

// Search
function handleSearchKeyup(e) {
    if (e.key === 'Enter') {
        searchFruit();
    }
}

async function searchFruit() {
    const fruitId = document.getElementById('search-input').value.trim();
    const resultDiv = document.getElementById('search-result');

    if (!fruitId) {
        showToast('Please enter a fruit ID', 'error');
        return;
    }

    resultDiv.innerHTML = '<div class="loading">Searching...</div>';
    resultDiv.classList.remove('hidden', 'success', 'error');

    try {
        const response = await fetch(`${API_BASE}/fruit/${fruitId}`);
        const result = await response.json();

        if (!response.ok) {
            throw new Error(result.error || 'Fruit not found');
        }

        resultDiv.classList.add('success');
        resultDiv.innerHTML = `
            <h3>Fruit Found</h3>
            <dl>
                <dt>Fruit ID</dt>
                <dd class="hash">${result.id}</dd>
                <dt>Original Name</dt>
                <dd>${escapeHtml(result.original_name || 'Unknown')}</dd>
                <dt>Size</dt>
                <dd>${formatBytes(result.size)}</dd>
                <dt>Content Type</dt>
                <dd>${escapeHtml(result.content_type || 'Unknown')}</dd>
                <dt>Created</dt>
                <dd>${formatDate(result.created_at)}</dd>
                <dt>Reference Count</dt>
                <dd>${result.ref_count}</dd>
            </dl>
        `;
    } catch (error) {
        resultDiv.classList.add('error');
        resultDiv.innerHTML = `<h3>Not Found</h3><p>${escapeHtml(error.message)}</p>`;
    }
}

// Modals
function closeModals() {
    document.querySelectorAll('.modal').forEach(m => m.classList.add('hidden'));
}

// Close modal on outside click
document.addEventListener('click', (e) => {
    if (e.target.classList.contains('modal')) {
        closeModals();
    }
});

// Close modal on Escape
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        closeModals();
    }
});

// Toast notifications
function showToast(message, type = 'info') {
    const container = document.getElementById('toast-container');
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    container.appendChild(toast);

    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// Utilities
function escapeHtml(str) {
    if (!str) return '';
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

function formatDate(dateStr) {
    if (!dateStr) return 'Unknown';
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showToast('Copied to clipboard!', 'success');
    });
}