import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated';
import { Colors, Radius, Spacing, Typography } from '@/constants/theme';
import type { OneTimeExpense, RecurringExpense } from '@/types';

const CATEGORY_EMOJI: Record<string, string> = {
    moradia: '🏠',
    alimentação: '🍽️',
    transporte: '🚗',
    saúde: '💊',
    educação: '📚',
    lazer: '🎬',
    serviços: '⚙️',
    outros: '📦',
};

interface ExpenseRowProps {
    name: string;
    amount: number;
    category: string;
    subtitle?: string;
    index?: number;
    onPress?: () => void;
    rightElement?: React.ReactNode;
    type?: 'expense' | 'income';
}

export function ExpenseRow({
    name,
    amount,
    category,
    subtitle,
    index = 0,
    onPress,
    rightElement,
    type = 'expense',
}: ExpenseRowProps) {
    const emoji = CATEGORY_EMOJI[category] ?? '📦';
    const prefix = type === 'income' ? '+ ' : '- ';
    const amountColor = type === 'income' ? Colors.positive : Colors.negative;

    const formattedAmount = amount.toLocaleString('pt-BR', {
        style: 'currency',
        currency: 'BRL',
        minimumFractionDigits: 2,
    });

    return (
        <Animated.View
            entering={FadeInDown.delay(index * 60).springify()}
            layout={LinearTransition.springify()}
        >
            <TouchableOpacity
                style={styles.row}
                onPress={onPress}
                activeOpacity={0.7}
                disabled={!onPress}
                accessibilityRole="button"
                accessibilityLabel={`${name}, ${formattedAmount}`}
            >
                <View style={styles.iconBox}>
                    <Text style={styles.emoji}>{emoji}</Text>
                </View>

                <View style={styles.info}>
                    <Text style={styles.name} numberOfLines={1}>
                        {name}
                    </Text>
                    {subtitle ? (
                        <Text style={styles.subtitle} numberOfLines={1}>
                            {subtitle}
                        </Text>
                    ) : null}
                </View>

                <View style={styles.right}>
                    <Text style={[styles.amount, { color: amountColor }]}>
                        {prefix}{formattedAmount}
                    </Text>
                    {rightElement}
                </View>
            </TouchableOpacity>
        </Animated.View>
    );
}

interface RecurringExpenseRowProps {
    expense: RecurringExpense;
    index?: number;
    onToggle: () => void;
    onPress: () => void;
}

export function RecurringExpenseRow({
    expense,
    index = 0,
    onToggle,
    onPress,
}: RecurringExpenseRowProps) {
    return (
        <ExpenseRow
            name={expense.name}
            amount={expense.amount}
            category={expense.category}
            type={expense.type}
            subtitle={expense.due_day ? `Vence dia ${expense.due_day}` : undefined}
            index={index}
            onPress={onPress}
            rightElement={
                <TouchableOpacity
                    style={[
                        styles.toggleBadge,
                        expense.is_active ? styles.toggleActive : styles.toggleInactive,
                    ]}
                    onPress={onToggle}
                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                    accessibilityLabel={expense.is_active ? 'Desativar gasto' : 'Ativar gasto'}
                    accessibilityRole="switch"
                >
                    <Text style={styles.toggleText}>
                        {expense.is_active ? 'Ativo' : 'Pausado'}
                    </Text>
                </TouchableOpacity>
            }
        />
    );
}

interface OneTimeExpenseRowProps {
    expense: OneTimeExpense;
    index?: number;
    onPress: () => void;
}

export function OneTimeExpenseRow({
    expense,
    index = 0,
    onPress,
}: OneTimeExpenseRowProps) {
    const date = new Date(expense.expense_date + 'T12:00:00');
    const formattedDate = date.toLocaleDateString('pt-BR', {
        day: '2-digit',
        month: 'short',
    });

    return (
        <ExpenseRow
            name={expense.name}
            amount={expense.amount}
            category={expense.category}
            subtitle={formattedDate}
            index={index}
            onPress={onPress}
            type={expense.type}
        />
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: Spacing.md,
        gap: Spacing.md,
    },
    iconBox: {
        width: 44,
        height: 44,
        borderRadius: Radius.md,
        backgroundColor: Colors.surfaceElevated,
        alignItems: 'center',
        justifyContent: 'center',
    },
    emoji: {
        fontSize: 22,
    },
    info: {
        flex: 1,
        gap: 2,
    },
    name: {
        ...Typography.bodyLarge,
        color: Colors.textPrimary,
    },
    subtitle: {
        ...Typography.caption,
        color: Colors.textSecondary,
    },
    right: {
        alignItems: 'flex-end',
        gap: Spacing.xs,
    },
    amount: {
        ...Typography.bodyLarge,
        fontFamily: 'DMSans_600SemiBold',
    },
    toggleBadge: {
        paddingHorizontal: Spacing.sm,
        paddingVertical: 2,
        borderRadius: Radius.full,
    },
    toggleActive: {
        backgroundColor: `${Colors.positive}22`,
    },
    toggleInactive: {
        backgroundColor: `${Colors.textMuted}22`,
    },
    toggleText: {
        ...Typography.caption,
        color: Colors.textSecondary,
    },
});