import { Tabs } from 'expo-router'
import { useAuthStore } from '@/store/auth.store'
import { Redirect } from 'expo-router'
import { Platform } from 'react-native'

function TabIcon({ emoji }: { emoji: string }) {
  return null // Replaced by tabBarIcon in options
}

export default function AppLayout() {
  const session = useAuthStore((s) => s.session)

  if (!session) {
    return <Redirect href="/(auth)/login" />
  }

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#E63946',
        tabBarInactiveTintColor: '#6b7280',
        tabBarStyle: {
          borderTopColor: '#e5e7eb',
          backgroundColor: 'white',
          paddingBottom: Platform.OS === 'ios' ? 8 : 4,
          height: Platform.OS === 'ios' ? 82 : 60,
        },
        headerStyle: { backgroundColor: 'white' },
        headerTitleStyle: { fontWeight: '700', color: '#111827' },
        headerShadowVisible: false,
      }}
    >
      <Tabs.Screen
        name="news"
        options={{
          title: 'News',
          tabBarIcon: ({ color }) => (
            /* Replace with actual icons after @expo/vector-icons setup */
            <TabIcon emoji="📰" />
          ),
          headerShown: false,
        }}
      />
      <Tabs.Screen
        name="members"
        options={{
          title: 'Mitglieder',
          tabBarIcon: () => <TabIcon emoji="👥" />,
          headerShown: false,
        }}
      />
      <Tabs.Screen
        name="termine"
        options={{
          title: 'Termine',
          tabBarIcon: () => <TabIcon emoji="📅" />,
          headerShown: false,
        }}
      />
      <Tabs.Screen
        name="stellen"
        options={{
          title: 'Stellen',
          tabBarIcon: () => <TabIcon emoji="🎓" />,
          headerShown: false,
        }}
      />
      <Tabs.Screen
        name="profil"
        options={{
          title: 'Profil',
          tabBarIcon: () => <TabIcon emoji="👤" />,
          headerShown: false,
        }}
      />
    </Tabs>
  )
}