<script setup>
import { storeToRefs } from 'pinia'
import { useWardStore } from '@/stores/ward'
import Button from '@/components/ui/Button.vue'

const emit = defineEmits(['export-handoff'])

const wardStore = useWardStore()
const { searchInput, filters, hasActiveFilters, encounters } = storeToRefs(wardStore)

const filterOptions = [
  { key: 'hasAlerts', label: 'Has alerts' },
  { key: 'sepsisActive', label: 'Sepsis active' },
  { key: 'critical', label: 'Critical (NEWS2 ≥ 7)' },
]
</script>

<template>
  <div class="mb-4 space-y-4 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
    <label class="block">
      <span class="sr-only">Search patients</span>
      <input
        :value="searchInput"
        type="search"
        placeholder="Search by name or MRN…"
        class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
        @input="wardStore.setSearchInput($event.target.value)"
      >
    </label>

    <div class="flex flex-wrap items-center gap-2">
      <Button
        v-for="option in filterOptions"
        :key="option.key"
        size="sm"
        :variant="filters[option.key] ? 'primary' : 'secondary'"
        @click="wardStore.toggleFilter(option.key)"
      >
        {{ option.label }}
      </Button>

      <Button
        v-if="hasActiveFilters"
        size="sm"
        variant="ghost"
        @click="wardStore.clearFilters()"
      >
        Clear filters
      </Button>

      <Button
        size="sm"
        variant="secondary"
        :disabled="encounters.length === 0"
        @click="emit('export-handoff')"
      >
        Export Handoff Report
      </Button>
    </div>
  </div>
</template>
