{% extends "admin/layout.html" %}
{% block title %}Text Overrides{% endblock %}

{% block body %}
<div class="space-y-6">

    <!-- Page Header -->
    <div class="flex items-center justify-between flex-wrap gap-4">
        <div>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Text Overrides{% endtrans %}</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Override any text on the site. Leave empty to use the default translation.{% endtrans %}</p>
        </div>
        <div class="flex gap-2 flex-wrap">
            <button id="delete-selected" class="px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white text-sm">{% trans %}Delete Selected{% endtrans %}</button>
            <button id="delete-all" class="px-4 py-2 rounded-lg bg-red-700 hover:bg-red-800 text-white text-sm">{% trans %}Delete All{% endtrans %}</button>
            <button id="empty-database" class="px-4 py-2 rounded-lg bg-red-900 hover:bg-red-950 text-white text-sm">{% trans %}Empty Database{% endtrans %}</button>
            <button id="export-po" class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-sm">{% trans %}Export PO{% endtrans %}</button>
            <a id="export-csv" href="{{ url('/admin/text-overrides/export-csv') }}?lang={{ current_lang }}" class="px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm inline-flex items-center"><i class="fa fa-file-csv mr-1"></i>{% trans %}Export CSV{% endtrans %}</a>
            <button id="import-csv-btn" onclick="document.getElementById('import-csv-modal').classList.remove('hidden')" class="px-4 py-2 rounded-lg bg-green-800 hover:bg-green-900 text-white text-sm"><i class="fa fa-upload mr-1"></i>{% trans %}Import CSV{% endtrans %}</button>
        </div>
    </div>

    <!-- Language Selector -->
    <div class="flex items-center gap-3 flex-wrap">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Language:{% endtrans %}</span>
        {% for lc, lname in available_langs %}
        <a href="?lang={{ lc }}"
           class="px-3 py-1 rounded-full text-sm font-medium transition-colors
                  {% if lc == current_lang %}bg-accent text-white{% else %}bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-accent/20{% endif %}">
            {{ lname }}
        </a>
        {% endfor %}
    </div>

    <!-- Filters and Select All -->
    <div class="flex flex-wrap gap-4 items-center justify-between">
        <div class="flex flex-wrap gap-4 items-center">
            <input type="text" id="search-texts" placeholder="{% trans %}Search texts...{% endtrans %}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all" data-testid="input-search-texts">
            <input type="text" id="filter-filename" placeholder="{% trans %}Filter by filename...{% endtrans %}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all">
            <select id="filter-status" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all">
                <option value="all">{% trans %}All{% endtrans %}</option>
                <option value="filled">{% trans %}Filled Overrides{% endtrans %}</option>
                <option value="empty">{% trans %}Empty Overrides{% endtrans %}</option>
            </select>
        </div>
        <div class="flex items-center gap-2">
            <input type="checkbox" id="select-all" class="rounded border-gray-300 text-primary focus:ring-primary">
            <label for="select-all" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Select All{% endtrans %}</label>
        </div>
    </div>

    <!-- Add New Override Section -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-accent/5 to-primary/5 dark:from-accent-light/5 dark:to-primary-light/5">
            <h3 class="font-semibold text-gray-900 dark:text-white">{% trans %}Add New Override{% endtrans %}</h3>
        </div>
        <form id="add-override-form" class="p-6 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Original Text{% endtrans %}</label>
                <input type="text" name="original_text" placeholder="{% trans %}Enter the exact original English text...{% endtrans %}" required
                    class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                    list="all-texts-list"
                    data-testid="input-original-text">
                <datalist id="all-texts-list">
                    {% for item in all_texts %}
                    <option value="{{ item.text }}">
                    {% endfor %}
                </datalist>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Override Text{% endtrans %}</label>
                <input type="text" name="override_text" placeholder="{% trans %}Enter the replacement text...{% endtrans %}" required
                    class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                    data-testid="input-override-text">
            </div>
            <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 transition-all duration-300" data-testid="button-add-override">
                <i class="fa fa-plus"></i> {% trans %}Add Override{% endtrans %}
            </button>
        </form>
    </div>

    <!-- Active Overrides Section -->
    {% if overrides_list | length %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
            <h3 class="font-semibold text-gray-900 dark:text-white">{% trans %}Active Overrides{% endtrans %} ({{ overrides_list | length }})</h3>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for item in overrides_list %}
            <div class="px-6 py-4 flex items-start gap-4" id="override-{{ loop.index }}">
                <div class="flex-1 min-w-0">
                    <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">{% trans %}Original:{% endtrans %}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400 break-words">{{ item.text }}</p>
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-2 mb-1">{% trans %}Override:{% endtrans %}</p>
                    <p class="text-sm text-gray-900 dark:text-white font-medium break-words">{{ item.override }}</p>
                </div>
                <button type="button" onclick="deleteOverride('{{ item.text | replace("'", "\\'") }}', this)" class="flex-shrink-0 p-2 rounded-lg text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" title="{% trans %}Remove override{% endtrans %}" data-testid="button-delete-{{ loop.index }}">
                    <i class="fa fa-trash text-sm"></i>
                </button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Bulk Overrides Form -->
    <form id="bulk-form" class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-secondary/5 to-accent/5 dark:from-secondary-light/5 dark:to-accent-light/5">
            <h3 class="font-semibold text-gray-900 dark:text-white">{% trans %}All Translatable Texts{% endtrans %} ({{ all_texts | length }})</h3>
        </div>
        
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[600px] overflow-y-auto" id="texts-list">
            {% for item in all_texts %}
            <div class="px-6 py-3 flex items-center gap-3 text-row" data-filename="{{ item.file }}" data-text="{{ item.text }}" data-original="{{ item.text }}">
                <input type="checkbox" class="bulk-select flex-shrink-0" data-text="{{ item.text }}" data-original="{{ item.text }}">
                <input type="hidden" name="orig[]" value="{{ item.text }}">
                <div class="flex-1 min-w-0">
                    <p class="text-xs text-gray-400 dark:text-gray-500">#: {{ item.file }}:{{ item.line }}</p>
                    <p class="text-sm text-gray-700 dark:text-gray-300 break-words original-text">{{ item.text }}</p>
                </div>
                <div class="flex-1 min-w-0">
                    <input type="text" name="over[]" value="{{ item.override or '' }}" placeholder="{% trans %}Override...{% endtrans %}"
                           class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none {% if item.override %}ring-2 ring-accent/30{% endif %}"
                           data-testid="input-override-{{ loop.index }}">
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50 flex justify-between items-center">
            <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-primary hover:bg-primary-dark text-white font-semibold shadow-lg shadow-primary/30 transition-all duration-300" data-testid="button-save-all">
                <i class="fa fa-save"></i> {% trans %}Save All Changes{% endtrans %}
            </button>
            <span class="text-sm text-gray-500 dark:text-gray-400">{% trans %}Select items to delete or export as PO.{% endtrans %}</span>
        </div>
    </form>
</div>

<!-- Empty Database Confirmation Modal -->
<div id="empty-database-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white dark:bg-gray-800 rounded-xl max-w-md w-full p-6 shadow-xl">
        <div class="flex items-center gap-3 text-red-600 dark:text-red-400 mb-4">
            <i class="fa fa-exclamation-triangle text-2xl"></i>
            <h3 class="text-lg font-bold">{% trans %}Warning: Destructive Action{% endtrans %}</h3>
        </div>
        
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            {% trans %}You are about to permanently delete ALL text overrides from the database. This action:{% endtrans %}
        </p>
        
        <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-6 space-y-2">
            <li>{% trans %}Cannot be undone{% endtrans %}</li>
            <li>{% trans %}Will remove ALL custom translations{% endtrans %}</li>
            <li>{% trans %}Will reset all texts to their default values{% endtrans %}</li>
        </ul>
        
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                {% trans %}Type "DELETE" to confirm:{% endtrans %}
            </label>
            <input type="text" id="confirm-delete-text" class="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-red-500 outline-none" placeholder="DELETE">
        </div>
        
        <div class="flex gap-3 justify-end">
            <button id="cancel-empty-database" class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                {% trans %}Cancel{% endtrans %}
            </button>
            <button id="confirm-empty-database" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white transition-colors" disabled>
                <i class="fa fa-trash mr-2"></i>{% trans %}Empty Database{% endtrans %}
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    var OVERRIDE_URL = "{{ url('/admin/text-overrides') }}";
    var OVERRIDE_EMPTY_URL = "{{ url('/admin/text-overrides/empty-database') }}";

    $(document).ready(function() {
        // Filter by text content
        $("#search-texts").on("input", function() {
            var query = $(this).val().toLowerCase();
            $(".text-row").each(function() {
                var text = $(this).find(".original-text").text().toLowerCase();
                $(this).toggle(text.indexOf(query) !== -1);
            });
            updateSelectAllVisibility();
        });

        // Filter by filename
        $("#filter-filename").on("input", function() {
            var query = $(this).val().toLowerCase();
            $(".text-row").each(function() {
                var file = $(this).find(".text-xs").text().toLowerCase();
                $(this).toggle(file.indexOf(query) !== -1);
            });
            updateSelectAllVisibility();
        });

        // Filter by override status
        $("#filter-status").on("change", function() {
            var status = $(this).val();
            $(".text-row").each(function() {
                var val = $(this).find("[name='over[]']").val();
                if(status === "all") $(this).show();
                else if(status === "filled") $(this).toggle(val.trim() !== "");
                else if(status === "empty") $(this).toggle(val.trim() === "");
            });
            updateSelectAllVisibility();
        });

        // Select All functionality
        $("#select-all").on("change", function() {
            var isChecked = $(this).prop("checked");
            $(".text-row:visible .bulk-select").prop("checked", isChecked);
        });

        // Update select all checkbox based on visible checkboxes
        function updateSelectAllVisibility() {
            var visibleCheckboxes = $(".text-row:visible .bulk-select");
            var checkedVisible = $(".text-row:visible .bulk-select:checked");
            
            if (visibleCheckboxes.length === 0) {
                $("#select-all").prop("checked", false).prop("indeterminate", false);
            } else if (checkedVisible.length === visibleCheckboxes.length) {
                $("#select-all").prop("checked", true).prop("indeterminate", false);
            } else if (checkedVisible.length > 0) {
                $("#select-all").prop("checked", false).prop("indeterminate", true);
            } else {
                $("#select-all").prop("checked", false).prop("indeterminate", false);
            }
        }

        // Individual checkbox change
        $(document).on("change", ".bulk-select", function() {
            updateSelectAllVisibility();
        });

        // Add new override (no reload)
        $("#add-override-form").on("submit", function(e) {
            e.preventDefault();
            var orig = $(this).find("[name='original_text']").val();
            var over = $(this).find("[name='override_text']").val();
            if (!orig || !over) return;
            
            var $btn = $(this).find("button[type='submit']");
            var originalText = $btn.html();
            $btn.html('<i class="fa fa-spinner fa-spin"></i>').prop("disabled", true);
            
            $.ajax({
                url: OVERRIDE_URL,
                method: "POST",
                headers: { "X-Requested-With": "XMLHttpRequest" },
                data: { action: "save_single", original_text: orig, override_text: over, lang: "{{ current_lang }}" },
                success: function() {
                    toastr.success("Override added!");
                    $("#add-override-form")[0].reset();
                    // Update the input field in bulk form if exists
                    var $bulkInput = $(".text-row").filter(function() {
                        return $(this).find(".original-text").text().trim() === orig;
                    }).find("[name='over[]']");
                    
                    if ($bulkInput.length) {
                        $bulkInput.val(over).addClass("ring-2 ring-accent/30");
                    }
                },
                error: function() { 
                    toastr.error("Failed to add override."); 
                },
                complete: function() {
                    $btn.html(originalText).prop("disabled", false);
                }
            });
        });

        // Bulk save overrides (no reload)
        $("#bulk-form").on("submit", function(e) {
            e.preventDefault();
            var formData = $(this).serialize() + "&action=save_all&lang={{ current_lang }}";
            
            var $btn = $(this).find("button[type='submit']");
            var originalText = $btn.html();
            $btn.html('<i class="fa fa-spinner fa-spin"></i> Saving...').prop("disabled", true);
            
            $.ajax({
                url: OVERRIDE_URL,
                method: "POST",
                headers: { "X-Requested-With": "XMLHttpRequest" },
                data: formData,
                success: function() { 
                    toastr.success("All overrides saved!");
                    // Highlight saved fields
                    $("[name='over[]']").each(function() {
                        if ($(this).val().trim() !== "") {
                            $(this).addClass("ring-2 ring-accent/30");
                        } else {
                            $(this).removeClass("ring-2 ring-accent/30");
                        }
                    });
                },
                error: function() { 
                    toastr.error("Failed to save overrides."); 
                },
                complete: function() {
                    $btn.html(originalText).prop("disabled", false);
                }
            });
        });

        // Delete selected (no reload)
        $("#delete-selected").on("click", function() {
            var selected = $(".bulk-select:checked");
            if(selected.length === 0) {
                toastr.warning("No items selected.");
                return;
            }
            
            var _selLen = selected.length;
            window.ocConfirm('Delete ' + _selLen + ' selected override(s)?\n\n\u2022 These custom text overrides will be removed\n\u2022 The original text will be restored for those entries', function() {
            selected = $(".bulk-select:checked");
            var $btn = $("#bulk-delete");
            var originalText = $btn.html();
            $btn.html('<i class="fa fa-spinner fa-spin"></i>').prop("disabled", true);
            
            var deleted = 0;
            var total = selected.length;
            
            selected.each(function() {
                var $checkbox = $(this);
                var orig = $checkbox.data("text");
                var $row = $checkbox.closest(".text-row");
                
                $.ajax({
                    url: OVERRIDE_URL,
                    method: "POST",
                    headers: { "X-Requested-With": "XMLHttpRequest" },
                    data: { action: "delete", original_text: orig, lang: "{{ current_lang }}" },
                    success: function() { 
                        deleted++;
                        // Clear the input value and remove highlight
                        $row.find("[name='over[]']").val("").removeClass("ring-2 ring-accent/30");
                        $checkbox.prop("checked", false);
                        
                        if(deleted === total) {
                            toastr.success(deleted + " override(s) deleted!");
                            $btn.html(originalText).prop("disabled", false);
                            updateSelectAllVisibility();
                        }
                    },
                    error: function() { 
                        toastr.error("Failed to delete: " + orig);
                        deleted++;
                        if(deleted === total) {
                            $btn.html(originalText).prop("disabled", false);
                        }
                    }
                });
            });
            }); /* end ocConfirm */
        });

        // Delete all (no reload)
        $("#delete-all").on("click", function() {
            var $btn = $(this);
            var originalText = $btn.html();
            window.ocConfirm("{% trans %}Delete ALL overrides?{% endtrans %}\n\n\u2022 All custom text overrides will be removed\n\u2022 Original text will be restored everywhere\n\u2022 This affects all languages", function() {
            $btn.html('<i class="fa fa-spinner fa-spin"></i>').prop("disabled", true);
            $.ajax({
                url: OVERRIDE_URL,
                method: "POST",
                headers: { "X-Requested-With": "XMLHttpRequest" },
                data: { action: "delete_all", lang: "{{ current_lang }}" },
                success: function() { 
                    toastr.success("All overrides deleted!");
                    $("[name='over[]']").val("").removeClass("ring-2 ring-accent/30");
                    $(".bulk-select").prop("checked", false);
                    updateSelectAllVisibility();
                },
                error: function() { 
                    toastr.error("Failed to delete overrides."); 
                },
                complete: function() {
                    $btn.html(originalText).prop("disabled", false);
                }
            });
            }); /* end ocConfirm */
        });

        // Empty Database button - show modal
        $("#empty-database").on("click", function() {
            $("#empty-database-modal").removeClass("hidden");
            $("#confirm-delete-text").val("");
            $("#confirm-empty-database").prop("disabled", true);
        });

        // Cancel empty database
        $("#cancel-empty-database").on("click", function() {
            $("#empty-database-modal").addClass("hidden");
        });

        // Confirm delete text input
        $("#confirm-delete-text").on("input", function() {
            var text = $(this).val();
            if (text === "DELETE") {
                $("#confirm-empty-database").prop("disabled", false);
            } else {
                $("#confirm-empty-database").prop("disabled", true);
            }
        });

        // Confirm empty database
        $("#confirm-empty-database").on("click", function() {
            var $btn = $(this);
            var originalHtml = $btn.html();
            $btn.html('<i class="fa fa-spinner fa-spin"></i> Emptying...').prop("disabled", true);
            
            $.ajax({
                url: OVERRIDE_EMPTY_URL,
                method: "POST",
                headers: { "X-Requested-With": "XMLHttpRequest" },
                success: function() { 
                    toastr.success("Database emptied successfully!");
                    $("#empty-database-modal").addClass("hidden");
                    // Clear all input values and reload the page to refresh all data
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                },
                error: function(xhr) { 
                    var errorMsg = "Failed to empty database.";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                    $btn.html(originalHtml).prop("disabled", false);
                }
            });
        });

        // Close modal on escape key
        $(document).on("keydown", function(e) {
            if (e.key === "Escape" && !$("#empty-database-modal").hasClass("hidden")) {
                $("#empty-database-modal").addClass("hidden");
            }
        });

        // Export to PO
        $("#export-po").on("click", function() {
            window.location.href = "{{ url('/admin/text-overrides/export-po') }}";
        });

        // Export CSV (existing overrides for current language as CSV)
        $("#export-csv").on("click", function() {
            window.location.href = "{{ url('/admin/text-overrides/export-csv') }}?lang={{ current_lang }}";
        });

        // Import CSV — open modal
        $("#import-csv-btn").on("click", function() {
            $("#import-csv-modal").removeClass("hidden");
        });
        $("#import-csv-modal-close, #import-csv-modal-cancel").on("click", function() {
            $("#import-csv-modal").addClass("hidden");
        });
        $(document).on("keydown", function(e) {
            if (e.key === "Escape") $("#import-csv-modal").addClass("hidden");
        });
    });

    // Individual delete function (no reload)
    window.deleteOverride = function(orig, btn) {
        var $btn = $(btn);
        var originalHtml = $btn.html();
        window.ocConfirm("Delete this override?\n\n\u2022 The custom text for this entry will be removed\n\u2022 The original text will be restored", function() {
        $btn.html('<i class="fa fa-spinner fa-spin"></i>').prop("disabled", true);
        
        $.ajax({
            url: OVERRIDE_URL,
            method: "POST",
            headers: { "X-Requested-With": "XMLHttpRequest" },
            data: { action: "delete", original_text: orig, lang: "{{ current_lang }}" },
            success: function() {
                toastr.success("Override removed!");
                $btn.closest("[id^='override-']").fadeOut(300, function() { 
                    $(this).remove();
                    
                    // Also clear the bulk form input if exists
                    $(".text-row").filter(function() {
                        return $(this).find(".original-text").text().trim() === orig;
                    }).find("[name='over[]']").val("").removeClass("ring-2 ring-accent/30");
                });
            },
            error: function() { 
                toastr.error("Failed to remove override.");
                $btn.html(originalHtml).prop("disabled", false);
            }
        });
        }); /* end ocConfirm */
    };
</script>

<!-- ── Import CSV Modal ─────────────────────────────────────────────────── -->
<div id="import-csv-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
            <h3 class="font-semibold text-gray-900 dark:text-white text-base">
                <i class="fa fa-upload mr-2 text-green-600 dark:text-green-400"></i>{% trans %}Import Text Overrides CSV{% endtrans %}
            </h3>
            <button type="button" id="import-csv-modal-close"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <form method="post" action="{{ url('/admin/text-overrides/import-csv') }}" enctype="multipart/form-data" class="p-6 space-y-4">
            <div class="rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-800/40 p-4 space-y-2">
                <p class="text-xs font-semibold text-green-700 dark:text-green-300 uppercase tracking-wide">{% trans %}CSV Format{% endtrans %}</p>
                <p class="text-xs text-green-600 dark:text-green-400 font-mono bg-green-100/60 dark:bg-green-800/30 px-2 py-1.5 rounded-lg">original_text, override_text</p>
                <ul class="text-xs text-green-600 dark:text-green-400 space-y-1 list-disc list-inside">
                    <li>{% trans %}<code class="bg-green-100 dark:bg-green-800/40 px-1 rounded">original_text</code> — exact English string to override.{% endtrans %}</li>
                    <li>{% trans %}<code class="bg-green-100 dark:bg-green-800/40 px-1 rounded">override_text</code> — the replacement string. Empty rows are skipped.{% endtrans %}</li>
                    <li>{% trans %}After import, <code class="bg-green-100 dark:bg-green-800/40 px-1 rounded">messages.po</code> is updated automatically.{% endtrans %}</li>
                </ul>
                <div class="flex flex-wrap gap-3 pt-1">
                    <a href="{{ url('/admin/text-overrides/export-csv') }}?lang={{ current_lang }}"
                       class="inline-flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 hover:underline">
                        <i class="fa fa-download"></i> {% trans %}Download existing overrides as CSV{% endtrans %}
                    </a>
                    <a href="{{ url('/admin/text-overrides/export-csv-template') }}?lang={{ current_lang }}"
                       class="inline-flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 hover:underline">
                        <i class="fa fa-file-alt"></i> {% trans %}Download blank template (all strings){% endtrans %}
                    </a>
                </div>
            </div>
            <input type="hidden" name="lang" value="{{ current_lang }}">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}CSV File{% endtrans %}</label>
                <input type="file" name="csv_file" accept=".csv"
                       class="w-full px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-green-500/50 outline-none transition-all"
                       required>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{% trans %}UTF-8 encoded .csv file{% endtrans %}</p>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" id="import-csv-modal-cancel"
                        class="px-4 py-2 rounded-xl text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </button>
                <button type="submit"
                        class="px-4 py-2 rounded-xl text-sm font-medium text-white bg-green-600 hover:bg-green-700 transition-all">
                    <i class="fa fa-upload mr-1.5"></i>{% trans %}Import & Update PO{% endtrans %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}