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, paddingHorizontal: 2 },
  active:      {},
  icon:        { fontSize: 21 },
  label:       { fontSize: 10, color: COLORS.muted, marginTop: 2, letterSpacing: 0.2 },
  labelActive: { color: COLORS.accent, fontWeight: '700' },
})

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        headerStyle:        { backgroundColor: COLORS.gnbBg },
        headerTintColor:    '#fff',
        headerTitleStyle:   { fontWeight: '800', fontSize: 16, letterSpacing: -0.3 },
        tabBarStyle: {
          backgroundColor: '#fff',
          borderTopColor: COLORS.border,
          borderTopWidth: 1,
          height: 62,
          elevation: 8,
          shadowColor: '#003366',
          shadowOffset: { width: 0, height: -2 },
          shadowOpacity: 0.08,
          shadowRadius: 8,
        },
        tabBarActiveTintColor:   COLORS.accent,
        tabBarInactiveTintColor: COLORS.muted,
        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>
  )
}