<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { ref } from "vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import CardTitle from "@/Components/ui/card/CardTitle.vue";
import { Workflow } from "lucide-vue-next";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/Components/ui/tabs";
import ActionTable from "./Partials/ActionTable.vue";
import DecisionTable from "./Partials/DecisionTable.vue";

const props = defineProps({
  actions: Array,
  decisions: Array,
  segments: Array,
  email_templates: { type: Array, default: () => [] },
  events: { type: Array, default: () => [] },
  archive_settings: { type: Array, default: () => [] },
});

const activeTab = ref("actions");
</script>
<template>
  <AppLayout title="Workflow">
    <template #header></template>
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <AppCard
          title=""
          padding="none"
          class="p-0! gap-0"
          header-class="py-3! px-4 gap-0 text-muted-foreground"
          body-class=""
        >
          <template #header>
            <div class="flex items-center gap-2">
              <Workflow :size="18" />
              <CardTitle class="uppercase">Workflow</CardTitle>
            </div>
          </template>
          <Tabs v-model="activeTab" class="border-t">
            <TabsList class="border-b w-full flex flex-row justify-baseline rounded-none">
              <TabsTrigger value="actions">Akcije</TabsTrigger>
              <TabsTrigger value="decisions">Odločitve</TabsTrigger>
            </TabsList>
            <TabsContent value="actions" class="mt-0">
              <ActionTable
                :actions="actions"
                :decisions="decisions"
                :segments="segments"
              />
            </TabsContent>
            <TabsContent value="decisions" class="mt-0">
              <DecisionTable
                :decisions="decisions"
                :actions="actions"
                :email-templates="email_templates"
                :available-events="events"
                :segments="segments"
                :archive-settings="archive_settings"
              />
            </TabsContent>
          </Tabs>
        </AppCard>
      </div>
    </div>
  </AppLayout>
</template>
