import { Ionicons } from '@expo/vector-icons';
import { Redirect, Tabs } from 'expo-router';
import { StyleSheet } from 'react-native';

import { useSession } from '@/lib/session';
import { colors, space } from '@/theme/tokens';

/**
 * Drei Tabs: Feed · ➕ · Profil (app-aufbau.md §1 und §3).
 *
 * Das ➕ ist dort als **Popover** beschrieben und nicht als Screen – es gibt
 * drei verschiedene Erstellen-Abläufe, von denen keiner der Standard sein soll.
 * Bis der Popover in E6 steht, ist es hier ein normaler Tab.
 */
export default function TabsLayout() {
  const { laedt, konto } = useSession();

  if (laedt) return null;
  // Der Zugang wird hier nur *bequem* gesperrt. Dicht ist er durch die
  // Zeilenrechte in Appwrite – ohne Session liefert die API schlicht nichts.
  if (!konto) return <Redirect href="/willkommen" />;

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.accent,
        tabBarInactiveTintColor: colors.faint,
        tabBarStyle: styles.bar,
        tabBarLabelStyle: styles.label,
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Feed',
          tabBarIcon: ({ color, size }) => <Ionicons name="albums-outline" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="erstellen"
        options={{
          title: 'Erstellen',
          tabBarIcon: ({ color, size }) => <Ionicons name="add-circle-outline" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="profil"
        options={{
          title: 'Profil',
          tabBarIcon: ({ color, size }) => <Ionicons name="person-outline" size={size} color={color} />,
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  bar: {
    backgroundColor: colors.sheet,
    borderTopColor: colors.border,
    borderTopWidth: StyleSheet.hairlineWidth,
    paddingTop: space.xs,
  },
  label: { fontSize: 11, fontWeight: '500' },
});
