import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { BrandPressable } from '@/components/brand-pressable';
import { BrandTextInput } from '@/components/brand-text-input';
import { Brand, BrandFont } from '@/constants/theme';

/**
 * Frame `61-5` in the Figma ("Login"). The hero art in the Figma is replaced
 * with a magenta gradient placeholder; the rest of the form — title, tabs,
 * inputs, social row — is reproduced.
 */
export default function LoginScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [tab, setTab] = useState<'signup' | 'login'>('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={[styles.root, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
      <View style={styles.hero}>
        <LinearGradient
          colors={['#5a0a3a', '#3a0a25', Brand.bg]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={StyleSheet.absoluteFill}
        />
        <HeroSilhouette />
      </View>

      <View style={styles.body}>
        <View style={styles.titleBlock}>
          <Text style={styles.title}>Welcome back!</Text>
          <Text style={styles.subtitle}>Log in to your account</Text>
        </View>

        <View style={styles.tabs}>
          <Pressable onPress={() => setTab('signup')} style={styles.tab}>
            <Text
              style={[
                styles.tabLabel,
                tab === 'signup' ? styles.tabLabelActive : styles.tabLabelInactive,
              ]}>
              Sign Up
            </Text>
            {tab === 'signup' ? <View style={styles.tabIndicator} /> : null}
          </Pressable>
          <Pressable onPress={() => setTab('login')} style={styles.tab}>
            <Text
              style={[
                styles.tabLabel,
                tab === 'login' ? styles.tabLabelActive : styles.tabLabelInactive,
              ]}>
              Log In
            </Text>
            {tab === 'login' ? <View style={styles.tabIndicator} /> : null}
          </Pressable>
        </View>

        <View style={styles.form}>
          <BrandTextInput
            placeholder="Email"
            placeholderTextColor={Brand.textFaint}
            autoCapitalize="none"
            keyboardType="email-address"
            value={email}
            onChangeText={setEmail}
            leadingIcon="envelope"
          />
          <BrandTextInput
            placeholder="Password"
            placeholderTextColor={Brand.textFaint}
            secureToggle
            value={password}
            onChangeText={setPassword}
            leadingIcon="lock"
          />
        </View>

        <Pressable style={styles.forgotRow}>
          <Text style={styles.forgotText}>Forgot password?</Text>
        </Pressable>

        <BrandPressable
          label={tab === 'login' ? 'Log In' : 'Create Account'}
          onPress={() => router.push('/(auth)/select-games')}
        />

        <View style={styles.dividerRow}>
          <View style={styles.dividerLine} />
          <Text style={styles.dividerText}>or continue with</Text>
          <View style={styles.dividerLine} />
        </View>

        <View style={styles.socialRow}>
          <SocialButton label="Apple" />
          <SocialButton label="Google" />
          <SocialButton label="Facebook" />
        </View>
      </View>
    </View>
  );
}

function HeroSilhouette() {
  return (
    <View style={silStyles.root}>
      <View style={silStyles.ring} />
      <View style={silStyles.disc} />
      <View style={[silStyles.orb, silStyles.orbA]} />
      <View style={[silStyles.orb, silStyles.orbB]} />
    </View>
  );
}

function SocialButton({ label }: { label: string }) {
  return (
    <Pressable accessibilityRole="button" style={({ pressed }) => [styles.socialButton, pressed && styles.socialPressed]}>
      <Text style={styles.socialLabel}>{label}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: Brand.bg,
  },
  hero: {
    height: 220,
    overflow: 'hidden',
    alignItems: 'center',
    justifyContent: 'center',
  },
  body: {
    flex: 1,
    paddingHorizontal: 24,
    paddingTop: 24,
    gap: 16,
  },
  titleBlock: {
    gap: 4,
  },
  title: {
    color: Brand.text,
    fontSize: 28,
    lineHeight: 34,
    fontFamily: BrandFont.montserratBold,
  },
  subtitle: {
    color: Brand.textMuted,
    fontSize: 14,
    lineHeight: 20,
    fontFamily: BrandFont.poppinsRegular,
  },
  tabs: {
    flexDirection: 'row',
    gap: 24,
    paddingTop: 8,
  },
  tab: {
    paddingBottom: 8,
  },
  tabLabel: {
    fontSize: 15,
    lineHeight: 20,
    fontFamily: BrandFont.poppinsSemiBold,
  },
  tabLabelActive: {
    color: Brand.text,
  },
  tabLabelInactive: {
    color: Brand.textMuted,
  },
  tabIndicator: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 2,
    backgroundColor: Brand.accent,
    borderRadius: 1,
  },
  form: {
    gap: 12,
    marginTop: 8,
  },
  forgotRow: {
    alignSelf: 'flex-end',
    paddingVertical: 4,
  },
  forgotText: {
    color: Brand.accent,
    fontSize: 13,
    lineHeight: 18,
    fontFamily: BrandFont.poppinsMedium,
  },
  dividerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    marginTop: 4,
  },
  dividerLine: {
    flex: 1,
    height: 1,
    backgroundColor: Brand.border,
  },
  dividerText: {
    color: Brand.textMuted,
    fontSize: 12,
    lineHeight: 16,
    fontFamily: BrandFont.poppinsRegular,
  },
  socialRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 16,
    marginTop: 4,
  },
  socialButton: {
    width: 52,
    height: 52,
    borderRadius: 26,
    borderWidth: 1,
    borderColor: Brand.border,
    backgroundColor: Brand.surface,
    alignItems: 'center',
    justifyContent: 'center',
  },
  socialPressed: {
    opacity: 0.7,
  },
  socialLabel: {
    color: Brand.text,
    fontSize: 12,
    lineHeight: 16,
    fontFamily: BrandFont.poppinsSemiBold,
  },
});

const silStyles = StyleSheet.create({
  root: {
    width: 200,
    height: 200,
    alignItems: 'center',
    justifyContent: 'center',
  },
  ring: {
    position: 'absolute',
    width: 180,
    height: 180,
    borderRadius: 90,
    borderWidth: 1.5,
    borderColor: 'rgba(255,255,255,0.2)',
  },
  disc: {
    width: 110,
    height: 110,
    borderRadius: 55,
    backgroundColor: 'rgba(255,255,255,0.06)',
  },
  orb: {
    position: 'absolute',
    width: 22,
    height: 22,
    borderRadius: 11,
    backgroundColor: Brand.accent,
  },
  orbA: {
    top: 30,
    left: 50,
  },
  orbB: {
    bottom: 40,
    right: 40,
    backgroundColor: '#f3c',
  },
});
