<script setup lang="ts">
import { ref } from 'vue';
import { refAutoReset } from './index';

// Reactive delay — the ref resets `delay`ms after the most recent write.
const delay = ref(1500);

// Reverts to 'Idle' once writes stop arriving.
const status = refAutoReset('Idle', delay);
const copied = refAutoReset(false, 1200);

function flash(message: string) {
  status.value = message;
}

async function copy() {
  copied.value = true;
}
</script>

<template>
  <div class="demo-stack max-w-sm">
    <div class="demo-card space-y-3 p-4">
      <p class="demo-label">
        Live value
      </p>
      <div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
        <span class="font-mono text-lg font-semibold tabular-nums text-fg">{{ status }}</span>
        <span
          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
          :class="status === 'Idle'
            ? 'border-border bg-bg-elevated text-fg-muted'
            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
        >
          {{ status === 'Idle' ? 'reset' : 'active' }}
        </span>
      </div>

      <div class="flex flex-wrap gap-2">
        <button
          type="button"
          class="demo-btn"
          @click="flash('Saved')"
        >
          Save
        </button>
        <button
          type="button"
          class="demo-btn"
          @click="flash('Synced')"
        >
          Sync
        </button>
        <button
          type="button"
          class="demo-btn"
          @click="flash('Uploading…')"
        >
          Upload
        </button>
      </div>
    </div>

    <label class="demo-card flex flex-col gap-1.5 p-4">
      <span class="flex items-center justify-between text-sm text-fg">
        <span class="demo-label">reset delay</span>
        <span class="font-mono tabular-nums text-fg-muted">{{ delay }}ms</span>
      </span>
      <input
        v-model.number="delay"
        type="range"
        min="500"
        max="4000"
        step="250"
        class="w-full accent-accent cursor-pointer"
      >
    </label>

    <div class="demo-card flex items-center justify-between p-4">
      <span class="text-sm text-fg">Copy-to-clipboard pattern</span>
      <button
        type="button"
        class="demo-btn-primary"
        @click="copy"
      >
        {{ copied ? 'Copied!' : 'Copy' }}
      </button>
    </div>
  </div>
</template>
