<template>
  <section class="space-y-6 p-4 md:p-8">
    <div class="rounded-3xl bg-ink p-6 text-white shadow-soft">
      <p class="text-sm font-bold uppercase tracking-[0.2em] text-blue-200">Smart Rule Engine</p>
      <h2 class="mt-2 text-3xl font-black">Dynamic penalties and payroll effects</h2>
      <p class="mt-2 max-w-3xl text-slate-300">Rules support conditions, priority, automatic calculation, attendance penalties, and payroll deductions.</p>
    </div>

    <div class="grid gap-4 md:grid-cols-3">
      <MetricCard label="Active Rules" :value="rules.length" helper="Priority ordered" tone="ok" />
      <MetricCard label="Operators" :value="operators.length" helper="Condition builder" tone="live" />
      <MetricCard label="Actions" :value="actions.length" helper="Deduction/effect types" tone="warn" />
    </div>

    <div class="space-y-3">
      <article v-for="rule in rules" :key="rule.id" class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          <div>
            <p class="text-xs font-bold uppercase tracking-[0.2em] text-brand">{{ rule.module }} · priority {{ rule.priority }}</p>
            <h3 class="mt-1 text-xl font-black">{{ rule.name }}</h3>
          </div>
          <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold uppercase text-emerald-700">{{ rule.status }}</span>
        </div>
        <div class="mt-4 grid gap-3 md:grid-cols-2">
          <div class="rounded-2xl bg-slate-50 p-4"><p class="text-xs font-bold text-slate-400">Condition</p><p class="mt-1 font-semibold">{{ rule.condition }}</p></div>
          <div class="rounded-2xl bg-slate-50 p-4"><p class="text-xs font-bold text-slate-400">Action</p><p class="mt-1 font-semibold">{{ rule.action }}</p></div>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import MetricCard from '../components/MetricCard.vue';
import { getJson } from '../services/api.js';

const rules = ref([]);
const operators = ref([]);
const actions = ref([]);

onMounted(async () => {
  try {
    const data = await getJson('/rules');
    rules.value = data.rules;
    operators.value = data.supported_operators;
    actions.value = data.actions;
  } catch (error) {
    console.warn(error.message);
  }
});
</script>
