import React, { useEffect, useRef, useState } from 'react';
import {
  BackHandler,
  DeviceEventEmitter,
  Keyboard,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { COLORS, FONT_SIZE, LEDGER_EVENTS, RADIUS, SPACING, getCategories } from '../constants';
import { updateRecord } from '../database/ledgerDB';
import { mergeDateKeepTime, formatMoney } from '../utils/dateUtils';
import {
  appendKey,
  evaluateAmount,
  hasOperator,
  isValidAmount,
  toAmount,
  type PadKey,
} from '../utils/moneyUtils';
import { hapticError, hapticLight, hapticSuccess } from '../utils/haptics';
import CategorySelector from './CategorySelector';
import DateField from './DateField';
import NumberPad from './NumberPad';
import type { LedgerRecord, RecordType } from '../types';

interface Props {
  visible: boolean;
  record: LedgerRecord | null; // 待编辑记录（null 时不渲染）
  onClose: () => void;
}

// 编辑记录全屏页（v0.10：明细页点击记录进入）
// v0.11.4 根因修复：弃用 RNModal——Android 上它是独立 Dialog 窗口（RN 内部强制
// disableEdgeToEdge + 已废弃的 ADJUST_RESIZE），与本项目 edge-to-edge 的 Activity
// 坐标系不一致，导致卡底数字键盘 Pressable 触摸失灵/被 IME 遮挡（备注靠系统 IME
// 输入可幸免，金额必须触摸窗内按键故"无法修改"）。改为渲染在 LedgerScreen 的
// Activity 视图层级内的绝对定位覆盖层：触摸与键盘避让（adjustResize）行为与首页记账卡完全一致。
export default function EditRecordModal({ visible, record, onClose }: Props) {
  const [type, setType] = useState<RecordType>('expense');
  const [amountStr, setAmountStr] = useState('');
  const [category, setCategory] = useState('food');
  const [note, setNote] = useState('');
  const [showNote, setShowNote] = useState(false);
  const [reimbursable, setReimbursable] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  // 仅用户主动点「＋ 添加备注」才聚焦弹键盘；打开页面时不自动弹
  const [noteFocused, setNoteFocused] = useState(false);
  // 系统键盘是否弹起：Android 15+ edge-to-edge 下 adjustResize 不再压缩窗口，
  // 固定数字键盘(约250px)+备注行会整体压在 IME 之下，滚动无法救——改为一抬键盘就收起数字键盘
  // （随手记同款交互），键盘落下后自动恢复。
  const [keyboardUp, setKeyboardUp] = useState(false);
  const [keyboardH, setKeyboardH] = useState(0);
  // 记录日期（v0.11.22：编辑时可改，保存后明细/统计按新日期归档）
  const [recordDate, setRecordDate] = useState('');
  const scrollRef = useRef<ScrollView>(null);

  // 打开时用记录内容初始化（金额转字符串供键盘继续编辑）
  useEffect(() => {
    if (visible && record) {
      setType(record.type);
      setAmountStr(String(record.amount));
      setCategory(record.category);
      setNote(record.note);
      setShowNote(!!record.note);
      setNoteFocused(false);
      setReimbursable(record.reimbursable);
      setRecordDate(record.date);
      setSaving(false);
      setError('');
    }
  }, [visible, record]);

  // 系统返回键：编辑页打开时关闭编辑页（此前由 RNModal onRequestClose 承担）
  useEffect(() => {
    if (!visible) return;
    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
      onClose();
      return true;
    });
    return () => sub.remove();
  }, [visible, onClose]);

  // 备注弹键盘时的"手动 adjustResize"：Android 15+ edge-to-edge 下系统不再压缩窗口，
  // 改为给滚动内容补 paddingBottom=键盘高度并滚到底，把备注行精确顶到 IME 上沿；
  // 同时收起自定义数字键盘（其位置正被系统键盘占据）。iOS 同样适用。
  useEffect(() => {
    if (!visible) {
      setKeyboardUp(false);
      setKeyboardH(0);
      return;
    }
    let timer: ReturnType<typeof setTimeout> | null = null;
    const show = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardUp(true);
      setKeyboardH(e.endCoordinates?.height ?? 0);
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => scrollRef.current?.scrollToEnd({ animated: true }), 80);
    });
    const hide = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardUp(false);
      setKeyboardH(0);
    });
    return () => {
      if (timer) clearTimeout(timer);
      show.remove();
      hide.remove();
    };
  }, [visible]);

  // 切换收支类型：分类切到该类型第一个；待报销仅对支出有意义，切收入时重置
  const handleTypeChange = (next: RecordType) => {
    if (next === type) return;
    setType(next);
    setCategory(getCategories(next)[0]?.key ?? 'other');
    if (next === 'income') setReimbursable(false);
    hapticLight();
  };

  const handleKey = (key: PadKey) => {
    setAmountStr((prev) => appendKey(prev, key));
    hapticLight();
  };

  const handleSave = async () => {
    if (!record || !isValidAmount(amountStr)) return;
    const amount = toAmount(amountStr);
    try {
      setSaving(true);
      await updateRecord(record.id, {
        amount,
        category,
        type,
        note: note.trim(),
        reimbursable,
        date: recordDate || record.date,
        timestamp: mergeDateKeepTime(record.timestamp, recordDate || record.date),
      });
      hapticSuccess();
      // 列表刷新 + App 层 debounce 自动同步（与新增记录同一链路）
      DeviceEventEmitter.emit(LEDGER_EVENTS.RECORDED);
      onClose();
    } catch {
      hapticError();
      setSaving(false);
      // v0.11 修复：保存失败在页内给出文案提示（此前仅震动，用户以为已保存）
      setError('保存失败，请重试');
    }
  };

  const canSave = isValidAmount(amountStr) && !saving;

  // 计算器友好展示 + 实时「= 结果」预览（与记账页一致）
  const displayAmount =
    amountStr === '' ? '0.00' : amountStr.replace(/\*/g, '×').replace(/\//g, '÷').replace(/-/g, '−');
  const showPreview = hasOperator(amountStr);
  const previewAmount = showPreview ? evaluateAmount(amountStr) : 0;

  if (!visible || !record) return null;

  // v0.11.5 结构修正：不再用"绝对定位覆盖层"（absolute 子级会无视父级 paddingTop 顶进状态栏、
  // 底部安全区重复计算顶出幽灵空隙，且叠层触摸在部分机型仍不稳）。
  // 改为与 App.tsx 切 Tab 同款的"并列页 + display 切换"：本组件作为宿主页面根内的普通页面渲染，
  // 触摸/安全区行为与首页记账卡完全一致（宿主负责两页互斥显示：明细页、统计页分类明细）。
  return (
    <View style={styles.page}>
      {/* 顶部导航栏：取消 / 标题 / 保存 */}
      <View style={styles.navBar}>
        <Pressable
          onPress={onClose}
          hitSlop={8}
          style={styles.navBtn}
          accessibilityRole="button"
          accessibilityLabel="取消编辑"
        >
          <Text style={styles.navCancel}>取消</Text>
        </Pressable>
        <Text style={styles.navTitle}>编辑记录</Text>
        <Pressable
          onPress={handleSave}
          disabled={!canSave}
          hitSlop={8}
          style={styles.navBtn}
          accessibilityRole="button"
          accessibilityLabel="保存修改"
        >
          <Text style={[styles.navSave, !canSave && styles.navSaveDisabled]}>保存</Text>
        </Pressable>
      </View>

      {/* 保存失败提示（页内可见） */}
      {error ? <Text style={styles.errorText}>{error}</Text> : null}

      {/* 记账卡片结构：上半内容与数字键盘连为一张卡，键盘固定卡底（与 HomeScreen 一致） */}
      <View style={styles.card}>
        <ScrollView
          ref={scrollRef}
          style={styles.scroll}
          contentContainerStyle={[styles.content, keyboardUp && { paddingBottom: keyboardH + SPACING.sm }]}
          keyboardShouldPersistTaps="handled"
          showsVerticalScrollIndicator={false}
          bounces={false}
        >
          {/* 收支切换 */}
          <View style={styles.typeSwitch}>
            {(['expense', 'income'] as RecordType[]).map((t) => (
              <Pressable
                key={t}
                style={[
                  styles.typeBtn,
                  type === t && (t === 'expense' ? styles.typeBtnExpense : styles.typeBtnIncome),
                ]}
                onPress={() => handleTypeChange(t)}
                accessibilityRole="button"
                accessibilityLabel={t === 'expense' ? '改为支出' : '改为收入'}
                accessibilityState={{ selected: type === t }}
              >
                <Text style={[styles.typeText, type === t && styles.typeTextActive]}>
                  {t === 'expense' ? '支出' : '收入'}
                </Text>
              </Pressable>
            ))}
          </View>

          {/* 记录日期：可改到过去的某天（时分秒保留原记录，同日排序不乱） */}
          <View style={styles.dateRow}>
            <DateField
              value={recordDate || record.date}
              label="记录日期"
              onChange={(d) => {
                setRecordDate(d);
                hapticLight();
              }}
            />
          </View>

          {/* 金额区 */}
          <View style={styles.amountZone}>
            <View style={styles.amountRow}>
              <Text
                style={[styles.amountSymbol, { color: type === 'expense' ? COLORS.expense : COLORS.income }]}
              >
                ¥
              </Text>
              <Text
                style={[styles.amountInput, amountStr === '' && styles.amountPlaceholder]}
                adjustsFontSizeToFit
                numberOfLines={1}
                accessibilityLabel={`金额 ${displayAmount}元`}
              >
                {displayAmount}
              </Text>
            </View>
            <View style={styles.calcSlot}>
              {showPreview ? <Text style={styles.calcPreview}>= ¥{formatMoney(previewAmount)}</Text> : null}
            </View>
          </View>

          {/* 分类选择（横向滑动一行） */}
          <CategorySelector
            categories={getCategories(type)}
            selected={category}
            onSelect={(key) => {
              setCategory(key);
              hapticLight();
            }}
          />

          {/* 备注 + 待报销 */}
          <View style={styles.optionRow}>
            {showNote ? (
              <TextInput
                style={styles.noteInput}
                placeholder="备注（可选）"
                placeholderTextColor={COLORS.textTertiary}
                value={note}
                onChangeText={setNote}
                maxLength={30}
                autoFocus={noteFocused}
                onFocus={() => {
                  // 与首页一致：聚焦时滚到底，输入框位于系统键盘上方（adjustResize 生效）
                  scrollRef.current?.scrollToEnd({ animated: true });
                }}
              />
            ) : (
              <Pressable
                style={styles.noteToggle}
                onPress={() => {
                  setShowNote(true);
                  setNoteFocused(true);
                }}
                accessibilityRole="button"
                accessibilityLabel="添加备注"
              >
                <Text style={styles.noteToggleText}>{note ? `备注：${note}` : '＋ 添加备注'}</Text>
              </Pressable>
            )}
            {type === 'expense' ? (
              <Pressable
                style={[styles.reimburseBtn, reimbursable && styles.reimburseBtnOn]}
                onPress={() => {
                  setReimbursable((v) => !v);
                  hapticLight();
                }}
                accessibilityRole="button"
                accessibilityLabel="标记待报销"
                accessibilityState={{ selected: reimbursable }}
              >
                <Text style={[styles.reimburseText, reimbursable && styles.reimburseTextOn]}>待报销</Text>
              </Pressable>
            ) : null}
          </View>
        </ScrollView>

        {/* 数字键盘：固定在卡片底部；系统键盘弹起时让位（此时正被 IME 占据，收起可让备注行回落到可见区） */}
        {!keyboardUp ? (
          <View style={styles.padDock}>
            <NumberPad onKey={handleKey} />
          </View>
        ) : null}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  // 普通并列页：由宿主用 display 与列表视图互斥切换（同 App 切 Tab 的做法）
  page: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  navBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: SPACING.md,
    paddingVertical: SPACING.xs,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: COLORS.border,
  },
  navBtn: {
    minWidth: 56,
    alignItems: 'center',
  },
  navCancel: {
    fontSize: FONT_SIZE.md,
    color: COLORS.textSecondary,
    fontWeight: '600',
    paddingVertical: 8,
  },
  navTitle: {
    fontSize: FONT_SIZE.lg,
    fontWeight: '800',
    color: COLORS.text,
  },
  navSave: {
    fontSize: FONT_SIZE.md,
    color: COLORS.accent,
    fontWeight: '700',
    paddingVertical: 8,
  },
  navSaveDisabled: {
    opacity: 0.4,
  },
  errorText: {
    color: COLORS.danger,
    fontSize: FONT_SIZE.sm,
    fontWeight: '600',
    textAlign: 'center',
    paddingVertical: SPACING.xs,
  },
  // ===== 记账卡片（与 HomeScreen 记账卡一致） =====
  card: {
    flex: 1,
    backgroundColor: COLORS.surface,
    borderRadius: RADIUS.lg,
    borderWidth: 1,
    borderColor: COLORS.border,
    marginHorizontal: SPACING.md,
    marginBottom: SPACING.sm,
    overflow: 'hidden',
  },
  scroll: {
    flex: 1,
  },
  content: {
    paddingHorizontal: SPACING.md,
    paddingTop: SPACING.sm,
    paddingBottom: SPACING.sm,
    gap: SPACING.sm,
    flexGrow: 1,
  },
  typeSwitch: {
    flexDirection: 'row',
    backgroundColor: COLORS.bgAlt,
    borderRadius: RADIUS.pill,
    padding: 3,
  },
  typeBtn: {
    flex: 1,
    paddingVertical: SPACING.sm,
    borderRadius: RADIUS.pill,
    alignItems: 'center',
  },
  typeBtnExpense: {
    backgroundColor: COLORS.expense,
  },
  typeBtnIncome: {
    backgroundColor: COLORS.income,
  },
  typeText: {
    fontSize: FONT_SIZE.md,
    color: COLORS.textSecondary,
    fontWeight: '600',
  },
  typeTextActive: {
    color: COLORS.white,
    fontWeight: '700',
  },
  // 日期胶囊单独一行、靠左
  dateRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  amountZone: {
    flex: 1,
    justifyContent: 'center',
    minHeight: 64,
  },
  amountRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  amountSymbol: {
    fontSize: FONT_SIZE.xl,
    fontWeight: '700',
    marginRight: 4,
  },
  amountInput: {
    fontSize: FONT_SIZE.display,
    fontWeight: '800',
    color: COLORS.text,
    maxWidth: '80%',
  },
  amountPlaceholder: {
    color: COLORS.borderSubtle,
  },
  calcSlot: {
    height: 34,
    alignItems: 'center',
    justifyContent: 'center',
  },
  calcPreview: {
    fontSize: FONT_SIZE.sm,
    color: COLORS.textTertiary,
    textAlign: 'center',
  },
  optionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  noteToggle: {
    paddingVertical: 2,
    flexShrink: 1,
  },
  noteToggleText: {
    fontSize: FONT_SIZE.sm,
    color: COLORS.textTertiary,
  },
  noteInput: {
    flex: 1,
    backgroundColor: COLORS.bgAlt,
    borderRadius: RADIUS.sm,
    paddingHorizontal: SPACING.md,
    paddingVertical: SPACING.sm,
    fontSize: FONT_SIZE.md,
    color: COLORS.text,
  },
  reimburseBtn: {
    paddingHorizontal: SPACING.md,
    paddingVertical: 6,
    borderRadius: RADIUS.pill,
    borderWidth: 1,
    borderColor: COLORS.border,
    marginLeft: SPACING.sm,
  },
  reimburseBtnOn: {
    // v0.10.2：选中效果与「连记」统一——主色 9% 透明底 + 主色边框 + 深色文字
    backgroundColor: `${COLORS.warningBorder}18`,
    borderColor: COLORS.warningBorder,
  },
  reimburseText: {
    fontSize: FONT_SIZE.sm,
    color: COLORS.textSecondary,
    fontWeight: '600',
  },
  reimburseTextOn: {
    color: COLORS.warningText,
  },
  padDock: {
    paddingHorizontal: SPACING.md,
    paddingTop: SPACING.xs,
    paddingBottom: SPACING.sm,
    backgroundColor: COLORS.surface,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: COLORS.border,
  },
});