<script setup>
import { Button } from "@/Components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { MoreHorizontal, Pencil, Trash, Power, PowerOff } from "lucide-vue-next";
import { Badge } from "@/Components/ui/badge";

defineProps({
  rule: Object,
});

const emit = defineEmits(["edit", "toggle-enabled", "delete"]);
</script>

<template>
  <div class="border rounded-lg p-4 bg-white shadow-sm">
    <div class="flex items-start justify-between gap-4">
      <div class="min-w-0 flex-1">
        <div class="flex items-center gap-2 mb-1">
          <h3 class="font-medium text-gray-900 truncate">
            {{ rule.name || "Untitled Rule #" + rule.id }}
          </h3>
          <Badge v-if="!rule.enabled" variant="secondary" class="text-xs">
            Disabled
          </Badge>
        </div>
        <p v-if="rule.description" class="text-sm text-muted-foreground mt-1">
          {{ rule.description }}
        </p>
        <div class="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
          <span>Strategy: <span class="font-medium">{{ rule.strategy }}</span></span>
          <span>•</span>
          <span>Soft: <span class="font-medium">{{ rule.soft ? "Yes" : "No" }}</span></span>
          <span v-if="rule.reactivate" class="text-amber-600 font-medium">
            • Reactivate Mode
          </span>
        </div>
      </div>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button variant="ghost" size="icon">
            <MoreHorizontal class="w-4 h-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem @click="emit('edit', rule)">
            <Pencil class="w-4 h-4 mr-2" />
            Uredi
          </DropdownMenuItem>
          <DropdownMenuItem @click="emit('toggle-enabled', rule)">
            <component :is="rule.enabled ? PowerOff : Power" class="w-4 h-4 mr-2" />
            {{ rule.enabled ? "Disable" : "Enable" }}
          </DropdownMenuItem>
          <DropdownMenuItem
            @click="emit('delete', rule)"
            class="text-red-600 focus:text-red-600"
          >
            <Trash class="w-4 h-4 mr-2" />
            Izbriši
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
    <div class="mt-3 text-xs bg-muted rounded p-3 overflow-x-auto">
      <pre class="whitespace-pre-wrap">{{ JSON.stringify(rule.entities, null, 2) }}</pre>
    </div>
  </div>
</template>
