<!-- #region BackupList [C:3] [TYPE Component] [SEMANTICS backup, list, files, navigation, explorer] -->
<!-- @BRIEF Component component: components/backups/BackupList.svelte -->
<!-- @LAYER UI -->
<!--
@SEMANTICS: backup, list, table
@PURPOSE:   Displays a list of existing backups.
@LAYER     Component
@RELATION  USED_BY -> [frontend/src/components/backups/BackupManager.svelte]
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { t } from '$lib/i18n/index.svelte.js';
  import { Button } from '../../lib/ui';
  import type { Backup } from '../../types/backup';
  // [/SECTION]

  // [SECTION: PROPS]
  /**
   * @type {Backup[]}
   * @description Array of backup objects to display.
   */
  let {
    backups = [],
    currentPath = 'backups',
    onNavigate = (_path: string) => {},
    onNavigateUp = () => {},
  } = $props();

  function isDirectory(backup: Backup): boolean {
    return Boolean(backup.is_directory);
  }

  function formatCreatedAt(backup: Backup): string {
    return isDirectory(backup) ? '--' : new Date(backup.created_at).toLocaleString();
  }

  function getPathParts(path: string): string[] {
    return path.split('/').filter(Boolean);
  }

  function navigateToPathIndex(index: number) {
    const parts = getPathParts(currentPath);
    onNavigate(parts.slice(0, index + 1).join('/'));
  }

  // [/SECTION]

</script>

<!-- [SECTION: TEMPLATE] -->
<div class="mb-3 flex flex-wrap items-center gap-2 text-sm text-gray-600">
  <button
    onclick={() => onNavigate('backups')}
    class="hover:text-indigo-600"
  >
    {$t.storage.root}
  </button>
  {#each getPathParts(currentPath).slice(1) as part, index}
    <span>/</span>
    <button
      onclick={() => navigateToPathIndex(index + 1)}
      class="hover:text-indigo-600"
    >
      {part}
    </button>
  {/each}
</div>

<div class="mb-3">
  <Button
    variant="secondary"
    size="sm"
    onclick={onNavigateUp}
    disabled={currentPath === 'backups'}
  >
    {$t.common?.back}
  </Button>
</div>

<div class="overflow-x-auto rounded-lg border border-gray-200">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.storage.table.name}
        </th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.tasks.target_env}
        </th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.storage.table.created_at}
        </th>
        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.storage.table.actions}
        </th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      {#each backups as backup}
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
            {#if isDirectory(backup)}
              <button
                onclick={() => onNavigate(backup.path)}
                class="text-indigo-600 hover:text-indigo-900"
              >
                {backup.name}
              </button>
            {:else}
              {backup.name}
            {/if}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {backup.environment}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {formatCreatedAt(backup)}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            {#if isDirectory(backup)}
              <Button
                variant="ghost"
                size="sm"
                class="text-primary hover:text-blue-900"
                onclick={() => onNavigate(backup.path)}
              >
                {$t.storage.table.go_to_storage}
              </Button>
            {/if}
          </td>
        </tr>
      {:else}
        <tr>
          <td colspan="4" class="px-6 py-10 text-center text-gray-500">
            {$t.storage.no_files}
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
</div>
<!-- [/SECTION] -->


<!-- #endregion BackupList -->
