<template>
  <n-space align="center">
    <!-- Show Report -->
    <n-button
      type="default"
      size="medium"
      @click="showReport"
      v-if="!isNew"
      class="toolbar-btn show-report-btn"
    >
      {{ t('Show Report') }}
    </n-button>



    <!-- Sidebar toggle -->
    <n-button
      type="default"
      size="medium"
      @click="$emit('toggle-sidebar-position')"
      :title="sidebarPosition === 'left' ? '切换到右侧' : '切换到左侧'"
      class="header-action-btn"
    >
      <template #icon>
        <n-icon>
          <Icon :icon="sidebarPosition === 'left' ? 'fluent:panel-right-16-regular' : 'fluent:panel-left-16-regular'" />
        </n-icon>
      </template>
    </n-button>

    <!-- Refresh -->
    <n-button
      type="default"
      size="medium"
      @click="$emit('refresh')"
      :disabled="loading || isNew"
      :title="t('Refresh')"
      class="header-action-btn"
    >
      <template #icon>
        <n-icon><Icon icon="tabler:refresh" /></n-icon>
      </template>
    </n-button>

    <!-- Delete -->
    <n-button
      type="default"
      size="medium"
      @click="$emit('delete')"
      :disabled="loading || isNew"
      :title="t('Delete')"
      class="header-action-btn delete-btn"
    >
      <template #icon>
        <n-icon><Icon icon="tabler:trash" /></n-icon>
      </template>
    </n-button>

    <!-- Back -->
    <n-button type="default" size="medium" @click="$emit('go-back')" :disabled="loading">
      <template #icon>
        <n-icon><Icon icon="tabler:arrow-left" /></n-icon>
      </template>
      {{ t('Back') }}
    </n-button>

    <!-- Save -->
    <n-button
      type="primary"
      size="medium"
      :disabled="loading"
      @click="$emit('save')"
      v-if="canEdit"
      class="save-btn-brand"
    >
      <template #icon>
        <n-icon><Icon icon="tabler:check" /></n-icon>
      </template>
      {{ t('Save') }}
    </n-button>
  </n-space>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NSpace, NIcon } from 'naive-ui'
import { Icon } from '@iconify/vue'
import { t } from '@/shared/i18n'
import { pageTypeToSlug } from '@/shared/utils/slug'

interface Props {
  entity: string
  id: string
  record?: any
  canEdit: boolean
  loading: boolean
  sidebarPosition?: 'left' | 'right'
}

interface Emits {
  (e: 'toggle-sidebar-position'): void
  (e: 'refresh'): void
  (e: 'delete'): void
  (e: 'go-back'): void
  (e: 'save'): void
}

const props = withDefaults(defineProps<Props>(), {
  sidebarPosition: 'left',
  record: () => ({})
})

const emit = defineEmits<Emits>()
const router = useRouter()

const isNew = computed(() => {
  const idValue = props.id
  return idValue === 'new' || idValue.startsWith('new-')
})

const sidebarPosition = ref<'left' | 'right'>(props.sidebarPosition || 'left')

watch(() => props.sidebarPosition, (newPos) => {
  if (newPos) sidebarPosition.value = newPos
}, { immediate: true })

onMounted(() => {
  if (!props.sidebarPosition) {
    const saved = localStorage.getItem('jingrow-sidebar-position')
    if (saved === 'left' || saved === 'right') {
      sidebarPosition.value = saved
    }
  }
})

function showReport() {
  const pg = props.record
  if (!pg || !pg.name) return

  const reportType = pg.report_type
  const reportName = pg.name
  const refPagetype = pg.ref_pagetype

  switch (reportType) {
    case 'Report Builder':
      if (refPagetype) {
        const slug = pageTypeToSlug(refPagetype)
        router.push(`/app/${slug}/view/report/${encodeURIComponent(reportName)}`)
      }
      break
    case 'Query Report':
    case 'Script Report':
    case 'Custom Report':
      router.push(`/app/query-report/${encodeURIComponent(reportName)}`)
      break
    default:
      router.push(`/app/query-report/${encodeURIComponent(reportName)}`)
  }
}
</script>

<style scoped>
.header-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-action-btn.delete-btn:hover:not(:disabled) {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: white !important;
}

.header-action-btn.delete-btn:hover:not(:disabled) :deep(.n-button__border),
.header-action-btn.delete-btn:hover:not(:disabled) :deep(.n-button__state-border) {
  border-color: #ef4444 !important;
}

.toolbar-btn {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-btn :deep(.n-button__border),
.toolbar-btn :deep(.n-button__state-border) {
  border: none !important;
  border-color: transparent !important;
}

.toolbar-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.toolbar-btn:hover:not(:disabled) :deep(.n-button__border),
.toolbar-btn:hover:not(:disabled) :deep(.n-button__state-border) {
  border: none !important;
  border-color: transparent !important;
}

.show-report-btn {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

.show-report-btn:hover:not(:disabled) {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-btn:disabled :deep(.n-button__border),
.toolbar-btn:disabled :deep(.n-button__state-border) {
  border: none !important;
  border-color: transparent !important;
}

.save-btn-brand {
  background: #e6f8f0 !important;
  border: 1px solid #1fc76f !important;
  color: #0d684b !important;
}

.save-btn-brand :deep(.n-button__border),
.save-btn-brand :deep(.n-button__state-border) {
  border: none !important;
  border-color: transparent !important;
}

.save-btn-brand:hover:not(:disabled) {
  background: #dcfce7 !important;
  border-color: #1fc76f !important;
  border: 1px solid #1fc76f !important;
  color: #166534 !important;
  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
}

.save-btn-brand:hover:not(:disabled) :deep(.n-button__border),
.save-btn-brand:hover:not(:disabled) :deep(.n-button__state-border) {
  border: none !important;
  border-color: transparent !important;
}

.save-btn-brand:disabled {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #94a3b8 !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.save-btn-brand:disabled :deep(.n-button__border),
.save-btn-brand:disabled :deep(.n-button__state-border) {
  border: none !important;
  border-color: transparent !important;
}
</style>
