import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Feather } from "@expo/vector-icons";
import { useColors } from "@/hooks/useColors";
import StarRating from "@/components/StarRating";

interface Product {
  id: number;
  name: string;
  category: string;
  minPrice?: string;
  maxPrice?: string;
  currency: string;
  unit: string;
  inStock: boolean;
}

interface Vendor {
  id: number;
  companyName: string;
  city: string;
  isVerified: boolean;
  rating: string;
}

interface Props {
  product: Product;
  vendor: Vendor;
  onPress: () => void;
}

export default function ProductCard({ product, vendor, onPress }: Props) {
  const colors = useColors();
  const rating = parseFloat(vendor.rating) || 0;

  return (
    <TouchableOpacity
      onPress={onPress}
      activeOpacity={0.82}
      style={[
        styles.card,
        {
          backgroundColor: colors.card,
          borderColor: colors.border,
          borderRadius: colors.radius,
        },
      ]}
    >
      <View style={styles.content}>
        <View style={styles.topRow}>
          <View
            style={[
              styles.categoryBadge,
              { backgroundColor: colors.primary + "18", borderRadius: 6 },
            ]}
          >
            <Text
              style={[
                styles.categoryText,
                { color: colors.primary, fontFamily: "Inter_500Medium" },
              ]}
            >
              {product.category}
            </Text>
          </View>
          {product.inStock && (
            <View
              style={[
                styles.inStockDot,
                { backgroundColor: colors.primary },
              ]}
            />
          )}
        </View>

        <Text
          style={[
            styles.productName,
            { color: colors.foreground, fontFamily: "Inter_600SemiBold" },
          ]}
          numberOfLines={2}
        >
          {product.name}
        </Text>

        {(product.minPrice || product.maxPrice) && (
          <Text
            style={[
              styles.price,
              { color: colors.accent, fontFamily: "Inter_700Bold" },
            ]}
          >
            {product.currency}{" "}
            {product.minPrice}
            {product.maxPrice && product.maxPrice !== product.minPrice
              ? ` – ${product.maxPrice}`
              : ""}
            {" "}/ {product.unit}
          </Text>
        )}

        <View style={styles.vendorRow}>
          <View
            style={[
              styles.logoSmall,
              {
                backgroundColor: colors.secondary,
                borderRadius: colors.radius,
              },
            ]}
          >
            <Text
              style={[
                styles.logoChar,
                { color: colors.primary, fontFamily: "Inter_700Bold" },
              ]}
            >
              {vendor.companyName[0]}
            </Text>
          </View>
          <View style={styles.vendorMeta}>
            <View style={styles.vendorNameRow}>
              <Text
                style={[
                  styles.vendorName,
                  { color: colors.foreground, fontFamily: "Inter_500Medium" },
                ]}
                numberOfLines={1}
              >
                {vendor.companyName}
              </Text>
              {vendor.isVerified && (
                <Feather
                  name="check-circle"
                  size={12}
                  color={colors.primary}
                  style={{ marginLeft: 4 }}
                />
              )}
            </View>
            <View style={styles.cityRatingRow}>
              <Feather
                name="map-pin"
                size={11}
                color={colors.mutedForeground}
              />
              <Text
                style={[
                  styles.cityText,
                  { color: colors.mutedForeground, fontFamily: "Inter_400Regular" },
                ]}
              >
                {" "}
                {vendor.city}
              </Text>
              {rating > 0 && (
                <>
                  <Text style={{ color: colors.border }}> · </Text>
                  <StarRating value={rating} size={11} />
                  <Text
                    style={[
                      styles.ratingVal,
                      { color: colors.mutedForeground, fontFamily: "Inter_400Regular" },
                    ]}
                  >
                    {" "}
                    {vendor.rating}
                  </Text>
                </>
              )}
            </View>
          </View>
          <Feather
            name="chevron-right"
            size={16}
            color={colors.mutedForeground}
          />
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: { borderWidth: StyleSheet.hairlineWidth },
  content: { padding: 14, gap: 8 },
  topRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  categoryBadge: { paddingHorizontal: 8, paddingVertical: 3 },
  categoryText: { fontSize: 11 },
  inStockDot: { width: 8, height: 8, borderRadius: 4 },
  productName: { fontSize: 16, lineHeight: 22 },
  price: { fontSize: 17 },
  vendorRow: { flexDirection: "row", alignItems: "center", gap: 10, marginTop: 2 },
  logoSmall: { width: 34, height: 34, alignItems: "center", justifyContent: "center" },
  logoChar: { fontSize: 14 },
  vendorMeta: { flex: 1 },
  vendorNameRow: { flexDirection: "row", alignItems: "center" },
  vendorName: { fontSize: 13, flex: 1 },
  cityRatingRow: { flexDirection: "row", alignItems: "center", marginTop: 2 },
  cityText: { fontSize: 12 },
  ratingVal: { fontSize: 11 },
});