{% extends "base.html" %}
{% block title %}File Records{% endblock %}

{% block head_extra %}
  <script src="/static/js/common.js"></script>
  <!-- Add TableSorter library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap_4.min.css">
  <style>
    .file-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 1rem;
    }
    .file-table th, 
    .file-table td {
      padding: 0.75rem;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }
    .file-table th {
      background-color: #f7fafc;
      font-weight: 600;
      cursor: pointer;
    }
    .file-table th:hover {
      background-color: #edf2f7;
    }
    .file-table tbody tr:hover {
      background-color: #f7fafc;
    }
    .delete-btn {
      color: #e53e3e;
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      background: none;
      border: none;
      display: flex;
      align-items: center;
    }
    .delete-btn:hover {
      background-color: #fed7d7;
    }
    .error-message {
      background-color: #FEE2E2;
      border: 1px solid #F87171;
      color: #B91C1C;
      padding: 1rem;
      border-radius: 0.25rem;
      margin-bottom: 1rem;
    }
    
    /* TableSorter specific styles */
    .tablesorter-header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    /* Modal styles */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background-color: white;
      border-radius: 0.5rem;
      padding: 2rem;
      max-width: 500px;
      width: 90%;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .modal-title {
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .modal-buttons {
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5rem;
      gap: 0.75rem;
    }
    .modal-btn {
      padding: 0.5rem 1rem;
      border-radius: 0.25rem;
      border: none;
      cursor: pointer;
    }
    .modal-btn-cancel {
      background-color: #e2e8f0;
    }
    .modal-btn-cancel:hover {
      background-color: #cbd5e0;
    }
    .modal-btn-delete {
      background-color: #e53e3e;
      color: white;
    }
    .modal-btn-delete:hover {
      background-color: #c53030;
    }
  </style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h2 class="text-3xl font-bold mb-6">File Records</h2>
  
  {% if error %}
  <div class="error-message">
    <p><strong>Error:</strong> {{ error }}</p>
    <p class="mt-2">This might be due to a configuration or import issue. Please check the server logs.</p>
  </div>
  {% endif %}

  
  <!-- File table -->
  <div class="overflow-x-auto">
    <table class="file-table" id="fileTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Original Filename</th>
          <th>File Size</th>
          <th>Mime Type</th>
          <th>Created At</th>
          <th class="sorter-false">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for file in files %}
        <tr>
          <td>{{ file.id }}</td>
          <td>{{ file.original_filename }}</td>
          <td data-sort-value="{{ file.file_size }}">{{ (file.file_size / 1024) | round(2) }} KB</td>
          <td>{{ file.mime_type }}</td>
          <td>{{ file.created_at }}</td>
          <td>
            <button onclick="showDeleteModal('{{ file.id }}')" class="delete-btn">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="6" class="text-center py-4">No files found</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <!-- Delete confirmation modal -->
  <div id="deleteModal" class="modal">
    <div class="modal-content">
      <div class="modal-title">Confirm Deletion</div>
      <p>Are you sure you want to delete this file?</p>
      <div class="modal-buttons">
        <button id="cancelDelete" class="modal-btn modal-btn-cancel">Cancel</button>
        <button id="confirmDelete" class="modal-btn modal-btn-delete">Delete</button>
      </div>
    </div>
  </div>
  
  <!-- Add JavaScript for handling DELETE requests -->
  <script>
    // Modal functionality
    const modal = document.getElementById('deleteModal');
    const cancelDelete = document.getElementById('cancelDelete');
    const confirmDelete = document.getElementById('confirmDelete');
    let currentFileId = null;
    
    function showDeleteModal(fileId) {
      currentFileId = fileId;
      modal.style.display = 'flex';
    }
    
    cancelDelete.addEventListener('click', () => {
      modal.style.display = 'none';
    });
    
    confirmDelete.addEventListener('click', () => {
      deleteFile(currentFileId);
      modal.style.display = 'none';
    });
    
    // Close modal if clicking outside of it
    window.addEventListener('click', (event) => {
      if (event.target === modal) {
        modal.style.display = 'none';
      }
    });
    
    function deleteFile(fileId) {
      fetch(`/api/files/${fileId}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Failed to delete file');
        }
        // Reload the page to show updated file list
        window.location.reload();
      })
      .catch(error => {
        console.error('Error:', error);
        alert(`Error deleting file: ${error.message}`);
      });
    }
    
    // Initialize TableSorter
    $(document).ready(function() {
      $("#fileTable").tablesorter({
        theme: 'bootstrap',
        widthFixed: true,
        headerTemplate: '{content} {icon}',
        widgets: ['zebra', 'stickyHeaders'],
        sortList: [[0, 0]], // Default sort on the first column ascending
        headers: {
          5: { sorter: false } // Disable sorting on the Actions column
        }
      });
    });
  </script>
</div>
{% endblock %}