import React from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { Property } from '../types';

const { width } = Dimensions.get('window');

interface PropertyCardProps {
  property: Property;
  onPress: () => void;
  compact?: boolean;
}

export default function PropertyCard({ property, onPress, compact = false }: PropertyCardProps) {
  const formatPrice = (price: string) => {
    const numPrice = parseFloat(price);
    return `$${numPrice.toLocaleString()}`;
  };

  const getPropertyTypeColor = (type: string) => {
    return type === 'buy' ? '#0091B9' : '#FF6500';
  };

  return (
    <TouchableOpacity 
      style={[
        styles.container, 
        compact && styles.compactContainer
      ]} 
      onPress={onPress}
      activeOpacity={0.8}
    >
      {/* Property Image */}
      <View style={[styles.imageContainer, compact && styles.compactImageContainer]}>
        <Image
          source={{
            uri: property.images && property.images.length > 0
              ? property.images[0]
              : 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600'
          }}
          style={[styles.image, compact && styles.compactImage]}
          resizeMode="cover"
        />
        
        {/* Property Type Badge */}
        <View style={[styles.typeBadge, { backgroundColor: getPropertyTypeColor(property.type) }]}>
          <Text style={styles.typeBadgeText}>
            {property.type === 'buy' ? 'FOR SALE' : 'FOR RENT'}
          </Text>
        </View>

        {/* Price Badge */}
        <View style={styles.priceBadge}>
          <Text style={styles.priceText}>
            {formatPrice(property.price)}
            {property.type === 'rent' && <Text style={styles.periodText}>/month</Text>}
          </Text>
        </View>
      </View>

      {/* Property Details */}
      <View style={[styles.content, compact && styles.compactContent]}>
        <Text style={[styles.title, compact && styles.compactTitle]} numberOfLines={compact ? 1 : 2}>
          {property.title}
        </Text>
        
        <View style={styles.locationRow}>
          <Icon name="location-outline" size={16} color="#666" />
          <Text style={[styles.location, compact && styles.compactText]} numberOfLines={1}>
            {property.location}
          </Text>
        </View>

        {!compact && (
          <Text style={styles.description} numberOfLines={2}>
            {property.description}
          </Text>
        )}

        {/* Property Features */}
        {(property.bedrooms || property.bathrooms || property.sqft) && (
          <View style={styles.features}>
            {property.bedrooms && (
              <View style={styles.feature}>
                <Icon name="bed-outline" size={14} color="#0091B9" />
                <Text style={[styles.featureText, compact && styles.compactText]}>
                  {property.bedrooms} bed{property.bedrooms > 1 ? 's' : ''}
                </Text>
              </View>
            )}
            {property.bathrooms && (
              <View style={styles.feature}>
                <Icon name="water-outline" size={14} color="#0091B9" />
                <Text style={[styles.featureText, compact && styles.compactText]}>
                  {property.bathrooms} bath{property.bathrooms > 1 ? 's' : ''}
                </Text>
              </View>
            )}
            {property.sqft && (
              <View style={styles.feature}>
                <Icon name="expand-outline" size={14} color="#0091B9" />
                <Text style={[styles.featureText, compact && styles.compactText]}>
                  {property.sqft} sqft
                </Text>
              </View>
            )}
          </View>
        )}

        {/* Property Type */}
        <View style={styles.propertyTypeRow}>
          <Icon name="business-outline" size={14} color="#666" />
          <Text style={[styles.propertyType, compact && styles.compactText]}>
            {property.propertyType}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    borderRadius: 12,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    marginBottom: 15,
    overflow: 'hidden',
  },
  compactContainer: {
    width: width * 0.75,
  },
  imageContainer: {
    position: 'relative',
    height: 200,
  },
  compactImageContainer: {
    height: 150,
  },
  image: {
    width: '100%',
    height: '100%',
  },
  compactImage: {
    height: 150,
  },
  typeBadge: {
    position: 'absolute',
    top: 12,
    left: 12,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  typeBadgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  priceBadge: {
    position: 'absolute',
    top: 12,
    right: 12,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 6,
  },
  priceText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  periodText: {
    fontSize: 12,
    fontWeight: 'normal',
  },
  content: {
    padding: 15,
  },
  compactContent: {
    padding: 12,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#004F9B',
    marginBottom: 8,
  },
  compactTitle: {
    fontSize: 16,
    marginBottom: 6,
  },
  locationRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  location: {
    fontSize: 14,
    color: '#666',
    marginLeft: 4,
    flex: 1,
  },
  description: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
    marginBottom: 12,
  },
  features: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
    marginBottom: 8,
  },
  feature: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  featureText: {
    fontSize: 12,
    color: '#0091B9',
    marginLeft: 4,
    fontWeight: '500',
  },
  propertyTypeRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 4,
  },
  propertyType: {
    fontSize: 12,
    color: '#666',
    marginLeft: 4,
    textTransform: 'capitalize',
    fontWeight: '500',
  },
  compactText: {
    fontSize: 11,
  },
});