{% extends "base.html" %}
{% block title %}Files — LockBox{% endblock %}

{% block content %}
<div class="container-fluid py-3 px-lg-4">
  <!-- Toolbar -->
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">Home</a></li>
        {% for bc in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if not loop.last %}<a href="{{ url_for('dashboard', folder_uuid=bc.uuid) }}">{{ bc.name }}</a>{% else %}{{ bc.name }}{% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>
    <div class="d-flex gap-2">
      <button class="btn btn-outline-primary btn-sm rounded-pill" data-bs-toggle="modal" data-bs-target="#newFolderModal">
        <i class="bi bi-folder-plus me-1"></i> New folder
      </button>
      <button class="btn btn-primary btn-sm rounded-pill" data-bs-toggle="modal" data-bs-target="#uploadModal">
        <i class="bi bi-cloud-upload me-1"></i> Upload
      </button>
    </div>
  </div>

  <!-- Storage bar -->
  <div class="card border-0 shadow-sm rounded-3 mb-3">
    <div class="card-body py-2 px-3 d-flex align-items-center gap-3">
      <i class="bi bi-hdd text-primary"></i>
      <div class="flex-grow-1">
        <div class="progress" style="height: 6px;">
          <div class="progress-bar bg-primary" id="usageBar" style="width: 0%"></div>
        </div>
      </div>
      <small class="text-muted" id="usageText">{{ (total_size / 1024 / 1024)|round(1) }} MB used</small>
    </div>
  </div>

  <!-- View toggle + sort -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div class="btn-group btn-group-sm" role="group">
      <button type="button" class="btn btn-outline-secondary active" id="viewGridBtn"><i class="bi bi-grid-3x3-gap"></i></button>
      <button type="button" class="btn btn-outline-secondary" id="viewListBtn"><i class="bi bi-list-ul"></i></button>
    </div>
    <small class="text-muted">{{ folders|length }} folders · {{ files|length }} files</small>
  </div>

  <!-- Grid view -->
  <div id="gridView" class="row g-3">
    {% for folder in folders %}
    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card file-card h-100 border-0 shadow-sm rounded-3 text-center p-3 position-relative">
        <a href="{{ url_for('dashboard', folder_uuid=folder.uuid) }}" class="text-decoration-none text-dark">
          <i class="bi bi-folder-fill text-warning display-4"></i>
          <div class="mt-2 small fw-medium text-truncate">{{ folder.name }}</div>
        </a>
        <div class="dropdown position-absolute top-0 end-0 m-1">
          <button class="btn btn-sm btn-light rounded-circle" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
          <ul class="dropdown-menu dropdown-menu-end shadow">
            <li><a class="dropdown-item rename-btn" href="#" data-uuid="{{ folder.uuid }}" data-type="folder" data-name="{{ folder.name }}"><i class="bi bi-pencil me-2"></i>Rename</a></li>
            <li><a class="dropdown-item text-danger trash-btn" href="#" data-uuid="{{ folder.uuid }}" data-type="folder"><i class="bi bi-trash me-2"></i>Move to trash</a></li>
          </ul>
        </div>
      </div>
    </div>
    {% endfor %}
    {% for file in files %}
    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card file-card h-100 border-0 shadow-sm rounded-3 text-center p-3 position-relative">
        <div class="file-icon mb-2">
          {% set ext = file.original_name.rsplit('.', 1)[-1].lower() if '.' in file.original_name else '' %}
          {% if ext in ['jpg','jpeg','png','gif','webp','svg'] %}
            <i class="bi bi-file-earmark-image text-success display-5"></i>
          {% elif ext in ['pdf'] %}
            <i class="bi bi-file-earmark-pdf text-danger display-5"></i>
          {% elif ext in ['zip','tar','gz','7z'] %}
            <i class="bi bi-file-earmark-zip text-secondary display-5"></i>
          {% elif ext in ['py','js','css','html','json','md','txt'] %}
            <i class="bi bi-file-earmark-code text-info display-5"></i>
          {% else %}
            <i class="bi bi-file-earmark text-primary display-5"></i>
          {% endif %}
        </div>
        <div class="small fw-medium text-truncate" title="{{ file.original_name }}">{{ file.original_name }}</div>
        <div class="text-muted" style="font-size: 0.7rem;">{{ (file.size / 1024)|round(1) }} KB · encrypted</div>
        <div class="dropdown position-absolute top-0 end-0 m-1">
          <button class="btn btn-sm btn-light rounded-circle" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
          <ul class="dropdown-menu dropdown-menu-end shadow">
            <li><a class="dropdown-item download-btn" href="#" data-uuid="{{ file.uuid }}" data-name="{{ file.original_name }}"><i class="bi bi-download me-2"></i>Download & Decrypt</a></li>
            <li><a class="dropdown-item rename-btn" href="#" data-uuid="{{ file.uuid }}" data-type="file" data-name="{{ file.original_name }}"><i class="bi bi-pencil me-2"></i>Rename</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger trash-btn" href="#" data-uuid="{{ file.uuid }}" data-type="file"><i class="bi bi-trash me-2"></i>Move to trash</a></li>
          </ul>
        </div>
      </div>
    </div>
    {% endfor %}
    {% if not folders and not files %}
    <div class="col-12 text-center py-5">
      <i class="bi bi-cloud text-muted" style="font-size: 4rem;"></i>
      <p class="text-muted mt-3">Your cloud is empty. Upload files to get started.</p>
      <button class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#uploadModal">
        <i class="bi bi-cloud-upload me-1"></i> Upload files
      </button>
    </div>
    {% endif %}
  </div>

  <!-- List view (hidden by default) -->
  <div id="listView" class="d-none">
    <div class="list-group list-group-flush shadow-sm rounded-3 overflow-hidden">
      {% for folder in folders %}
      <a href="{{ url_for('dashboard', folder_uuid=folder.uuid) }}" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
        <i class="bi bi-folder-fill text-warning fs-4"></i>
        <div class="flex-grow-1 text-truncate">{{ folder.name }}</div>
        <small class="text-muted">Folder</small>
      </a>
      {% endfor %}
      {% for file in files %}
      <div class="list-group-item d-flex align-items-center gap-3 py-3">
        <i class="bi bi-file-earmark text-primary fs-4"></i>
        <div class="flex-grow-1 text-truncate">{{ file.original_name }}</div>
        <small class="text-muted me-3">{{ (file.size / 1024)|round(1) }} KB</small>
        <button class="btn btn-sm btn-outline-primary download-btn" data-uuid="{{ file.uuid }}" data-name="{{ file.original_name }}"><i class="bi bi-download"></i></button>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow">
      <div class="modal-header border-0">
        <h5 class="modal-title fw-bold"><i class="bi bi-cloud-upload me-2 text-primary"></i>Upload & Encrypt</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="small text-muted">Files are encrypted in your browser with your password-derived key before upload. The server never sees plaintext.</p>
        <div class="mb-3">
          <label class="form-label">Select files</label>
          <input type="file" id="fileInput" class="form-control" multiple>
        </div>
        <div id="uploadProgress" class="d-none">
          <div class="progress mb-2" style="height: 8px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" style="width: 0%"></div>
          </div>
          <small class="text-muted" id="progressText">Preparing…</small>
        </div>
        <div id="uploadResults" class="mt-2"></div>
      </div>
      <div class="modal-footer border-0">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary rounded-pill" id="startUploadBtn">Encrypt & Upload</button>
      </div>
    </div>
  </div>
</div>

<!-- New Folder Modal -->
<div class="modal fade" id="newFolderModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content rounded-4 border-0 shadow">
      <form id="createFolderForm">
        <div class="modal-header border-0">
          <h5 class="modal-title">New folder</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control form-control-lg rounded-3" id="folderNameInput" placeholder="Folder name" required maxlength="255">
          <input type="hidden" id="parentFolderId" value="{{ current_folder.id if current_folder else '' }}">
        </div>
        <div class="modal-footer border-0">
          <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary rounded-pill">Create</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Rename Modal -->
<div class="modal fade" id="renameModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content rounded-4 border-0 shadow">
      <div class="modal-header border-0">
        <h5 class="modal-title">Rename</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control form-control-lg rounded-3" id="renameInput" required>
        <input type="hidden" id="renameUuid">
        <input type="hidden" id="renameType">
      </div>
      <div class="modal-footer border-0">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary rounded-pill" id="confirmRenameBtn">Save</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block content_mobile %}
{{ self.content() }}
{% endblock %}

{% block scripts %}
<script>
  window.CURRENT_FOLDER_UUID = "{{ current_folder.uuid if current_folder else '' }}";
</script>
{% endblock %}