import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import type { NativeStackScreenProps } from "@react-navigation/native-stack";
import type { RootStackParamList } from "../navigation/types";
import { DEMO_QR_CODE } from "../config/constants";
import { ENV } from "../config/environment";

type Props = NativeStackScreenProps<RootStackParamList, "Home">;

export function HomeScreen({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.brand}>Bottle AI</Text>
      <Text style={styles.subtitle}>
        Escaneá el QR o la etiqueta de la botella y conversá con su personaje.
      </Text>

      <Pressable style={styles.primary} onPress={() => navigation.navigate("Scanner")}>
        <Text style={styles.primaryText}>Escanear QR</Text>
      </Pressable>

      <Pressable
        style={styles.secondary}
        onPress={() => navigation.navigate("LabelScanner")}
      >
        <Text style={styles.secondaryText}>Escanear Etiqueta</Text>
      </Pressable>

      <Pressable style={styles.link} onPress={() => navigation.navigate("Settings")}>
        <Text style={styles.linkText}>Ajustes</Text>
      </Pressable>

      <Text style={styles.meta}>Demo QR: {DEMO_QR_CODE}</Text>
      <Text style={styles.meta}>API: {ENV.API_BASE_URL}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 28,
    justifyContent: "center",
    gap: 16,
  },
  brand: {
    fontSize: 42,
    fontWeight: "800",
    color: "#C4A35A",
    letterSpacing: 0.5,
  },
  subtitle: {
    color: "#D4CBB8",
    fontSize: 17,
    lineHeight: 24,
    marginBottom: 20,
  },
  primary: {
    backgroundColor: "#C4A35A",
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: "center",
  },
  primaryText: { color: "#1A140C", fontSize: 17, fontWeight: "700" },
  secondary: {
    backgroundColor: "transparent",
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: "center",
    borderWidth: 1.5,
    borderColor: "#C4A35A",
  },
  secondaryText: { color: "#C4A35A", fontSize: 17, fontWeight: "700" },
  link: { alignItems: "center", padding: 8 },
  linkText: { color: "#B8AFA0" },
  meta: { color: "#6E6658", fontSize: 12 },
});