'use strict';

var Tutorials = {
    render: function(params) {
        var el = document.getElementById('content');
        if (params[0]) { this.renderSingle(el, params[0]); return; }
        el.textContent = 'Lade Tutorials...';
        var self = this;
        API.get('/tutorials').then(function(data) { self.renderList(el, data.tutorials); })
            .catch(function(e) { el.textContent = e.message; });
    },

    renderList: function(el, tutorials) {
        var done = tutorials.filter(function(t) { return t.completed; }).length;
        var h = '<div class="page-header"><h1>Tutorials</h1><p>' + done + '/' + tutorials.length + ' abgeschlossen</p></div>';
        h += '<div class="tutorial-list">';
        tutorials.forEach(function(t, i) {
            h += '<div class="tutorial-item" data-slug="' + t.slug + '">';
            h += '<div class="tut-number">' + String(i + 1).padStart(2, '0') + '</div><div>';
            h += '<div class="tut-title">' + Markdown.esc(t.title) + '</div>';
            h += '<div class="tut-info">' + (t.duration_min ? 'ca. ' + t.duration_min + ' Min' : '');
            if (t.description) h += ' &mdash; ' + Markdown.esc(t.description);
            h += '</div></div>';
            if (t.completed) h += '<div class="tut-check">&#10003;</div>';
            h += '</div>';
        });
        h += '</div>';
        el.innerHTML = h;
        el.querySelectorAll('.tutorial-item').forEach(function(item) {
            item.addEventListener('click', function() { location.hash = '#/tutorials/' + item.dataset.slug; });
        });
    },

    renderSingle: function(el, slug) {
        el.textContent = 'Lade Tutorial...';
        var self = this;
        API.get('/tutorials/' + slug).then(function(data) {
            var t = data.tutorial;
            var h = '<a href="#/tutorials" class="back-link">&larr; Zurueck zu Tutorials</a>';
            h += '<div class="tutorial-content">' + Markdown.render(t.content_md) + '</div><br>';
            h += '<div style="text-align:center;">';
            if (t.completed) {
                h += '<p style="color:var(--green)">&#10003; Abgeschlossen</p>';
            } else {
                h += '<button class="btn btn-green" id="complete-btn">Als abgeschlossen markieren</button>';
            }
            h += '</div>';
            el.innerHTML = h;
            var btn = document.getElementById('complete-btn');
            if (btn) btn.addEventListener('click', function() { self.complete(slug); });
        }).catch(function(e) { el.textContent = e.message; });
    },

    complete: function(slug) {
        var self = this;
        API.post('/tutorials/' + slug + '/complete').then(function() {
            self.renderSingle(document.getElementById('content'), slug);
        }).catch(function(e) { alert('Fehler: ' + e.message); });
    }
};