<script lang="ts">
  import { aiLockStatus, unlockAi, refreshLockStatus } from '$lib/stores/aiLock';

  let unlocking = $state(false);

  async function handleUnlock() {
    unlocking = true;
    await unlockAi();
    await refreshLockStatus();
    unlocking = false;
  }
</script>

{#if $aiLockStatus.locked}
  <div class="flex items-center justify-between gap-3 bg-yellow-500/20 border border-yellow-500/40 text-yellow-200 px-4 py-2 text-sm rounded mb-3">
    <span>KI-Sperre aktiv — Sync pausiert</span>
    <button
      class="rounded bg-yellow-500 px-3 py-1 text-xs font-semibold text-black transition-colors hover:bg-yellow-400 disabled:opacity-50"
      onclick={handleUnlock}
      disabled={unlocking}
    >
      {unlocking ? '...' : 'Entsperren'}
    </button>
  </div>
{/if}
