import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { useNavigation } from '@react-navigation/native';
import { useCallback, useEffect, useState } from 'react';
import {
  Alert,
  Image,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { colors } from '../theme/colors';
import { formatRibuan } from '../utils/format';
import { getCategoryIcon3d } from '../utils/categoryIcons3d';
import { addRecurring, getCategories } from '../db/repositories';
import type { Category, TransactionType } from '../types';

export function RecurringFormScreen() {
  const navigation = useNavigation();
  const [type, setType] = useState<TransactionType>('expense');
  const [amountText, setAmountText] = useState('');
  const [dayText, setDayText] = useState('1');
  const [categories, setCategories] = useState<Category[]>([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
  const [note, setNote] = useState('');
  const [saving, setSaving] = useState(false);

  const loadCategories = useCallback(async (t: TransactionType) => {
    const cats = await getCategories(t);
    setCategories(cats);
    setSelectedCategoryId(cats[0]?.id ?? null);
  }, []);

  useEffect(() => {
    loadCategories(type);
  }, [loadCategories, type]);

  const amount = Number(amountText.replace(/[^0-9]/g, '')) || 0;
  const dayOfMonth = Math.min(31, Math.max(1, Number(dayText.replace(/[^0-9]/g, '')) || 1));

  const switchType = (t: TransactionType) => {
    setType(t);
    loadCategories(t);
  };

  const handleSave = async () => {
    if (amount <= 0) {
      Alert.alert('Nominal kosong', 'Isi nominal dulu ya, Mas.');
      return;
    }
    setSaving(true);
    try {
      await addRecurring({
        type,
        amount,
        categoryId: selectedCategoryId,
        note: note.trim(),
        dayOfMonth,
      });
      Alert.alert('Tersimpan ✅', 'Transaksi berulang aktif. Sisih akan dibuat otomatis tiap bulan.', [
        { text: 'Oke', onPress: () => navigation.goBack() },
      ]);
    } catch (e) {
      Alert.alert('Gagal menyimpan', String(e));
    } finally {
      setSaving(false);
    }
  };

  return (
    <KeyboardAvoidingView
      style={styles.flex}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <ScrollView style={styles.container} contentContainerStyle={styles.content}>
        <Text style={styles.infoText}>
          🔁 Transaksi ini akan dibuat otomatis setiap bulan pada tanggal yang
          ditentukan.
        </Text>

        {/* Toggle tipe */}
        <View style={styles.toggleRow}>
          <Pressable
            style={[styles.toggleBtn, type === 'income' && styles.toggleIncome]}
            onPress={() => switchType('income')}
          >
            <Text
              style={[
                styles.toggleText,
                type === 'income' && { color: colors.income, fontWeight: '700' },
              ]}
            >
              + Pemasukan
            </Text>
          </Pressable>
          <Pressable
            style={[styles.toggleBtn, type === 'expense' && styles.toggleExpense]}
            onPress={() => switchType('expense')}
          >
            <Text
              style={[
                styles.toggleText,
                type === 'expense' && { color: colors.expense, fontWeight: '700' },
              ]}
            >
              - Pengeluaran
            </Text>
          </Pressable>
        </View>

        {/* Nominal */}
        <LinearGradient
          colors={
            type === 'income' ? ['#F0FDF4', '#DCFCE7'] : ['#FEF2F2', '#FEE2E2']
          }
          style={[
            styles.card,
            styles.amountCard,
            type === 'income' ? styles.amountIncome : styles.amountExpense,
          ]}
        >
          <Image
            source={require('../../assets/coin-3d.png')}
            style={styles.amountCoin}
            resizeMode="contain"
          />
          <Text style={styles.cardLabel}>NOMINAL</Text>
          <TextInput
            style={styles.amountInput}
            value={amountText ? `Rp ${formatRibuan(amountText)}` : ''}
            onChangeText={(t) => setAmountText(t.replace(/[^0-9]/g, ''))}
            placeholder="Rp 0"
            placeholderTextColor={colors.border}
            keyboardType="number-pad"
          />
        </LinearGradient>

        {/* Tanggal */}
        <Text style={styles.sectionTitle}>Tanggal setiap bulan</Text>
        <View style={[styles.card, styles.dayCard]}>
          <Ionicons name="calendar" size={18} color={colors.primaryDark} />
          <TextInput
            style={styles.dayInput}
            value={dayText}
            onChangeText={(t) => setDayText(t.replace(/[^0-9]/g, ''))}
            placeholder="1"
            placeholderTextColor={colors.border}
            keyboardType="number-pad"
            maxLength={2}
          />
          <Text style={styles.dayHint}>
            {dayOfMonth > 28
              ? 'Tanggal > 28 hanya aktif di bulan yang punya tanggal itu'
              : 'Setiap bulan pada tanggal ini'}
          </Text>
        </View>

        {/* Kategori */}
        <Text style={styles.sectionTitle}>Kategori</Text>
        <View style={styles.categoryGrid}>
          {categories.map((c) => {
            const selected = c.id === selectedCategoryId;
            const icon3d = getCategoryIcon3d(c.name, type);
            return (
              <Pressable
                key={c.id}
                style={[styles.categoryChip, selected && styles.categoryChipSelected]}
                onPress={() => setSelectedCategoryId(c.id)}
              >
                {icon3d ? (
                  <Image source={icon3d} style={styles.categoryIcon3d} resizeMode="contain" />
                ) : (
                  <Text style={styles.categoryIcon}>{c.icon}</Text>
                )}
                <Text
                  style={[
                    styles.categoryName,
                    selected && { color: colors.primaryDark, fontWeight: '700' },
                  ]}
                >
                  {c.name}
                </Text>
              </Pressable>
            );
          })}
        </View>

        {/* Catatan */}
        <Text style={styles.sectionTitle}>Catatan (opsional)</Text>
        <TextInput
          style={[styles.card, styles.noteInput]}
          value={note}
          onChangeText={setNote}
          placeholder="Misal: Gaji bulanan"
          placeholderTextColor={colors.textMuted}
        />
      </ScrollView>

      <View style={styles.saveBar}>
        <Pressable
          onPress={handleSave}
          disabled={amount <= 0 || saving}
          style={({ pressed }) => [styles.savePressable, pressed && styles.pressed]}
        >
          <View style={styles.saveButton}>
            <Text style={styles.saveButtonText}>
              {saving ? 'Menyimpan...' : 'Simpan'}
            </Text>
          </View>
        </Pressable>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1, backgroundColor: colors.background },
  container: { flex: 1 },
  content: { padding: 16, paddingBottom: 32 },
  infoText: {
    fontSize: 13,
    color: colors.textMuted,
    lineHeight: 19,
    marginBottom: 12,
  },
  toggleRow: {
    flexDirection: 'row',
    backgroundColor: colors.surface,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: colors.border,
    padding: 4,
    marginBottom: 12,
  },
  toggleBtn: { flex: 1, alignItems: 'center', paddingVertical: 10, borderRadius: 10 },
  toggleIncome: { backgroundColor: colors.incomeSoft },
  toggleExpense: { backgroundColor: colors.expenseSoft },
  toggleText: { fontSize: 14, color: colors.textMuted },
  card: {
    backgroundColor: colors.surface,
    borderRadius: 16,
    padding: 16,
    borderWidth: 1,
    borderColor: colors.border,
  },
  amountCard: { marginBottom: 12, overflow: 'hidden' },
  amountIncome: { borderColor: '#BBF7D0' },
  amountExpense: { borderColor: '#FECACA' },
  amountCoin: {
    position: 'absolute',
    right: -14,
    top: -4,
    width: 114,
    height: 115,
    opacity: 0.3,
    transform: [{ perspective: 600 }, { rotateY: '-20deg' }],
  },
  cardLabel: {
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 1,
    color: colors.textMuted,
  },
  amountInput: { fontSize: 34, fontWeight: '800', color: colors.text, paddingVertical: 4 },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '700',
    color: colors.text,
    marginBottom: 8,
    marginTop: 8,
  },
  dayCard: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    paddingVertical: 12,
  },
  dayInput: {
    fontSize: 22,
    fontWeight: '800',
    color: colors.text,
    minWidth: 44,
    borderBottomWidth: 2,
    borderBottomColor: colors.primary,
    paddingVertical: 2,
    textAlign: 'center',
  },
  dayHint: { flex: 1, fontSize: 11, color: colors.textMuted, lineHeight: 15 },
  categoryGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
  categoryChip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  categoryChipSelected: {
    borderColor: colors.primary,
    backgroundColor: colors.primarySoft,
  },
  categoryIcon: { fontSize: 16 },
  categoryIcon3d: { width: 22, height: 22 },
  categoryName: { fontSize: 13, color: colors.text },
  noteInput: { paddingVertical: 10, fontSize: 14, color: colors.text },
  saveBar: {
    padding: 16,
    backgroundColor: colors.background,
    borderTopWidth: 1,
    borderTopColor: colors.border,
  },
  savePressable: {
    borderRadius: 14,
    shadowColor: colors.primaryDark,
    shadowOpacity: 0.25,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    elevation: 4,
  },
  saveButton: {
    backgroundColor: colors.primary,
    borderRadius: 14,
    paddingVertical: 15,
    alignItems: 'center',
  },
  saveButtonText: { color: colors.white, fontWeight: '700', fontSize: 16 },
  pressed: { opacity: 0.85 },
});