/**
 * TabataFit Tab Layout
 * Native liquid glass tab bar (iOS 26+) — Dark Medical design system
 * 3 tabs: Home, Progress, 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, TEXT, NAVY } 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
      backgroundColor={NAVY[800]}
      iconColor={{ default: TEXT.TERTIARY, selected: BRAND.PRIMARY }}
      labelStyle={{
        fontSize: 11,
        fontWeight: '400',
        color: TEXT.TERTIARY,
      }}
    >
      <NativeTabs.Trigger name="index" options={{ title: t('tabs.home') }}>
        <Icon sf={{ default: 'house', selected: 'house.fill' }} />
        <Label>{t('tabs.home')}</Label>
      </NativeTabs.Trigger>

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

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