import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: 'absolute',
          },
          default: {},
        }),
      }}
    >
      {/* 落地页 */}
      <Tabs.Screen
        name="index"
        options={{
          title: 'Memo',
          tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* 登录 */}
      <Tabs.Screen
        name="login"
        options={{
          title: 'Login',
          href: '/login',
          // tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* 重置密码 */}
      <Tabs.Screen
        name="reset-password"
        options={{
          title: 'reset-password',
          href: '/reset-password',
          // tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* loading页面 */}
      <Tabs.Screen
        name="loading"
        options={{
          title: 'loading',
          href: '/loading',
          // tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* 用户信息收集 */}
      <Tabs.Screen
        name="user-message"
        options={{
          title: 'user-message',
          href: '/user-message',
          // tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* ask页面 */}
      <Tabs.Screen
        name="ask"
        options={{
          title: 'ask',
          tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* memo list */}
      <Tabs.Screen
        name="memo-list"
        options={{
          title: 'memo-list',
          tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* owner */}
      <Tabs.Screen
        name="owner"
        options={{
          title: 'owner',
          tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* 排行榜 */}
      <Tabs.Screen
        name="top"
        options={{
          title: 'top',
          tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
      {/* 对话详情页 */}
      <Tabs.Screen
        name="chat-details"
        options={{
          title: 'chat-details',
          tabBarButton: () => null, // 隐藏底部标签栏
          headerShown: false, // 隐藏导航栏
          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
        }}
      />
    </Tabs>
  );
}