{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
{% include "core/_nav.html" %}

<main class="page-shell">
  <section class="hero-section position-relative overflow-hidden">
    <div class="shape shape-one" aria-hidden="true"></div>
    <div class="shape shape-two" aria-hidden="true"></div>
    <div class="container position-relative py-5">
      <div class="row align-items-center g-5">
        <div class="col-lg-7">
          <p class="eyebrow mb-3">OPTEMA AI Web Intelligence</p>
          <h1 class="display-heading mb-4">⚡ Analisis Masalah Berbasis Data Internet</h1>
          <p class="hero-copy mb-4">Masukkan topik dan URL sumber publik. OPTEMA akan mengambil konten halaman, menampilkan data yang dibaca, lalu menyusun Problem Detection, Root Cause, Solusi, Risiko, Action Plan, dan KPI jika OpenAI API Key tersedia.</p>
          <div class="trust-strip mt-4" aria-label="Output Web Intelligence">
            <span>Scrape URL</span>
            <span>Problem Detection</span>
            <span>KPI</span>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="decision-panel glass-card">
            <div class="panel-topline d-flex justify-content-between align-items-center mb-4">
              <span class="status-dot"><i></i> Live URL Analysis</span>
              <span class="score-pill">6 Output</span>
            </div>
            <div class="solution-preview">
              <p class="small-label">Format Analisis</p>
              <h2>Internet Data → Insight → Action</h2>
              <p class="mb-0">Cocok untuk artikel berita, laporan, pengumuman, atau sumber data publik berbasis HTML.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-pad pt-4">
    <div class="container">
      {% if messages %}
        <div class="mb-4">
          {% for message in messages %}
            <div class="alert alert-{{ message.tags|default:'info' }}" role="alert">{{ message }}</div>
          {% endfor %}
        </div>
      {% endif %}

      <div class="row g-4 align-items-start">
        <div class="col-lg-4">
          <div class="form-shell input-panel sticky-lg-top">
            <div class="panel-heading">
              <span class="panel-icon">🌐</span>
              <div>
                <h2>Input Sumber Data</h2>
                <p>API key tidak disimpan. Jika dikosongkan, halaman tetap menampilkan hasil scraping data internet.</p>
              </div>
            </div>
            <form method="post" novalidate>
              {% csrf_token %}
              {{ form.non_field_errors }}

              <div class="mb-4">
                <label class="form-label" for="{{ form.query.id_for_label }}">{{ form.query.label }}</label>
                {{ form.query }}
                {% for error in form.query.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
              </div>

              <div class="mb-4">
                <label class="form-label" for="{{ form.url.id_for_label }}">{{ form.url.label }}</label>
                {{ form.url }}
                {% for error in form.url.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
              </div>

              <div class="mb-4">
                <label class="form-label" for="{{ form.api_key.id_for_label }}">{{ form.api_key.label }}</label>
                {{ form.api_key }}
                <div class="form-text">Gunakan API key pribadi Anda hanya untuk sesi analisis ini.</div>
                {% for error in form.api_key.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
              </div>

              <button type="submit" class="btn btn-optema btn-lg w-100">Analisis</button>
              <p class="form-note mb-0 mt-3">Sumber lokal seperti localhost diblokir untuk keamanan.</p>
            </form>
          </div>
        </div>

        <div class="col-lg-8">
          {% if source_data %}
            <div class="analysis-card output-panel mb-4">
              <div class="output-success mb-4">✅ Data Internet Berhasil Dibaca</div>
              <section class="output-section">
                <h2>Data Internet</h2>
                <div class="metric-grid mb-4">
                  <div class="metric-card"><span>Domain</span><strong>{{ source_data.domain }}</strong></div>
                  <div class="metric-card"><span>Paragraf</span><strong>{{ source_data.paragraph_count }}</strong></div>
                </div>
                <p class="small-label mb-2">Judul</p>
                <div class="alert alert-light border" role="status">{{ source_data.title }}</div>
                <label class="form-label" for="content-preview">Konten terbaca</label>
                <textarea id="content-preview" class="form-control problem-textarea" rows="12" readonly>{{ source_data.content_preview }}</textarea>
                <p class="form-note mt-3 mb-0">Preview dibatasi 5.000 karakter; analisis AI memakai maksimal 10.000 karakter pertama.</p>
              </section>
            </div>
          {% else %}
            <div class="empty-state mb-4">
              <h2>Belum ada data internet.</h2>
              <p>Masukkan URL sumber data publik untuk mulai membaca konten halaman.</p>
            </div>
          {% endif %}

          {% if ai_result %}
            <div class="analysis-card output-panel">
              <div class="output-success mb-4">🤖 OPTEMA AI</div>
              <section class="output-section mb-0">
                <h2>Hasil Analisis</h2>
                <div class="alert alert-light border mb-0">{{ ai_result|linebreaksbr }}</div>
              </section>
            </div>
          {% elif analysis_error %}
            <div class="analysis-card output-panel">
              <section class="output-section mb-0">
                <h2>Status Analisis AI</h2>
                <div class="alert alert-warning mb-0" role="alert">{{ analysis_error }}</div>
              </section>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="container d-flex flex-wrap justify-content-between gap-2">
    <span>OPTEMA AI — Web Intelligence</span>
    <span>Problem Detection · Root Cause · Solusi · Risiko · Action Plan · KPI</span>
  </div>
</footer>
{% endblock %}