/**
 * 预算管理页面（plan.md「1.1 budget/index」+ 决策 1 双轨制）。
 *
 * 功能：预算列表(含进度条) + 添加/编辑/删除。
 * 进度计算调用 calculateBudgetProgress 纯函数,展示已用/剩余/百分比。
 * P5：套 ManagementScreen 模板，消除手写头部/新增按钮/弹窗样板。
 */
import React from 'react';
import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
import { useTheme } from '../../theme';
import { useLedgerStore } from '../../store/ledgerStore';
import { useMetadataStore, generateId } from '../../store/metadataStore';
import { useT } from '../../i18n';
import { Card } from '../../components/ui/Card';
import { ManagementScreen } from '../../components/layout/ManagementScreen';
import { calculateBudgetProgress } from '../../domain/finance/budgets';
import { toDateString } from '../../domain/core/decimal';
import type { Budget } from '../../domain/finance/budgets';

export default function BudgetScreen() {
  const { theme } = useTheme();
  const t = useT();

  const budgets = useMetadataStore(s => s.budgets);
  const addBudget = useMetadataStore(s => s.addBudget);
  const updateBudget = useMetadataStore(s => s.updateBudget);
  const removeBudget = useMetadataStore(s => s.removeBudget);
  const ledger = useLedgerStore(s => s.ledger);

  const transactions = ledger?.transactions ?? [];
  // 用本地时区格式化，避免 toISOString 的 UTC 偏移导致负时区日期错位
  const today = toDateString(new Date());

  const periodLabel = (p: string) => p === 'monthly' ? t('budget.periodMonthly') : p === 'weekly' ? t('budget.periodWeekly') : t('budget.periodYearly');

  return (
    <ManagementScreen<Budget>
      title={t('budget.title')}
      items={budgets}
      keyExtractor={budget => budget.id}
      addLabel={t('budget.add')}
      emptyText={t('budget.empty')}
      renderItem={(budget, { openEdit, confirmDelete }) => {
        const progress = calculateBudgetProgress(budget, transactions, today);
        return (
          <Pressable onPress={openEdit} onLongPress={confirmDelete}>
            <Card title={budget.name}>
              <View style={styles.budgetRow}>
                <Text style={[theme.typography.body, { color: theme.colors.fgPrimary }]}>
                  {t('budget.yuanPer', { amount: budget.amount, period: periodLabel(budget.period) })}
                </Text>
                <Text style={[theme.typography.caption, {
                  color: progress.overBudget ? theme.colors.error : theme.colors.fgSecondary,
                }]}>
                  {t('budget.used', { spent: progress.spent, pct: progress.percentage.toFixed(0) })}
                </Text>
              </View>
              {/* 进度条 */}
              <View style={[styles.barWrap, { backgroundColor: theme.colors.bgTertiary }]}>
                <View style={[
                  styles.bar,
                  {
                    width: `${Math.min(progress.percentage, 100)}%`,
                    backgroundColor: progress.overBudget ? theme.colors.error : theme.colors.accent,
                  },
                ]} />
              </View>
              {budget.categoryAccount && (
                <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, marginTop: 4 }]}>
                  {budget.categoryAccount}
                </Text>
              )}
            </Card>
          </Pressable>
        );
      }}
      formTitle={editing => (editing ? t('budget.editTitle') : t('budget.add'))}
      formFields={editing => [
        { key: 'name', label: t('budget.fieldName'), placeholder: t('budget.fieldNamePlaceholder'), defaultValue: editing?.name },
        { key: 'amount', label: t('budget.fieldAmount'), placeholder: t('budget.fieldAmountPlaceholder'), defaultValue: editing?.amount, keyboardType: 'decimal-pad' },
        { key: 'period', label: t('budget.fieldPeriod'), placeholder: 'monthly', defaultValue: editing?.period },
        { key: 'categoryAccount', label: t('budget.fieldCategoryAccount'), placeholder: t('budget.fieldCategoryPlaceholder'), defaultValue: editing?.categoryAccount ?? '' },
        { key: 'startDate', label: t('budget.fieldStartDate'), placeholder: '2026-01-01', defaultValue: editing?.startDate },
      ]}
      onSubmit={(values, editing) => {
        const name = values.name?.trim() || t('budget.unnamed');
        const amount = values.amount?.trim() || '0';
        const period = (values.period as Budget['period']) || 'monthly';
        const categoryAccount = values.categoryAccount?.trim() || undefined;
        const startDate = values.startDate?.trim() || today;

        const amtNum = parseFloat(amount);
        if (isNaN(amtNum) || amtNum <= 0) {
          Alert.alert(t('budget.invalidAmountTitle'), t('budget.invalidAmountDesc'));
          return false;
        }

        if (editing) {
          updateBudget(editing.id, { name, amount, period, categoryAccount, startDate });
        } else {
          addBudget({ id: generateId('bud'), name, amount, period, categoryAccount, startDate });
        }
        return true;
      }}
      onDelete={budget => removeBudget(budget.id)}
      deleteConfirmText={budget => t('budget.deleteConfirm', { name: budget.name })}
      deleteConfirmTitle={t('budget.deleteTitle')}
      footer={
        <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, textAlign: 'center' }]}>
          {t('common.clickEditLongDelete')}
        </Text>
      }
    />
  );
}

const styles = StyleSheet.create({
  budgetRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  barWrap: { height: 8, borderRadius: 4, overflow: 'hidden', marginTop: 8 },
  bar: { height: '100%', borderRadius: 4 },
});
