{% extends "base.html" %}

{% block title %}Import from CSV - {{ workspace.name }} - Redea Social{% endblock %}

{% block page_header %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-base font-semibold text-stone-900" style="letter-spacing: -0.01em;">Import from CSV</h1>
        <p class="text-sm text-stone-500 mt-1">Bulk import posts from a CSV or TSV file.</p>
    </div>
    <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}" class="text-sm text-stone-500 hover:text-stone-700 flex items-center gap-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
        Back to Calendar
    </a>
</div>
{% endblock %}

{% block content %}
<div class="max-w-3xl" id="csv-import-container">

    {% if error %}
    <div class="rounded-lg p-4 bg-red-50 text-red-800 text-sm mb-4">{{ error }}</div>
    {% endif %}

    <!-- Step 1: Upload -->
    <div class="bg-white rounded-xl border border-stone-200 p-6">
        <div class="flex items-center gap-3 mb-4">
            <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white" style="background: var(--primary);">1</div>
            <h2 class="text-sm font-semibold text-stone-800">Upload CSV File</h2>
        </div>

        <form hx-post="{% url 'composer:csv_upload' workspace_id=workspace.id %}"
              hx-target="#csv-import-container"
              hx-swap="innerHTML"
              hx-encoding="multipart/form-data">
            {% csrf_token %}

            <div class="border-2 border-dashed border-stone-200 rounded-xl p-8 text-center cursor-pointer hover:border-stone-300 transition-colors"
                 x-data="{ dragging: false, filename: '' }"
                 role="button"
                 tabindex="0"
                 @click="$refs.fileInput.click()"
                 @keydown.enter.prevent="$refs.fileInput.click()"
                 @keydown.space.prevent="$refs.fileInput.click()"
                 @dragover.prevent="dragging = true"
                 @dragleave="dragging = false"
                 @drop.prevent="dragging = false; $refs.fileInput.files = $event.dataTransfer.files; filename = $event.dataTransfer.files[0]?.name"
                 :class="dragging && 'border-orange-300 bg-orange-50/30'">
                <svg class="w-10 h-10 text-stone-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/></svg>
                <p class="text-sm text-stone-600 mb-1">Drop your CSV file here, or <label for="csv-file" class="font-semibold cursor-pointer" style="color: var(--primary);">browse</label></p>
                <p class="text-xs text-stone-400">Supports .csv and .tsv files</p>
                <p class="text-xs text-stone-600 mt-2 font-medium" x-show="filename" x-text="filename" x-cloak></p>
                <input type="file" name="csv_file" id="csv-file" accept=".csv,.tsv" required class="hidden"
                       x-ref="fileInput"
                       @change="filename = $event.target.files[0]?.name">
            </div>

            <div class="mt-4 flex items-center justify-between">
                <div class="text-xs text-stone-400">
                    Expected columns: date, time, platforms, caption, media_url, category, tags, first_comment
                </div>
                <button type="submit" class="btn-brand text-sm py-2 px-5">
                    Upload &amp; Map Columns
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}