import React from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Dimensions,
} from "react-native";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import Footer from "@components/footer/Footer";
import { Ionicons } from "@expo/vector-icons";
import ListCompare from "./ListCompare";

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

  return (
    <AppLayout activeTab="buildpc">
      <ScrollView style={styles.page}>
        <View style={styles.wrapper}>
          {/* 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ạo máy tính riêng của bạn</Text>
            </View>
          </View>
          {/* Buttons Bắt đầu/So sánh */}
          <View style={styles.buttonWrapper}>
            <TouchableOpacity
              style={styles.primaryButton}
              onPress={() => navigation?.navigate("buildpc")}
            >
              <Text style={styles.primaryButtonText}>Bắt đầu tạo</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.secondaryButton}
              onPress={() => navigation?.navigate("comparebuildpc")}
            >
              <Text style={styles.secondaryButtonText}>
                So sánh giá tại các cửa hàng
              </Text>
            </TouchableOpacity>
          </View>

          <ListCompare />
        </View>
      </ScrollView>
    </AppLayout>
  );
}
export default CompareBuildpc;

const styles = StyleSheet.create({
  page: {
    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",
  },
  wrapper: {
    paddingHorizontal: 12,
  },
  actionBar: {
    backgroundColor: "#fff",
    paddingVertical: 10,
    paddingHorizontal: 12,
    borderRadius: 8,
    marginTop: 12,
  },
  actionRow: {
    flexDirection: "row",
    gap: 10,
    marginBottom: 10,
  },
  urlInput: {
    flex: 4,
    height: 48,
    borderRadius: 6,
    borderWidth: 1,
    borderColor: "#ddd",
    flexDirection: "row",
    alignItems: "center",
  },
  iconWrapper: {
    width: 24,
    marginLeft: 10,
  },
  input: {
    flex: 1,
    padding: 10,
  },
  nameInput: {
    flex: 3,
    height: 48,
    borderRadius: 6,
    borderWidth: 1,
    borderColor: "#ddd",
    flexDirection: "row",
    alignItems: "center",
  },
  label: {
    marginLeft: 10,
  },
  buttonWrapper: {
    backgroundColor: "#fff",
    flexDirection: "row",
    gap: 10,
    alignItems: "center",
  },
  primaryButton: {
    backgroundColor: "#ddd",
    padding: 10,
    borderRadius: 4,
    marginRight: 5,
  },
  primaryButtonText: {
    color: "#666",
    fontWeight: "bold",
    textAlign: "center",
  },
  secondaryButton: {
    backgroundColor: "#5B21B6",
    padding: 10,
    borderRadius: 4,
  },
  secondaryButtonText: {
    color: "#fff",
    fontWeight: "bold",
  },
  buttonRow: {
    flexDirection: "row",
    gap: 10,
  },
  iconButton: {
    flex: 1,
    height: 48,
    borderRadius: 6,
    borderWidth: 1,
    borderColor: "#ddd",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
  },
  iconButtonText: {
    marginLeft: 5,
  },
  bottomPanel: {
    backgroundColor: "#fff",
    padding: 15,
    marginTop: 15,
  },
  buttonGroup: {
    flexDirection: "row",
    gap: 10,
    marginBottom: 10,
  },
  btnGrey: {
    backgroundColor: "#f4f4f4",
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 8,
  },
  btnGreyText: {
    fontWeight: "bold",
    color: "#6b7280",
  },
  btnPrimary: {
    backgroundColor: "#6D28D9",
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 8,
  },
  btnPrimaryText: {
    fontWeight: "bold",
    color: "#fff",
  },
});
