/**
 * TabataFit Tab Layout
 * Native iOS tabs with liquid glass effect
 * 4 tabs: Home, Workouts, Activity, Profile
 * Redirects to onboarding if not completed
 */

import { Redirect } from 'expo-router'
import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs'
import { useTranslation } from 'react-i18next'
import { BRAND } from '@/src/shared/constants/colors'
import { useUserStore } from '@/src/shared/stores'

export default function TabLayout() {
  const { t } = useTranslation('screens')
  const onboardingCompleted = useUserStore((s) => s.profile.onboardingCompleted)

  if (!onboardingCompleted) {
    return <Redirect href="/onboarding" />
  }

  return (
    <NativeTabs
      tintColor={BRAND.PRIMARY}
    >
      <NativeTabs.Trigger name="index">
        <Icon sf={{ default: 'house', selected: 'house.fill' }} />
        <Label>{t('tabs.home')}</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="explore">
        <Icon sf={{ default: 'flame', selected: 'flame.fill' }} />
        <Label>{t('tabs.explore')}</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="activity">
        <Icon sf={{ default: 'chart.bar', selected: 'chart.bar.fill' }} />
        <Label>{t('tabs.activity')}</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="profile">
        <Icon sf={{ default: 'person', selected: 'person.fill' }} />
        <Label>{t('tabs.profile')}</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  )
}
