// 记账日期胶囊：点开应用内自绘日历浮层卡片
// v0.11.26：头部固定展示完整选中日期；已选今天时隐藏底部无效的「今天」；与统计页共用 MonthSwitcher
// v0.11.24：从贴底全宽面板改为居中卡片——宽度、圆角、描边与记账页卡片一致，整体上移更协调
// v0.11.23：弃用系统 Material 日历弹窗（白底蓝字与暖色系界面风格割裂），改为与全站一致的暖色圆角面板
import React, { useMemo, useState } from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
import { COLORS, FONT_SIZE, RADIUS, SPACING } from '../constants';
import {
  addMonths,
  formatDate,
  formatDateFull,
  formatDateLabel,
  getDaysInMonth,
  getFirstDayOfMonth,
  getMonthName,
  getToday,
  parseDate,
} from '../utils/dateUtils';
import MonthSwitcher from './MonthSwitcher';

interface Props {
  value: string; // YYYY-MM-DD
  onChange: (date: string) => void;
  // 无障碍文案前缀（如「记账日期」「记录日期」）
  label?: string;
}

const WEEKDAYS = ['日', '一', '二', '三', '四', '五', '六'];

export default function DateField({ value, onChange, label = '记账日期' }: Props) {
  const [show, setShow] = useState(false);
  // 面板内先选、点「确定」才提交，避免滑动浏览月份时误改已保存的日期
  const [pending, setPending] = useState(value);
  const [viewDate, setViewDate] = useState(() => parseDate(value));

  // 不允许记未来：记账是已经发生的事，未来日期会污染本月/近 7 天统计
  const today = getToday();

  const year = viewDate.getFullYear();
  const month = viewDate.getMonth() + 1;
  const now = new Date();
  // 只能翻到当前月（含），未来月份整月不可选
  const canGoNext = year < now.getFullYear() || (year === now.getFullYear() && month - 1 < now.getMonth());

  // 固定 6 行（42 格）：不同月份行数不同时面板高度不跳动
  const cells = useMemo(() => {
    const list: (number | null)[] = [];
    const firstDay = getFirstDayOfMonth(year, month);
    const days = getDaysInMonth(year, month);
    for (let i = 0; i < firstDay; i++) list.push(null);
    for (let d = 1; d <= days; d++) list.push(d);
    while (list.length < 42) list.push(null);
    return list;
  }, [year, month]);

  const open = () => {
    setPending(value);
    setViewDate(parseDate(value));
    setShow(true);
  };

  return (
    <View style={styles.wrap}>
      <Pressable
        style={styles.chip}
        onPress={open}
        hitSlop={{ top: 10, bottom: 10, left: 8, right: 8 }}
        accessibilityRole="button"
        accessibilityLabel={`${label} ${formatDateLabel(value)}，点击修改`}
      >
        <Text style={styles.icon}>📅</Text>
        <Text style={styles.text}>{formatDateLabel(value)}</Text>
        <Text style={styles.chevron}>▾</Text>
      </Pressable>

      <Modal
        visible={show}
        transparent
        animationType="fade"
        statusBarTranslucent
        onRequestClose={() => setShow(false)}
      >
        <View style={styles.overlay}>
          {/* 点遮罩关闭，不提交未确认的选择 */}
          <Pressable
            style={StyleSheet.absoluteFill}
            onPress={() => setShow(false)}
            accessibilityRole="button"
            accessibilityLabel="关闭日期选择"
          />
          <View style={styles.card}>
            <View style={styles.sheetHeader}>
              <Text style={styles.sheetTitle}>选择日期</Text>
              <Text style={styles.sheetSub}>{formatDateFull(pending)}</Text>
            </View>

            {/* 月份切换：右侧到当前月为止；与统计页共用同一套箭头样式 */}
            <View style={styles.monthRow}>
              <MonthSwitcher
                label={getMonthName(viewDate)}
                onPrev={() => setViewDate(addMonths(viewDate, -1))}
                onNext={() => setViewDate(addMonths(viewDate, 1))}
                nextDisabled={!canGoNext}
              />
            </View>

            <View style={styles.weekRow}>
              {WEEKDAYS.map((w) => (
                <Text key={w} style={styles.weekText}>
                  {w}
                </Text>
              ))}
            </View>

            <View style={styles.grid}>
              {cells.map((day, idx) => {
                if (day === null) {
                  return <View key={`blank-${idx}`} style={styles.cell} />;
                }
                const dateStr = formatDate(new Date(year, month - 1, day));
                const isFuture = dateStr > today;
                const isSelected = dateStr === pending;
                const isToday = dateStr === today;
                return (
                  <View key={dateStr} style={styles.cell}>
                    <Pressable
                      style={[styles.day, isToday && styles.dayToday, isSelected && styles.daySelected]}
                      onPress={() => setPending(dateStr)}
                      disabled={isFuture}
                      accessibilityRole="button"
                      accessibilityLabel={`${month}月${day}日${isToday ? ' 今天' : ''}`}
                      accessibilityState={{ selected: isSelected, disabled: isFuture }}
                    >
                      <Text
                        style={[
                          styles.dayText,
                          isToday && styles.dayTextToday,
                          isSelected && styles.dayTextSelected,
                          isFuture && styles.dayTextFuture,
                        ]}
                      >
                        {day}
                      </Text>
                    </Pressable>
                  </View>
                );
              })}
            </View>

            <View style={styles.footer}>
              {/* 已选今天时不再显示「今天」按钮（否则点了也没反应） */}
              {pending !== today ? (
                <Pressable
                  style={styles.todayBtn}
                  onPress={() => {
                    setPending(today);
                    setViewDate(new Date());
                  }}
                  hitSlop={6}
                  accessibilityRole="button"
                  accessibilityLabel="选择今天"
                >
                  <Text style={styles.todayText}>今天</Text>
                </Pressable>
              ) : (
                <View />
              )}
              <View style={styles.footerActions}>
                <Pressable
                  style={styles.cancelBtn}
                  onPress={() => setShow(false)}
                  hitSlop={6}
                  accessibilityRole="button"
                  accessibilityLabel="取消"
                >
                  <Text style={styles.cancelText}>取消</Text>
                </Pressable>
                <Pressable
                  style={styles.confirmBtn}
                  onPress={() => {
                    onChange(pending);
                    setShow(false);
                  }}
                  accessibilityRole="button"
                  accessibilityLabel="确定"
                >
                  <Text style={styles.confirmText}>确定</Text>
                </Pressable>
              </View>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: COLORS.bgAlt,
    borderRadius: RADIUS.pill,
    paddingHorizontal: SPACING.sm + 2,
    paddingVertical: SPACING.xs + 1,
    gap: 4,
  },
  icon: {
    fontSize: FONT_SIZE.xs,
  },
  text: {
    fontSize: FONT_SIZE.sm,
    color: COLORS.textSecondary,
    fontWeight: '600',
  },
  chevron: {
    fontSize: FONT_SIZE.xs,
    color: COLORS.textTertiary,
    fontWeight: '700',
  },
  // ===== 居中浮层卡片（宽度/圆角/描边与记账页卡片一致） =====
  overlay: {
    flex: 1,
    backgroundColor: COLORS.overlay,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: SPACING.md,
  },
  card: {
    width: '100%',
    maxWidth: 420,
    backgroundColor: COLORS.surface,
    borderRadius: RADIUS.lg,
    borderWidth: 1,
    borderColor: COLORS.border,
    paddingHorizontal: SPACING.md,
    paddingTop: SPACING.md,
    paddingBottom: SPACING.sm,
    // 浮起感：暖色阴影 + Android elevation
    shadowColor: COLORS.text,
    shadowOpacity: 0.16,
    shadowRadius: 24,
    shadowOffset: { width: 0, height: 8 },
    elevation: 12,
  },
  sheetHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  sheetTitle: {
    fontSize: FONT_SIZE.lg,
    fontWeight: '800',
    color: COLORS.text,
  },
  sheetSub: {
    fontSize: FONT_SIZE.sm,
    color: COLORS.textSecondary,
    fontWeight: '600',
  },
  monthRow: {
    marginTop: SPACING.sm,
  },
  weekRow: {
    flexDirection: 'row',
    marginTop: SPACING.sm,
  },
  weekText: {
    width: '14.2857%',
    textAlign: 'center',
    fontSize: FONT_SIZE.xs,
    color: COLORS.textTertiary,
    fontWeight: '600',
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: SPACING.xs,
  },
  cell: {
    width: '14.2857%',
    height: 42,
    alignItems: 'center',
    justifyContent: 'center',
  },
  day: {
    width: 36,
    height: 36,
    borderRadius: RADIUS.pill,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dayToday: {
    borderWidth: 1.5,
    borderColor: COLORS.accent,
  },
  daySelected: {
    backgroundColor: COLORS.accent,
  },
  dayText: {
    fontSize: FONT_SIZE.md,
    color: COLORS.text,
    fontWeight: '500',
  },
  dayTextToday: {
    color: COLORS.accent,
    fontWeight: '700',
  },
  dayTextSelected: {
    color: COLORS.white,
    fontWeight: '700',
  },
  dayTextFuture: {
    color: COLORS.textTertiary,
    opacity: 0.45,
  },
  footer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: SPACING.sm,
    paddingTop: SPACING.sm,
    paddingBottom: SPACING.xs,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: COLORS.border,
  },
  todayBtn: {
    backgroundColor: COLORS.bgAlt,
    borderRadius: RADIUS.pill,
    paddingHorizontal: SPACING.md,
    paddingVertical: SPACING.sm,
  },
  todayText: {
    fontSize: FONT_SIZE.sm,
    color: COLORS.accentDark,
    fontWeight: '700',
  },
  footerActions: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  cancelBtn: {
    paddingHorizontal: SPACING.md,
    paddingVertical: SPACING.sm,
  },
  cancelText: {
    fontSize: FONT_SIZE.md,
    color: COLORS.textSecondary,
    fontWeight: '600',
  },
  confirmBtn: {
    backgroundColor: COLORS.accent,
    borderRadius: RADIUS.pill,
    paddingHorizontal: SPACING.lg,
    paddingVertical: SPACING.sm + 2,
    marginLeft: SPACING.xs,
  },
  confirmText: {
    fontSize: FONT_SIZE.md,
    color: COLORS.white,
    fontWeight: '700',
  },
});