import { Pressable, StyleSheet, Text, View } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { GuestStackParamList } from '../../navigation/types';
import { ScreenLayout } from '../../components/ui/ScreenLayout';
import { Icon } from '../../components/ui/Icon';
import { colors, radii, spacing } from '../../constants/theme';
import { publicGuestScreens } from '../../config/routeMap';

type Props = NativeStackScreenProps<GuestStackParamList, 'Home'>;

const screenMap: Record<string, keyof GuestStackParamList> = {
  '/login': 'Login',
  '/register': 'Register',
  '/contact': 'Contact',
  '/guide': 'GuidePublic',
  '/blog': 'BlogPublic',
  '/faq': 'FaqPublic',
  '/partners': 'Partners',
  '/terms': 'Legal',
  '/privacy': 'Legal',
  '/about': 'Legal',
};

export function HomeScreen({ navigation }: Props) {
  return (
    <ScreenLayout title="Online Clinic" subtitle="Manage appointments, patients, and clinic operations on the go.">
      <View style={styles.grid}>
        {publicGuestScreens.map((item) => {
          const screen = screenMap[item.path];
          if (!screen) return null;
          return (
            <Pressable
              key={item.path}
              style={styles.tile}
              onPress={() => {
                if (item.path === '/terms') navigation.navigate('Legal', { page: 'terms' });
                else if (item.path === '/privacy') navigation.navigate('Legal', { page: 'privacy' });
                else if (item.path === '/about') navigation.navigate('Legal', { page: 'about' });
                else navigation.navigate(screen as 'Login');
              }}
            >
              <Icon name={item.icon} color={colors.primary} size={28} />
              <Text style={styles.tileLabel}>{item.name}</Text>
            </Pressable>
          );
        })}
      </View>
    </ScreenLayout>
  );
}

const styles = StyleSheet.create({
  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.md },
  tile: {
    width: '46%',
    backgroundColor: colors.surface,
    borderRadius: radii.lg,
    padding: spacing.lg,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: colors.border,
    gap: spacing.sm,
  },
  tileLabel: { fontWeight: '600', color: colors.text, textAlign: 'center' },
});