import React from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Dimensions,
} from "react-native";
import AppLayout from "@layouts/AppLayout";
import { Ionicons } from "@expo/vector-icons"; // hoặc icon_2025 nếu bạn có icon font riêng
import CreateBuildpc from "@components/buildpc/CreateBuildpc"; // component con bạn tự tạo
const { width } = Dimensions.get("window");
import Octicons from "@expo/vector-icons/Octicons";

export default function Buildpc() {
  return (
    <AppLayout activeTab="buildpc">
      <ScrollView 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ạ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}>
            <Text style={styles.primaryButtonText}>Bắt đầu tạo</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.secondaryButton}>
            <Text style={styles.secondaryButtonText}>
              So sánh giá tại các cửa hàng
            </Text>
          </TouchableOpacity>
        </View>

        {/* Action Bar */}
        <View style={styles.actionBar}>
          {/* Share link */}
          <View style={styles.inputBox}>
            <Octicons
              name="copy"
              size={18}
              color="black"
              style={styles.iconAction}
            />
            <TextInput
              value="https://bestpc.vn/restricted.php"
              style={styles.input}
              editable={false}
            />
          </View>

          {/* Đặt tên */}
          <View style={styles.inputBox}>
            <Text style={{ marginLeft: 10 }}>Đặt tên:</Text>
            <TextInput placeholder="Nhập tên" style={styles.input} />
          </View>

          {/* Buttons */}
          <View style={styles.buttonGroup}>
            <ActionButton icon="copy-outline" label="Copy" />
            <ActionButton icon="download-outline" label="Tải xuống" />
            <ActionButton icon="refresh-outline" label="Làm mới" />
          </View>
        </View>

        {/* Buildpc Content */}
        <CreateBuildpc />
      </ScrollView>
    </AppLayout>
  );
}

function ActionButton({ icon, label }: { icon: string; label: string }) {
  return (
    <TouchableOpacity style={styles.actionButton}>
      <Ionicons name={icon as any} size={16} color="#000" />
      <Text style={{ marginLeft: 5 }}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingBottom: 100,
    paddingHorizontal: 10,
  },
  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",
  },
  actionBar: {
    marginTop: 12,
    backgroundColor: "#fff",
    borderRadius: 8,
  },
  inputBox: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ccc",
    borderWidth: 1,
    borderRadius: 8,
    height: 48,
    flex: 1,
    paddingHorizontal: 10,
    width: width - 20,
    marginBottom: 10,
  },
  input: {
    flex: 1,
    height: "100%",
    paddingHorizontal: 10,
  },
  iconAction: {
    marginRight: 6,
    color: "#888",
  },
  buttonGroup: {
    flexDirection: "row",
    flex: 1,
    justifyContent: "space-between",
  },
  actionButton: {
    flex: 1,
    height: 35,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    marginHorizontal: 2,
    backgroundColor: "#fff",
  },
  buttonWrapper: {
    backgroundColor: "#fff",
    flexDirection: "row",
    gap: 10,
    alignItems: "center",
  },
  primaryButton: {
    backgroundColor: "#5B21B6",
    padding: 10,
    borderRadius: 4,
  },
  primaryButtonText: {
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center",
  },
  secondaryButton: {
    backgroundColor: "#F5F5F5",
    padding: 10,
    borderRadius: 4,
  },
  secondaryButtonText: {
    color: "#666",
    fontWeight: "bold",
  },
});