import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors, shadows } from '../../constants/theme';

const TABLET_MIN_WIDTH = 768;

function ScanIcon({ color, size }: { color: string; size: number }) {
  return (
    <View style={styles.fabContainer}>
      <View style={[styles.fab, shadows.scanButton]}>
        <Ionicons name="scan" size={size} color="#ffffff" />
      </View>
    </View>
  );
}

export default function TabLayout() {
  const insets = useSafeAreaInsets();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
  const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarStyle: {
          ...(isTablet ? styles.tabBarTablet : styles.tabBar),
          height: (isTablet ? 64 : 60) + bottomPadding,
          paddingBottom: bottomPadding,
        },
        tabBarLabelStyle: {
          ...styles.tabBarLabel,
          ...(isTablet ? styles.tabBarLabelTablet : {}),
        },
        headerStyle: styles.header,
        headerTintColor: colors.primary,
        headerTitleStyle: {
          ...styles.headerTitle,
          ...(isTablet ? styles.headerTitleTablet : {}),
        },
      }}
    >
      <Tabs.Screen
        name="home"
        options={{
          title: 'Inicio',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="index"
        options={{
          title: 'Buscar',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="scan"
        options={{
          title: 'Escanear',
          tabBarIcon: ({ color, size }) => <ScanIcon color={color} size={size} />,
          tabBarLabel: () => null,
        }}
      />
      <Tabs.Screen
        name="alerts"
        options={{
          title: 'Avisos',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="notifications" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="map"
        options={{
          href: null,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Perfil',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: colors.card,
    borderTopColor: colors.border,
    paddingTop: 8,
  },
  tabBarTablet: {
    backgroundColor: colors.card,
    borderTopColor: colors.border,
    paddingTop: 10,
    paddingHorizontal: 24,
  },
  tabBarLabel: {
    fontSize: 11,
    fontWeight: '500',
  },
  tabBarLabelTablet: {
    fontSize: 13,
  },
  header: {
    backgroundColor: colors.card,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 1,
  },
  headerTitle: {
    color: colors.text,
    fontWeight: '600',
    fontSize: 17,
  },
  headerTitleTablet: {
    fontSize: 20,
  },
  fabContainer: {
    position: 'absolute',
    top: -16,
    alignItems: 'center',
  },
  fab: {
    width: 52,
    height: 52,
    borderRadius: 26,
    backgroundColor: colors.scanButton,
    alignItems: 'center',
    justifyContent: 'center',
  },
});