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

import { useApp } from '@/src/app-context';

export default function TabLayout() {
  const { ready, state, unreadCount } = useApp();

  if (!ready) return null;
  if (!state.session?.session) return <Redirect href={'/auth' as any} />;
  if (!state.deviceToken) return <Redirect href={'/onboarding' as any} />;

  return (
    <Tabs
      screenOptions={{
        headerStyle: { backgroundColor: '#0f1015' },
        headerTintColor: '#f9fafb',
        tabBarStyle: { backgroundColor: '#0f1015', borderTopColor: 'rgba(255,255,255,0.12)' },
        tabBarActiveTintColor: '#60a5fa',
        tabBarInactiveTintColor: '#6b7280',
        sceneStyle: { backgroundColor: '#0a0a0c' },
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: state.device?.role === 'camera' ? 'Camera' : 'Dashboard',
          tabBarIcon: ({ color, size }) => <Ionicons name="speedometer-outline" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="activity"
        options={{
          title: 'Activity',
          tabBarBadge: unreadCount > 0 ? unreadCount : undefined,
          tabBarIcon: ({ color, size }) => <Ionicons name="notifications-outline" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color, size }) => <Ionicons name="settings-outline" size={size} color={color} />,
        }}
      />
    </Tabs>
  );
}