import { useMemo } from 'react';
import { Stack } from 'expo-router';
import { useRouter } from 'expo-router';

import { AppBackButton } from '../../../../src/components/common';
import { useAppColors } from '../../../../src/theme';

export default function ProfileStackLayout() {
  const router = useRouter();
  const colors = useAppColors();

  const headerOptions = useMemo(
    () => ({
      headerStyle: { backgroundColor: colors.background.paper },
      headerTintColor: colors.text.primary,
      headerTitleStyle: { fontWeight: '600' as const },
      headerShadowVisible: false,
      headerBackTitle: '',
    }),
    [colors]
  );

  return (
    <Stack
      screenOptions={{
        ...headerOptions,
        headerBackVisible: false,
        headerLeft: () => <AppBackButton onPress={() => router.back()} />,
      }}
    >
      <Stack.Screen name="index" options={{ headerShown: false }} />
      <Stack.Screen name="settings" options={{ headerShown: true, title: '设置' }} />
      <Stack.Screen name="edit-profile" options={{ title: '编辑资料' }} />
      <Stack.Screen name="account-security" options={{ title: '账号安全' }} />
      <Stack.Screen name="my-posts" options={{ title: '我的帖子' }} />
      <Stack.Screen name="bookmarks" options={{ title: '收藏' }} />
      <Stack.Screen name="notification-settings" options={{ title: '通知设置' }} />
      <Stack.Screen name="blocked-users" options={{ title: '黑名单' }} />
    </Stack>
  );
}