import { BlurView } from "expo-blur";
import { isLiquidGlassAvailable } from "expo-glass-effect";
import { Link, Tabs, router } from "expo-router";
import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
import { SymbolView } from "expo-symbols";
import { Feather, MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
import React from "react";
import { Platform, Pressable, StyleSheet, View, useColorScheme } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { Colors } from "@/constants/colors";

function NativeTabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name=\"index\">
        <Icon sf={{ default: \"face.smiling\", selected: \"face.smiling.fill\" }} />
        <Label>Timmy</Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name=\"matrix\">
        <Icon sf={{ default: \"cube\", selected: \"cube.fill\" }} />
        <Label>Matrix</Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name=\"feed\">
        <Icon sf={{ default: \"list.bullet\", selected: \"list.bullet.circle.fill\" }} />
        <Label>Feed</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

function ClassicTabLayout() {
  const insets = useSafeAreaInsets();
  const isIOS = Platform.OS === "ios";
  const isWeb = Platform.OS === "web";
  const C = Colors.dark;

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: C.accentGlow,\n        tabBarInactiveTintColor: C.textMuted,
        tabBarStyle: {
          position: "absolute",
          backgroundColor: isIOS ? "transparent" : C.surface,
          borderTopWidth: 0,
          elevation: 0,
          ...(isWeb ? { height: 84 } : {}),
        },
        tabBarBackground: () =>
          isIOS ? (
            <BlurView
              intensity={80}
              tint=\"dark\"
              style={[StyleSheet.absoluteFill, { borderTopWidth: 0.5, borderTopColor: C.border }]}
            />
          ) : isWeb ? (
            <View
              style={[StyleSheet.absoluteFill, { backgroundColor: C.surface, borderTopWidth: 0.5, borderTopColor: C.border }]}
            />
          ) : (
            <View style={[StyleSheet.absoluteFill, { backgroundColor: C.surface, borderTopWidth: 0.5, borderTopColor: C.border }]} />
          ),\
      }}\
    >
      <Tabs.Screen
        name=\"index\"
        options={{
          title: "Timmy",
          headerShown: true,
          headerRight: () => (\n            <Link href=\"/settings\" asChild>\n              <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>
                <Ionicons name=\"settings-outline\" size={24} color={C.text} style={{ marginRight: 15 }} />\n              </Pressable>\n            </Link>\n          ),
          tabBarIcon: ({ color, size }) =>
            isIOS ? (
              <SymbolView name=\"face.smiling\" tintColor={color} size={size} />
            ) : (
              <MaterialCommunityIcons name=\"emoticon-outline\" size={size} color={color} />
            ),\
        }}\
      />
      <Tabs.Screen
        name=\"matrix\"
        options={{
          title: "Matrix",
          tabBarIcon: ({ color, size }) =>
            isIOS ? (
              <SymbolView name=\"cube\" tintColor={color} size={size} />
            ) : (
              <MaterialCommunityIcons name=\"cube-outline\" size={size} color={color} />
            ),\
        }}\
      />
      <Tabs.Screen
        name=\"feed\"
        options={{
          title: "Feed",
          tabBarIcon: ({ color, size }) =>
            isIOS ? (
              <SymbolView name=\"list.bullet\" tintColor={color} size={size} />
            ) : (
              <Feather name=\"activity\" size={size} color={color} />
            ),\
        }}\
      />
    </Tabs>
  );
}

export default function TabLayout() {
  if (isLiquidGlassAvailable()) {\n    return (\n      <NativeTabs>\n        <NativeTabs.Screen\n          name=\"index\"\n          options={{\n            title: \"Timmy\",\n            headerShown: true,\n            headerRight: () => (\n              <Link href=\"/settings\" asChild>\n                <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>\n                  <Ionicons name=\"settings-outline\" size={24} color={C.text} style={{ marginRight: 15 }} />\n                </Pressable>\n              </Link>\n            ),\n          }}\n        />\n        <NativeTabs.Screen name=\"matrix\" />\n        <NativeTabs.Screen name=\"feed\" />\n      </NativeTabs>\n    );\n  }
  return <ClassicTabLayout />;\
}