<%- include('../../layouts/head.ejs') %>

<script src="/js/pagination.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>

<style>
  /* Custom styles for translation table */
  .translation-cell {
    max-width: 200px;
    min-width: 150px;
    word-wrap: break-word;
    overflow: hidden;
  }

  .translation-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 4.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    word-break: break-word;
  }

  .translation-text.expanded {
    -webkit-line-clamp: unset;
    max-height: none;
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .translation-text:hover {
    background-color: #e9ecef;
  }

  .table-fixed-layout {
    table-layout: fixed;
    width: 100%;
  }

  .action-buttons {
    white-space: nowrap;
    width: 140px;
  }

  /* Scrollable container for table */
  .table-container {
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid #dee2e6;
  }

  .btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .editable-disabled {
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  /* Improved table styling */
  #translationsTable th {
    padding: 16px 12px !important;
    font-weight: 600;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
  }

  #translationsTable td {
    padding: 14px 12px !important;
    vertical-align: top;
    border-bottom: 1px solid #e9ecef;
  }

  /* Ensure numbers stay in one line */
  .text-center {
    white-space: nowrap;
  }

  /* Better badge styling */
  .badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
  }

  /* Improved form styling */
  .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
  }

  .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 20px;
  }

  .card-body {
    padding: 20px;
  }

  /* Better button spacing */
  .btn {
    margin: 2px;
  }

  /* Ensure checkboxes are properly aligned */
  .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
  }

  /* Better textarea for editing */
  .edit-textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    border: 1px solid #007bff;
    border-radius: 4px;
    padding: 8px;
    font-size: 0.875rem;
  }

  /* Edit mode styling */
  .edit-mode {
    background-color: #f0f8ff;
    border: 1px solid #007bff;
    border-radius: 4px;
  }

  .edit-buttons {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    justify-content: flex-end;
  }

  .edit-buttons .btn-sm {
    padding: 4px 8px;
    font-size: 0.75rem;
  }

  /* Improved hover effects */
  tr:hover {
    background-color: #f8f9fa !important;
  }

  /* Modal styles */
  .modal-dialog-scrollable {
    max-height: 85vh;
  }

  .language-group {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f8f9fa;
  }

  .language-group h6 {
    margin-bottom: 10px;
    color: #495057;
  }

  .csv-upload-area {
    border: 2px dashed #007bff;
    border-radius: 8px;
    padding: 30px;
    background-color: #f8f9fa;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .csv-upload-area:hover {
    background-color: #e9ecef;
    border-color: #0056b3;
  }

  .csv-upload-area.dragover {
    background-color: #d4edda;
    border-color: #28a745;
  }

  .csv-preview {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    background-color: #fff;
  }

  .csv-preview-table {
    font-size: 12px;
  }

  .csv-preview-table th {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
  }

  .file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
  }

  .file-input-wrapper input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .upload-icon {
    font-size: 48px;
    color: #007bff;
    margin-bottom: 15px;
  }

  .csv-template-download {
    margin-top: 10px;
    font-size: 0.875rem;
  }
</style>

<%- include('../../layouts/header.ejs') %>
<main class="dashboard-main">
  <%- include('../../layouts/navbar.ejs') %>

  <div class="container flex-1 pt-20 w-full my-4">

    <%- include('../../partials/utils/title.ejs', {title: "Localisations Manager"}) %>

    <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
      { label: "Localisations Manager" }
    ];
    %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <!-- Add/Edit Modal -->
    <div class="modal fade" id="translationModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalTitle">Add New Translation</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="translationForm">
              <input type="hidden" id="translationId" name="id" value="">
              
              <div class="row g-3">
                <div class="col-md-6">
                  <label for="key" class="form-label">Key *</label>
                  <input type="text" id="key" name="key" class="form-control" required 
                         placeholder="Enter translation key (e.g., welcome.message)">
                </div>
                
                <div class="col-md-6">
                  <label for="type" class="form-label">Type</label>
                  <select id="type" name="type" class="form-control">
                    <option value="c" selected>Common</option>
                    <option value="r">Rider</option>
                    <option value="d">Driver</option>
                  </select>
                </div>
              </div>

              <div class="language-group mt-4">
                <h6>Translations *</h6>
                
                <div class="row g-3">
                  <% if (searchFields && searchFields.length > 2) { %>
                    <% searchFields.slice(2).forEach(field => { %>
                      <div class="col-md-<%= 12 / Math.min(searchFields.slice(2).length, 3) %>">
                        <label for="<%= field.name %>" class="form-label"><%= field.label %> <%= field.name === 'en' ? '*' : '' %></label>
                        <textarea id="<%= field.name %>" name="<%= field.name %>" rows="3" class="form-control language-field"
                                  placeholder="<%= field.label %> translation" 
                                  <%= field.name === 'en' ? 'required' : '' %>></textarea>
                      </div>
                    <% }); %>
                  <% } else { %>
                    <div class="col-md-4">
                      <label for="en" class="form-label">English *</label>
                      <textarea id="en" name="en" rows="3" class="form-control language-field" 
                                placeholder="English translation" required></textarea>
                    </div>
                    
                    <div class="col-md-4">
                      <label for="es" class="form-label">Spanish</label>
                      <textarea id="es" name="es" rows="3" class="form-control language-field" 
                                placeholder="Spanish translation"></textarea>
                    </div>
                    
                    <div class="col-md-4">
                      <label for="ar" class="form-label">Arabic</label>
                      <textarea id="ar" name="ar" rows="3" class="form-control language-field" 
                                placeholder="Arabic translation"></textarea>
                    </div>
                  <% } %>
                </div>
              </div>

              <div class="row g-3 mt-2">
                <div class="col-md-6">
                  <label for="active" class="form-label">Status</label>
                  <select id="active" name="active" class="form-control">
                    <option value="1" selected>Active</option>
                    <option value="0">Inactive</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-success" id="submitFormBtn">
              <i class="fas fa-save"></i> Save Translation
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- CSV Import Modal -->
    <div class="modal fade" id="csvImportModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Import Translations from CSV</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="alert alert-info">
              <i class="fas fa-info-circle"></i> Upload a CSV file with translations. Existing keys will be updated.
            </div>
            
            <!-- CSV Upload Area -->
            <div class="csv-upload-area" id="csvUploadArea">
              <div class="upload-icon">
                <i class="fas fa-file-csv"></i>
              </div>
              <h5>Drop CSV file here or click to upload</h5>
              <p class="text-muted">Supports .csv files with proper headers</p>
              <div class="file-input-wrapper">
                <button class="btn btn-primary">
                  <i class="fas fa-upload"></i> Select CSV File
                </button>
                <input type="file" id="csvFile" accept=".csv" class="form-control">
              </div>
              
              <div class="csv-template-download">
                <a href="javascript:void(0);" id="downloadTemplate" class="text-primary">
                  <i class="fas fa-download"></i> Download CSV Template
                </a>
              </div>
            </div>

            <!-- CSV Preview -->
            <div id="csvPreview" class="mt-4" style="display: none;">
              <h6>Preview (First 5 rows)</h6>
              <div class="csv-preview">
                <table class="table table-sm csv-preview-table">
                  <thead>
                    <tr id="previewHeaders"></tr>
                  </thead>
                  <tbody id="previewRows"></tbody>
                </table>
              </div>
              <div class="mt-2" id="previewStats"></div>
            </div>

            <!-- Import Options -->
            <div class="mt-4" id="importOptions" style="display: none;">
              <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i> 
                <strong>Warning:</strong> Existing keys will be updated with new values.
                Importing may overwrite existing translations.
              </div>
              
              <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="skipErrors" checked>
                <label class="form-check-label" for="skipErrors">
                  Skip rows with errors and continue importing
                </label>
              </div>
              
              <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="updateExisting" checked>
                <label class="form-check-label" for="updateExisting">
                  Update existing translations (uncheck to skip existing keys)
                </label>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-success" id="processImport" disabled>
              <i class="fas fa-upload"></i> Import Translations
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Translation List -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
      <div style="display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;">
        <div style="display: flex; gap: 10px; align-items: center;">
          <!-- Manual Add Button -->
          <button type="button" class="btn btn-primary" id="addNewBtn" data-bs-toggle="modal" data-bs-target="#translationModal">
            <i class="fas fa-plus"></i> Add Translation
          </button>
          
          <!-- CSV Import Button -->
          <button type="button" class="btn btn-info" id="csvImportBtn" data-bs-toggle="modal" data-bs-target="#csvImportModal">
            <i class="fas fa-file-import"></i> Import CSV
          </button>
          
          <!-- Export Button Dropdown -->
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <i class="fas fa-file-export"></i> Export CSV
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="javascript:void(0);" id="exportCurrentPageBtn">
                <i class="fas fa-file-csv"></i> Export Current Page Data
              </a></li>
              <li><a class="dropdown-item" href="javascript:void(0);" id="exportAllDataBtn">
                <i class="fas fa-database"></i> Export All Data
              </a></li>
            </ul>
          </div>
        </div>
        
        <div style="display: flex; gap:10px">
          <button id="deleteSelected" class="btn shadow btn-danger" style="padding-block: 6px;">
            <i class="fas fa-trash"></i>
          </button>
          <div style="display: flex; justify-content: end;">
            <%- include('../../partials/utils/searchFilter.ejs') %>
          </div>
        </div>
      </div>
    </div>

    <div class="card basic-data-table">
      <div class="card-header">
        <h5 class="card-title mb-0">Total Localisations: <span id="totalRows"></span></h5>
      </div>
      <div class="container-fluid py-3 px-3">
        <div class="row align-items-center g-3">
          <!-- Entries per page -->
          <div class="col-12 col-md-6 d-flex flex-wrap align-items-center">
            <select id="pageLength" class="form-select w-auto me-2 mb-1">
              <option value="50" selected>50</option>
              <option value="100">100</option>
              <option value="500">500</option>
              <option value="1000">1000</option>
              <option value="2000">2000</option>
            </select>
            <span class="mb-1 f-search">entries per page</span>
          </div>

          <!-- Global Search -->
          <div class="col-12 col-md-6 d-flex flex-wrap justify-content-md-end align-items-center">
            <label for="globalSearch" class="me-2 mb-1 f-search">Global Search:</label>
            <input type="text" id="globalSearch" class="form-control w-auto mb-1" placeholder="Enter keyword...">
          </div>
        </div>
      </div>

      <!-- Responsive Table -->
      <div class="table-container">
        <div class="table-responsive">
          <table id="translationsTable" class="table table-striped table-bordered table-fixed-layout">
            <thead>
              <tr>
                <th scope="col" style="width: 50px;">
                  <div class="form-check style-check d-flex align-items-center">
                    <input id="selectAll" class="form-check-input" type="checkbox">
                  </div>
                </th>
                <th data-sort="id" style="width: 70px;">
                  ID
                  <span class="sort-icons">
                    <i class="fa fa-sort sort-neutral"></i>
                    <i class="fa fa-sort-up sort-asc"></i>
                    <i class="fa fa-sort-down sort-desc"></i>
                  </span>
                </th>
                <th data-sort="key" style="width: 180px;">Key</th>
                <th data-sort="type" style="width: 100px;">Type</th>
                <% if (searchFields && searchFields.length > 2) { %>
                  <% searchFields.slice(2).forEach(field => { %>
                    <th style="width: 200px;"><%= field.label %></th>
                  <% }); %>
                <% } else { %>
                  <th style="width: 200px;">English</th>
                  <th style="width: 200px;">Spanish</th>
                  <th style="width: 200px;">Arabic</th>
                <% } %>
                <th data-sort="ver" style="width: 90px;">Version</th>
                <th data-sort="active" style="width: 100px;">Status</th>
                <th style="width: 150px;">Options</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>

      <div class="pagination">
        <div id="pagination"></div>
      </div>
    </div>
  </div>
</main>

<script>
  // Store language fields for dynamic rendering
  const languageFields = <%- JSON.stringify(searchFields ? searchFields.slice(2) : [{name: 'en', label: 'ENGLISH'}, {name: 'es', label: 'SPANISH'}, {name: 'ar', label: 'ARABIC'}]) %>;

  // Configure the export component
  window.exportConfig = {
    csv: {
      headers: ["ID", "Key", "Type", ...languageFields.map(f => f.label), "Version", "Status"],
      dataMapper: (translation) => [
        translation.id,
        translation.key || "",
        translation.type || "c",
        ...languageFields.map(f => translation[f.name] || ""),
        translation.ver || "0",
        translation.active ? "1" : "0"
      ],
      filename: 'translations.csv'
    },
    pdf: {
      headers: ["ID", "Key", "Type", "English", "Status"],
      dataMapper: (translation) => [
        translation.id,
        translation.key || "N/A",
        translation.type || "N/A",
        (translation.en || "N/A").substring(0, 50) + ((translation.en || "").length > 50 ? "..." : ""),
        translation.active ? "Active" : "Inactive"
      ],
      title: 'Translations Report',
      filename: 'translations.pdf',
      pageSize: 'A4',
      margin: {
        top: 20,
        right: 10,
        bottom: 20,
        left: 10
      },
      fontSize: 8
    },
    fetchAllUrl: '/admin/translation/data?limit=99999',
    currentData: []
  };

  // Set global search input for pagination
  window.globalSearchInput = '#globalSearch';

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/translation/data',
    defaultSort: {
      column: 'id',
      order: 'DESC'
    },
    dataMapper: (translation) => {
      const typeLabels = {
        'c': '<span class="badge bg-primary">Common</span>',
        'r': '<span class="badge bg-info">Rider</span>',
        'd': '<span class="badge bg-warning text-dark">Driver</span>'
      };

      const statusLabels = {
        '1': '<span class="badge bg-success">Active</span>',
        '0': '<span class="badge bg-danger">Inactive</span>'
      };

      // Generate language field cells dynamically
      const languageCells = languageFields.map(field => {
        const fieldValue = translation[field.name] || "";
        return `
        <td class="translation-cell editable" data-field="${field.name}" data-id="${translation.id}">
          <div class="translation-text" title="Click to view full text">
            ${fieldValue || "—"}
          </div>
          <div class="edit-container d-none">
            <textarea class="edit-textarea">${fieldValue}</textarea>
            <div class="edit-buttons">
              <button class="btn btn-success btn-sm update-field" data-field="${field.name}" data-id="${translation.id}">
                <i class="fas fa-check"></i> Update
              </button>
              <button class="btn btn-secondary btn-sm cancel-edit">
                <i class="fas fa-times"></i> Cancel
              </button>
            </div>
          </div>
        </td>`;
      }).join('');

      return `
      <tr class="bg-white border-b hover:bg-gray-50" data-id="${translation.id}">
        <td>
          <div class="form-check style-check d-flex align-items-center">
            <input class="select-translation form-check-input" type="checkbox" value="${translation.id}">
          </div>
        </td>
        <td class="text-center" style="white-space: nowrap;">
          <span class="font-semibold text-gray-700">${translation.id}</span>
        </td>
        <td>
          <span class="font-semibold text-gray-800 text-sm" style="word-break: break-word;">${translation.key || "N/A"}</span>
        </td>
        <td class="text-center">
          ${typeLabels[translation.type] || '<span class="badge bg-secondary">N/A</span>'}
        </td>
        ${languageCells}
        <td class="text-center" style="white-space: nowrap;">
          <span class="badge bg-secondary">v${translation.ver || 0}</span>
        </td>
        <td class="text-center">
          ${statusLabels[translation.active] || '<span class="badge bg-secondary">N/A</span>'}
        </td>
        <td class="text-center action-buttons">
          <button class="btn btn-sm btn-outline-primary toggle-status mr-1" 
                  data-id="${translation.id}" data-active="${translation.active}"
                  title="${translation.active ? 'Deactivate' : 'Activate'}">
            <i class="fas ${translation.active ? 'fa-toggle-on' : 'fa-toggle-off'}"></i>
          </button>
          <button class="btn btn-sm btn-outline-success mr-1 edit-btn" 
                  data-id="${translation.id}" title="Edit">
            <i class="fas fa-edit"></i>
          </button>
          <button class="btn btn-sm btn-outline-danger delete-single" 
                  data-id="${translation.id}" title="Delete">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
      `;
    }
  });

  $(document).ready(function() {
    // Initialize with default limit
    const defaultLimit = $("#pageLength").val();
    pagination.loadData(1, defaultLimit);

    // Handle page length change
    $("#pageLength").change(function() {
      const newLimit = $(this).val();
      pagination.loadData(1, newLimit);
    });

    // Reset form handler
    $("#resetForm").click(function() {
      $("#searchForm")[0].reset();
      pagination.loadData(1, $("#pageLength").val());
    });

    // Select/Deselect all checkboxes
    $("#selectAll").on("click", function() {
      $(".select-translation").prop("checked", this.checked);
    });

    // Expand/collapse translation text
    $(document).on('click', '.translation-text', function(e) {
      if ($(this).hasClass('d-none')) return;
      $(this).toggleClass('expanded');
      e.stopPropagation();
    });

    // Close expanded text when clicking elsewhere
    $(document).on('click', function(e) {
      if (!$(e.target).hasClass('translation-text')) {
        $('.translation-text.expanded').removeClass('expanded');
      }
    });

    // CSV Import Functionality
    let csvData = null;
    let parsedData = [];

    // Download CSV template
    $("#downloadTemplate").click(function() {
      const langFieldNames = languageFields.map(f => f.name);
      const headers = ["key", "type", ...langFieldNames, "ver", "active"];
      const sampleData = [
        ["welcome.message", "c", ...langFieldNames.map(() => "Sample text"), "0", "1"],
        ["error.not_found", "c", ...langFieldNames.map(() => "Not found"), "0", "1"],
        ["profile.title", "r", ...langFieldNames.map(() => "Profile"), "0", "1"]
      ];
      
      const csvContent = [
        headers.join(","),
        ...sampleData.map(row => row.join(","))
      ].join("\n");
      
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement("a");
      const url = URL.createObjectURL(blob);
      
      link.setAttribute("href", url);
      link.setAttribute("download", "translations_template.csv");
      link.style.visibility = 'hidden';
      
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });

    // Handle file upload
    $("#csvFile").change(function(e) {
      handleCsvFile(e.target.files[0]);
    });

    // Drag and drop functionality
    const csvUploadArea = document.getElementById('csvUploadArea');
    
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      csvUploadArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
      e.preventDefault();
      e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
      csvUploadArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
      csvUploadArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
      csvUploadArea.classList.add('dragover');
    }

    function unhighlight(e) {
      csvUploadArea.classList.remove('dragover');
    }

    csvUploadArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
      const dt = e.dataTransfer;
      const files = dt.files;
      
      if (files.length > 0) {
        handleCsvFile(files[0]);
      }
    }

    function handleCsvFile(file) {
      if (!file || !file.name.endsWith('.csv')) {
        showToast('Please upload a valid CSV file', 'error');
        return;
      }

      $("#processImport").prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');

      Papa.parse(file, {
        header: true,
        skipEmptyLines: true,
        complete: function(results) {
          csvData = results.data;
          parsedData = csvData;
          
          if (csvData.length === 0) {
            showToast('CSV file is empty or has no valid data', 'error');
            $("#processImport").prop('disabled', true).html('<i class="fas fa-upload"></i> Import Translations');
            return;
          }

          // Show preview
          showCsvPreview(csvData);
          $("#processImport").prop('disabled', false).html('<i class="fas fa-upload"></i> Import Translations');
        },
        error: function(error) {
          showToast('Error parsing CSV file: ' + error.message, 'error');
          $("#processImport").prop('disabled', true).html('<i class="fas fa-upload"></i> Import Translations');
        }
      });
    }

    function showCsvPreview(data) {
      const previewCount = Math.min(5, data.length);
      const headers = Object.keys(data[0] || {});
      
      // Show headers
      $("#previewHeaders").empty();
      headers.forEach(header => {
        $("#previewHeaders").append(`<th>${header}</th>`);
      });

      // Show rows
      $("#previewRows").empty();
      for (let i = 0; i < previewCount; i++) {
        const row = data[i];
        const rowHtml = `<tr>${headers.map(header => `<td>${row[header] || ''}</td>`).join('')}</tr>`;
        $("#previewRows").append(rowHtml);
      }

      // Show stats
      $("#previewStats").html(`
        <div class="alert alert-success">
          <i class="fas fa-check-circle"></i> CSV parsed successfully!
          <br>
          <strong>${data.length}</strong> rows detected.
          ${data.length > previewCount ? ` (Showing first ${previewCount} rows)` : ''}
        </div>
      `);

      // Show preview and options
      $("#csvPreview").show();
      $("#importOptions").show();
    }

    // Process CSV import
    $("#processImport").click(function() {
      if (!parsedData || parsedData.length === 0) {
        showToast('No data to import', 'warning');
        return;
      }

      const skipErrors = $("#skipErrors").is(':checked');
      const updateExisting = $("#updateExisting").is(':checked');

      $("#processImport").prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Importing...');

      $.ajax({
        url: '/admin/translation/import-csv',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          translations: parsedData,
          skipErrors: skipErrors,
          updateExisting: updateExisting
        }),
        success: function(response) {
          if (response.success) {
            showToast(`Successfully imported ${response.imported || 0} translations`, "success");
            $('#csvImportModal').modal('hide');
            pagination.loadData(pagination.currentPage, $("#pageLength").val());
            
            // Reset form
            resetCsvImportForm();
          } else {
            showToast(response.message || "Import failed", "error");
            $("#processImport").prop('disabled', false).html('<i class="fas fa-upload"></i> Import Translations');
          }
        },
        error: function(xhr) {
          let errorMsg = "An unexpected error occurred during import";
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMsg = xhr.responseJSON.message;
          } else if (xhr.responseText) {
            errorMsg = xhr.responseText;
          }
          showToast(errorMsg, "error");
          $("#processImport").prop('disabled', false).html('<i class="fas fa-upload"></i> Import Translations');
        }
      });
    });

    function resetCsvImportForm() {
      $("#csvFile").val('');
      $("#csvPreview").hide();
      $("#importOptions").hide();
      csvData = null;
      parsedData = [];
      $("#processImport").prop('disabled', true).html('<i class="fas fa-upload"></i> Import Translations');
    }

    // Export CSV buttons
    $("#exportCurrentPageBtn").click(function() {
      exportCurrentPageAsCsv();
    });

    $("#exportAllDataBtn").click(function() {
      exportAllDataAsCsv();
    });

    function exportCurrentPageAsCsv() {
      // Get current page data from window.exportConfig (set by Pagination class)
      const data = (window.exportConfig && window.exportConfig.currentData) || [];
      
      if (data.length === 0) {
        showToast('No data to export', 'warning');
        return;
      }

      const langFieldNames = languageFields.map(f => f.name);
      const headers = ["key", "type", ...langFieldNames, "ver", "active"];
      const csvRows = data.map(translation => [
        translation.key || '',
        translation.type || 'c',
        ...langFieldNames.map(field => translation[field] || ''),
        translation.ver || '0',
        translation.active ? '1' : '0'
      ]);

      const csvContent = [
        headers.join(","),
        ...csvRows.map(row => row.map(cell => `"${cell}"`).join(","))
      ].join("\n");

      downloadCsvFile(csvContent, `translations_current_page_${new Date().toISOString().split('T')[0]}.csv`);
      showToast(`Exported ${data.length} records from current page`, 'success');
    }

    function exportAllDataAsCsv() {
      // Show loading indicator
      showToast('Preparing export...', 'info');

      // Fetch all data from the API
      $.ajax({
        url: '/admin/translation/data?limit=999999',
        method: 'GET',
        success: function(response) {
          const allData = response.data || [];
          
          if (allData.length === 0) {
            showToast('No data available to export', 'warning');
            return;
          }

          const langFieldNames = languageFields.map(f => f.name);
          const headers = ["key", "type", ...langFieldNames, "ver", "active"];
          const csvRows = allData.map(translation => [
            translation.key || '',
            translation.type || 'c',
            ...langFieldNames.map(field => translation[field] || ''),
            translation.ver || '0',
            translation.active ? '1' : '0'
          ]);

          const csvContent = [
            headers.join(","),
            ...csvRows.map(row => row.map(cell => `"${cell}"`).join(","))
          ].join("\n");

          downloadCsvFile(csvContent, `translations_all_data_${new Date().toISOString().split('T')[0]}.csv`);
          showToast(`Exported ${allData.length} records total`, 'success');
        },
        error: function(error) {
          showToast('Error exporting all data: ' + (error.responseJSON?.message || 'Unknown error'), 'error');
          console.error('Export error:', error);
        }
      });
    }

    function downloadCsvFile(csvContent, filename) {
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement("a");
      const url = URL.createObjectURL(blob);
      
      link.setAttribute("href", url);
      link.setAttribute("download", filename);
      link.style.visibility = 'hidden';
      
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    // Load translation for edit
    function loadTranslationForEdit(id) {
      $.ajax({
        url: `/admin/translation/get/${id}`,
        method: 'GET',
        success: function(response) {
          if (response.success) {
            const translation = response.data;
            $('#modalTitle').text('Edit Translation');
            $('#translationId').val(translation.id);
            $('#key').val(translation.key || '');
            $('#type').val(translation.type || 'c');
            $('#en').val(translation.en || '');
            $('#es').val(translation.es || '');
            $('#ar').val(translation.ar || '');
            $('#ver').val(translation.ver || '0');
            $('#active').val(translation.active ? '1' : '0');
            
            const modal = new bootstrap.Modal(document.getElementById('translationModal'));
            modal.show();
          } else {
            showToast('Translation not found', 'error');
          }
        },
        error: function() {
          showToast('Error loading translation', 'error');
        }
      });
    }

    // Edit button click
    $(document).on('click', '.edit-btn', function() {
      const id = $(this).data('id');
      loadTranslationForEdit(id);
    });

    // Add New button - reset form
    $('#addNewBtn').click(function() {
      $('#translationForm')[0].reset();
      $('#translationId').val('');
      $('#modalTitle').text('Add New Translation');
      $('#submitFormBtn').html('<i class="fas fa-save"></i> Save Translation');
      $('#type').val('c');
      $('#active').val('1');
      $('#ver').val('0');
    });

    // Inline editing functionality
    $(document).on('dblclick', '.editable', function() {
      const $cell = $(this);
      const $text = $cell.find('.translation-text');
      const $editContainer = $cell.find('.edit-container');

      $text.addClass('d-none');
      $editContainer.removeClass('d-none');
      $cell.addClass('edit-mode');

      const $textarea = $editContainer.find('.edit-textarea');
      $textarea.focus().height($textarea[0].scrollHeight);
    });

    // Cancel edit
    $(document).on('click', '.cancel-edit', function() {
      const $editContainer = $(this).closest('.edit-container');
      const $cell = $editContainer.closest('.translation-cell');
      const $text = $cell.find('.translation-text');

      $editContainer.addClass('d-none');
      $text.removeClass('d-none');
      $cell.removeClass('edit-mode');
    });

    // Update field
    $(document).on('click', '.update-field', function() {
      const $button = $(this);
      const $editContainer = $button.closest('.edit-container');
      const $cell = $editContainer.closest('.translation-cell');
      const $text = $cell.find('.translation-text');
      const $textarea = $editContainer.find('.edit-textarea');

      const field = $button.data('field');
      const id = $button.data('id');
      const newValue = $textarea.val();

      $button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');

      $.ajax({
        url: '/admin/translation/update-field',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          id: id,
          field: field,
          value: newValue
        }),
        success: function(response) {
          if (response.success) {
            $text.text(newValue || "—");
            $editContainer.addClass('d-none');
            $text.removeClass('d-none');
            $cell.removeClass('edit-mode');
            pagination.loadData(pagination.currentPage, $("#pageLength").val());
            showToast('Translation updated successfully!', 'success');
          } else {
            showToast('Failed to update translation', 'error');
            $button.prop('disabled', false).html('<i class="fas fa-check"></i> Update');
          }
        },
        error: function() {
          showToast('Error updating translation', 'error');
          $button.prop('disabled', false).html('<i class="fas fa-check"></i> Update');
        }
      });
    });

    // Toggle status
    $(document).on('click', '.toggle-status', function() {
      const button = $(this);
      const id = button.data('id');
      const currentStatus = parseInt(button.data('active'), 10);

      $.ajax({
        url: '/admin/translation/toggle-status',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          id: id
        }),
        success: function(response) {
          if (response.success) {
            const newStatus = !currentStatus;
            button.data('active', newStatus);
            button.find('i').removeClass('fa-toggle-on fa-toggle-off')
              .addClass(newStatus ? 'fa-toggle-on' : 'fa-toggle-off');

            const statusBadge = button.closest('tr').find('.badge');
            statusBadge.removeClass('bg-success bg-danger')
              .addClass(newStatus ? 'bg-success' : 'bg-danger')
              .text(newStatus ? 'Active' : 'Inactive');
            pagination.loadData(pagination.currentPage, $("#pageLength").val());
          } else {
            showToast('Failed to update status', 'error');
          }
        },
        error: function() {
          showToast('Error updating status', 'error');
        }
      });
    });

    // Save single translation
    $('#submitFormBtn').click(function() {
      saveSingleTranslation($('#translationModal'));
    });

    function saveSingleTranslation($modal) {
      const formData = {
        key: $('#key').val(),
        type: $('#type').val(),
        en: $('#en').val(),
        es: $('#es').val(),
        ar: $('#ar').val(),
        ver: $('#ver').val() || '0',
        active: $('#active').val()
      };

      const translationId = $('#translationId').val();
      if (translationId) {
        formData.id = translationId;
      }

      const url = translationId ? '/admin/translation/update' : '/admin/translation/create';

      $('#submitFormBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

      $.ajax({
        url: url,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
          if (response.success) {
            showToast(response.message, "success");
            $modal.modal('hide');
            pagination.loadData(pagination.currentPage, $("#pageLength").val());
          } else {
            showToast(response.message || "An error occurred", "error");
          }
          $('#submitFormBtn').prop('disabled', false).html('<i class="fas fa-save"></i> Save Translation');
        },
        error: function(xhr) {
          let errorMsg = "An unexpected error occurred";
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMsg = xhr.responseJSON.message;
          } else if (xhr.responseText) {
            errorMsg = xhr.responseText;
          }
          showToast(errorMsg, "error");
          $('#submitFormBtn').prop('disabled', false).html('<i class="fas fa-save"></i> Save Translation');
        }
      });
    }

    // Delete single translation
    $(document).on('click', '.delete-single', function() {
      const id = $(this).data('id');
      deleteTranslations([id]);
    });

    // Delete selected translations
    $("#deleteSelected").on("click", function() {
      const selectedIds = $(".select-translation:checked").map(function() {
        return $(this).val();
      }).get();

      if (selectedIds.length === 0) {
        showToast("Please select at least one translation to delete.", "warning");
        return;
      }

      deleteTranslations(selectedIds);
    });

    function deleteTranslations(ids) {
      Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#d33",
        cancelButtonColor: "#3085d6",
        confirmButtonText: "Yes, delete them!"
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: "/admin/translation/delete",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
              ids: ids
            }),
            success: function(response) {
              showToast(response.message || "Translations deleted successfully!", "success");
              pagination.loadData(pagination.currentPage, $("#pageLength").val());
            },
            error: function() {
              showToast("Error deleting translations.", "error");
            }
          });
        }
      });
    }

    // Clear form when modal is hidden
    $('#translationModal').on('hidden.bs.modal', function() {
      $('#translationForm')[0].reset();
      $('#translationId').val('');
      $('#type').val('c');
      $('#active').val('1');
      $('#ver').val('0');
      $('#modalTitle').text('Add New Translation');
      $('#submitFormBtn').html('<i class="fas fa-save"></i> Save Translation');
    });

    // Reset CSV import form when modal is hidden
    $('#csvImportModal').on('hidden.bs.modal', function() {
      resetCsvImportForm();
    });
  });

  // Toast notification function
  function showToast(message, type = "error") {
    const Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
    });

    Toast.fire({
      icon: type,
      title: message
    });
  }
</script>

<%- include('../../layouts/footer.ejs') %>