import { useState } from 'react';
import {
    Alert,
    ScrollView,
    StyleSheet,
    Text,
    View,
} from 'react-native';
import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import * as Haptics from 'expo-haptics';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, Divider, SectionLabel } from '@/components/ui/primitives';
import { useSalaryCalculator } from '@/hooks/use-app-hooks';
import { Colors, Spacing, Typography } from '@/constants/theme';
import { formatCurrency } from '@/utils/tax-calculator';
import { updateUserSalary } from '@/services/api';
import { useAuth } from '@/contexts/AuthContext';
import { useIsFocused } from "expo-router/react-navigation";

export default function SalaryScreen() {
    const insets = useSafeAreaInsets();
    const { user, updateUser } = useAuth();
    const isFocused = useIsFocused();

    const [grossStr, setGrossStr] = useState(user?.gross_salary ? String(user.gross_salary) : '');
    const [netOverrideStr, setNetOverrideStr] = useState(
        user?.net_salary_override ? String(user.net_salary_override) : ''
    );
    const [isOverriding, setIsOverriding] = useState(!!user?.net_salary_override);

    const result = useSalaryCalculator(grossStr);

    const effectiveNet = isOverriding
        ? parseFloat(netOverrideStr.replace(',', '.')) || 0
        : (result?.salarioLiquidoCalculado ?? 0);

    const [isSaving, setIsSaving] = useState(false);
    const [saved, setSaved] = useState(false);

    async function handleSave() {
        if (!result || !user) return;
        try {
            setIsSaving(true);
            setSaved(false);
            const updatedUser = await updateUserSalary(user.id, {
                gross_salary: result.salarioBruto,
                net_salary_override: isOverriding ? effectiveNet : null,
            });
            await updateUser(updatedUser);
            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
            setSaved(true);
            setTimeout(() => setSaved(false), 2500);
        } catch (err) {
            Alert.alert('Erro', 'Não foi possível salvar o salário.');
        } finally {
            setIsSaving(false);
        }
    }

    function handleToggleOverride() {
        if (isOverriding) {
            setNetOverrideStr('');
            setIsOverriding(false);
        } else {
            setNetOverrideStr(result?.salarioLiquidoCalculado.toFixed(2) ?? '');
            setIsOverriding(true);
        }
    }

    return (
        <View style={[styles.container, { paddingTop: insets.top }]}>
            {isFocused && (
                <ScrollView
                    contentContainerStyle={[
                        styles.scroll,
                        { paddingBottom: insets.bottom + Spacing.xxl },
                    ]}
                    keyboardShouldPersistTaps="handled"
                    showsVerticalScrollIndicator={false}
                >
                    <Animated.View entering={FadeInDown.duration(400)}>
                        <Text style={styles.title}>Meu Salário</Text>
                        <Text style={styles.subtitle}>
                            Informe seu salário bruto e ajuste o líquido se necessário.
                        </Text>
                    </Animated.View>

                    <Animated.View entering={FadeInDown.delay(100).duration(400)}>
                        <Input
                            id="salary-gross-input"
                            label="Salário Bruto"
                            prefix="R$"
                            value={grossStr}
                            onChangeText={setGrossStr}
                            keyboardType="decimal-pad"
                            placeholder="0,00"
                            hint="Valor antes dos descontos (INSS, IRRF)"
                        />
                    </Animated.View>

                    {result && (
                        <Animated.View entering={FadeInDown.delay(150).duration(400)} layout={LinearTransition.springify()}>
                            <Card style={styles.resultCard}>
                                <SectionLabel text="Cálculo Automático" />

                                <View style={styles.resultRow}>
                                    <Text style={styles.resultLabel}>Salário Bruto</Text>
                                    <Text style={[styles.resultValue, { color: Colors.textPrimary }]}>
                                        {formatCurrency(result.salarioBruto)}
                                    </Text>
                                </View>

                                <View style={styles.resultRow}>
                                    <Text style={styles.resultLabel}>Desconto INSS</Text>
                                    <Text style={[styles.resultValue, { color: Colors.negative }]}>
                                        - {formatCurrency(result.descontoINSS)}
                                    </Text>
                                </View>

                                <View style={styles.resultRow}>
                                    <Text style={styles.resultLabel}>Desconto IRRF</Text>
                                    <Text style={[styles.resultValue, { color: Colors.negative }]}>
                                        - {formatCurrency(result.descontoIRRF)}
                                    </Text>
                                </View>

                                <Divider />

                                <View style={styles.resultRow}>
                                    <Text style={[styles.resultLabel, { color: Colors.textPrimary }]}>
                                        Salário Líquido
                                    </Text>
                                    <Text style={[styles.resultValue, { color: Colors.positive }]}>
                                        {formatCurrency(result.salarioLiquidoCalculado)}
                                    </Text>
                                </View>
                            </Card>
                        </Animated.View>
                    )}

                    {result && (
                        <Animated.View
                            entering={FadeInDown.delay(200).duration(400)}
                            layout={LinearTransition.springify()}
                            style={styles.overrideSection}
                        >
                            <Button
                                label={
                                    isOverriding
                                        ? 'Usar valor calculado'
                                        : 'Tenho outros descontos (ajustar manualmente)'
                                }
                                variant="ghost"
                                onPress={handleToggleOverride}
                            />

                            {isOverriding && (
                                <Animated.View entering={FadeInDown.duration(300)}>
                                    <Input
                                        id="salary-net-override-input"
                                        label="Salário Líquido Real"
                                        prefix="R$"
                                        value={netOverrideStr}
                                        onChangeText={setNetOverrideStr}
                                        keyboardType="decimal-pad"
                                        placeholder="0,00"
                                        hint="Descontos extras: plano de saúde, VT, previdência privada, etc."
                                    />
                                </Animated.View>
                            )}
                        </Animated.View>
                    )}

                    {result && (
                        <Animated.View entering={FadeInDown.delay(300).duration(400)} layout={LinearTransition.springify()}>
                            <Button
                                id="salary-save-button"
                                label={saved ? 'Salvo com sucesso! ✓' : 'Salvar Salário'}
                                fullWidth
                                onPress={handleSave}
                                disabled={!result || isSaving || saved}
                                loading={isSaving}
                                style={saved ? { backgroundColor: Colors.positive } : undefined}
                            />
                        </Animated.View>
                    )}
                </ScrollView>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.background,
    },
    scroll: {
        padding: Spacing.md,
        gap: Spacing.lg,
    },
    title: {
        ...Typography.h1,
        color: Colors.textPrimary,
        marginBottom: Spacing.xs,
    },
    subtitle: {
        ...Typography.body,
        color: Colors.textSecondary,
    },
    resultCard: {
        gap: Spacing.sm,
    },
    resultRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    resultLabel: {
        ...Typography.body,
        color: Colors.textSecondary,
    },
    resultValue: {
        ...Typography.body,
        fontFamily: 'DMSans_600SemiBold',
    },
    overrideSection: {
        gap: Spacing.md,
    },
});