import React from 'react';
import {
  View,
  Text,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
} from 'react-native';
import { getStyles } from './loginScreen.styles';
import { CustomInput, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { useLoginScreen } from '../../../hooks';

export const LoginScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const { mobileNumber, error, onChangeMobileNumber, handleLogin } =
    useLoginScreen();

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        showsVerticalScrollIndicator={false}
        bounces={false}
      >
        {/* Hero / branding */}
        <View style={styles.hero}>
          <View style={styles.heroDecoCircleLg} />
          <View style={styles.heroDecoCircleSm} />
          <View style={styles.logoBadge}>
            <Text style={styles.logoEmoji}>🛵</Text>
          </View>
          <Text style={styles.brandName}>QuickCart</Text>
          <Text style={styles.brandTagline}>Delivered fast, every time</Text>
        </View>

        {/* Form card */}
        <View style={styles.formCard}>
          <View style={styles.headerContainer}>
            <Text style={styles.title}>Welcome back</Text>
            <Text style={styles.subtitle}>Login to continue</Text>
          </View>

          <View style={styles.formContainer}>
            <CustomInput
              label="Mobile number"
              placeholder="98765 43210"
              keyboardType="phone-pad"
              maxLength={10}
              value={mobileNumber}
              onChangeText={onChangeMobileNumber}
              error={error}
              leftElement={
                <View style={styles.prefixChip}>
                  <Text style={styles.prefixFlag}>🇮🇳</Text>
                  <Text style={styles.prefixText}>+91</Text>
                </View>
              }
            />
            {!error && (
              <Text style={styles.helperText}>
                We'll send a one-time password to verify this number
              </Text>
            )}

            <PrimaryButton
              title="Get OTP"
              onPress={handleLogin}
              style={{ marginTop: 12 }}
            />
          </View>

          <View style={styles.footerSpacer} />

          <Text style={styles.termsText}>
            By continuing, you agree to our{' '}
            <Text style={styles.termsLink}>Terms of Service</Text> and{' '}
            <Text style={styles.termsLink}>Privacy Policy</Text>
          </Text>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};