import { useState } from "react";

import {
  Alert,
  Image,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";

import { Button } from "@/components/Button";
import { Input } from "@/components/Input";
import { Link } from "expo-router";

// Página de login
export default function IndexPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function handleSignIn() {
    if (!email.trim() || !password.trim()) {
      Alert.alert("Entrar", "Por favor, preencha todos os campos.");
      return;
    }

    Alert.alert("Bem-vindo", `Acessando com o e-mail ${email}`);
  }

  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.select({ ios: "padding", android: "height" })}
    >
      <ScrollView
        contentContainerStyle={{ flexGrow: 1 }}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.container}>
          <Image
            source={require("@/assets/toptran.png")}
            style={styles.illustration}
          />

          <Text style={styles.title}>Entrar</Text>
          <Text style={styles.subtitle}>
            Acesse sua conta com e-mail e senha.
          </Text>

          <View style={styles.form}>
            <Input
              placeholder="E-mail"
              keyboardType="email-address"
              onChangeText={setEmail}
            />

            <Input
              placeholder="Senha"
              secureTextEntry
              onChangeText={setPassword}
            />

            <Button label="Entrar" onPress={handleSignIn} />
          </View>

          <Text style={styles.footerText}>
            Não tem uma conta?{" "}
            <Link href={"/signup"} style={styles.footerLink}>
              Cadastre-se aqui.
            </Link>
          </Text>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0e0d0d",
    padding: 32,
  },
  illustration: {
    width: "100%",
    height: 330,
    resizeMode: "contain",
    marginTop: 62,
  },
  title: {
    marginTop: 62,
    fontSize: 32,
    fontWeight: 900,
    color: "#e7e7e7",
  },
  subtitle: {
    fontSize: 16,
    color: "#a1a1a1",
  },
  form: {
    marginTop: 24,
    gap: 16,
  },
  footerText: {
    textAlign: "center",
    marginTop: 24,
    color: "#a1a1a1",
  },
  footerLink: {
    color: "#007AFF",
    fontWeight: 700,
  },
});
