import React from 'react';
import { Image, Pressable, Text, View } from 'react-native';
import { STATUS_COLORS } from '../constants';
import { styles } from '../styles';
import { formatStatusLabel } from '../utils/labels';

function statusAccent(status) {
  return STATUS_COLORS[status] || '#64748b';
}

export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack, onOpenImage }) {
  const isPacked = item.status === 'packed';
  const isUnpacked = item.status === 'unpacked';

  return (
    <View style={styles.itemCard}>
      <View style={[styles.itemAccent, { backgroundColor: statusAccent(item.status) }]} />

      <View style={styles.itemThumbWrap}>
        {item.imageUri ? (
          <Pressable onPress={() => onOpenImage?.(item.imageUri)}>
            <Image source={{ uri: item.imageUri }} style={styles.itemThumbSmall} />
          </Pressable>
        ) : (
          <View style={styles.itemThumbPlaceholder}>
            <Text style={styles.itemThumbPlaceholderText}>🧳</Text>
          </View>
        )}
      </View>

      <View style={styles.itemMain}>
        <View style={styles.cardRow}>
          <View style={styles.flex}>
            <Text style={styles.itemTitle}>{item.name}</Text>
            <Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {formatStatusLabel(item.status, item.lentTo)}</Text>
            <Text style={styles.itemMeta}>Location: {item.placement}</Text>
            {item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta}>Borrower: {item.lentTo}</Text> : null}
            {!!item.description ? <Text style={styles.itemMeta}>{item.description}</Text> : null}
          </View>
          <View style={styles.stackButtons}>
            <Pressable style={styles.miniBtn} onPress={() => onEdit(item)}>
              <Text style={styles.miniBtnText}>Edit</Text>
            </Pressable>
            <Pressable style={styles.miniBtnDanger} onPress={() => onDelete(item.id)}>
              <Text style={styles.miniBtnText}>Delete</Text>
            </Pressable>
          </View>
        </View>

        <View style={styles.quickStatusRow}>
          <Pressable style={[styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive]} onPress={onQuickPack}>
            <Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Pack</Text>
          </Pressable>
          <Pressable style={[styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive]} onPress={onQuickUnpack}>
            <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpack</Text>
          </Pressable>
        </View>
      </View>
    </View>
  );
}