import React from 'react'
import { Platform } from 'react-native'
import { Tabs } from 'expo-router'
import { Ionicons } from '@expo/vector-icons'

import Colors from '@/constants/Colors'
import { useColorScheme } from '@/components/useColorScheme'
import { useClientOnlyValue } from '@/components/useClientOnlyValue'

export default function TabLayout() {
  const colorScheme = useColorScheme()
  const dark = colorScheme === 'dark'

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme].tint,
        tabBarInactiveTintColor: dark ? 'rgba(255,255,255,0.38)' : 'rgba(0,0,0,0.35)',
        tabBarLabelStyle: { fontSize: 11, fontWeight: '600', letterSpacing: 0.2 },
        tabBarStyle: {
          backgroundColor: dark ? '#161a22' : '#fff',
          borderTopWidth: 1,
          borderTopColor: dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.06)',
          height: Platform.OS === 'ios' ? 88 : 64,
          paddingTop: 6,
        },
        headerStyle: {
          backgroundColor: dark ? '#161a22' : '#fff',
          shadowColor: '#000',
          shadowOpacity: dark ? 0.25 : 0.08,
          shadowRadius: 12,
          shadowOffset: { width: 0, height: 4 },
          elevation: 4,
        },
        headerTintColor: Colors[colorScheme].text,
        headerShown: useClientOnlyValue(false, true),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: '直播',
          tabBarIcon: ({ color }) => <Ionicons name="radio-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="desk"
        options={{
          title: '仪表盘',
          tabBarIcon: ({ color }) => <Ionicons name="grid-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="network"
        options={{
          title: '网络',
          tabBarIcon: ({ color }) => <Ionicons name="wifi-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="bind"
        options={{
          title: '远程',
          tabBarIcon: ({ color }) => <Ionicons name="phone-portrait-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="system"
        options={{
          title: '系统',
          tabBarIcon: ({ color }) => <Ionicons name="speedometer-outline" size={22} color={color} />,
        }}
      />
      <Tabs.Screen
        name="wechat"
        options={{
          href: null,
          title: '微信',
          tabBarIcon: ({ color }) => <Ionicons name="chatbubbles-outline" size={22} color={color} />,
        }}
      />
    </Tabs>
  )
}
