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

    <div v-else class="grid gap-4">
      <div v-for="m in filteredMaterials" :key="m.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-primary/10 text-primary', !m.is_active && 'opacity-30 grayscale']">
            <Layers class="w-6 h-6" />
          </div>
          <div>
            <div class="flex items-center gap-2">
              <h4 class="font-bold">{{ m.name_en }} / {{ m.name_ru }} / {{ m.name_ua }}</h4>
            </div>
            <p class="text-xs text-muted-foreground truncate max-w-md">{{ m.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.pricePerCm3") }}</p>
            <p class="font-display font-bold text-lg text-primary">{{ m.price_per_cm3 }} EUR</p>
          </div>
          <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">{{ m.price_per_hour || 0 }} EUR</p>
          </div>
          <div class="text-right">
            <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">{{ t("admin.fields.speedCoeff") }}</p>
            <p class="font-display font-bold text-lg text-primary">x{{ m.speed_coeff || 1 }}</p>
          </div>
          <div class="flex items-center gap-2">
            <button @click="$emit('edit', m)" 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', m)" :class="['p-2.5 rounded-xl transition-colors', m.is_active ? 'text-emerald-500 hover:bg-emerald-500/10' : 'text-rose-500 hover:bg-rose-500/10']">
              <ToggleRight v-if="m.is_active" class="w-6 h-6" />
              <ToggleLeft v-else class="w-6 h-6" />
            </button>
            <button @click="$emit('delete', m.id, m.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 { Layers, Edit2, Trash2, ToggleRight, ToggleLeft } from "lucide-vue-next";
import Button from "@/components/ui/button.vue";

const { t } = useI18n();

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

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

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