{% extends "base.html" %}

{% block content %}
<div class="container-fluid studio-page">

    <div class="studio-page-header">
        <h1 class="studio-page-title">Diagram Studio</h1>
        <p class="studio-page-subtitle">Generate a technical diagram as portable Mermaid (.mmd) and draw.io (.drawio) sources — editable in diagrams.net, VS Code, and the Mermaid Live Editor, and exportable to JPEG/PDF. SVG/PNG/PDF are rendered natively when the renderer is installed.</p>
    </div>

    <div class="studio-grid">

        <!-- Configuration panel -->
        <section class="studio-panel" aria-labelledby="diagram-config-title">
            <div class="studio-panel-header">
                <h5 id="diagram-config-title">Diagram Configuration</h5>
            </div>
            <div class="studio-panel-body">
                {% set p = prefill or {} %}
                <form id="diagram-form">
                    <div class="form-group">
                        <label for="title" class="font-weight-bold">Title</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="e.g. Login Sequence" required value="{{ p.title or '' }}">
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="diagram_type" class="font-weight-bold">Diagram Type</label>
                            <select class="form-control" id="diagram_type" name="diagram_type">
                                <option value="flowchart" {% if p.diagram_type == 'flowchart' %}selected{% endif %}>Flowchart / Process</option>
                                <option value="architecture" {% if p.diagram_type == 'architecture' %}selected{% endif %}>Architecture / Network</option>
                                <option value="sequence" {% if p.diagram_type == 'sequence' %}selected{% endif %}>Sequence</option>
                                <option value="er" {% if p.diagram_type == 'er' %}selected{% endif %}>Entity-Relationship</option>
                                <option value="class" {% if p.diagram_type == 'class' %}selected{% endif %}>UML Class</option>
                                <option value="state" {% if p.diagram_type == 'state' %}selected{% endif %}>State Machine</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="direction" class="font-weight-bold">Layout Direction</label>
                            <select class="form-control" id="direction" name="direction">
                                <option value="TB" {% if p.direction == 'TB' %}selected{% endif %}>Top → Bottom</option>
                                <option value="LR" {% if p.direction == 'LR' %}selected{% endif %}>Left → Right</option>
                                <option value="BT" {% if p.direction == 'BT' %}selected{% endif %}>Bottom → Top</option>
                                <option value="RL" {% if p.direction == 'RL' %}selected{% endif %}>Right → Left</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold d-block">Render Formats <span class="text-muted font-weight-normal">(editable .mmd/.drawio are always produced)</span></label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="fmt-svg" value="svg" checked>
                            <label class="form-check-label" for="fmt-svg">SVG</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="fmt-png" value="png" checked>
                            <label class="form-check-label" for="fmt-png">PNG</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="fmt-pdf" value="pdf" checked>
                            <label class="form-check-label" for="fmt-pdf">PDF</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="fmt-jpeg" value="jpeg">
                            <label class="form-check-label" for="fmt-jpeg">JPEG</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="content_brief" class="font-weight-bold">Content Brief</label>
                        <textarea class="form-control" id="content_brief" name="content_brief" rows="8" placeholder="Describe what the diagram should depict. For a flowchart, list the steps; for a sequence, the interactions; for an ER/class diagram, the entities and their fields. The planner structures this into the chosen diagram type.">{{ p.content_brief or '' }}</textarea>
                        <small class="form-text text-muted">Plain text or bullet points. Be specific — names, steps, relationships.</small>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block" id="generate-btn">
                        Generate Diagram
                    </button>
                </form>
            </div>
        </section>

        <!-- Output panel -->
        <section class="studio-panel" id="output-panel" aria-labelledby="diagram-output-title">
            <div class="studio-panel-header">
                <h5 id="diagram-output-title">Output &amp; Preview</h5>
            </div>
            <div class="studio-panel-body">

                <div class="studio-state studio-state-empty is-active">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="9" y1="3" x2="9" y2="21"></line>
                        <line x1="3" y1="9" x2="9" y2="9"></line>
                    </svg>
                    <p>Fill out the configuration on the left and click <strong>Generate Diagram</strong>.</p>
                </div>

                <div class="studio-state studio-state-running">
                    <div class="studio-running-title">
                        <span class="spinner-border spinner-border-sm text-primary" role="status"></span>
                        <span id="diagram-running-title">Generating diagram…</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
                    </div>
                    <div class="studio-running-meta">
                        <span>Planning, writing sources, and rendering…</span>
                        <span id="diagram-elapsed">Elapsed: 0s</span>
                    </div>
                </div>

                <div class="studio-state studio-state-success">
                    <div id="diagram-downloads" class="mb-3 d-flex flex-wrap" style="gap:.5rem;"></div>
                    <div id="diagram-preview" class="mb-3 text-center"></div>
                    <div id="diagram-warnings"></div>
                    <div class="form-group">
                        <label class="font-weight-bold d-flex justify-content-between align-items-center">
                            <span>Mermaid source</span>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="copy-mermaid">Copy</button>
                        </label>
                        <pre id="diagram-source" class="p-2 border rounded bg-light" style="max-height:260px;overflow:auto;white-space:pre-wrap;"></pre>
                    </div>
                    <div class="text-muted small">
                        Open the downloaded files in
                        <a href="https://app.diagrams.net/" target="_blank" rel="noopener">diagrams.net</a> (.drawio) or the
                        <a href="https://mermaid.live/" target="_blank" rel="noopener">Mermaid Live Editor</a> (.mmd) to edit and export JPEG/PDF.
                    </div>
                    <div id="diagram-info" class="mt-2 text-muted small"></div>
                </div>

                <div class="studio-state studio-state-failed">
                    <div class="alert alert-danger" role="alert">
                        <h6 class="alert-heading font-weight-bold">Generation Failed</h6>
                        <p id="error-message" class="mb-0"></p>
                    </div>
                    <button type="button" class="btn btn-outline-primary" id="retry-btn">Retry</button>
                </div>

            </div>
        </section>

    </div>
</div>

<style>
.diagram-preview, #diagram-preview img, #diagram-preview object { max-width: 100%; max-height: 460px; border: 1px solid #e2e8f0; border-radius: 0.45rem; background: #fff; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementById('diagram-form');
    var outputPanel = document.getElementById('output-panel');
    var generateBtn = document.getElementById('generate-btn');
    var downloads = document.getElementById('diagram-downloads');
    var preview = document.getElementById('diagram-preview');
    var warningsEl = document.getElementById('diagram-warnings');
    var sourceEl = document.getElementById('diagram-source');
    var infoEl = document.getElementById('diagram-info');
    var errorMessage = document.getElementById('error-message');
    var elapsedEl = document.getElementById('diagram-elapsed');
    var runningTitle = document.getElementById('diagram-running-title');

    var elapsedTimer = null;
    var startTs = 0;

    function startTimer() {
        startTs = Date.now();
        if (elapsedEl) elapsedEl.textContent = 'Elapsed: 0s';
        elapsedTimer = setInterval(function () {
            if (elapsedEl) elapsedEl.textContent = 'Elapsed: ' + QDStudio.formatElapsed(Date.now() - startTs);
        }, 1000);
    }
    function stopTimer() { if (elapsedTimer) { clearInterval(elapsedTimer); elapsedTimer = null; } }
    function resetButton() { generateBtn.disabled = false; generateBtn.textContent = 'Generate Diagram'; }

    function dlButton(href, label, cls) {
        return '<a href="' + href + '" class="btn btn-sm ' + (cls || 'btn-outline-primary') + '" target="_blank" rel="noopener">' + label + '</a>';
    }

    function selectedFormats() {
        return ['svg', 'png', 'pdf', 'jpeg'].filter(function (f) {
            var el = document.getElementById('fmt-' + f);
            return el && el.checked;
        });
    }

    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Processing…';
        downloads.innerHTML = '';
        preview.innerHTML = '';
        warningsEl.innerHTML = '';
        sourceEl.textContent = '';
        infoEl.textContent = '';
        var title = document.getElementById('title').value;
        runningTitle.textContent = title ? ('Generating "' + title + '"…') : 'Generating diagram…';
        QDStudio.showState(outputPanel, 'running');
        startTimer();

        var payload = {
            title: title,
            diagram_type: document.getElementById('diagram_type').value,
            direction: document.getElementById('direction').value,
            content_brief: document.getElementById('content_brief').value,
            formats: selectedFormats()
        };

        try {
            var response = await fetch('/api/diagram/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            var data = await response.json();

            if (response.ok && data.ok) {
                var buttons = [];
                if (data.sources && data.sources.drawio) buttons.push(dlButton('/api/diagram/source/' + data.sources.drawio, 'Download .drawio', 'btn-success'));
                if (data.sources && data.sources.mermaid) buttons.push(dlButton('/api/diagram/source/' + data.sources.mermaid, 'Download .mmd', 'btn-success'));
                ['pdf', 'png', 'svg', 'jpeg'].forEach(function (f) {
                    if (data.rendered && data.rendered[f]) buttons.push(dlButton('/api/diagram/download/' + data.rendered[f], f.toUpperCase()));
                });
                downloads.innerHTML = buttons.join('');

                if (data.rendered && data.rendered.svg) {
                    preview.innerHTML = '<object type="image/svg+xml" data="/api/diagram/preview/' + data.rendered.svg + '" class="diagram-preview"></object>';
                } else if (data.rendered && data.rendered.png) {
                    preview.innerHTML = '<img src="/api/diagram/preview/' + data.rendered.png + '" class="diagram-preview" alt="Diagram preview">';
                } else {
                    preview.innerHTML = '<div class="alert alert-info mb-0">Editable sources generated. Native image render is unavailable on this host — open the .drawio in diagrams.net or the .mmd in the Mermaid Live Editor to view and export JPEG/PDF.</div>';
                }

                if (data.warnings && data.warnings.length > 0) {
                    warningsEl.innerHTML = '<div class="alert alert-warning small mb-3"><ul class="mb-0 pl-3"><li>' + data.warnings.join('</li><li>') + '</li></ul></div>';
                }
                sourceEl.textContent = data.mermaid_text || '';
                infoEl.textContent = (data.element_count ? (data.element_count + ' element(s). ') : '') + (data.summary || '');

                QDStudio.showState(outputPanel, 'success');
                QDStudio.toast({ message: 'Diagram generated.', level: 'success' });
            } else {
                errorMessage.textContent = data.summary || 'An unexpected error occurred during generation.';
                if (data.warnings && data.warnings.length > 0) {
                    errorMessage.innerHTML += '<ul class="mt-2 mb-0"><li>' + data.warnings.join('</li><li>') + '</li></ul>';
                }
                QDStudio.showState(outputPanel, 'failed');
                QDStudio.toast({ message: 'Diagram generation failed.', level: 'danger' });
            }
        } catch (error) {
            errorMessage.textContent = 'Failed to communicate with the diagram server.';
            QDStudio.showState(outputPanel, 'failed');
            QDStudio.toast({ message: 'Network error: ' + error.message, level: 'danger' });
        } finally {
            stopTimer();
            resetButton();
        }
    });

    var copyBtn = document.getElementById('copy-mermaid');
    if (copyBtn) {
        copyBtn.addEventListener('click', function () {
            navigator.clipboard.writeText(sourceEl.textContent || '').then(function () {
                QDStudio.toast({ message: 'Mermaid source copied.', level: 'success' });
            });
        });
    }

    var retryBtn = document.getElementById('retry-btn');
    if (retryBtn) {
        retryBtn.addEventListener('click', function () {
            form.dispatchEvent(new Event('submit', { cancelable: true }));
        });
    }
});
</script>
{% endblock %}