import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Image,
  StyleSheet,
  Dimensions,
  ImageBackground,
} from "react-native";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import { Ionicons } from "@expo/vector-icons";
import CompanyInfo from "@components/repair/CompanyInfo";
import BoxReview from "@components/repair/BoxReview";
import ShowroomSection from "@components/repair/ShowroomSection";
import ContactForm from "@components/repair/ContactForm";

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

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

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

  return (
    <AppLayout activeTab="repairaddress">
      <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}>Địa chỉ sửa chữa</Text>
            </View>
          </View>

          <Text style={{ fontWeight: "bold" }}>Danh sách địa chỉ sửa chữa</Text>
          <View style={styles.companyCard}>
            <Image
              source={require("../../../assets/images/logo-anphat.png")}
              style={styles.companyLogo}
            />
            <View style={styles.companyInfo}>
              <Text style={styles.companyName}>An Phát</Text>
              <Text style={styles.companyFullName}>
                CÔNG TY CỔ PHẦN THƯƠNG MẠI MÁY TÍNH AN PHÁT
              </Text>
              <View style={styles.ratingContainer}>
                {renderStars(4)}
                <Text style={styles.rating}>4.6/5</Text>
                <Text style={styles.reviewCount}>(43 đánh giá)</Text>
              </View>
            </View>
          </View>

          <View style={styles.companyDescription}>
            <Text style={styles.titleCompany}>Giới thiệu</Text>
            <View style={styles.dividerCompany} />
            <Text style={styles.descriptionCompany}>
              Thành lập vào ngày 29/03/2004, trải qua hai thập kỷ không ngừng
              phát triển, An Phát Computer đã liên tục tăng trưởng, mở rộng thị
              trường và trở thành một trong những doanh nghiệp hàng đầu trong
              lĩnh vực bán buôn và bán lẻ các sản phẩm, thiết bị công nghệ thông
              tin, thiết bị lưu trữ, thiết bị văn phòng.
              {"\n"}
              Năm 2024, An Phát Computer vinh dự kỷ niệm 20 năm thành lập, đánh
              dấu chặng đường hai thập kỷ uy tín, cam kết không ngừng cải thiện
              chất lượng dịch vụ, đem đến cho khách hàng những sản phẩm công
              nghệ hi-end, hi-tech nhất thị trường.
              {"\n\n"}
              Xuyên suốt hành trình xây dựng và phát triển, tiêu chí "Uy tín" và
              "Chuyên nghiệp" luôn được An Phát Computer đặt lên hàng đầu. Bên
              cạnh đó, những sản phẩm chất lượng với mức giá cạnh tranh, dịch vụ
              tư vấn tận tâm, chính sách bán hàng, bảo hành cùng đội ngũ cán bộ
              nhân viên được đào tạo chuyên nghiệp cũng góp phần tạo ra những
              giá trị đích thực, giúp cho An Phát Computer gặt hái được nhiều
              thành công. Tới nay doanh nghiệp đã có 07 showroom bán hàng ở các
              thành phố lớn tại Hà Nội, TP. Hồ Chí Minh, Bắc Ninh và 01 Trung
              tâm phân phối & dự án. Đến các cửa hàng thuộc hệ thống An Phát
              Computer, khách hàng luôn có được sự hài lòng với quy trình tư vấn
              bài bản của nhân viên nhằm lựa chọn cho mình những sản phẩm ưng ý
              nhất theo phương châm: "Mỗi khách hàng là một con người - một cá
              thể riêng biệt, cần được tôn trọng, quan tâm và lắng nghe, thấu
              hiểu và phục vụ một cách riêng biệt.".
            </Text>
          </View>

          <CompanyInfo />
          {/* thông tin công ty */}

          <BoxReview />
          {/*  đánh giá */}

          <ShowroomSection />
          {/* showroom */}

          <ContactForm />
          {/* form liên hệ */}
        </View>
      </ScrollView>
    </AppLayout>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    backgroundColor: "#F4F4F4",
    marginBottom: 15,
  },
  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",
  },
  companyCard: {
    flexDirection: "row",
    alignItems: "flex-start",
    gap: 12,
    marginTop: 10,
  },
  companyLogo: {
    width: 80,
    height: 80,
    resizeMode: "contain",
    borderWidth: 1,
    borderColor: "#D4D4D4",
    borderRadius: 4,
    padding: 10,
    backgroundColor: "#fff",
  },
  companyInfo: {
    flex: 1,
  },
  companyName: {
    fontSize: 15,
    fontWeight: "700",
    color: "#303030",
  },
  companyFullName: {
    fontSize: 15,
    fontWeight: "700",
    color: "#303030",
    marginTop: 4,
  },
  ratingContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    marginTop: 4,
  },
  rating: {
    fontSize: 13,
    fontWeight: "400",
    color: "#303030",
  },
  reviewCount: {
    fontSize: 13,
    fontWeight: "400",
    color: "#303030",
    textDecorationLine: "underline",
  },
  companyDescription: {
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "rgba(212, 212, 212, 1)",
    paddingVertical: 16,
    paddingHorizontal: 1,
    marginTop: 9,
    backgroundColor: "#fff",
  },
  titleCompany: {
    fontSize: 16,
    fontWeight: "700",
    color: "rgba(0, 0, 0, 1)",
    marginLeft: 11,
  },
  dividerCompany: {
    height: 1,
    backgroundColor: "#E3E3E3",
    borderWidth: 1,
    borderColor: "rgba(227, 227, 227, 1)",
    marginTop: 10,
  },
  descriptionCompany: {
    fontSize: 13,
    fontWeight: "400",
    color: "rgba(0, 0, 0, 1)",
    lineHeight: 18,
    padding: 10,
  },
});
