{% extends "base.html" %}

{% block content %}
<!-- Page Header -->
<section class="section-full"
    style="background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: white; padding: 4rem 5vw 6rem 5vw;">
    <div class="container text-center">
        <h1 style="color: white; margin-bottom: 1rem;">Generator Pantun</h1>
        <p style="color: rgba(255,255,255,0.8); font-size: 1.125rem; max-width: 600px; margin: 0 auto;">Masukkan tema
            dan gaya bahasa untuk membuat pantun secara otomatis.</p>
    </div>
</section>

<div class="container mb-4" style="margin-top: -3rem; position: relative; z-index: 10;">
    <div class="generator-layout">

        <!-- Sidebar -->
        <aside class="sidebar">
            <h3 style="display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-main);">
                <i class="fa-solid fa-sliders" style="color: var(--color-primary);"></i> Parameters
            </h3>
            <hr
                style="border: none; border-top: 1px solid var(--color-border); margin-bottom: 1.5rem; margin-top: 1rem;">

            <form id="generate-form">
                <div class="form-group">
                    <label for="tema-input">Tema Pantun</label>
                    <select id="tema-input" class="form-control" required>
                        <option value="" disabled selected>Pilih Tema Pantun...</option>
                        <option value="Pantun Cinta">Pantun Cinta</option>
                        <option value="Pantun Jenaka">Pantun Jenaka</option>
                        <option value="Pantun Agama">Pantun Agama</option>
                        <option value="Pantun Nasihat">Pantun Nasihat</option>
                        <option value="Pantun Teka-Teki">Pantun Teka-Teki</option>
                        <option value="Pantun Anak-anak">Pantun Anak-anak</option>
                        <option value="Pantun Budi">Pantun Budi</option>
                        <option value="Pantun Pendidikan">Pantun Pendidikan</option>
                        <option value="Pantun Adat">Pantun Adat</option>
                        <option value="Pantun Kemerdekaan">Pantun Kemerdekaan</option>
                        <option value="Pantun Ayah">Pantun Ayah</option>
                        <option value="Pantun Bijak">Pantun Bijak</option>
                        <option value="Pantun Ibu">Pantun Ibu</option>
                        <option value="Pantun Bahasa Jawa">Pantun Bahasa Jawa</option>
                        <option value="Pantun Guru">Pantun Guru</option>
                        <option value="Pantun Alam">Pantun Alam</option>
                        <option value="Pantun Berbalas">Pantun Berbalas</option>
                        <option value="Pantun Perpisahan">Pantun Perpisahan</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="gaya-input">Gaya Bahasa</label>
                    <select id="gaya-input" class="form-control">
                        <option value="Tradisional">Tradisional</option>
                        <option value="Modern">Modern</option>
                        <option value="Santai">Santai</option>
                        <option value="Puitis">Puitis</option>
                        <option value="Formal">Formal</option>
                    </select>
                </div>

                <button type="submit" id="generate-btn" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
                    <span id="btn-text">Generate Now</span>
                    <span id="btn-spinner" class="spinner hidden"></span>
                </button>
            </form>


        </aside>

        <!-- Main Area -->
        <div class="main-area">

            <!-- Result Placeholder / Card -->
            <div id="result-container" class="card result-card hidden fade-in">
                <div id="result-badge" class="badge">Tema: Nasihat</div>
                <div id="result-text" class="pantun-text"></div>
            </div>

            <!-- Default Empty State -->
            <div id="empty-state" class="card result-card"
                style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; background: rgba(255,255,255,0.8); border: 2px dashed rgba(203, 213, 225, 0.8); box-shadow: none;">
                <div
                    style="width: 80px; height: 80px; background: rgba(79, 70, 229, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                    <i class="fa-solid fa-wand-magic-sparkles"
                        style="font-size: 2.5rem; color: var(--color-primary);"></i>
                </div>
                <h3 style="color: var(--color-text-main);">Siap Menghasilkan Pantun</h3>
                <p class="text-muted mt-1">Atur parameter di samping lalu tekan Generate Now.</p>
            </div>

            <!-- Analytics Cards (Hidden initially) -->
            <div id="analytics-container" class="metrics-grid hidden">
                <div class="card metric-card fade-in" style="animation-delay: 0.1s; padding: 1.5rem;">
                    <div class="metric-value" style="font-size: 1.75rem;" id="stat-rima">a-b-a-b</div>
                    <div class="metric-label">Pola Rima</div>
                </div>
                <div class="card metric-card fade-in" style="animation-delay: 0.2s; padding: 1.5rem;">
                    <div class="metric-value" style="font-size: 1.5rem;" id="stat-suku">8, 9, 8, 9</div>
                    <div class="metric-label">Suku Kata</div>
                </div>
                <div class="card metric-card fade-in" style="animation-delay: 0.3s; padding: 1.5rem;">
                    <div class="metric-value" style="font-size: 1.75rem; color: var(--color-success);" id="stat-conf">
                        95%</div>
                    <div class="metric-label">Confidence Score</div>
                </div>
                <div class="card metric-card fade-in" style="animation-delay: 0.4s; padding: 1.5rem;">
                    <div class="metric-value" style="font-size: 1.5rem; color: var(--color-warning);" id="stat-sent">
                        Positif</div>
                    <div class="metric-label">Sentimen</div>
                </div>
            </div>

            <!-- Rhyme Pattern Visualization (Simple) -->
            <div id="visualization-container" class="card hidden fade-in" style="animation-delay: 0.5s;">
                <h4 style="margin-bottom: 1rem;">Visualisasi Rima</h4>
                <div class="flex flex-col gap-2 mt-2">
                    <div class="flex items-center gap-2">
                        <div
                            style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-light); box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);">
                        </div>
                        <span style="font-weight: 500; color: var(--color-text-main);">Baris 1 & 3 (Rima A)</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div
                            style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);">
                        </div>
                        <span style="font-weight: 500; color: var(--color-text-main);">Baris 2 & 4 (Rima B)</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/generator.js"></script>
{% endblock %}