import React, { useMemo } from 'react';
import { useT } from '../../i18n';
import { FormModal, type FormField } from '../form/FormModal';

export interface AccountCreateModalProps {
  visible: boolean;
  defaultType?: string;
  onConfirm: (values: Record<string, string>) => void;
  onCancel: () => void;
}

/**
 * 统一新建账户弹窗组件（全应用共享复用）。
 * 包含一行 3 列同行等高布局：账户类型 Dropdown (1.2) + 账户名称 TextInput (2.0) + 币种 TextInput (0.9)。
 */
export function AccountCreateModal({ visible, defaultType = 'Assets', onConfirm, onCancel }: AccountCreateModalProps) {
  const t = useT();

  const fields: FormField[] = useMemo(() => [
    // Row 1: 账户类型 Dropdown (flex: 1) + 币种 TextInput (flex: 1)
    {
      key: 'type',
      label: t('account.fieldType'),
      type: 'dropdown',
      options: [
        { label: t('account.rootTypes.Assets'), value: 'Assets' },
        { label: t('account.rootTypes.Liabilities'), value: 'Liabilities' },
        { label: t('account.rootTypes.Expenses'), value: 'Expenses' },
        { label: t('account.rootTypes.Income'), value: 'Income' },
        { label: t('account.rootTypes.Equity'), value: 'Equity' },
      ],
      defaultValue: defaultType,
      flex: 1,
    },
    {
      key: 'currency',
      label: t('account.fieldCurrency'),
      placeholder: 'CNY',
      defaultValue: 'CNY',
      flex: 1,
    },
    // Row 2: 账户名称 TextInput (全宽大输入框)
    {
      key: 'name',
      label: t('account.fieldName'),
      placeholder: t('account.fieldNamePlaceholder'),
      defaultValue: '',
    },
  ], [t, defaultType]);

  return (
    <FormModal
      visible={visible}
      title={t('account.addModalTitle')}
      fields={fields}
      onConfirm={onConfirm}
      onCancel={onCancel}
    />
  );
}
