{% extends "base.html" %}

{% block title %}AI Insights{% endblock %}

{% block content %}
<div class="container" style="padding-top: 24px;">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">🧠 AI Insights</h1>
            <p style="color: var(--text-muted); margin-top: 4px;">Smart data-driven recommendations from your dataset</p>
        </div>
    </div>

    {% if not has_data %}
    <div class="no-data">
        <div class="no-data-icon">💡</div>
        <div class="no-data-title">No Insights Available</div>
        <p class="no-data-desc">Upload a dataset to generate AI-powered insights and recommendations.</p>
        <a href="/upload" class="btn-liquid"><i class="fas fa-cloud-upload-alt"></i> Upload Dataset</a>
    </div>
    {% else %}

    <div class="glass-card" style="margin-bottom: 24px;">
        <div style="display: flex; align-items: center; gap: 12px;">
            <span style="font-size: 2rem;">🤖</span>
            <div>
                <div style="font-weight: 700;">AI Analysis Complete</div>
                <div style="font-size: 0.85rem; color: var(--text-muted);">Generated {{ insights | length }} insights from your data</div>
            </div>
        </div>
    </div>

    {% for insight in insights %}
    <div class="insight-card {{ insight.type }}">
        <div class="insight-badge {{ insight.type }}">
            {% if insight.type == 'success' %}✅{% elif insight.type == 'warning' %}⚠️{% elif insight.type == 'danger' %}🚨{% else %}ℹ️{% endif %}
            {{ insight.type | upper }}
        </div>
        <div class="insight-title">{{ insight.title }}</div>
        <div class="insight-content">{{ insight.content }}</div>
    </div>
    {% endfor %}
    {% endif %}
</div>
{% endblock %}