import { useState } from 'react'
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  ActivityIndicator,
  Alert,
} from 'react-native'
import { useAuthStore } from '@/lib/store'

export default function LoginScreen() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const login = useAuthStore((s) => s.login)

  const handleLogin = async () => {
    if (!email.trim() || !password.trim()) return
    setLoading(true)
    try {
      await login(email.trim().toLowerCase(), password)
    } catch (e: any) {
      Alert.alert('Connexion échouée', e.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      className="flex-1 bg-paper"
    >
      <View className="flex-1 justify-center px-8">
        {/* Logo */}
        <View className="mb-12 items-center">
          <Text className="text-4xl font-serif text-ink italic tracking-tight">Momento</Text>
          <Text className="text-sm text-concrete mt-1">Votre espace de connaissance</Text>
        </View>

        {/* Form */}
        <View className="space-y-3">
          <View>
            <Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
              Email
            </Text>
            <TextInput
              value={email}
              onChangeText={setEmail}
              placeholder="vous@exemple.com"
              autoCapitalize="none"
              keyboardType="email-address"
              autoComplete="email"
              className="w-full border border-border rounded-xl px-4 py-3 text-ink text-[15px] bg-white"
              placeholderTextColor="#8A8A82"
            />
          </View>

          <View>
            <Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
              Mot de passe
            </Text>
            <TextInput
              value={password}
              onChangeText={setPassword}
              placeholder="••••••••"
              secureTextEntry
              autoComplete="password"
              className="w-full border border-border rounded-xl px-4 py-3 text-ink text-[15px] bg-white"
              placeholderTextColor="#8A8A82"
              onSubmitEditing={handleLogin}
            />
          </View>

          <TouchableOpacity
            onPress={handleLogin}
            disabled={loading || !email || !password}
            className="mt-4 bg-ink rounded-xl py-3.5 items-center active:opacity-80"
            style={{ opacity: loading || !email || !password ? 0.5 : 1 }}
          >
            {loading ? (
              <ActivityIndicator color="white" size="small" />
            ) : (
              <Text className="text-paper font-semibold text-[15px]">Se connecter</Text>
            )}
          </TouchableOpacity>
        </View>

        <Text className="text-center text-[12px] text-concrete mt-8">
          memento-note.com
        </Text>
      </View>
    </KeyboardAvoidingView>
  )
}