<script setup lang="ts">
type ChangeItem = {
  id: string;
  title: string;
  entity: string;
  action: string;
  rolledBack?: boolean;
};

const props = defineProps<{
  visible: boolean;
  activeChangeStepNumber: number;
  activeChangeItems: ChangeItem[];
  activeChangeItem: ChangeItem | null;
  activeChangeIndex: number;
  rollbackableCount: number;
  changeActionBusy: boolean;
  describeChangeEntity: (entity: string) => string;
  describeChangeAction: (action: string) => string;
}>();

const emit = defineEmits<{
  (e: "close"): void;
  (e: "open-item-target", item: ChangeItem): void;
  (e: "rollback-item", itemId: string): void;
  (e: "rollback-all"): void;
  (e: "prev-step"): void;
  (e: "next-step"): void;
  (e: "done"): void;
}>();
</script>

<template>
  <div
    v-if="props.visible"
    class="pointer-events-none fixed inset-x-2 bottom-2 z-40 md:inset-auto md:right-4 md:bottom-4 md:w-[390px]"
  >
    <section class="pointer-events-auto rounded-2xl border border-base-300 bg-base-100/95 p-3 shadow-2xl backdrop-blur">
      <div class="flex items-start justify-between gap-2">
        <div class="min-w-0">
          <p class="text-[11px] font-semibold uppercase tracking-wide text-base-content/60">
            Review {{ props.activeChangeStepNumber }}/{{ props.activeChangeItems.length }}
          </p>
          <p class="truncate text-sm font-semibold text-base-content">
            {{ props.activeChangeItem?.title || "Change step" }}
          </p>
        </div>
        <button class="btn btn-ghost btn-xs" @click="emit('close')">Close</button>
      </div>

      <div v-if="props.activeChangeItem" class="mt-2 rounded-xl border border-base-300 bg-base-200/35 p-2">
        <p class="text-xs text-base-content/80">
          {{ props.describeChangeEntity(props.activeChangeItem.entity) }}
          {{ props.describeChangeAction(props.activeChangeItem.action) }}
        </p>
      </div>

      <div class="mt-2 max-h-40 space-y-1 overflow-y-auto pr-1">
        <div
          v-for="(item, index) in props.activeChangeItems"
          :key="`review-step-${item.id}`"
          class="group flex items-center gap-2 rounded-lg border px-2 py-1"
          :class="index === props.activeChangeIndex ? 'border-primary/45 bg-primary/10' : 'border-base-300 bg-base-100'"
        >
          <button
            class="min-w-0 flex-1 text-left"
            @click="emit('open-item-target', item)"
          >
            <p class="truncate text-xs font-medium text-base-content">
              {{ index + 1 }}. {{ item.title }}
            </p>
            <p class="truncate text-[11px] text-base-content/65">
              {{ props.describeChangeEntity(item.entity) }}
            </p>
          </button>
          <button
            v-if="!item.rolledBack"
            class="btn btn-ghost btn-xs opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
            :disabled="props.changeActionBusy"
            @click="emit('rollback-item', item.id)"
          >
            Rollback
          </button>
          <span v-else class="text-[10px] font-medium uppercase tracking-wide text-warning">Rolled back</span>
        </div>
      </div>

      <div class="mt-3 flex items-center justify-between gap-2">
        <div class="join">
          <button
            class="btn btn-xs join-item"
            :disabled="props.activeChangeIndex <= 0"
            @click="emit('prev-step')"
          >
            Prev
          </button>
          <button
            class="btn btn-xs join-item"
            :disabled="props.activeChangeIndex >= props.activeChangeItems.length - 1"
            @click="emit('next-step')"
          >
            Next
          </button>
        </div>
        <p class="text-[11px] text-base-content/70">
          Rollback available: {{ props.rollbackableCount }}
        </p>
      </div>

      <div class="mt-2 flex flex-wrap gap-2">
        <button
          class="btn btn-xs btn-warning"
          :disabled="props.changeActionBusy || props.rollbackableCount === 0"
          @click="emit('rollback-all')"
        >
          {{ props.changeActionBusy ? "Applying..." : "Rollback all" }}
        </button>
        <button class="btn btn-xs btn-primary ml-auto" @click="emit('done')">Done</button>
      </div>
    </section>
  </div>
</template>
