<script setup>
import WhatsappMessages from "@/pages/whatsapp-messages/index.vue";
import WhatsappTemplates from "@/pages/whatsapp-templates/index.vue";
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
// Open the tab requested via ?tab= (e.g. returning from the message editor).
const tab = ref(route.query.tab === "messages" ? "messages" : "templates");

const tabs = [
  { value: "templates", title: "Welcome Templates", icon: "bxl-whatsapp" },
  { value: "messages", title: "Message Flow", icon: "bx-conversation" },
];
</script>

<template>
  <div>
    <!-- Page header -->
    <div class="d-flex align-center gap-4 mb-6">
      <div class="header-icon-wrapper">
        <VIcon icon="bxl-whatsapp" size="28" color="primary" />
      </div>
      <div>
        <h4 class="text-h4 mb-1 font-weight-bold">WhatsApp</h4>
        <span class="text-body-2 text-medium-emphasis">
          Manage your welcome templates and automated message flows.
        </span>
      </div>
    </div>

    <!-- Premium segmented tabs -->
    <div class="seg-wrap mb-6">
      <button
        v-for="t in tabs"
        :key="t.value"
        type="button"
        class="seg-btn"
        :class="{ 'seg-active': tab === t.value }"
        @click="tab = t.value"
      >
        <VIcon :icon="t.icon" size="16" class="me-1" />
        {{ t.title }}
      </button>
    </div>

    <VWindow v-model="tab" class="whatsapp-window">
      <VWindowItem value="templates">
        <WhatsappTemplates />
      </VWindowItem>
      <VWindowItem value="messages">
        <WhatsappMessages />
      </VWindowItem>
    </VWindow>
  </div>
</template>

<style scoped>
.header-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(var(--v-theme-primary), 0.08);
  border: 1px solid rgba(var(--v-theme-primary), 0.12);
}

/* Segmented control */
.seg-wrap {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(var(--v-theme-primary), 0.06);
  border: 1px solid rgba(var(--v-theme-primary), 0.1);
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  color: rgba(var(--v-theme-on-surface), 0.6);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.seg-btn:hover:not(.seg-active) {
  color: rgb(var(--v-theme-on-surface));
  background: rgba(var(--v-theme-on-surface), 0.04);
}

.seg-active {
  background: rgb(var(--v-theme-primary));
  color: #fff;
}

.whatsapp-window {
  padding-top: 4px;
}

@media (max-width: 600px) {
  .seg-wrap {
    width: 100%;
  }
  .seg-btn {
    flex: 1;
    justify-content: center;
    padding: 9px 10px;
  }
}
</style>
