<template>
  <div class="space-y-4">
    <div v-if="filteredServices.length === 0" class="flex flex-col items-center justify-center py-20 bg-card/40 border border-border/50 rounded-3xl opacity-50">
      <Database class="w-12 h-12 text-muted-foreground/20 mb-4" />
      <p class="text-sm text-muted-foreground">{{ t("admin.fields.noServices") }}</p>
    </div>

    <div v-else class="grid gap-4">
      <div v-for="s in filteredServices" :key="s.id"
        class="p-6 bg-card/40 border border-border/50 rounded-2xl flex items-center justify-between group hover:border-primary/30 transition-all">
        <div class="flex items-center gap-4">
          <div :class="['p-3 rounded-xl bg-blue-500/10 text-blue-500', !s.is_active && 'opacity-30 grayscale']">
            <Database class="w-6 h-6" />
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h4 class="font-bold">{{ s.name_en }} / {{ s.name_ru }} / {{ s.name_ua }}</h4>
              <span class="text-[10px] px-2 py-0.5 rounded-full bg-white/5 text-muted-foreground font-bold border border-border/50 uppercase">{{ s.tech_type }}</span>
            </div>
            <p class="text-xs text-muted-foreground truncate max-w-md">{{ s.desc_en }}</p>
          </div>
        </div>
        <div class="flex items-center gap-8">
          <div class="text-right">
            <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">{{ t("admin.fields.pricePerHour") }}</p>
            <p class="font-display font-bold text-lg text-primary">{{ s.price_per_hour || 0 }} EUR</p>
          </div>
          <div class="flex items-center gap-2">
          <button @click="$emit('edit', s)" class="p-2.5 hover:bg-white/5 rounded-xl text-muted-foreground hover:text-primary transition-colors">
            <Edit2 class="w-4 h-4" />
          </button>
          <button @click="$emit('toggle-active', s)" :class="['p-2.5 rounded-xl transition-colors', s.is_active ? 'text-emerald-500 hover:bg-emerald-500/10' : 'text-rose-500 hover:bg-rose-500/10']">
            <ToggleRight v-if="s.is_active" class="w-6 h-6" />
            <ToggleLeft v-else class="w-6 h-6" />
          </button>
          <button @click="$emit('delete', s.id, s.name_en)" class="p-2.5 hover:bg-rose-500/10 rounded-xl text-muted-foreground hover:text-rose-500 transition-colors">
            <Trash2 class="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { Database, Edit2, Trash2, ToggleRight, ToggleLeft } from "lucide-vue-next";
import Button from "@/components/ui/button.vue";

const { t } = useI18n();

const props = defineProps<{
  services: any[];
  searchQuery: string;
}>();

defineEmits(['edit', 'delete', 'toggle-active']);

const filteredServices = computed(() => {
  if (!props.searchQuery) return props.services;
  const q = props.searchQuery.toLowerCase();
  return props.services.filter(s => 
    s.name_en?.toLowerCase().includes(q) ||
    s.name_ru?.toLowerCase().includes(q) ||
    s.name_ua?.toLowerCase().includes(q) ||
    s.tech_type?.toLowerCase().includes(q) ||
    s.desc_en?.toLowerCase().includes(q)
  );
});
</script>
