<script lang="ts" setup>
import { ref, computed } from 'vue'
import AccountLayout from '@/Layouts/AccountLayout.vue'
import AccountTab from '@/Pages/Profile/AccountTab.vue'
import SecurityTab from '@/Pages/Profile/SecurityTab.vue'
import BillingTab from '@/Pages/Profile/BillingTab.vue'
import type { LoginHistoryEntry, User, UserProfile } from '@/types'

interface Props {
  user: User
  profile: UserProfile | null
  twoFactorEnabled: boolean
  loginHistories: LoginHistoryEntry[]
}

defineOptions({ layout: AccountLayout })

const props = defineProps<Props>()

const activeTab = ref<string>('account')

interface TabItem {
  title: string
  icon: string
  value: string
}

const tabs: TabItem[] = [
  { title: 'Account', icon: 'tabler-user', value: 'account' },
  { title: 'Security', icon: 'tabler-lock', value: 'security' },
  { title: 'Billing', icon: 'tabler-file-text', value: 'billing' },
]

const firstName = computed<string>(() => {
  const parts = props.user.name?.split(' ') ?? []
  return parts[0] ?? ''
})

const lastName = computed<string>(() => {
  const parts = props.user.name?.split(' ') ?? []
  return parts.slice(1).join(' ') ?? ''
})
</script>

<template>
  <div>
    <VTabs
      v-model="activeTab"
      class="v-tabs-pill"
    >
      <VTab
        v-for="tab in tabs"
        :key="tab.value"
        :value="tab.value"
      >
        <VIcon
          size="20"
          start
          :icon="tab.icon"
        />
        {{ tab.title }}
      </VTab>
    </VTabs>

    <VWindow
      v-model="activeTab"
      class="mt-6 disable-tab-transition"
      :touch="false"
    >
      <VWindowItem value="account">
        <AccountTab
          :user="user"
          :profile="profile"
          :first-name="firstName"
          :last-name="lastName"
        />
      </VWindowItem>

      <VWindowItem value="security">
        <SecurityTab :two-factor-enabled="twoFactorEnabled" :login-histories="loginHistories" />
      </VWindowItem>

      <VWindowItem value="billing">
        <BillingTab :profile="profile" />
      </VWindowItem>
    </VWindow>
  </div>
</template>
