import React, { useMemo } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '../../theme';
import { Touchable } from '../ui/Touchable';

/** 键值：数字/小数点/加减走 numpadExpression；today/done 由宿主处理。 */
export type KeyboardKey = string;

interface NumpadKeyboardProps {
  onKey: (key: KeyboardKey) => void;
  todayLabel: string;
  doneLabel: string;
  /** 退格键无障碍标签（i18n）。 */
  backspaceLabel: string;
}

const ROWS: KeyboardKey[][] = [
  ['1', '2', '3', 'today'],
  ['4', '5', '6', '+'],
  ['7', '8', '9', '-'],
  ['.', '0', 'backspace', 'done'],
];

/** 内嵌数字键盘（4×4）：金额优先，＋/－ 连续计算，「今天」快速设日期。带有按压微缩放与变色触控反馈。 */
export function NumpadKeyboard({ onKey, todayLabel, doneLabel, backspaceLabel }: NumpadKeyboardProps) {
  const { theme } = useTheme();
  // 主题化样式：在组件内创建以引用 theme tokens（数字键圆角 radii.sm、数字 h2、运算/完成 body）
  /* eslint-disable react-native/no-unused-styles */
  const styles = useMemo(() => StyleSheet.create({
    grid: { gap: 2 },
    row: { flexDirection: 'row' },
    key: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingVertical: 14, borderRadius: theme.radii.sm },
    digitText: { fontSize: theme.typography.h2.fontSize, fontWeight: '600', fontVariant: ['tabular-nums'] },
    opText: { fontSize: theme.typography.body.fontSize, fontWeight: '600' },
    doneKey: { margin: 4 },
    doneText: { fontSize: theme.typography.body.fontSize, fontWeight: '700' },
  }), [theme]);
  /* eslint-enable react-native/no-unused-styles */

  const renderKey = (key: KeyboardKey) => {
    if (key === 'done') {
      return (
        <Touchable
          key={key}
          onPress={() => onKey(key)}
          disableRipple
          style={({ pressed }) => [
            styles.key,
            styles.doneKey,
            {
              backgroundColor: pressed ? theme.colors.accentDark : theme.colors.accent,
              borderRadius: theme.radii.lg,
            },
          ]}
          accessibilityRole="button"
          accessibilityLabel={doneLabel}
        >
          <Text style={[styles.doneText, { color: theme.colors.fgInverse }]}>{doneLabel}</Text>
        </Touchable>
      );
    }
    if (key === 'backspace') {
      return (
        <Touchable
          key={key}
          onPress={() => onKey(key)}
          disableRipple
          style={({ pressed }) => [
            styles.key,
            pressed && { backgroundColor: theme.colors.bgTertiary },
          ]}
          accessibilityRole="button"
          accessibilityLabel={backspaceLabel}
        >
          <Ionicons name="backspace-outline" size={22} color={theme.colors.fgPrimary} />
        </Touchable>
      );
    }
    if (key === 'today') {
      return (
        <Touchable
          key={key}
          onPress={() => onKey(key)}
          disableRipple
          style={({ pressed }) => [
            styles.key,
            pressed && { backgroundColor: theme.colors.bgTertiary },
          ]}
          accessibilityRole="button"
          accessibilityLabel={todayLabel}
        >
          <Text style={[styles.opText, { color: theme.colors.fgSecondary }]}>{todayLabel}</Text>
        </Touchable>
      );
    }
    if (key === '+' || key === '-') {
      return (
        <Touchable
          key={key}
          onPress={() => onKey(key)}
          disableRipple
          style={({ pressed }) => [
            styles.key,
            pressed && { backgroundColor: theme.colors.bgTertiary },
          ]}
          accessibilityRole="button"
          accessibilityLabel={key}
        >
          <Text style={[styles.opText, { color: theme.colors.fgSecondary }]}>{key === '+' ? '＋' : '－'}</Text>
        </Touchable>
      );
    }
    return (
      <Touchable
        key={key}
        onPress={() => onKey(key)}
        disableRipple
        style={({ pressed }) => [
          styles.key,
          pressed && { backgroundColor: theme.colors.bgTertiary },
        ]}
        accessibilityRole="button"
        accessibilityLabel={key}
      >
        <Text style={[styles.digitText, { color: theme.colors.fgPrimary }]}>{key}</Text>
      </Touchable>
    );
  };

  return (
    <View style={styles.grid}>
      {ROWS.map((row, i) => (
        <View key={i} style={styles.row}>
          {row.map(renderKey)}
        </View>
      ))}
    </View>
  );
}


