import { Tabs } from 'expo-router';
import { Platform, View } from 'react-native';
import { SymbolView } from 'expo-symbols';
import { Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { GlobalStatusBar } from '../../src/components/device/GlobalStatusBar';
import { Colors } from '../../src/design/tokens';

const ACTIVE   = Colors.blue.fg;
const INACTIVE = '#555';
const TAB_BG   = '#111111';

function TabIcon({ ios, emoji, color }: { ios: string; emoji: string; color: string | any }) {
  if (Platform.OS === 'ios') {
    return <SymbolView name={ios as any} tintColor={color} size={22} />;
  }
  return <Text style={{ fontSize: 18, color, lineHeight: 24 }}>{emoji}</Text>;
}

export default function TabLayout() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, backgroundColor: Colors.bg.base, paddingTop: insets.top }}>
      <GlobalStatusBar />
      <Tabs
        screenOptions={{
          headerShown: false,
          tabBarStyle: { backgroundColor: TAB_BG, borderTopColor: '#222' },
          tabBarActiveTintColor:   ACTIVE,
          tabBarInactiveTintColor: INACTIVE,
          tabBarLabelStyle: { fontSize: 10 },
        }}
      >
        {/* Hidden screens */}
        <Tabs.Screen name="index"    options={{ href: null }} />
        <Tabs.Screen name="control"  options={{ href: null }} />
        <Tabs.Screen name="waveform" options={{ href: null }} />
        <Tabs.Screen name="map"      options={{ href: null }} />

        {/* Visible tabs */}
        <Tabs.Screen
          name="wave"
          options={{
            title: '波形',
            tabBarIcon: ({ color }) => <TabIcon ios="waveform" emoji="〜" color={color} />,
          }}
        />
        <Tabs.Screen
          name="records"
          options={{
            title: '测点',
            tabBarIcon: ({ color }) => <TabIcon ios="list.bullet" emoji="≡" color={color} />,
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: '剖面',
            tabBarIcon: ({ color }) => <TabIcon ios="chart.line.uptrend.xyaxis" emoji="↗" color={color} />,
          }}
        />
        <Tabs.Screen
          name="projects"
          options={{
            title: '工程',
            tabBarIcon: ({ color }) => <TabIcon ios="folder" emoji="▤" color={color} />,
          }}
        />
      </Tabs>
    </View>
  );
}