import { Link } from "expo-router";
import { ImageBackground, Text, TouchableOpacity, View } from "react-native";
import { styles } from "./styles";

// Placeholder images
const netherImage = {
  uri: "https://s1.qwant.com/thumbr/474x248/2/4/a24db6c90af628d74cc6f90c2a9c710035c23f71bbe60306da8c15048e3f0a/OIP.joos3K71NDyUnFa8KyqxmwHaD4.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.joos3K71NDyUnFa8KyqxmwHaD4%3Fpid%3DApi&q=0&b=1&p=0&a=0",
};
const todoImage = {
  uri: "https://s1.qwant.com/thumbr/474x266/9/3/2f1096a5a780b8a5170c7f33984b1862d42724cdb70096f40df193dd4b8f76/OIP.KbL45cxF3QbBxlw-0fl2mQHaEK.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.KbL45cxF3QbBxlw-0fl2mQHaEK%3Fpid%3DApi&q=0&b=1&p=0&a=0",
};
const coordinatesImage = {
  uri: "https://s1.qwant.com/thumbr/474x355/a/9/00d5edea1b711b9e35c9635bcbfcd537e3a40e81f9387482244c0bcd0daea2/OIP.ZkcHYuA3X2kzJCVpLk9rHQHaFj.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.ZkcHYuA3X2kzJCVpLk9rHQHaFj%3Fpid%3DApi&q=0&b=1&p=0&a=0",
};
const motdImage = {
  uri: "https://s1.qwant.com/thumbr/474x270/3/6/a8f9c3fe42ffaf1d234f19d7f669586eec59661cd788a047e5d9c4db3b7e6b/OIP.MSaLxXZ2qYeCextEVZckJgHaEO.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.MSaLxXZ2qYeCextEVZckJgHaEO%3Fpid%3DApi&q=0&b=1&p=0&a=0",
};

export default function Index() {
  return (
    <View style={styles.appContainer}>
      <Text style={styles.mainTitle}>Minecraft Tools</Text>

      <View style={styles.gridContainer}>
        {/* Nether Portal Calculator */}
        <View style={styles.gridItem}>
          <Link href="/nether-portal-calculator" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={netherImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>Nether Portal Calculator</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>

        {/* Todo List */}
        <View style={styles.gridItem}>
          <Link href="/todo" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={todoImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>Todo List</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>

        {/* Saved Coordinates */}
        <View style={styles.gridItem}>
          <Link href="/saved-coordinates" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={coordinatesImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>Saved Coordinates</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>

        {/* MOTD Creator */}
        <View style={styles.gridItem}>
          <Link href="/motd" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={motdImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>MOTD Creator</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>
      </View>
    </View>
  );
}