import { Pressable, StyleSheet, Text, View } from 'react-native';
import type { LucideIcon } from 'lucide-react-native';
import { BedDouble, Car, Pill, ShoppingBasket, Siren, Smartphone, Ticket, Utensils } from 'lucide-react-native';
import { color, radius, spacing, typography } from '../../theme';
import { naviTheme } from '../../theme/naviTheme';

interface Props {
  label: string;
  icon: string;
  tone?: 'blue' | 'teal' | 'orange' | 'red';
  onPress: () => void;
}

const TONES = {
  blue: { bg: '#E7EEFF', fg: color.blue[600] },
  teal: { bg: '#E6F7F5', fg: '#057A73' },
  orange: { bg: '#FFF4DE', fg: '#A85F00' },
  red: { bg: '#FFE8EA', fg: color.danger },
} as const;

export function ServiceTile({ label, icon, tone = 'blue', onPress }: Props) {
  const palette = TONES[tone];
  const Icon = iconForService(icon);
  return (
    <Pressable style={styles.tile} onPress={onPress} accessibilityRole="button">
      <View style={[styles.iconWrap, { backgroundColor: palette.bg }]}>
        {Icon ? (
          <Icon color={palette.fg} size={22} strokeWidth={2.4} />
        ) : (
          <Text style={[styles.icon, { color: palette.fg }]}>{icon}</Text>
        )}
      </View>
      <Text style={styles.label} numberOfLines={2}>{label}</Text>
    </Pressable>
  );
}

function iconForService(icon: string): LucideIcon | null {
  switch (icon) {
    case 'ST':
    case 'stays':
      return BedDouble;
    case 'AC':
    case 'activities':
      return Ticket;
    case 'TX':
    case 'taxi':
      return Car;
    case 'FD':
    case 'food':
      return Utensils;
    case 'PH':
    case 'pharmacy':
      return Pill;
    case 'GR':
    case 'grocery':
      return ShoppingBasket;
    case '5G':
    case 'sim':
      return Smartphone;
    case '!':
    case 'emergency':
      return Siren;
    default:
      return null;
  }
}

const styles = StyleSheet.create({
  tile: {
    backgroundColor: color.bg[0],
    borderColor: color.border,
    borderRadius: radius.xl,
    borderWidth: 1,
    gap: spacing[3],
    minHeight: 118,
    padding: spacing[4],
    width: '47.8%',
    ...naviTheme.shadows.card,
  },
  iconWrap: {
    alignItems: 'center',
    borderRadius: radius.lg,
    height: 42,
    justifyContent: 'center',
    width: 42,
  },
  icon: {
    fontSize: 18,
    fontWeight: '800',
  },
  label: {
    color: color.ink[900],
    fontSize: typography.scale.bodyStrong.size,
    fontWeight: '700',
    lineHeight: 21,
  },
});