<script lang="ts">
  import { RefreshCw, WifiOff } from 'lucide-svelte';
  import { network } from '$lib/client/network.svelte';
  import { syncStatus } from '$lib/client/sync-status.svelte';

  let expanded = $state(false);

  const label = $derived.by(() => {
    if (syncStatus.state.kind === 'syncing') {
      return `Sync ${syncStatus.state.current}/${syncStatus.state.total}`;
    }
    if (!network.online) return 'Offline';
    return null;
  });

  function formatRelative(ts: number | null): string {
    if (ts === null) return 'noch nicht synchronisiert';
    const diffMs = Date.now() - ts;
    const min = Math.round(diffMs / 60_000);
    if (min < 1) return 'gerade eben';
    if (min < 60) return `vor ${min} Min`;
    const h = Math.round(min / 60);
    if (h < 24) return `vor ${h} Std`;
    const d = Math.round(h / 24);
    return `vor ${d} Tag${d === 1 ? '' : 'en'}`;
  }

  function requestRefresh() {
    navigator.serviceWorker?.controller?.postMessage({ type: 'sync-check' });
  }
</script>

{#if label}
  <div class="wrap">
    <button
      type="button"
      class="pill"
      class:offline={!network.online}
      class:syncing={syncStatus.state.kind === 'syncing'}
      aria-label={label}
      aria-expanded={expanded}
      onclick={() => (expanded = !expanded)}
    >
      {#if !network.online}
        <WifiOff size={14} strokeWidth={2} />
      {:else}
        <RefreshCw size={14} strokeWidth={2} class="spin" />
      {/if}
      <span>{label}</span>
    </button>
    {#if expanded}
      <div class="card" role="dialog">
        <p class="when">Zuletzt synchronisiert: {formatRelative(syncStatus.lastSynced)}</p>
        <button class="refresh" type="button" onclick={requestRefresh} disabled={!network.online}>
          Jetzt aktualisieren
        </button>
      </div>
    {/if}
  </div>
{/if}

<style>
  .wrap {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    background: white;
    border: 1px solid #cfd9d1;
    border-radius: var(--pill-radius);
    color: #555;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    font-family: inherit;
  }
  .pill.offline {
    color: #666;
    background: #f1f3f1;
  }
  .pill.syncing {
    color: #2b6a3d;
    border-color: #b7d6c2;
    background: #eaf4ed;
  }
  .pill :global(.spin) {
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .card {
    background: white;
    border: 1px solid #e4eae7;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    font-size: 0.82rem;
    min-width: 220px;
  }
  .when {
    margin: 0 0 0.4rem;
    color: #555;
  }
  .refresh {
    padding: 0.4rem 0.7rem;
    background: #2b6a3d;
    color: white;
    border: 0;
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
  }
  .refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>
