import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { BarberShop } from '../types';
import { colors, radius, shadows } from '../lib/theme';

type Props = {
  shop: BarberShop;
  isFavorite?: boolean;
  onPress: () => void;
  onToggleFavorite?: () => void;
};

export const ShopCard = ({ shop, isFavorite, onPress, onToggleFavorite }: Props) => (
  <TouchableOpacity style={styles.card} activeOpacity={0.92} onPress={onPress}>
    <View style={styles.imageWrap}>
      {shop.imageUrl ? (
        <Image source={{ uri: shop.imageUrl }} style={styles.image} />
      ) : (
        <View style={styles.imageFallback}>
          <Ionicons name="cut-outline" size={36} color={colors.brandAccent} />
        </View>
      )}
      <View style={styles.imageOverlay} />
      <View style={styles.ratingBadge}>
        <Ionicons name="star" size={12} color={colors.primary} />
        <Text style={styles.ratingText}>{(shop.rating || 0).toFixed(1)}</Text>
      </View>
      {onToggleFavorite && (
        <TouchableOpacity
          style={styles.favBtn}
          activeOpacity={0.8}
          onPress={(e) => {
            e.stopPropagation?.();
            onToggleFavorite();
          }}
        >
          <Ionicons
            name={isFavorite ? 'heart' : 'heart-outline'}
            size={16}
            color={isFavorite ? colors.danger : colors.textInverse}
          />
        </TouchableOpacity>
      )}
    </View>

    <View style={styles.body}>
      <Text style={styles.name} numberOfLines={1}>{shop.name}</Text>
      <View style={styles.addressRow}>
        <Ionicons name="location-outline" size={14} color={colors.primary} />
        <Text style={styles.address} numberOfLines={1}>
          {shop.address && shop.address !== 'Endereço a definir' ? shop.address : 'Endereço Indisponível'}
        </Text>
      </View>

      <View style={styles.footer}>
        <Text style={styles.barbersLabel}>+{(shop.barbers || []).length} Barbeiros</Text>
        <View style={styles.cta}>
          <Text style={styles.ctaText}>Reservar</Text>
        </View>
      </View>
    </View>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.surface,
    borderRadius: radius.xl,
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: colors.border,
    ...shadows.card,
  },
  imageWrap: {
    height: 150,
    position: 'relative',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  imageFallback: {
    width: '100%',
    height: '100%',
    backgroundColor: colors.surfaceDark,
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(15,23,42,0.25)',
  },
  ratingBadge: {
    position: 'absolute',
    top: 12,
    right: 12,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    backgroundColor: 'rgba(15,23,42,0.9)',
    borderRadius: radius.pill,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.1)',
  },
  ratingText: {
    color: colors.textInverse,
    fontSize: 11,
    fontWeight: '800',
  },
  favBtn: {
    position: 'absolute',
    top: 12,
    left: 12,
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: 'rgba(15,23,42,0.55)',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.12)',
  },
  body: {
    padding: 16,
    gap: 8,
  },
  name: {
    fontSize: 18,
    fontWeight: '900',
    color: colors.text,
    letterSpacing: -0.3,
  },
  addressRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  address: {
    flex: 1,
    color: colors.textMuted,
    fontSize: 13,
    fontWeight: '500',
  },
  footer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 4,
    gap: 8,
  },
  barbersLabel: {
    flex: 1,
    fontSize: 10,
    fontWeight: '800',
    color: colors.textSubtle,
    textTransform: 'uppercase',
    letterSpacing: 0.8,
  },
  cta: {
    paddingHorizontal: 14,
    paddingVertical: 8,
    backgroundColor: colors.surfaceDark,
    borderRadius: radius.md,
    minHeight: 36,
    alignItems: 'center',
    justifyContent: 'center',
  },
  ctaText: {
    color: colors.brandAccent,
    fontSize: 12,
    fontWeight: '800',
  },
});
