{% extends "base.html" %}
{% block title %}Add Task - {{ config.APP_NAME }}{% endblock %}
{% block content %}
<div class="auth-card" style="max-width:520px;">
    <h1>Add Task</h1>
    <p>New tasks start Unplanned - you'll be offered the chance to plan it right after saving.</p>
    <form method="POST" novalidate>
        {{ form.hidden_tag() }}
        <div class="field">
            {{ form.task_name.label }}
            {{ form.task_name(size=40) }}
            {% for error in form.task_name.errors %}<div class="error">{{ error }}</div>{% endfor %}
        </div>
        <div class="field">
            {{ form.department.label }}
            {{ form.department() }}
            {% for error in form.department.errors %}<div class="error">{{ error }}</div>{% endfor %}
        </div>
        <div class="field">
            {{ form.priority.label }}
            {{ form.priority() }}
            {% for error in form.priority.errors %}<div class="error">{{ error }}</div>{% endfor %}
        </div>
        <div class="field">
            {{ form.deadline.label }} <span style="font-weight:normal; color:#777;">(optional)</span>
            {{ form.deadline() }}
            {% for error in form.deadline.errors %}<div class="error">{{ error }}</div>{% endfor %}
        </div>
        <div class="field">
            {{ form.description.label }}
            {{ form.description(rows=3) }}
            {% for error in form.description.errors %}<div class="error">{{ error }}</div>{% endfor %}
        </div>
        <div class="field">
            {{ form.note.label }}
            {{ form.note(rows=2) }}
            {% for error in form.note.errors %}<div class="error">{{ error }}</div>{% endfor %}
        </div>
        {{ form.submit(class_="btn-primary") }}
    </form>
    <div id="durationSuggestion" style="margin-top:10px; font-size:0.85rem; color:#2d78e0;"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Smart time estimate: ask the AI prediction endpoint once the task name
// field loses focus, and show a friendly suggestion if we have one.
function suggestDuration() {
    const taskName = document.getElementById('{{ form.task_name.id }}').value;
    const dept = document.getElementById('{{ form.department.id }}').value;
    const box = document.getElementById('durationSuggestion');
    if (!taskName.trim()) { box.textContent = ''; return; }

    fetch(`{{ url_for('ai.predict_duration') }}?task_name=${encodeURIComponent(taskName)}&department=${encodeURIComponent(dept)}`)
        .then(r => r.json())
        .then(data => {
            if (data.predicted_hours) {
                box.textContent = `⏱️ Estimated time: ~${data.predicted_hours}h (${data.reasoning})`;
            } else {
                box.textContent = '';
            }
        })
        .catch(() => { box.textContent = ''; });
}
document.getElementById('{{ form.task_name.id }}').addEventListener('blur', suggestDuration);
</script>
{% endblock %}