{% extends "base.html" %}
{% block title %}{{ p.titel }}{% endblock %}
{% block content %}

<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>{{ p.titel }}</h1>
    <div>
        <a href="{{ url_for('profil.projekte_liste') }}" class="btn btn-secondary">Meine Projekte</a>
        <a href="{{ url_for('profil.cockpit') }}" class="btn btn-secondary">Cockpit</a>
    </div>
</div>

{# ============== Lineage-Banner: Vorlage + Wiederholungen ============== #}
{% if vorlage %}
<div class="card" style="background: var(--info-bg); border-left: 4px solid var(--primary); margin-bottom: 0.8rem;">
    <strong>🔗 Vorlage:</strong>
    <a href="{{ url_for('profil.projekt_detail', projekt_id=vorlage.id) }}">{{ vorlage.titel }}</a>
    von {{ tier_emoji(vorlage.tier or '') }} {{ vorlage.vorname or '—' }}
    <div style="font-size: 0.85rem; margin-top: 0.3rem; color: var(--text-light);">
        Du machst dein eigenes Projekt — die Vorlage ist nur Inspiration. Eigener Twist erwuenscht!
    </div>
</div>
{% endif %}

{% if wiederholungen %}
<div class="card" style="background: var(--success-bg); border-left: 4px solid var(--success); margin-bottom: 0.8rem;">
    <strong>🔁 Wurde wiederholt von:</strong>
    {% for w in wiederholungen %}
        {{ tier_emoji(w.tier or '') }}
        <a href="{{ url_for('profil.projekt_detail', projekt_id=w.id) }}">{{ w.vorname or '—' }}</a>{% if not loop.last %}, {% endif %}
    {% endfor %}
</div>
{% endif %}

{# ============== Status-Zeile ============== #}
<div style="margin-bottom: 1rem;">
    {% if p.status_lebenszyklus == 'in_arbeit' %}
        <span class="badge badge-mittel">🔧 in Arbeit</span>
    {% else %}
        <span class="badge badge-anfaenger">✅ abgeschlossen</span>
        {% if p.selbsteinschaetzung == 'zufrieden' %}<span class="badge badge-anfaenger">🟢 zufrieden</span>
        {% elif p.selbsteinschaetzung == 'mittel' %}<span class="badge badge-mittel">🟡 mittel</span>
        {% elif p.selbsteinschaetzung == 'gelernt' %}<span class="badge badge-fortgeschritten">🔴 gelernt</span>
        {% endif %}
        {% if p.freigabe_status == 'wartet_auf_freigabe' %}<span class="badge badge-mittel">⏳ wartet auf Freigabe</span>
        {% elif p.freigabe_status == 'rueckfrage' %}<span class="badge badge-fortgeschritten">❓ Rueckfrage offen</span>
        {% elif p.freigabe_status == 'freigegeben' %}<span class="badge badge-anfaenger">✓ freigegeben</span>
        {% endif %}
    {% endif %}
</div>

<div style="display: grid; grid-template-columns: 280px 1fr; gap: 1rem;">

    {# ============== Cover-Bild ============== #}
    <div class="card" style="text-align: center;">
        {% if p.hat_cover %}
            <img src="{{ url_for('api.projekt_cover', projekt_id=p.id) }}" alt=""
                 style="width: 100%; max-height: 240px; object-fit: cover; border-radius: 6px;">
        {% else %}
            <div style="height: 200px; background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover)); border-radius: 6px;
                        display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-light);">
                🎯
            </div>
        {% endif %}
        <div style="margin-top: 0.6rem; display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap;">
            <a href="{{ url_for('profil.projekt_cover', projekt_id=p.id) }}" class="btn btn-secondary" style="font-size: 0.85rem;">
                {% if p.hat_cover %}Bild aendern{% else %}Bild hinzufuegen{% endif %}
            </a>
            {% if p.hat_cover %}
            <form method="post" action="{{ url_for('profil.projekt_cover_loeschen', projekt_id=p.id) }}" style="display:inline;"
                  onsubmit="return confirm('Cover-Bild loeschen?')">
                <button class="btn btn-secondary" style="font-size: 0.85rem; color: var(--danger);">loeschen</button>
            </form>
            {% endif %}
        </div>
    </div>

    {# ============== Beschreibung + Eval ============== #}
    <div>
        <div class="card">
            <h2>Beschreibung</h2>
            {% if p.beschreibung_md %}
                <div>{{ p.beschreibung_md|markdown }}</div>
            {% else %}
                <p style="color: var(--text-light);"><em>Noch keine Beschreibung.</em></p>
            {% endif %}
            {% if p.status_lebenszyklus == 'in_arbeit' %}
            <div style="margin-top: 1rem;">
                <a href="{{ url_for('profil.projekt_bearbeiten', projekt_id=p.id) }}" class="btn btn-secondary" style="font-size: 0.85rem;">
                    bearbeiten
                </a>
            </div>
            {% endif %}
        </div>

        {% if p.status_lebenszyklus == 'abgeschlossen' %}
        <div class="card">
            <h2>Deine Bewertung</h2>
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem;">
                <div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
                    <div style="font-size: 0.75rem; color: var(--text-light);">Gesamt</div>
                    <div style="font-size: 1.4rem; margin-top: 0.2rem;">
                        {% if p.selbsteinschaetzung == 'zufrieden' %}🟢
                        {% elif p.selbsteinschaetzung == 'mittel' %}🟡
                        {% elif p.selbsteinschaetzung == 'gelernt' %}🔴
                        {% endif %}
                    </div>
                    <div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung or '—' }}</div>
                </div>
                <div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
                    <div style="font-size: 0.75rem; color: var(--text-light);">Planung</div>
                    <div style="font-size: 1.4rem; margin-top: 0.2rem;">
                        {% if p.selbsteinschaetzung_planung == 'gut' %}🟢
                        {% elif p.selbsteinschaetzung_planung == 'ok' %}🟡
                        {% elif p.selbsteinschaetzung_planung == 'schwierig' %}🔴
                        {% else %}—{% endif %}
                    </div>
                    <div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung_planung or '—' }}</div>
                </div>
                <div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
                    <div style="font-size: 0.75rem; color: var(--text-light);">Ausfuehrung</div>
                    <div style="font-size: 1.4rem; margin-top: 0.2rem;">
                        {% if p.selbsteinschaetzung_ausfuehrung == 'gut' %}🟢
                        {% elif p.selbsteinschaetzung_ausfuehrung == 'ok' %}🟡
                        {% elif p.selbsteinschaetzung_ausfuehrung == 'schwierig' %}🔴
                        {% else %}—{% endif %}
                    </div>
                    <div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung_ausfuehrung or '—' }}</div>
                </div>
            </div>
            {% if p.was_gelernt %}
            <div style="margin-bottom: 0.6rem;">
                <strong>Was gelernt:</strong>
                <div style="margin-top: 0.2rem;">{{ p.was_gelernt }}</div>
            </div>
            {% endif %}
            {% if p.was_klappte_nicht %}
            <div>
                <strong>Was nicht klappte:</strong>
                <div style="margin-top: 0.2rem;">{{ p.was_klappte_nicht }}</div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        {# ============== Werkstatt (nur waehrend in_arbeit) ============== #}
        {% if p.status_lebenszyklus == 'in_arbeit' %}
        <div class="card" style="border-top: 4px solid var(--primary);">
            <h2>🔧 Werkstatt</h2>
            <p style="color: var(--text-light); font-size: 0.9rem;">
                Hier alles zum Projekt — Beschreibung, Software, Drucker, MakerWorld-Link und Dateien.
            </p>
            <form method="post" action="{{ url_for('profil.projekt_werkstatt_speichern', projekt_id=p.id) }}"
                  style="display: grid; gap: 0.8rem;">
                <div>
                    <label style="display:block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">Titel *</label>
                    <input type="text" name="titel" required maxlength="100" value="{{ p.titel }}"
                           style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                </div>
                <div>
                    <label style="display:block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">Beschreibung</label>
                    <textarea name="beschreibung_md" rows="5" maxlength="2000"
                              style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-family: inherit;">{{ p.beschreibung_md or '' }}</textarea>
                    <div style="font-size: 0.75rem; color: var(--text-light); margin-top: 0.2rem;">
                        Markdown: **fett**, *kursiv*, Listen mit -.
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
                    <div>
                        <label style="display:block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">
                            Hauptsoftware
                        </label>
                        <select name="modellier_software_slug"
                                style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                            <option value="">— noch nicht festgelegt —</option>
                            {% for s in software_liste %}
                            <option value="{{ s.slug }}" {% if p.modellier_software_slug == s.slug %}selected{% endif %}>
                                {{ s.titel }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label style="display:block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">
                            Drucker
                        </label>
                        <select name="drucker_id_used"
                                style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                            <option value="">— noch nicht festgelegt —</option>
                            {% for d in drucker_liste %}
                            <option value="{{ d.id }}" {% if p.drucker_id_used == d.id %}selected{% endif %}>
                                {{ d.name }} ({{ d.modell }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div>
                    <label style="display:block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">
                        MakerWorld-Link <span style="font-weight: normal;">(optional, wenn du dein Projekt dort veroeffentlicht hast)</span>
                    </label>
                    <input type="url" name="makerworld_url" value="{{ p.makerworld_url or '' }}"
                           placeholder="https://makerworld.com/en/models/..."
                           style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                </div>
                <div style="display: flex; justify-content: flex-end;">
                    <button class="btn btn-primary">Werkstatt speichern</button>
                </div>
            </form>

            {# ============== Dateien-Bereich ============== #}
            <h3 style="margin-top: 1.5rem;">Dateien</h3>
            <p style="color: var(--text-light); font-size: 0.85rem;">
                STL, 3MF, Fotos. Mindestens eine Datei + ein Cover-Bild sind noetig, um das Projekt abzuschliessen.
            </p>

            {% if dateien %}
            <table style="margin-top: 0.5rem;">
                <thead>
                    <tr><th>Datei / Link</th><th>Typ</th><th>Groesse</th><th></th></tr>
                </thead>
                <tbody id="dateien-tbody">
                    {% for d in dateien %}
                    <tr>
                        <td>
                            {% if d.extern_url %}
                                🔗 <a href="{{ d.extern_url }}" target="_blank" rel="noopener noreferrer">{{ d.dateiname }} ↗</a>
                            {% else %}
                                📎 <a href="{{ url_for('api.projekt_datei_download', projekt_id=p.id, datei_id=d.id) }}">{{ d.dateiname }}</a>
                            {% endif %}
                        </td>
                        <td><span class="badge">{{ d.art }}</span></td>
                        <td style="font-size: 0.85rem; color: var(--text-light);">
                            {% if d.extern_url %}—{% else %}{{ (d.groesse_bytes // 1024) if d.groesse_bytes else 0 }} KB{% endif %}
                        </td>
                        <td>
                            <form method="post" action="{{ url_for('profil.projekt_datei_loeschen', projekt_id=p.id, datei_id=d.id) }}" style="display:inline;"
                                  onsubmit="return confirm('{{ d.dateiname }} entfernen?')">
                                <button class="btn btn-secondary" style="padding: 0.2rem 0.5rem; font-size: 0.8rem; color: var(--danger);">entfernen</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: var(--text-light); margin-top: 0.5rem;">
                <em>Noch keine Dateien oder Links.</em>
            </p>
            {% endif %}

            {# Upload-Zone #}
            <div id="upload-zone" style="margin-top: 1rem; border: 3px dashed var(--border); border-radius: 8px;
                                          padding: 1.5rem; text-align: center; cursor: pointer; background: var(--surface-soft);">
                <div style="font-size: 1.1rem; color: var(--text-light);">📁 Dateien hier ablegen</div>
                <div style="font-size: 0.85rem; color: var(--text-light); margin-top: 0.3rem;">
                    oder klicken — STL, 3MF, JPG, PNG · max. 60 MB pro Datei
                </div>
                <input type="file" id="datei-input" multiple
                       accept=".stl,.3mf,image/jpeg,image/png,image/webp"
                       style="display: none;">
                <div id="upload-status" style="margin-top: 0.5rem; font-size: 0.85rem;"></div>
            </div>

            {# Link statt Upload #}
            <form method="post" action="{{ url_for('profil.projekt_link_hinzufuegen', projekt_id=p.id) }}"
                  style="margin-top: 0.8rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end;">
                <div style="flex: 1; min-width: 140px;">
                    <label style="display:block; font-size: 0.8rem; color: var(--text-light);">Oder Link statt Datei — Name</label>
                    <input type="text" name="dateiname" maxlength="120" placeholder="z.B. Modell auf GitHub"
                           style="padding: 0.4rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                </div>
                <div style="flex: 2; min-width: 200px;">
                    <label style="display:block; font-size: 0.8rem; color: var(--text-light);">URL</label>
                    <input type="url" name="extern_url" placeholder="https://..."
                           style="padding: 0.4rem; width: 100%; border: 1px solid var(--border); border-radius: 4px;">
                </div>
                <button class="btn btn-secondary" style="font-size: 0.85rem;">🔗 Link hinzufuegen</button>
            </form>
        </div>
        {% endif %}

        {# ============== Aktionen ============== #}
        <div class="card">
            {% if p.status_lebenszyklus == 'in_arbeit' %}
            <h2>Naechster Schritt</h2>
            <div style="display: flex; gap: 0.6rem; flex-wrap: wrap;">
                <a href="{{ url_for('profil.projekt_cover', projekt_id=p.id) }}" class="btn btn-secondary">
                    📷 {% if p.hat_cover %}Cover aendern{% else %}Cover-Bild hinzufuegen{% endif %}
                </a>
                {% if darf_abschliessen %}
                <a href="{{ url_for('profil.projekt_abschluss', projekt_id=p.id) }}" class="btn btn-primary">
                    ✅ Projekt abschliessen
                </a>
                {% else %}
                <button class="btn btn-secondary" disabled title="{{ abschluss_fehlende|join(' · ') }}"
                        style="opacity: 0.5; cursor: not-allowed;">
                    ✅ Projekt abschliessen
                </button>
                {% endif %}
            </div>
            {% if not darf_abschliessen %}
            <div style="margin-top: 0.6rem; background: var(--warn-bg); padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.85rem;">
                <strong>Noch nicht abschliessbar:</strong>
                <ul style="margin: 0.3rem 0 0 1.2rem; padding: 0;">
                    {% for f in abschluss_fehlende %}<li>{{ f }}</li>{% endfor %}
                </ul>
            </div>
            {% endif %}
            {% elif p.freigabe_status == 'wartet_auf_freigabe' %}
            <div style="background: var(--warn-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--warning);">
                <strong>Wartet auf Freigabe vom Lehrer.</strong>
                Sobald er drueber geschaut hat, kannst du ein neues Projekt anfangen.
            </div>
            {% elif p.freigabe_status == 'rueckfrage' %}
            <div style="background: var(--error-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--danger);">
                <strong>Lehrer hat eine Rueckfrage.</strong>
                Schau ins Cockpit fuer die Details und beantworte sie.
            </div>
            {% else %}
            <div style="background: var(--success-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--success);">
                <strong>Freigegeben.</strong>
                {% if p.freigegeben_am %}Am {{ p.freigegeben_am[:10] }}.{% endif %}
                Du kannst jetzt ein neues Projekt anfangen.
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{# Upload-JS nur wenn Werkstatt sichtbar ist (also in_arbeit). #}
{% if p.status_lebenszyklus == 'in_arbeit' %}
<script>
(function() {
    var zone = document.getElementById('upload-zone');
    var input = document.getElementById('datei-input');
    var status = document.getElementById('upload-status');
    if (!zone || !input) return;

    var MAX_BYTES = 30 * 1024 * 1024;

    zone.addEventListener('click', function(e) {
        if (e.target === input) return;
        input.click();
    });
    zone.addEventListener('dragover', function(e) {
        e.preventDefault();
        zone.style.borderColor = 'var(--primary)';
        zone.style.background = 'var(--info-bg)';
    });
    zone.addEventListener('dragleave', function() {
        zone.style.borderColor = 'var(--border)';
        zone.style.background = 'var(--surface-soft)';
    });
    zone.addEventListener('drop', function(e) {
        e.preventDefault();
        zone.style.borderColor = 'var(--border)';
        zone.style.background = 'var(--surface-soft)';
        if (e.dataTransfer.files && e.dataTransfer.files.length) {
            dateienHochladen(e.dataTransfer.files);
        }
    });
    input.addEventListener('change', function() {
        if (this.files && this.files.length) dateienHochladen(this.files);
        this.value = '';
    });

    async function dateienHochladen(fileList) {
        var files = Array.from(fileList);
        var fehler = 0;
        for (var i = 0; i < files.length; i++) {
            var f = files[i];
            status.textContent = 'Lade ' + (i+1) + '/' + files.length + ': ' + f.name + ' ...';
            status.style.color = 'var(--text-light)';
            if (f.size > MAX_BYTES) {
                status.textContent = 'Zu gross: ' + f.name + ' (' + Math.round(f.size/1024/1024) + ' MB)';
                status.style.color = 'var(--danger)';
                fehler++;
                continue;
            }
            try {
                var dataUrl = await readAsDataUrl(f);
                var resp = await fetch('{{ url_for("profil.projekt_datei_upload", projekt_id=p.id) }}', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        dateiname: f.name,
                        mime: f.type || 'application/octet-stream',
                        base64: dataUrl
                    })
                });
                var json = await resp.json();
                if (!json.ok) {
                    status.textContent = 'Fehler bei ' + f.name + ': ' + (json.error || 'unbekannt');
                    status.style.color = 'var(--danger)';
                    fehler++;
                }
            } catch (err) {
                status.textContent = 'Fehler bei ' + f.name + ': ' + err;
                status.style.color = 'var(--danger)';
                fehler++;
            }
        }
        if (fehler === 0) {
            status.textContent = files.length + ' Datei(en) hochgeladen — Seite wird neu geladen ...';
            status.style.color = 'var(--success)';
            setTimeout(function() { location.reload(); }, 600);
        }
    }

    function readAsDataUrl(file) {
        return new Promise(function(resolve, reject) {
            var reader = new FileReader();
            reader.onload = function() { resolve(reader.result); };
            reader.onerror = function() { reject(reader.error); };
            reader.readAsDataURL(file);
        });
    }
})();
</script>
{% endif %}
{% endblock %}