<script lang="ts">
  import { buzzer } from '../lib/buzzerStore';
  import { refreshFileList } from '../lib/buzzerActions';
  import FileRow from './FileRow.svelte';
  import { ArrowsCounterClockwiseIcon } from 'phosphor-svelte';
  async function handleRefresh() {
    console.log("Aktualisiere Dateiliste...");
    await refreshFileList();
  }
</script>

<div class="flex-1 bg-slate-800/50 rounded-[2rem] border border-slate-700 flex flex-col overflow-hidden shadow-2xl relative">
  
  <div class="p-5 border-b border-slate-700 bg-slate-800/80 flex justify-between items-center shrink-0">
    <h2 class="font-black text-[10px] uppercase tracking-[0.2em] text-slate-500">
      Flash Storage <span class="text-slate-600">/LFS/A</span>
    </h2>
    
    <button 
      on:click={handleRefresh}
      class="text-slate-500 hover:text-blue-400 transition-colors active:rotate-180 duration-500"
      title="Refresh File List"
    >
      <ArrowsCounterClockwiseIcon size={16} weight="fill" />
    </button>
  </div>

  <div class="flex-1 overflow-y-auto custom-scrollbar relative z-10">
    {#if $buzzer.connected}
      <div class="flex flex-col">
        {#each $buzzer.files as file}
          <FileRow {file} />
        {:else}
          <div class="p-10 text-center text-slate-600 text-[10px] uppercase tracking-widest italic">
            Keine Dateien auf dem Buzzer
          </div>
        {/each}
      </div>
    {:else}
      <div class="flex-1 flex items-center justify-center p-10">
        <span class="text-slate-700 text-[10px] font-black uppercase tracking-[0.3em] animate-pulse">
          Offline - Warte auf Port
        </span>
      </div>
    {/if}
  </div>
</div>