{% extends "base.html" %}

{% block title %}CSV Import - Delphi Database{% endblock %}

{% block bridge_css %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <div class="flex items-center gap-3">
            <div class="flex items-center justify-center w-12 h-12 bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-400 rounded-xl">
                <i class="fa-solid fa-cloud-arrow-up text-xl"></i>
            </div>
            <div>
                <h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">CSV Data Import</h1>
                <p class="text-neutral-600 dark:text-neutral-400">Import CSV files converted from legacy .sc files into the database</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <a href="/admin" class="inline-flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
                <i class="fa-solid fa-arrow-left text-sm"></i>
                <span>Back to Admin</span>
            </a>
        </div>
    </div>

    <!-- Import Form -->
    <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8">
        <h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
            <i class="fa-solid fa-file-arrow-up text-primary-600"></i>
            Single File Import
        </h2>
        
        <form id="importForm" class="space-y-6">
            <div>
                <label for="tableSelect" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
                    Select Table Type
                </label>
                <select id="tableSelect" name="table_name" 
                        class="w-full px-4 py-3 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                    <option value="">-- Select Table --</option>
                    <option value="rolodex">ROLODEX (Contacts)</option>
                    <option value="phone">PHONE (Phone Numbers)</option>
                    <option value="files">FILES (Case Files)</option>
                    <option value="ledger">LEDGER (Financial Transactions)</option>
                    <option value="qdros">QDROS (QDRO Documents)</option>
                </select>
            </div>

            <div>
                <label for="csvFile" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
                    Select CSV File
                </label>
                <input type="file" id="csvFile" name="file" accept=".csv"
                       class="w-full px-4 py-3 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-primary-50 file:text-primary-700 file:hover:bg-primary-100">
                <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">Only CSV files are supported. Max file size: 100MB</p>
            </div>

            <div class="flex space-x-4">
                <button type="button" id="validateBtn"
                        class="px-6 py-3 bg-warning-600 text-white rounded-lg hover:bg-warning-700 focus:outline-none focus:ring-2 focus:ring-warning-500 disabled:opacity-50 transition-colors duration-200 flex items-center gap-2">
                    <i class="fa-solid fa-check-circle"></i>
                    <span>Validate Headers</span>
                </button>
                <button type="submit" id="importBtn"
                        class="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 transition-colors duration-200 flex items-center gap-2">
                    <i class="fa-solid fa-upload"></i>
                    <span>Import Data</span>
                </button>
            </div>
        </form>
    </div>

    <!-- Schema Information -->
    <div id="schemaInfo" class="bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800 rounded-xl p-6 mb-8 hidden">
        <h3 class="text-lg font-semibold text-primary-900 dark:text-primary-100 mb-3 flex items-center gap-2">
            <i class="fa-solid fa-table-columns"></i>
            Required Columns
        </h3>
        <div id="schemaDetails" class="text-sm text-primary-800 dark:text-primary-200"></div>
    </div>

    <!-- Import Progress -->
    <div id="importProgress" class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8 hidden">
        <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
            <i class="fa-solid fa-spinner fa-spin text-primary-600"></i>
            Import Progress
        </h3>
        <div id="progressDetails" class="space-y-2 max-h-64 overflow-y-auto"></div>
    </div>

    <!-- Import Results -->
    <div id="importResults" class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6 mb-8 hidden">
        <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
            <i class="fa-solid fa-chart-line text-success-600"></i>
            Import Results
        </h3>
        <div id="resultsContent"></div>
    </div>

    <!-- Batch Import Section -->
    <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-6">
        <h2 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4 flex items-center gap-2">
            <i class="fa-solid fa-layer-group text-primary-600"></i>
            Batch Import (Multiple Files)
        </h2>
        <p class="text-neutral-600 dark:text-neutral-400 mb-6">
            Import multiple CSV files at once. Files will be processed in dependency order 
            (ROLODEX → PHONE/FILES → LEDGER/QDROS).
        </p>
        
        <div id="batchFiles" class="space-y-4 mb-6">
            <!-- Batch file inputs will be added here -->
        </div>
        
        <div class="flex space-x-4">
            <button type="button" id="addBatchFile"
                    class="px-6 py-3 bg-success-600 text-white rounded-lg hover:bg-success-700 focus:outline-none focus:ring-2 focus:ring-success-500 transition-colors duration-200 flex items-center gap-2">
                <i class="fa-solid fa-plus"></i>
                <span>Add File</span>
            </button>
            <button type="button" id="batchImportBtn"
                    class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50 transition-colors duration-200 flex items-center gap-2">
                <i class="fa-solid fa-rocket"></i>
                <span>Start Batch Import</span>
            </button>
        </div>
    </div>
</div>

<!-- Include the import JavaScript -->
<script src="/static/js/admin_import.js"></script>
{% endblock %}