<script setup>
import { computed } from "vue";

const props = defineProps({
  tabs: { type: Array, default: () => [] },
  modelValue: { type: String, default: "en" },
  statusByLanguage: { type: Object, default: () => ({}) },
  translating: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  canTranslate: { type: Boolean, default: true },
  showTranslate: { type: Boolean, default: true },
  canRemove: { type: Boolean, default: false },
  canReset: { type: Boolean, default: false },
  canUpdateToLatestGlobal: { type: Boolean, default: false },
  isLocallyModified: { type: Boolean, default: false },
  selectedLabel: { type: String, default: "English" },
});

const emit = defineEmits([
  "update:modelValue",
  "translate",
  "remove",
  "reset-to-global",
  "update-to-latest-global",
]);

const activeStatus = computed(
  () => props.statusByLanguage?.[props.modelValue] || "draft",
);

// Global sync buttons follow parent `canReset` / `canUpdateToLatestGlobal` only (no English-tab
// exception — franchises may use English as their sole preferred language).
const showResetToGlobalButton = computed(
  () => props.canReset && !props.canUpdateToLatestGlobal,
);

const showUpdateAvailableButton = computed(
  () => !!props.canUpdateToLatestGlobal,
);
</script>

<template>
  <div class="translation-toolbar-card">
    <div class="tabs-navigation-row">
      <VTabs
        :model-value="modelValue"
        show-arrows
        class="premium-tabs"
        :disabled="disabled"
        hide-slider
        @update:model-value="emit('update:modelValue', $event)"
      >
        <VTab
          v-for="tab in tabs"
          :key="tab.code"
          :value="tab.code"
          :disabled="disabled"
          class="premium-tab-item"
        >
          <VIcon start size="18">{{
            tab.code === "en" ? "bx-font" : "bx-world"
          }}</VIcon>
          {{ tab.label }}
        </VTab>
      </VTabs>
    </div>

    <div class="active-tab-ai-row">
      <div class="active-tab-info">
        <VIcon
          size="18"
          :color="$vuetify.theme.current.dark ? 'white' : 'primary'"
          >bx-world</VIcon
        >
        <span
          >Selected language: <strong>{{ selectedLabel }}</strong></span
        >
        <VChip
          size="x-small"
          :color="activeStatus === 'publish' ? 'success' : 'warning'"
          variant="flat"
        >
          {{ activeStatus.toUpperCase() }}
        </VChip>
      </div>
      <div class="toolbar-actions">
        <VBtn
          v-if="showResetToGlobalButton"
          color="secondary"
          variant="tonal"
          size="small"
          class="toolbar-btn"
          prepend-icon="bx-revision"
          :disabled="disabled"
          @click="emit('reset-to-global')"
        >
          Reset to Global
        </VBtn>
        <VBtn
          v-if="showUpdateAvailableButton"
          color="warning"
          variant="tonal"
          size="small"
          class="toolbar-btn"
          prepend-icon="bx-refresh"
          :disabled="disabled"
          @click="emit('update-to-latest-global')"
        >
          Update Available
        </VBtn>
        <VBtn
          v-if="showTranslate"
          color="primary"
          variant="flat"
          size="small"
          class="toolbar-btn primary-btn"
          prepend-icon="bx-world"
          :loading="translating"
          :disabled="disabled || !canTranslate || modelValue === 'en'"
          @click="emit('translate')"
        >
          Translate with AI
        </VBtn>
        <VTooltip v-if="canRemove && modelValue !== 'en'" location="top">
          <template #activator="{ props: tooltipProps }">
            <VBtn
              v-bind="tooltipProps"
              color="error"
              variant="tonal"
              size="small"
              class="toolbar-btn icon-only-btn"
              prepend-icon="bx-trash"
              :disabled="disabled"
              @click="emit('remove')"
            />
          </template>
          Remove Translation
        </VTooltip>
      </div>
    </div>
  </div>
</template>

<style scoped>
.translation-toolbar-card {
  background: rgb(var(--v-theme-surface));
  border-radius: 16px;
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  color: rgb(var(--v-theme-on-surface));
}
.tabs-navigation-row {
  padding: 14px 16px 12px;
  background: rgb(var(--v-theme-surface));
}
.premium-tabs {
  height: 42px !important;
  max-width: 100%;
  overflow-x: auto;
  --v-tabs-height: 42px;
}
.premium-tab-item {
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
  min-width: 110px !important;
  border-radius: 8px !important;
  margin-right: 8px !important;
  color: rgb(var(--v-theme-on-surface), 0.7) !important;
  transition: all 0.2s ease;
}
.premium-tab-item:not(.v-tab--selected):hover {
  background: rgba(var(--v-theme-on-surface), 0.05) !important;
}
.premium-tab-item.v-tab--selected {
  background: rgb(var(--v-theme-primary)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.3);
}
.active-tab-ai-row {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(var(--v-theme-on-surface), 0.03);
  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.active-tab-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--v-theme-on-surface), 0.7);
  flex-wrap: wrap;
  min-width: 240px;
}
.active-tab-info strong {
  color: rgb(var(--v-theme-on-surface));
}
.premium-tab-item {
  transition: all 0.25s ease;
}
.premium-tabs :deep(.v-tab--selected) {
  background: #eef5ff;
  border-radius: 10px;
  color: #003b6f;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.toolbar-btn {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.primary-btn {
  background: #003b6f !important;
}

.icon-only-btn {
  min-width: 36px !important;
  width: 36px !important;
  padding-inline: 0 !important;
}

@media (max-width: 900px) {
  .toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}
</style>
