// App.js
import React, { useMemo, useRef, useState } from "react";
import {
  Alert,
  Dimensions,
  Image,
  ImageBackground,
  KeyboardAvoidingView,
  Platform,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  useColorScheme,
  View,
  FlatList,
} from "react-native";

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

// ----- Config -----
const IMAGES = {
  hero: { uri: "https://images.unsplash.com/photo-1606157028240-d040e0f8b25e" },
  // Swap this with require("./assets/logo.png") if you have a local logo asset
  logo: { uri: "https://dummyimage.com/200x200/000/fff.png&text=SpinForged" },
};

const PRODUCTS = [
  {
    id: "1",
    title: 'Matte Black 18"',
    price: "$499",
    image: { uri: "https://images.unsplash.com/photo-1605296867424-35fc25c9212d" },
  },
  {
    id: "2",
    title: 'Chrome Classic 20"',
    price: "$649",
    image: { uri: "https://images.unsplash.com/photo-1616443783069-9b2d441e2c9d" },
  },
  {
    id: "3",
    title: 'Forged Silver 19"',
    price: "$729",
    image: { uri: "https://images.unsplash.com/photo-1622171718140-0277f4ef35ab" },
  },
];

// ----- Theme -----
const palette = {
  light: {
    bg: "#FFFFFF",
    text: "#000000",
    subtleText: "#4B5563",
    surface: "#F3F4F6",
    card: "#FFFFFF",
    border: "#E5E7EB",
    accentRed: "#EF4444",
    accentRedHover: "#DC2626",
    accentBlue: "#2563EB",
    accentGreen: "#10B981",
  },
  dark: {
    bg: "#000000",
    text: "#FFFFFF",
    subtleText: "#9CA3AF",
    surface: "#111827",
    card: "#1F2937",
    border: "#374151",
    accentRed: "#EF4444",
    accentRedHover: "#DC2626",
    accentBlue: "#60A5FA",
    accentGreen: "#34D399",
  },
};

export default function App() {
  // Use system scheme as a starting point, but let user toggle
  const system = useColorScheme();
  const [forcedTheme, setForcedTheme] = useState(null); // "light" | "dark" | null
  const themeName = forcedTheme ?? (system === "dark" ? "dark" : "light");
  const colors = useMemo(() => palette[themeName], [themeName]);

  // Scroll + section anchors
  const scrollRef = useRef(null);
  const homeY = useRef(0);
  const productsY = useRef(0);
  const contactY = useRef(0);

  const onNavPress = (y) => {
    if (!scrollRef.current) return;
    scrollRef.current.scrollTo({ y, animated: true });
  };

  // Contact form state
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [msg, setMsg] = useState("");

  const submitForm = () => {
    if (!name.trim() || !email.trim() || !msg.trim()) {
      Alert.alert("Missing info", "Please fill out all fields.");
      return;
    }
    // Simulate send
    Alert.alert("Thanks!", "Your message has been sent.");
    setName("");
    setEmail("");
    setMsg("");
  };

  // Product card
  const Card = ({ item }) => (
    <View
      style={[
        styles.card,
        { backgroundColor: colors.card, borderColor: colors.border },
      ]}
    >
      <Image
        source={item.image}
        style={styles.cardImage}
        resizeMode="cover"
      />
      <Text style={[styles.cardTitle, { color: colors.text }]}>{item.title}</Text>
      <Text style={[styles.cardPrice, { color: colors.subtleText }]}>
        {item.price}
      </Text>
    </View>
  );

  // Carousel sizing
  const CARD_W = Math.min(320, width * 0.8);
  const GAP = 16;
  const SNAP = CARD_W + GAP;

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: colors.bg }]}>
      <StatusBar
        barStyle={themeName === "dark" ? "light-content" : "dark-content"}
      />

      {/* Fixed Header */}
      <View
        style={[
          styles.header,
          {
            backgroundColor: colors.bg,
            borderBottomColor: colors.border,
          },
        ]}
      >
        {/* Logo */}
        <TouchableOpacity onPress={() => onNavPress(0)} style={styles.logoWrap}>
          <Image
            source={IMAGES.logo}
            style={styles.logo}
            resizeMode="contain"
          />
        </TouchableOpacity>

        {/* Center Nav */}
        <View style={styles.centerNav}>
          <TouchableOpacity onPress={() => onNavPress(homeY.current)}>
            <Text style={[styles.navText, { color: colors.text }]}>HOME</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => onNavPress(productsY.current)}>
            <Text style={[styles.navText, { color: colors.text }]}>PRODUCTS</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => onNavPress(contactY.current)}>
            <Text style={[styles.navText, { color: colors.text }]}>CONTACT</Text>
          </TouchableOpacity>
        </View>

        {/* Theme Toggle */}
        <TouchableOpacity
          onPress={() =>
            setForcedTheme((t) =>
              t === "dark" ? "light" : t === "light" ? "dark" : (system === "dark" ? "light" : "dark")
            )
          }
          style={[
            styles.toggleBtn,
            { borderColor: colors.text, backgroundColor: colors.bg },
          ]}
        >
          <Text style={{ color: colors.text, fontWeight: "600" }}>Toggle</Text>
        </TouchableOpacity>
      </View>

      <KeyboardAvoidingView
        behavior={Platform.select({ ios: "padding", android: undefined })}
        style={{ flex: 1 }}
      >
        <ScrollView
          ref={scrollRef}
          contentContainerStyle={{ paddingTop: 84 }} // header height
          showsVerticalScrollIndicator={false}
          scrollEventThrottle={16}
        >
          {/* Home / Hero */}
          <View
            onLayout={(e) => (homeY.current = e.nativeEvent.layout.y)}
            style={{ minHeight: Dimensions.get("window").height }}
          >
            <ImageBackground
              source={IMAGES.hero}
              resizeMode="cover"
              style={styles.hero}
            >
              <View
                style={[
                  styles.heroTitleWrap,
                  {
                    backgroundColor:
                      themeName === "dark" ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.5)",
                  },
                ]}
              >
                <Text
                  style={[
                    styles.heroTitle,
                    { color: themeName === "dark" ? "#000" : "#FFF" },
                  ]}
                >
                  Welcome to SpinForged
                </Text>
              </View>
            </ImageBackground>
          </View>

          {/* Products */}
          <View
            onLayout={(e) => (productsY.current = e.nativeEvent.layout.y)}
            style={[
              styles.section,
              { backgroundColor: themeName === "dark" ? palette.dark.surface : palette.light.surface },
            ]}
          >
            <Text style={[styles.sectionTitle, { color: colors.text }]}>
              Our Rims
            </Text>

            <FlatList
              data={PRODUCTS}
              keyExtractor={(item) => item.id}
              horizontal
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={{ paddingHorizontal: (width - CARD_W) / 2 }}
              ItemSeparatorComponent={() => <View style={{ width: GAP }} />}
              snapToInterval={SNAP}
              decelerationRate="fast"
              renderItem={({ item }) => (
                <View style={{ width: CARD_W }}>
                  <Card item={item} />
                </View>
              )}
            />
          </View>

          {/* Contact */}
          <View
            onLayout={(e) => (contactY.current = e.nativeEvent.layout.y)}
            style={[styles.section, { backgroundColor: colors.bg }]}
          >
            <Text style={[styles.sectionTitle, { color: colors.text }]}>
              Contact Us
            </Text>

            <View style={[styles.form, { backgroundColor: colors.bg }]}>
              <TextInput
                placeholder="Name"
                placeholderTextColor={colors.subtleText}
                value={name}
                onChangeText={setName}
                style={[
                  styles.input,
                  {
                    backgroundColor: colors.surface,
                    color: colors.text,
                    borderColor: colors.border,
                  },
                ]}
              />
              <TextInput
                placeholder="Email"
                placeholderTextColor={colors.subtleText}
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                autoCapitalize="none"
                style={[
                  styles.input,
                  {
                    backgroundColor: colors.surface,
                    color: colors.text,
                    borderColor: colors.border,
                  },
                ]}
              />
              <TextInput
                placeholder="Your message"
                placeholderTextColor={colors.subtleText}
                value={msg}
                onChangeText={setMsg}
                multiline
                numberOfLines={4}
                style={[
                  styles.textarea,
                  {
                    backgroundColor: colors.surface,
                    color: colors.text,
                    borderColor: colors.border,
                  },
                ]}
              />
              <TouchableOpacity
                onPress={submitForm}
                activeOpacity={0.8}
                style={[
                  styles.submitBtn,
                  { backgroundColor: colors.accentRed },
                ]}
              >
                <Text style={styles.submitText}>Send Message</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

// ----- Styles -----
const styles = StyleSheet.create({
  safe: { flex: 1 },
  header: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: 84,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    zIndex: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  logoWrap: { paddingVertical: 6, paddingRight: 8 },
  logo: { width: 60, height: 60 },
  centerNav: {
    position: "absolute",
    left: "50%",
    transform: [{ translateX: -80 }],
    flexDirection: "row",
    gap: 16,
  },
  navText: { fontSize: 16, fontWeight: "600" },
  toggleBtn: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 8,
    borderWidth: 1,
  },

  hero: {
    flex: 1,
    minHeight: Dimensions.get("window").height - 84,
    alignItems: "center",
    justifyContent: "center",
  },
  heroTitleWrap: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 10,
  },
  heroTitle: { fontSize: 36, fontWeight: "800", letterSpacing: 0.5 },

  section: { paddingVertical: 28, paddingHorizontal: 16 },
  sectionTitle: {
    fontSize: 28,
    fontWeight: "700",
    textAlign: "center",
    marginBottom: 16,
  },

  card: {
    borderRadius: 14,
    overflow: "hidden",
    padding: 12,
    borderWidth: StyleSheet.hairlineWidth,
    shadowColor: "#000",
    shadowOpacity: 0.2,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    elevation: 4,
  },
  cardImage: { width: "100%", height: 150, borderRadius: 10, marginBottom: 10 },
  cardTitle: { fontSize: 18, fontWeight: "800" },
  cardPrice: { marginTop: 2, fontSize: 14, fontWeight: "600" },

  form: { maxWidth: 700, width: "100%", alignSelf: "center", gap: 12 },
  input: {
    paddingHorizontal: 14,
    paddingVertical: 12,
    borderRadius: 10,
    borderWidth: 1,
    fontSize: 16,
  },
  textarea: {
    paddingHorizontal: 14,
    paddingVertical: 12,
    borderRadius: 10,
    borderWidth: 1,
    minHeight: 120,
    textAlignVertical: "top",
    fontSize: 16,
  },
  submitBtn: {
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: "center",
    justifyContent: "center",
  },
  submitText: { color: "#FFF", fontWeight: "800", fontSize: 16 },
});