import React, { forwardRef, useState } from 'react';
import {
    StyleSheet,
    Text,
    TextInput,
    type TextInputProps,
    View,
} from 'react-native';
import { Colors, Radius, Spacing, Typography } from '@/constants/theme';

interface InputProps extends TextInputProps {
    label: string;
    error?: string;
    hint?: string;
    prefix?: string;
}

export const Input = forwardRef<TextInput, InputProps>(function Input(
    { label, error, hint, prefix, style, ...rest },
    ref,
) {
    const [focused, setFocused] = useState(false);

    return (
        <View style={styles.wrapper}>
            <Text style={styles.label}>{label}</Text>
            <View
                style={[
                    styles.inputRow,
                    focused && styles.inputRowFocused,
                    !!error && styles.inputRowError,
                ]}
            >
                {prefix ? <Text style={styles.prefix}>{prefix}</Text> : null}
                <TextInput
                    ref={ref}
                    style={[styles.input, style]}
                    placeholderTextColor={Colors.textMuted}
                    onFocus={() => setFocused(true)}
                    onBlur={() => setFocused(false)}
                    selectionColor={Colors.primaryLight}
                    {...rest}
                />
            </View>
            {error ? (
                <Text style={styles.error}>{error}</Text>
            ) : hint ? (
                <Text style={styles.hint}>{hint}</Text>
            ) : null}
        </View>
    );
});

const styles = StyleSheet.create({
    wrapper: {
        gap: Spacing.xs,
    },
    label: {
        ...Typography.caption,
        color: Colors.textSecondary,
        textTransform: 'uppercase',
        letterSpacing: 1,
    },
    inputRow: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: Colors.surfaceElevated,
        borderRadius: Radius.md,
        borderWidth: 1,
        borderColor: Colors.border,
        paddingHorizontal: Spacing.md,
        height: 52,
    },
    inputRowFocused: {
        borderColor: Colors.primaryLight,
    },
    inputRowError: {
        borderColor: Colors.negative,
    },
    prefix: {
        ...Typography.bodyLarge,
        color: Colors.textSecondary,
        marginRight: Spacing.sm,
    },
    input: {
        flex: 1,
        ...Typography.bodyLarge,
        color: Colors.textPrimary,
    },
    error: {
        ...Typography.caption,
        color: Colors.negative,
    },
    hint: {
        ...Typography.caption,
        color: Colors.textMuted,
    },
});