import React, { useState } from 'react'
import {
  View, Text, TextInput, TouchableOpacity,
  StyleSheet, KeyboardAvoidingView, Platform, Alert,
} from 'react-native'

interface Props {
  onLogin: (user: { name: string; token: string }) => void
}

export default function LoginScreen({ onLogin }: Props) {
  const [email, setEmail]       = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading]   = useState(false)

  async function handleLogin() {
    if (!email || !password) { Alert.alert('Required', 'Enter email and password'); return }
    setLoading(true)
    // TODO: replace with real auth endpoint
    setTimeout(() => {
      setLoading(false)
      onLogin({ name: email.split('@')[0], token: 'demo-token' })
    }, 800)
  }

  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.container}>
      <View style={styles.card}>
        <Text style={styles.logo}>GPS Legal</Text>
        <Text style={styles.subtitle}>Practice Management</Text>

        <TextInput
          style={styles.input}
          placeholder='Email'
          placeholderTextColor='#9CA3AF'
          autoCapitalize='none'
          keyboardType='email-address'
          value={email}
          onChangeText={setEmail}
        />
        <TextInput
          style={styles.input}
          placeholder='Password'
          placeholderTextColor='#9CA3AF'
          secureTextEntry
          value={password}
          onChangeText={setPassword}
        />

        <TouchableOpacity style={[styles.btn, loading && styles.btnDisabled]} onPress={handleLogin} disabled={loading}>
          <Text style={styles.btnText}>{loading ? 'Signing in…' : 'Sign In'}</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F9FAFB', padding: 24 },
  card:      { width: '100%', maxWidth: 360, backgroundColor: '#fff', borderRadius: 16, padding: 28, shadowColor: '#000', shadowOpacity: 0.08, shadowRadius: 12, elevation: 4 },
  logo:      { fontSize: 26, fontWeight: '700', color: '#0D9394', textAlign: 'center', marginBottom: 4 },
  subtitle:  { fontSize: 13, color: '#6B7280', textAlign: 'center', marginBottom: 28 },
  input:     { borderWidth: 1, borderColor: '#E5E7EB', borderRadius: 10, paddingHorizontal: 14, paddingVertical: 12, marginBottom: 14, fontSize: 15, color: '#1A1A2E' },
  btn:       { backgroundColor: '#0D9394', borderRadius: 10, paddingVertical: 14, alignItems: 'center', marginTop: 4 },
  btnDisabled: { opacity: 0.6 },
  btnText:   { color: '#fff', fontWeight: '700', fontSize: 15 },
})
