import { Ionicons } from "@expo/vector-icons";
import { Pressable, ScrollView, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter } from "expo-router";
import { useTranslation } from "react-i18next";

export default function MehrScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const { t } = useTranslation();

  type MenuItem = {
    icon: React.ComponentProps<typeof Ionicons>["name"];
    label: string;
    subtitle: string;
    color: string;
    route: string;
  };

  const MENU_ITEMS: MenuItem[] = [
    {
      icon: "airplane-outline",
      label: t('mehr.vacation'),
      subtitle: t('mehr.vacationSubtitle'),
      color: "#0ea5e9",
      route: "/(app)/urlaub",
    },
    {
      icon: "settings-outline",
      label: t('settings.title'),
      subtitle: t('mehr.settingsSubtitle'),
      color: "#6b7280",
      route: "/(app)/settings",
    },
  ];

  return (
    <ScrollView
      className="flex-1 bg-gray-50"
      contentContainerStyle={{ paddingTop: insets.top + 16, paddingBottom: insets.bottom + 24 }}
    >
      <Text className="text-2xl font-bold text-gray-900 px-4 mb-6">{t('tabs.more')}</Text>

      <View className="mx-4 bg-white rounded-2xl overflow-hidden" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
        {MENU_ITEMS.map((item, index) => (
          <Pressable
            key={item.route}
            onPress={() => router.push(item.route as Parameters<typeof router.push>[0])}
            className="flex-row items-center px-4 py-4 active:bg-gray-50"
            style={index < MENU_ITEMS.length - 1 ? { borderBottomWidth: 1, borderBottomColor: "#f3f4f6" } : undefined}
          >
            <View
              className="w-10 h-10 rounded-xl items-center justify-center mr-4"
              style={{ backgroundColor: `${item.color}18` }}
            >
              <Ionicons name={item.icon} size={22} color={item.color} />
            </View>
            <View className="flex-1">
              <Text className="text-base font-semibold text-gray-900">{item.label}</Text>
              <Text className="text-xs text-gray-400 mt-0.5">{item.subtitle}</Text>
            </View>
            <Ionicons name="chevron-forward" size={16} color="#d1d5db" />
          </Pressable>
        ))}
      </View>
    </ScrollView>
  );
}