import { Ionicons } from '@expo/vector-icons';
import DateTimePicker from '@react-native-community/datetimepicker';
import { LinearGradient } from 'expo-linear-gradient';
import { useNavigation, useRoute } from '@react-navigation/native';
import type { RouteProp } 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, formatRupiah } from '../utils/format';
import { getCategoryIcon3d } from '../utils/categoryIcons3d';
import {
  getCategories,
  getSettingNumber,
  getTransactionById,
  updateTransaction,
} from '../db/repositories';
import type { Category, TransactionType } from '../types';
import type { RootStackParamList } from '../navigation';

export function EditTransactionScreen() {
  const navigation = useNavigation();
  const route = useRoute<RouteProp<RootStackParamList, 'EditTransaksi'>>();
  const { transactionId } = route.params;

  const [type, setType] = useState<TransactionType>('expense');
  const [amountText, setAmountText] = useState('');
  const [categories, setCategories] = useState<Category[]>([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
  const [note, setNote] = useState('');
  const [occurredAt, setOccurredAt] = useState(new Date());
  const [showDate, setShowDate] = useState(false);
  const [percent, setPercent] = useState(10);
  const [saving, setSaving] = useState(false);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    (async () => {
      const tx = await getTransactionById(transactionId);
      if (!tx) {
        Alert.alert('Transaksi tidak ditemukan', 'Data mungkin sudah dihapus.');
        navigation.goBack();
        return;
      }
      setType(tx.type);
      setAmountText(String(tx.amount));
      setSelectedCategoryId(tx.categoryId);
      setNote(tx.note);
      setOccurredAt(new Date(tx.occurredAt));
      const p = await getSettingNumber('auto_save_percent', 10);
      setPercent(p);
      const cats = await getCategories(tx.type);
      setCategories(cats);
      setLoaded(true);
    })();
  }, [transactionId, navigation]);

  const amount = Number(amountText.replace(/[^0-9]/g, '')) || 0;
  const savedAmount = type === 'income' ? Math.round((amount * percent) / 100) : 0;

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

  const loadCategories = useCallback(async (t: TransactionType) => {
    const cats = await getCategories(t);
    setCategories(cats);
  }, []);

  const handleSave = async () => {
    if (amount <= 0) {
      Alert.alert('Nominal kosong', 'Isi nominal dulu ya, Mas.');
      return;
    }
    setSaving(true);
    try {
      await updateTransaction(transactionId, {
        type,
        amount,
        categoryId: selectedCategoryId,
        note: note.trim(),
        occurredAt,
      });
      Alert.alert('Tersimpan ✅', 'Transaksi berhasil diperbarui.', [
        { text: 'Oke', onPress: () => navigation.goBack() },
      ]);
    } catch (e) {
      Alert.alert('Gagal menyimpan', String(e));
    } finally {
      setSaving(false);
    }
  };

  if (!loaded) return null;

  return (
    <KeyboardAvoidingView
      style={styles.flex}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <ScrollView style={styles.container} contentContainerStyle={styles.content}>
        {/* 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"
            autoFocus
          />
        </LinearGradient>

        {type === 'income' && amount > 0 && (
          <View style={[styles.card, styles.saveHintCard]}>
            <Image
              source={require('../../assets/coin-3d.png')}
              style={styles.saveHintCoin}
              resizeMode="contain"
            />
            <Text style={styles.saveHintText}>
              {formatRupiah(savedAmount)} otomatis masuk Tabungan ({percent}%)
            </Text>
          </View>
        )}

        {/* Tanggal */}
        <Text style={styles.sectionTitle}>Tanggal</Text>
        <Pressable style={styles.dateRow} onPress={() => setShowDate(true)}>
          <Ionicons name="calendar" size={18} color={colors.primaryDark} />
          <Text style={styles.dateRowText}>
            {occurredAt.toLocaleDateString('id-ID', {
              weekday: 'long',
              day: 'numeric',
              month: 'long',
              year: 'numeric',
            })}
          </Text>
          <Ionicons name="chevron-down" size={16} color={colors.textMuted} />
        </Pressable>
        {showDate && (
          <DateTimePicker
            value={occurredAt}
            mode="date"
            maximumDate={new Date()}
            onChange={(e, d) => {
              setShowDate(false);
              if (d) setOccurredAt(d);
            }}
          />
        )}

        {/* 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: makan siang di warteg"
          placeholderTextColor={colors.textMuted}
        />
      </ScrollView>

      {/* Tombol Simpan fixed */}
      <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 Perubahan'}
            </Text>
          </View>
        </Pressable>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1, backgroundColor: colors.background },
  container: { flex: 1 },
  content: { padding: 16, paddingBottom: 32 },
  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,
  },
  dateRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: 14,
    paddingHorizontal: 14,
    paddingVertical: 12,
    marginBottom: 4,
  },
  dateRowText: { flex: 1, fontSize: 14, color: colors.text, fontWeight: '600' },
  saveHintCard: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: colors.primarySoft,
    borderColor: colors.primarySoft,
    marginBottom: 12,
  },
  saveHintCoin: { width: 26, height: 26 },
  saveHintText: { color: colors.primaryDark, fontWeight: '600', fontSize: 13, flex: 1 },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '700',
    color: colors.text,
    marginBottom: 8,
    marginTop: 8,
  },
  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 },
});