import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Image,
  StyleSheet,
  Dimensions,
  Linking,
} from "react-native";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import { Ionicons, Feather } from "@expo/vector-icons";
import AntDesign from "@expo/vector-icons/AntDesign";
import { url } from "inspector";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import Entypo from "@expo/vector-icons/Entypo";

const { width } = Dimensions.get("window");

export default function DetailShop() {
  const navigation = useNavigation<NavigationProp<any>>();

  const openLink = (url: string) => {
    Linking.openURL(url).catch((err) => console.error("Lỗi mở link:", err));
  };

  return (
    <AppLayout activeTab="detailshop">
      <ScrollView>
        <View style={styles.container}>
          {/* Breadcrumb */}
          <View style={styles.breadcrumb}>
            <View style={styles.breadcrumbItem}>
              <TouchableOpacity>
                <Ionicons
                  name="home"
                  size={16}
                  color="#637381"
                  style={styles.icon}
                />
              </TouchableOpacity>
              <Text style={styles.angle}>›</Text>
            </View>
            <View style={styles.breadcrumbItem}>
              <Text style={styles.text}>Tìm người bán</Text>
              <Text style={styles.angle}>›</Text>
            </View>
            <View style={styles.breadcrumbItem}>
              <Text style={styles.text}>Chi tiết cửa hàng</Text>
            </View>
          </View>

          <View style={styles.boxTop}>
            <View style={styles.infoShop}>
              <Image
                source={require("../../../assets/images/logo-hacom.png")}
                style={styles.logo}
                resizeMode="contain"
              />
              <View style={styles.title}>
                <View>Hanoicomputer</View>
                <Text>Công cổ phần máy tính Hà Nội</Text>
              </View>
            </View>
            <TouchableOpacity style={styles.boxSave}>
              <AntDesign name="hearto" size={16} color="#7a7a7a" />
            </TouchableOpacity>
          </View>
          <View style={styles.boxContent}>
            <View style={styles.item}>
              <Feather name="star" size={20} color="#666" />
              <Text style={styles.label}>Đánh giá: </Text>
              <Text style={styles.highlight}>4.6/5 </Text>
              <Text style={styles.subtext}>(43 đánh giá)</Text>
            </View>
            <View style={styles.item}>
              <Ionicons name="briefcase-outline" size={20} color="#666" />
              <Text style={styles.label}>Lĩnh vực: </Text>
              <Text style={styles.text}>
                Chuyên mua bán trao đổi PC, laptop, linh phụ kiện máy tính
              </Text>
            </View>
            <View style={styles.item}>
              <Entypo name="location-pin" size={20} color="#666" />
              <Text style={styles.label}>Địa chỉ: </Text>
              <Text style={styles.text}>
                Tầng 7, tòa nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3,
                TP. Hồ Chí Minh
              </Text>
            </View>

            <View style={styles.item}>
              <Feather name="home" size={20} color="#666" />
              <Text style={styles.label}>Showroom: </Text>
              <Text style={styles.text}>Xem 7 showroom</Text>
            </View>

            <TouchableOpacity
              style={styles.item}
              onPress={() => openLink("https://cp.com.vn/")}
            >
              <Feather name="globe" size={20} color="#666" />
              <Text style={styles.label}>Website: </Text>
              <Text style={[styles.text, styles.link]}>https://cp.com.vn/</Text>
            </TouchableOpacity>

            <View style={styles.item}>
              <Feather name="phone" size={20} color="#666" />
              <Text style={styles.label}>Tel: </Text>
              <Text style={styles.text}>1800 6867 - 1800 6865</Text>
            </View>

            <View style={styles.item}>
              <Feather name="share-2" size={20} color="#666" />
              <Text style={styles.label}>Social: </Text>
              <View style={styles.socialIcons}>
                <TouchableOpacity
                  onPress={() => openLink("https://facebook.com/")}
                >
                  <FontAwesome name="facebook" size={24} color="#1877F2" />
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => openLink("https://youtube.com/")}
                >
                  <FontAwesome name="youtube-play" size={24} color="red" />
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => openLink("https://tiktok.com/")}
                >
                  <FontAwesome name="music" size={24} color="black" />
                </TouchableOpacity>
              </View>
            </View>

            <View style={styles.item}>
              <Feather name="file-text" size={20} color="#666" />
              <Text style={styles.label}>Mô tả: </Text>
              <Text style={styles.text}>
                Công ty Cổ phần Đầu tư Công nghệ HACOM (viết tắt là “HACOM”,
                tiền thân là Công ty Cổ phần Máy tính Hà Nội, sở hữu thương hiệu
                HANOICOMPUTER), được thành lập vào tháng 9/2001, hoạt động chủ
                yếu trong lĩnh vực bán lẻ các sản phẩm máy tính và thiết bị văn
                phòng. Trải qua chặng đường hơn 20 năm phát triển, đến nay HACOM
                đã trở thành một trong những thương hiệu hàng đầu trong lĩnh vực
                kinh doanh các sản phẩm Công nghệ thông tin tại Việt Nam với hệ
                thống các showroom quy mô và hiện đại trải dài từ Bắc vào Nam.
              </Text>
            </View>
          </View>
        </View>
      </ScrollView>
    </AppLayout>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    backgroundColor: "#f4f4f4",
  },
  breadcrumb: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
    flexWrap: "wrap",
  },
  breadcrumbItem: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 8,
  },
  text: {
    color: "#000",
  },
  icon: {
    marginRight: 5,
  },
  angle: {
    marginLeft: 12,
    color: "#888",
  },
  logo: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderColor: "#d4d4d4",
    marginRight: 10,
  },
  boxTop: {
    marginBottom: 5,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#fff",
    padding: 10,
    borderRadius: 5,
  },
  infoShop: {
    flexDirection: "row",
    alignItems: "center",
    width: width - 100,
  },
  iconStore: {
    width: 20,
    marginRight: 10,
    objectFit: "contain",
  },
  boxSave: {
    width: 28,
    height: 28,
    borderRadius: "50%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    lineHeight: 30,
    backgroundColor: "#e2e2e2",
  },
  info: { flex: 1, marginRight: 10 },
  title: {
    fontWeight: "bold",
    fontSize: 16,
    marginBottom: 5,
    width: width - 170,
  },
  item: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "flex-start",
    borderBottomWidth: 1,
    borderColor: "#f0f0f0",
    padding: 10,
  },
  label: {
    fontWeight: "600",
    color: "#333",
    width: 80,
    marginLeft: 10,
  },
  highlight: {
    color: "#e74c3c",
    fontWeight: "bold",
  },
  subtext: {
    color: "#666",
  },
  link: {
    color: "#007BFF",
  },
  socialIcons: {
    flexDirection: "row",
    gap: 10,
    marginLeft: 10,
  },
  boxContent: {
    backgroundColor: "#fff",
    borderRadius: 5,
    marginBottom: 15,
  },
});
