/*
 * 하단 탭 바 4개 — 홈 / 현장 / 갤러리 / 더보기 (design.md §2-2 모바일).
 * 현장 탭은 역할에 따라 체크리스트(장치업체)·검수(홀매니저)로 진입.
 */
import { Ionicons } from '@expo/vector-icons';
import { Redirect, Tabs } from 'expo-router';
import React from 'react';
import { useAuth } from '../../context/AuthContext';
import { colors } from '../../theme';

export default function TabsLayout() {
  const { ready, token } = useAuth();
  if (ready && !token) return <Redirect href="/login" />;

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.primary600,
        tabBarInactiveTintColor: colors.neutral500,
        headerStyle: { backgroundColor: colors.white },
        headerTitleStyle: { fontWeight: '600', color: colors.neutral900 },
        tabBarStyle: { borderTopColor: colors.neutral200 },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: '홈',
          tabBarIcon: ({ color, size }) => <Ionicons name="home-outline" color={color} size={size} />,
        }}
      />
      <Tabs.Screen
        name="field"
        options={{
          title: '현장',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="clipboard-outline" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="gallery"
        options={{
          title: '갤러리',
          tabBarIcon: ({ color, size }) => <Ionicons name="images-outline" color={color} size={size} />,
        }}
      />
      <Tabs.Screen
        name="more"
        options={{
          title: '더보기',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="ellipsis-horizontal" color={color} size={size} />
          ),
        }}
      />
    </Tabs>
  );
}