import { Tabs } from 'expo-router'
import { View, Text, StyleSheet } from 'react-native'
import { COLORS } from '../../constants/Config'

function TabIcon({ icon, label, focused }: { icon: string; label: string; focused: boolean }) {
  return (
    <View style={[tab.wrap, focused && tab.active]}>
      <Text style={tab.icon}>{icon}</Text>
      <Text style={[tab.label, focused && tab.labelActive]}>{label}</Text>
    </View>
  )
}

const tab = StyleSheet.create({
  wrap:        { alignItems: 'center', paddingTop: 4 },
  active:      {},
  icon:        { fontSize: 22 },
  label:       { fontSize: 10, color: COLORS.muted, marginTop: 2 },
  labelActive: { color: COLORS.accent, fontWeight: '600' },
})

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        headerStyle:        { backgroundColor: COLORS.gnbBg },
        headerTintColor:    '#fff',
        headerTitleStyle:   { fontWeight: '700' },
        tabBarStyle:        { backgroundColor: '#fff', borderTopColor: COLORS.border, height: 60 },
        tabBarShowLabel:    false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: '대시보드',
          tabBarIcon: ({ focused }) => <TabIcon icon="📊" label="대시보드" focused={focused} />,
        }}
      />
      <Tabs.Screen
        name="sr"
        options={{
          title: '서비스 요청',
          tabBarIcon: ({ focused }) => <TabIcon icon="📋" label="SR" focused={focused} />,
        }}
      />
      <Tabs.Screen
        name="chat"
        options={{
          title: 'AI 챗봇',
          tabBarIcon: ({ focused }) => <TabIcon icon="🤖" label="AI" focused={focused} />,
        }}
      />
      <Tabs.Screen
        name="notifications"
        options={{
          title: '알림',
          tabBarIcon: ({ focused }) => <TabIcon icon="🔔" label="알림" focused={focused} />,
        }}
      />
      <Tabs.Screen
        name="dr"
        options={{
          title: 'DR 관제',
          tabBarIcon: ({ focused }) => <TabIcon icon="🛡️" label="DR" focused={focused} />,
        }}
      />
      <Tabs.Screen
        name="network"
        options={{
          title: '네트워크',
          tabBarIcon: ({ focused }) => <TabIcon icon="🔀" label="네트워크" focused={focused} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: '설정',
          tabBarIcon: ({ focused }) => <TabIcon icon="⚙️" label="설정" focused={focused} />,
        }}
      />
    </Tabs>
  )
}
