{% extends "base.html" %}
{% set active = "ingest" %}
{% block title %}Ingest — Communication DNA{% endblock %}
{% block content %}
<h2 class="text-2xl font-bold mb-6">Ingest Transcription</h2>

{% if result %}
<div class="mb-6 space-y-2">
    {% for r in result %}
    <div class="card {% if r.success %}border-green-600{% else %}border-red-600{% endif %}">
        {% if r.success %}
        <div class="font-medium text-green-400">✓ {{ r.filename }}</div>
        <div class="text-sm text-gray-400 mt-1">
            ID: {{ r.tid }} · {{ "{:,}".format(r.words) }} words · {{ r.segments }} segments · Speakers: {{ r.speakers|join(', ') }}
        </div>
        {% else %}
        <div class="font-medium text-red-400">✗ {{ r.filename }}</div>
        <div class="text-sm text-gray-400">{{ r.error }}</div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}

<form method="post" enctype="multipart/form-data" class="space-y-4">
    <!-- Drop Zone -->
    <div id="dropzone" class="card border-dashed border-2 border-gray-600 text-center py-12 cursor-pointer hover:border-blue-500 transition-colors"
         onclick="document.getElementById('files').click()">
        <div class="text-gray-400 text-lg mb-2">📁 Drag & drop files here or click to browse</div>
        <div class="text-gray-500 text-sm">Supports .txt, .srt, .vtt, .json</div>
        <div id="file-list" class="mt-3 text-sm text-blue-400"></div>
        <input type="file" id="files" name="files" multiple accept=".txt,.srt,.vtt,.json" class="hidden">
    </div>

    <div class="grid md:grid-cols-3 gap-4">
        <div>
            <label class="text-sm text-gray-400 block mb-1">Title (optional)</label>
            <input type="text" name="title" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white">
        </div>
        <div>
            <label class="text-sm text-gray-400 block mb-1">Date</label>
            <input type="date" name="date" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white">
        </div>
        <div>
            <label class="text-sm text-gray-400 block mb-1">Context</label>
            <select name="context" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white">
                <option value="">Select...</option>
                <option value="meeting">Meeting</option>
                <option value="speech">Speech</option>
                <option value="podcast">Podcast</option>
                <option value="interview">Interview</option>
                <option value="lecture">Lecture</option>
                <option value="other">Other</option>
            </select>
        </div>
    </div>

    <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-medium text-lg">Upload & Ingest</button>
</form>

<script>
const dz = document.getElementById('dropzone');
const fi = document.getElementById('files');
const fl = document.getElementById('file-list');

fi.addEventListener('change', () => {
    const names = Array.from(fi.files).map(f => f.name);
    fl.textContent = names.join(', ');
});

dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('border-blue-500'); });
dz.addEventListener('dragleave', () => dz.classList.remove('border-blue-500'));
dz.addEventListener('drop', e => {
    e.preventDefault();
    dz.classList.remove('border-blue-500');
    fi.files = e.dataTransfer.files;
    const names = Array.from(fi.files).map(f => f.name);
    fl.textContent = names.join(', ');
});
</script>
{% endblock %}