import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { Ionicons } from '@expo/vector-icons';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { COLORS, FONTS, FONT_SIZE, SPACING } from '../theme';

import HomeScreen        from '../screens/HomeScreen';
import ApproachScreen    from '../screens/ApproachScreen';
import MethodsScreen     from '../screens/MethodsScreen';
import AboutScreen       from '../screens/AboutScreen';
import TestimonialsScreen from '../screens/TestimonialsScreen';
import CostsScreen       from '../screens/CostsScreen';
import BlogScreen        from '../screens/BlogScreen';
import ContactScreen     from '../screens/ContactScreen';
import MoreScreen        from '../screens/MoreScreen';

const Tab   = createBottomTabNavigator();
const Stack = createStackNavigator();

function MoreStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: COLORS.slate900 },
        headerTintColor: COLORS.white,
        headerTitleStyle: {
          fontFamily: FONTS.sans,
          fontWeight: '800',
          fontSize: FONT_SIZE.sm,
          letterSpacing: 2,
          textTransform: 'uppercase',
        },
        headerBackTitleVisible: false,
      }}
    >
      <Stack.Screen name="MoreMenu"      component={MoreScreen}         options={{ title: 'MORE' }} />
      <Stack.Screen name="Testimonials"  component={TestimonialsScreen} options={{ title: 'TESTIMONIALS' }} />
      <Stack.Screen name="Costs"         component={CostsScreen}        options={{ title: 'COSTS & LOCATION' }} />
      <Stack.Screen name="Blog"          component={BlogScreen}         options={{ title: 'BLOG & ARTICLES' }} />
      <Stack.Screen name="Contact"       component={ContactScreen}      options={{ title: 'CONTACT' }} />
    </Stack.Navigator>
  );
}

export default function AppNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          const icons: Record<string, string> = {
            Home:     focused ? 'home'          : 'home-outline',
            Approach: focused ? 'compass'       : 'compass-outline',
            Methods:  focused ? 'layers'        : 'layers-outline',
            About:    focused ? 'person'        : 'person-outline',
            More:     focused ? 'grid'          : 'grid-outline',
          };
          return (
            <Ionicons
              name={(icons[route.name] || 'ellipse') as any}
              size={22}
              color={color}
            />
          );
        },
        tabBarActiveTintColor:   COLORS.slate900,
        tabBarInactiveTintColor: COLORS.slate400,
        tabBarStyle: {
          backgroundColor: COLORS.white,
          borderTopColor:  COLORS.slate200,
          borderTopWidth:  1,
          paddingBottom:   Platform.OS === 'ios' ? 8 : 4,
          paddingTop:      4,
          height:          Platform.OS === 'ios' ? 80 : 64,
        },
        tabBarLabelStyle: {
          fontFamily:  FONTS.sans,
          fontSize:    9,
          fontWeight:  '700',
          letterSpacing: 1,
          textTransform: 'uppercase',
          marginTop:   2,
        },
        headerStyle: { backgroundColor: COLORS.slate900 },
        headerTintColor: COLORS.white,
        headerTitleStyle: {
          fontFamily:    FONTS.sans,
          fontWeight:    '800',
          fontSize:      FONT_SIZE.sm,
          letterSpacing: 2,
          textTransform: 'uppercase',
        },
      })}
    >
      <Tab.Screen name="Home"     component={HomeScreen}     options={{ title: 'YOUR WAVE', headerTitle: 'YOUR WAVE' }} />
      <Tab.Screen name="Approach" component={ApproachScreen} options={{ title: 'Approach',  headerTitle: 'MY APPROACH' }} />
      <Tab.Screen name="Methods"  component={MethodsScreen}  options={{ title: 'Methods',   headerTitle: 'METHODS' }} />
      <Tab.Screen name="About"    component={AboutScreen}    options={{ title: 'About',     headerTitle: 'ABOUT ME' }} />
      <Tab.Screen name="More"     component={MoreStack}      options={{ title: 'More',      headerShown: false }} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({});
