/**
 * Property listing card for lists and search results.
 */

import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { useTheme } from '../themes/ThemeProvider';
import { Property } from '../services/api';

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

function formatPrice(price: number): string {
  if (price >= 1_000_000) {
    return `$${(price / 1_000_000).toFixed(price % 1_000_000 === 0 ? 0 : 2)}M`;
  }
  return `$${price.toLocaleString()}`;
}

export default function PropertyCard({ property, onPress, compact = false }: PropertyCardProps) {
  const { theme } = useTheme();

  const statusColors: Record<string, string> = {
    active: theme.colors.success,
    pending: theme.colors.warning,
    sold: theme.colors.error,
    withdrawn: theme.colors.textSecondary,
  };

  if (compact) {
    return (
      <TouchableOpacity
        style={[styles.compactCard, theme.shadow.sm, { backgroundColor: theme.colors.card }]}
        onPress={() => onPress(property)}
        activeOpacity={0.7}
      >
        {property.photos?.[0] && (
          <Image source={{ uri: property.photos[0] }} style={styles.compactImage} />
        )}
        <View style={styles.compactInfo}>
          <Text style={[styles.compactPrice, { color: theme.colors.text }]} numberOfLines={1}>
            {formatPrice(property.price)}
          </Text>
          <Text style={[styles.compactAddress, { color: theme.colors.textSecondary }]} numberOfLines={1}>
            {property.address}
          </Text>
          <Text style={[styles.compactMeta, { color: theme.colors.textSecondary }]}>
            {property.bedrooms}bd {property.bathrooms}ba {property.sqft?.toLocaleString()}sf
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

  return (
    <TouchableOpacity
      style={[styles.card, theme.shadow.md, { backgroundColor: theme.colors.card }]}
      onPress={() => onPress(property)}
      activeOpacity={0.7}
    >
      <View style={styles.imageContainer}>
        {property.photos?.[0] ? (
          <Image source={{ uri: property.photos[0] }} style={styles.image} />
        ) : (
          <View style={[styles.image, styles.placeholder, { backgroundColor: theme.colors.border }]}>
            <Text style={{ color: theme.colors.textSecondary }}>No Photo</Text>
          </View>
        )}
        <View style={[styles.statusBadge, { backgroundColor: statusColors[property.status] ?? theme.colors.info }]}>
          <Text style={styles.statusText}>{property.status.toUpperCase()}</Text>
        </View>
      </View>

      <View style={styles.info}>
        <Text style={[styles.price, { color: theme.colors.primary }]}>
          {formatPrice(property.price)}
        </Text>
        <Text style={[styles.address, { color: theme.colors.text }]} numberOfLines={2}>
          {property.address}
        </Text>
        <Text style={[styles.cityLine, { color: theme.colors.textSecondary }]}>
          {property.city}, {property.state} {property.zip}
        </Text>

        <View style={styles.metaRow}>
          <View style={styles.metaItem}>
            <Text style={[styles.metaValue, { color: theme.colors.text }]}>{property.bedrooms}</Text>
            <Text style={[styles.metaLabel, { color: theme.colors.textSecondary }]}>Beds</Text>
          </View>
          <View style={[styles.metaDivider, { backgroundColor: theme.colors.border }]} />
          <View style={styles.metaItem}>
            <Text style={[styles.metaValue, { color: theme.colors.text }]}>{property.bathrooms}</Text>
            <Text style={[styles.metaLabel, { color: theme.colors.textSecondary }]}>Baths</Text>
          </View>
          <View style={[styles.metaDivider, { backgroundColor: theme.colors.border }]} />
          <View style={styles.metaItem}>
            <Text style={[styles.metaValue, { color: theme.colors.text }]}>
              {property.sqft?.toLocaleString()}
            </Text>
            <Text style={[styles.metaLabel, { color: theme.colors.textSecondary }]}>SqFt</Text>
          </View>
          {property.lot_size && (
            <>
              <View style={[styles.metaDivider, { backgroundColor: theme.colors.border }]} />
              <View style={styles.metaItem}>
                <Text style={[styles.metaValue, { color: theme.colors.text }]}>{property.lot_size}</Text>
                <Text style={[styles.metaLabel, { color: theme.colors.textSecondary }]}>Lot</Text>
              </View>
            </>
          )}
        </View>

        {property.mls_number && (
          <Text style={[styles.mls, { color: theme.colors.textSecondary }]}>
            MLS# {property.mls_number}
          </Text>
        )}
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 12,
    marginHorizontal: 16,
    marginVertical: 8,
    overflow: 'hidden',
  },
  imageContainer: {
    position: 'relative',
  },
  image: {
    width: '100%',
    height: 200,
  },
  placeholder: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  statusBadge: {
    position: 'absolute',
    top: 12,
    left: 12,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 6,
  },
  statusText: {
    color: '#FFF',
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 0.5,
  },
  info: {
    padding: 16,
  },
  price: {
    fontSize: 24,
    fontWeight: '800',
    marginBottom: 4,
  },
  address: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 2,
  },
  cityLine: {
    fontSize: 14,
    marginBottom: 12,
  },
  metaRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  metaItem: {
    alignItems: 'center',
    paddingHorizontal: 12,
  },
  metaValue: {
    fontSize: 16,
    fontWeight: '700',
  },
  metaLabel: {
    fontSize: 11,
    marginTop: 2,
  },
  metaDivider: {
    width: 1,
    height: 28,
  },
  mls: {
    fontSize: 12,
    marginTop: 10,
  },
  compactCard: {
    flexDirection: 'row',
    borderRadius: 10,
    marginHorizontal: 16,
    marginVertical: 4,
    overflow: 'hidden',
  },
  compactImage: {
    width: 80,
    height: 80,
  },
  compactInfo: {
    flex: 1,
    padding: 10,
    justifyContent: 'center',
  },
  compactPrice: {
    fontSize: 16,
    fontWeight: '700',
  },
  compactAddress: {
    fontSize: 13,
    marginTop: 2,
  },
  compactMeta: {
    fontSize: 12,
    marginTop: 2,
  },
});