import React from "react";
import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
import Feather from "@expo/vector-icons/Feather";
import Ionicons from "@expo/vector-icons/Ionicons";
import { useNavigation, NavigationProp } from "@react-navigation/native";

interface ServiceProviderCardProps {
  name: string;
  backgroundImage: any;
  favoriteIcon: any;
  verifiedIcon?: any;
  specialties: string[];
  address: string;
  phone: string;
  website: string;
  certifications: Array<{
    icon: any;
    name: string;
    color?: string;
  }>;
  rating: string;
  rate: number;
  reviewCount: string;
  showroomCount?: string;
  isVerified?: boolean;
}

const renderStars = (count: number) => {
  return (
    <View style={{ flexDirection: "row" }}>
      {Array.from({ length: 5 }).map((_, index) => (
        <Ionicons
          key={index}
          name="star"
          size={13}
          color={index < count ? "#ff7a00" : "#d9d9d9"}
        />
      ))}
    </View>
  );
};

export const ServiceProviderCard: React.FC<ServiceProviderCardProps> = ({
  name,
  backgroundImage,
  favoriteIcon,
  verifiedIcon,
  specialties,
  address,
  phone,
  website,
  certifications,
  rating,
  rate,
  reviewCount,
  showroomCount,
  isVerified = false,
}) => {
  const navigation = useNavigation<NavigationProp<any>>();

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <TouchableOpacity
          style={styles.imageContainer}
          onPress={() => navigation.navigate("detailrepair" as never)}
        >
          <Image source={backgroundImage} style={styles.backgroundImage} />
          <Image source={favoriteIcon} style={styles.favoriteIcon} />
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.nameContainer}
          onPress={() => navigation.navigate("detailrepair" as never)}
        >
          <Text style={styles.name}>{name}</Text>
          {verifiedIcon && (
            <Image source={verifiedIcon} style={styles.verifiedIcon} />
          )}
        </TouchableOpacity>

        <View style={styles.specialtiesContainer}>
          <View style={styles.specialtyRow}>
            <View style={styles.bgspecialtyIcon}>
              <Image
                source={require("../../../assets/images/icon_store_blue.png")}
                style={styles.specialtyIcon}
              />
            </View>
            <Text style={styles.specialtyText}>Chuyên sửa chữa</Text>
          </View>
          {specialties.map((specialty, index) => (
            <View key={index} style={styles.tag}>
              <Text style={styles.tagText}>{specialty}</Text>
            </View>
          ))}
        </View>

        <View style={styles.infoRow}>
          <Image
            source={require("../../../assets/images/icon_location.png")}
            style={styles.mapIcon}
          />
          <Text style={styles.infoText}>{address}</Text>
        </View>

        <View style={styles.infoRow}>
          <Image
            source={require("../../../assets/images/icon_map.png")}
            style={styles.mapIcon}
          />
          <Text style={styles.mapText}>Google Maps</Text>
          <Image
            source={require("../../../assets/images/icon_showroom_blue.png")}
            style={styles.showroomIcon}
          />
          {showroomCount && (
            <Text style={styles.showroomText}>{showroomCount}</Text>
          )}
        </View>

        <View style={styles.infoRow}>
          <Feather name="phone" size={14} color="black" />
          <Text style={styles.infoText}>{phone}</Text>
        </View>

        <View style={styles.infoRow}>
          <MaterialCommunityIcons name="web" size={14} color="black" />
          <Text style={styles.websiteText}>
            <Text style={styles.websiteLabel}>Website: </Text>
            {website}
          </Text>
        </View>

        {certifications.map((cert, index) => (
          <View
            key={index}
            style={[styles.certificationBadge, { backgroundColor: cert.color }]}
          >
            <Image source={cert.icon} style={styles.certIcon} />
            <Text style={styles.certText}>{cert.name}</Text>
          </View>
        ))}

        <View style={styles.certificationBadge}>
          <Ionicons name="time-outline" size={14} color="black" />
          <Text style={{ color: "#000" }}>Hoạt động từ 2020</Text>
        </View>

        <View style={styles.ratingContainer}>
          {renderStars(rate)}
          <Text style={styles.rating}>{rating} </Text>
          <Text style={styles.reviewCount}>({reviewCount})</Text>
          <Text style={styles.reviewLabel}>Đánh giá</Text>
        </View>
      </View>

      <View style={styles.contactButton}>
        <Text style={styles.contactText}>Liên hệ</Text>
        <Image
          source={require("../../../assets/images/icon-export-link.png")}
          style={styles.contactIcon}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: "rgba(240, 240, 240, 1)",
    paddingVertical: 8,
    flex: 1,
  },
  content: {
    paddingHorizontal: 6,
  },
  imageContainer: {
    position: "relative",
    aspectRatio: 1.757,
    paddingTop: 2,
    paddingHorizontal: 36,
    paddingBottom: 77,
  },
  backgroundImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: "100%",
    height: "100%",
    resizeMode: "cover",
  },
  favoriteIcon: {
    width: 13.71,
    height: 12.58,
    resizeMode: "contain",
    position: "absolute",
    right: 10,
    top: 10,
    backgroundColor: "#EFEFEF",
    borderRadius: "50%",
    padding: 5,
  },
  nameContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    marginTop: 4,
  },
  name: {
    fontSize: 15,
    fontWeight: "700",
    color: "#303030",
  },
  verifiedIcon: {
    width: 11,
    height: 11,
    resizeMode: "contain",
  },
  specialtiesContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    gap: 5,
    marginTop: 5,
  },
  specialtyRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
  },
  specialtyIcon: {
    width: 13,
    height: 13,
    resizeMode: "contain",
  },
  bgspecialtyIcon: {
    padding: 3,
    backgroundColor: "#e0ecff",
    borderRadius: "50%",
  },
  specialtyText: {
    fontSize: 12,
    fontWeight: "400",
    color: "#303030",
  },
  specialtyTag: {
    borderRadius: 233,
    backgroundColor: "rgba(0, 0, 0, 0.1)",
    paddingVertical: 5,
    paddingHorizontal: 12,
    alignItems: "center",
    justifyContent: "center",
  },
  specialtyTagText: {
    fontSize: 12,
    fontWeight: "400",
    color: "rgba(0, 0, 0, 1)",
    textAlign: "center",
  },
  tagsContainer: {
    flexDirection: "row",
    gap: 5,
    marginTop: 5,
  },
  tag: {
    borderRadius: 222,
    backgroundColor: "#F5E3FF",
    paddingVertical: 5,
    paddingHorizontal: 12,
    alignItems: "center",
    justifyContent: "center",
  },
  tagText: {
    fontSize: 12,
    fontWeight: "500",
    color: "rgba(0, 0, 0, 1)",
    textAlign: "center",
  },
  infoRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    gap: 4,
    marginTop: 6,
  },
  infoIcon: {
    width: 16,
    height: 16,
    resizeMode: "contain",
  },
  infoText: {
    fontSize: 12,
    fontWeight: "400",
    color: "#303030",
    lineHeight: 15,
    flex: 1,
  },
  mapIcon: {
    width: 11,
    height: 16,
    resizeMode: "contain",
  },
  mapText: {
    fontSize: 10,
    fontWeight: "400",
    color: "#FF7A00",
  },
  showroomIcon: {
    width: 17,
    height: 17,
    resizeMode: "contain",
  },
  showroomText: {
    fontSize: 10,
    fontWeight: "700",
    color: "rgba(24, 119, 242, 1)",
    textDecorationLine: "underline",
  },
  websiteText: {
    fontSize: 12,
    fontWeight: "400",
    color: "#303030",
    flex: 1,
  },
  websiteLabel: {
    color: "rgba(48,48,48,1)",
  },
  certificationBadge: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
    borderRadius: 333,
    backgroundColor: "#f4f4f4",
    color: "#fff",
    paddingVertical: 6,
    paddingHorizontal: 13,
    marginTop: 6,
  },
  certIcon: {
    width: 16,
    height: 16,
    resizeMode: "contain",
  },
  certText: {
    fontSize: 12,
    fontWeight: "400",
    color: "rgba(255, 122, 0, 1)",
  },
  ratingContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
    alignSelf: "center",
    marginTop: 6,
  },
  rating: {
    fontSize: 12,
    fontWeight: "400",
    color: "rgba(0, 0, 0, 1)",
    flex: 1,
  },
  reviewCount: {
    fontSize: 12,
    fontWeight: "500",
    color: "#303030",
    textAlign: "right",
  },
  reviewLabel: {
    fontSize: 12,
    fontWeight: "500",
    color: "#303030",
    textAlign: "right",
    textDecorationLine: "underline",
  },
  contactButton: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
    marginTop: 9,
    marginLeft: 10,
  },
  contactText: {
    fontSize: 12,
    fontWeight: "700",
    color: "rgba(70, 47, 145, 1)",
    textAlign: "left",
    textDecorationLine: "underline",
  },
  contactIcon: {
    width: 16,
    height: 16,
    resizeMode: "contain",
  },
});
