/**
 * Bottom tab navigator — main app navigation.
 * Mirrors the 8-tab PWA dashboard structure.
 */

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text, View, StyleSheet } from 'react-native';
import { useTheme } from '../themes/ThemeProvider';

import DashboardScreen from '../screens/Dashboard';
import ClientsStack from './stacks/ClientsStack';
import ShowingsStack from './stacks/ShowingsStack';
import DealsStack from './stacks/DealsStack';
import MoreStack from './stacks/MoreStack';

export type TabParamList = {
  DashboardTab: undefined;
  ClientsTab: undefined;
  ShowingsTab: undefined;
  DealsTab: undefined;
  MoreTab: undefined;
};

const Tab = createBottomTabNavigator<TabParamList>();

function TabIcon({ name, focused, color }: { name: string; focused: boolean; color: string }) {
  const icons: Record<string, string> = {
    DashboardTab: '⊞',
    ClientsTab: '👤',
    ShowingsTab: '🏠',
    DealsTab: '📋',
    MoreTab: '⋯',
  };
  return (
    <View style={styles.iconContainer}>
      <Text style={[styles.icon, { color, opacity: focused ? 1 : 0.6 }]}>
        {icons[name] ?? '•'}
      </Text>
    </View>
  );
}

export default function TabNavigator() {
  const { theme } = useTheme();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarIcon: ({ focused, color }) => (
          <TabIcon name={route.name} focused={focused} color={color} />
        ),
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: theme.colors.textSecondary,
        tabBarStyle: {
          backgroundColor: theme.colors.surface,
          borderTopColor: theme.colors.border,
          paddingBottom: 4,
          height: 56,
        },
        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: '600',
        },
      })}
    >
      <Tab.Screen
        name="DashboardTab"
        component={DashboardScreen}
        options={{ tabBarLabel: 'Dashboard' }}
      />
      <Tab.Screen
        name="ClientsTab"
        component={ClientsStack}
        options={{ tabBarLabel: 'Clients' }}
      />
      <Tab.Screen
        name="ShowingsTab"
        component={ShowingsStack}
        options={{ tabBarLabel: 'Showings' }}
      />
      <Tab.Screen
        name="DealsTab"
        component={DealsStack}
        options={{ tabBarLabel: 'Deals' }}
      />
      <Tab.Screen
        name="MoreTab"
        component={MoreStack}
        options={{ tabBarLabel: 'More' }}
      />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  iconContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 28,
    height: 28,
  },
  icon: {
    fontSize: 20,
  },
});