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 Vendor {
  id: number;
  companyName: string;
  sector: string;
  city: string;
  logoUrl?: string;
  isVerified: boolean;
  rating: string;
  totalReviews: number;
  categories: string[];
}

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

export default function VendorCard({ 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.header}>
          <View
            style={[
              styles.logo,
              { backgroundColor: colors.secondary, borderRadius: 14 },
            ]}
          >
            <Text
              style={[
                styles.logoText,
                { color: colors.primary, fontFamily: "Inter_700Bold" },
              ]}
            >
              {vendor.companyName[0]}
            </Text>
          </View>
          <View style={styles.info}>
            <View style={styles.nameRow}>
              <Text
                style={[
                  styles.name,
                  { color: colors.foreground, fontFamily: "Inter_700Bold" },
                ]}
                numberOfLines={1}
              >
                {vendor.companyName}
              </Text>
              {vendor.isVerified && (
                <Feather
                  name="check-circle"
                  size={14}
                  color={colors.primary}
                  style={{ marginLeft: 6 }}
                />
              )}
            </View>
            <View style={styles.metaRow}>
              <Feather name="map-pin" size={12} color={colors.mutedForeground} />
              <Text
                style={[
                  styles.metaText,
                  { color: colors.mutedForeground, fontFamily: "Inter_400Regular" },
                ]}
              >
                {" "}
                {vendor.city}
              </Text>
              {vendor.sector ? (
                <>
                  <Text style={{ color: colors.border }}> · </Text>
                  <Text
                    style={[
                      styles.metaText,
                      { color: colors.mutedForeground, fontFamily: "Inter_400Regular" },
                    ]}
                  >
                    {vendor.sector}
                  </Text>
                </>
              ) : null}
            </View>
          </View>
          <Feather name="chevron-right" size={18} color={colors.mutedForeground} />
        </View>

        {rating > 0 && (
          <View style={styles.ratingRow}>
            <StarRating value={rating} size={13} />
            <Text
              style={[
                styles.ratingText,
                { color: colors.mutedForeground, fontFamily: "Inter_400Regular" },
              ]}
            >
              {" "}
              {vendor.rating}{" "}
              <Text style={{ color: colors.border }}>
                ({vendor.totalReviews})
              </Text>
            </Text>
          </View>
        )}

        {vendor.categories?.length > 0 && (
          <View style={styles.chips}>
            {vendor.categories.slice(0, 3).map((cat) => (
              <View
                key={cat}
                style={[
                  styles.chip,
                  { backgroundColor: colors.muted, borderRadius: 6 },
                ]}
              >
                <Text
                  style={[
                    styles.chipText,
                    { color: colors.mutedForeground, fontFamily: "Inter_400Regular" },
                  ]}
                >
                  {cat}
                </Text>
              </View>
            ))}
            {vendor.categories.length > 3 && (
              <Text
                style={[
                  styles.chipMore,
                  { color: colors.mutedForeground, fontFamily: "Inter_400Regular" },
                ]}
              >
                +{vendor.categories.length - 3} more
              </Text>
            )}
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: { borderWidth: StyleSheet.hairlineWidth },
  content: { padding: 14, gap: 10 },
  header: { flexDirection: "row", alignItems: "center", gap: 12 },
  logo: { width: 50, height: 50, alignItems: "center", justifyContent: "center" },
  logoText: { fontSize: 22 },
  info: { flex: 1 },
  nameRow: { flexDirection: "row", alignItems: "center" },
  name: { fontSize: 16, flex: 1 },
  metaRow: { flexDirection: "row", alignItems: "center", marginTop: 3 },
  metaText: { fontSize: 13 },
  ratingRow: { flexDirection: "row", alignItems: "center" },
  ratingText: { fontSize: 12 },
  chips: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
  chip: { paddingHorizontal: 8, paddingVertical: 4 },
  chipText: { fontSize: 11 },
  chipMore: { fontSize: 11, paddingVertical: 4 },
});