import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Tabs } from 'expo-router';
import React from 'react';
import { Ionicons } from '@expo/vector-icons';

import { Colors } from '@/constants/theme';

const queryClient = new QueryClient();

type TabIconProps = {
  color: string;
  size: number;
};

function HomeIcon(props: TabIconProps) {
  return <Ionicons name="home-outline" {...props} />;
}

function ClaimsIcon(props: TabIconProps) {
  return <Ionicons name="document-text-outline" {...props} />;
}

function ApprovalsIcon(props: TabIconProps) {
  return <Ionicons name="people-outline" {...props} />;
}

function AssistantIcon(props: TabIconProps) {
  return <Ionicons name="sparkles-outline" {...props} />;
}

function ProfileIcon(props: TabIconProps) {
  return <Ionicons name="person-outline" {...props} />;
}

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <Tabs
        screenOptions={{
          headerShown: false,
          tabBarActiveTintColor: Colors.light.primary,
          tabBarInactiveTintColor: Colors.light.textSecondary,
          tabBarStyle: {
            height: 72,
            paddingTop: 8,
            paddingBottom: 10,
            borderTopColor: Colors.light.border,
            backgroundColor: '#FFFFFF',
          },
          tabBarLabelStyle: {
            fontSize: 12,
            fontWeight: '800',
          },
        }}>
        <Tabs.Screen name="index" options={{ title: '首页', tabBarIcon: HomeIcon }} />
        <Tabs.Screen name="claims" options={{ title: '报销', tabBarIcon: ClaimsIcon }} />
        <Tabs.Screen name="approvals" options={{ title: '审批', tabBarIcon: ApprovalsIcon }} />
        <Tabs.Screen name="assistant" options={{ title: 'AI 助手', tabBarIcon: AssistantIcon }} />
        <Tabs.Screen name="profile" options={{ title: '我的', tabBarIcon: ProfileIcon }} />
        <Tabs.Screen name="explore" options={{ href: null }} />
      </Tabs>
    </QueryClientProvider>
  );
}
