{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>💭 Thought Details</h2>
                <a href="/thoughts" class="btn btn-outline-secondary">← Back to List</a>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-primary me-2">{{ thought.category }}</span>
                        <small class="text-muted">ID: {{ thought.id }}</small>
                    </div>
                    <small class="text-muted">{{ thought.timestamp.strftime('%B %d, %Y at %I:%M %p') }}</small>
                </div>

                <div class="card-body">
                    <div class="mb-4">
                        <h5>Content</h5>
                        <p class="lead">{{ thought.content }}</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            {% if thought.tags %}
                            <div class="mb-3">
                                <h6>Tags</h6>
                                {% for tag in thought.tags %}
                                <span class="badge bg-secondary me-1">{{ tag }}</span>
                                {% endfor %}
                            </div>
                            {% endif %}

                            {% if thought.emotion %}
                            <div class="mb-3">
                                <h6>Emotion</h6>
                                <span class="badge bg-info">{{ thought.emotion }}</span>
                            </div>
                            {% endif %}
                        </div>

                        <div class="col-md-6">
                            {% if thought.importance %}
                            <div class="mb-3">
                                <h6>Importance Score</h6>
                                <div class="progress mb-2" style="height: 20px;">
                                    <div class="progress-bar progress-bar-striped" role="progressbar"
                                        data-width="{{ (thought.importance * 100)|round }}"
                                        aria-valuenow="{{ (thought.importance * 100)|round }}" aria-valuemin="0"
                                        aria-valuemax="100">
                                        {{ "%.1f"|format(thought.importance * 100) }}%
                                    </div>
                                </div>
                                <small class="text-muted">Score: {{ "%.3f"|format(thought.importance) }}</small>
                            </div>
                            <script>
                                // Set progress bar width after page load to avoid CSS parser issues
                                document.addEventListener('DOMContentLoaded', function () {
                                    const progressBar = document.querySelector('[data-width="{{ (thought.importance * 100)|round }}"]');
                                    if (progressBar) {
                                        progressBar.style.width = progressBar.getAttribute('data-width') + '%';
                                    }
                                });
                            </script>
                            {% endif %}

                            <div class="mb-3">
                                <h6>Statistics</h6>
                                <small class="text-muted d-block">Word count: {{ thought.content.split()|length
                                    }}</small>
                                <small class="text-muted d-block">Character count: {{ thought.content|length }}</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary"
                            onclick="analyzeThought('{{ thought.id }}')">
                            🧠 NLP Analysis
                        </button>
                        <button type="button" class="btn btn-outline-success" onclick="editThought('{{ thought.id }}')">
                            ✏️ Edit
                        </button>
                        <button type="button" class="btn btn-outline-warning"
                            onclick="exportThought('{{ thought.id }}')">
                            📤 Export
                        </button>
                    </div>
                </div>
            </div>

            <!-- NLP Analysis Section (Initially Hidden) -->
            <div id="nlp-analysis" class="card mt-4" style="display: none;">
                <div class="card-header">
                    <h5>🧠 NLP Analysis</h5>
                </div>
                <div class="card-body">
                    <div id="nlp-content">
                        <div class="text-center">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2">Analyzing thought...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function analyzeThought(thoughtId) {
        const analysisDiv = document.getElementById('nlp-analysis');
        const contentDiv = document.getElementById('nlp-content');

        // Show the analysis section
        analysisDiv.style.display = 'block';

        // Reset content to loading state
        contentDiv.innerHTML = `
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Analyzing thought...</p>
        </div>
    `;

        // In a real implementation, this would make an API call to get NLP analysis
        // For now, we'll simulate the analysis
        setTimeout(() => {
            contentDiv.innerHTML = `
            <div class="row">
                <div class="col-md-6">
                    <h6>📊 Metrics</h6>
                    <ul class="list-unstyled">
                        <li><strong>Importance:</strong> 0.75 <small class="text-muted">(auto-calculated)</small></li>
                        <li><strong>Sentiment:</strong> Positive (0.68)</li>
                        <li><strong>Novelty:</strong> 0.82</li>
                        <li><strong>Complexity:</strong> 0.45</li>
                        <li><strong>Entropy:</strong> 4.2</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6>🏷️ Keywords</h6>
                    <div>
                        <span class="badge bg-light text-dark me-1">reflection</span>
                        <span class="badge bg-light text-dark me-1">thoughts</span>
                        <span class="badge bg-light text-dark me-1">analysis</span>
                        <span class="badge bg-light text-dark me-1">insights</span>
                    </div>
                    <h6 class="mt-3">📈 Complexity Breakdown</h6>
                    <div class="progress mb-1" style="height: 15px;">
                        <div class="progress-bar bg-info" style="width: 30%">Length</div>
                        <div class="progress-bar bg-warning" style="width: 25%">Vocabulary</div>
                        <div class="progress-bar bg-success" style="width: 20%">Structure</div>
                    </div>
                    <small class="text-muted">This is a simulated analysis for demonstration.</small>
                </div>
            </div>
        `;
        }, 1500);
    }

    function editThought(thoughtId) {
        alert('Edit functionality would be implemented here');
    }

    function exportThought(thoughtId) {
        alert('Export functionality would be implemented here');
    }
</script>
{% endblock %}