import React, { useState } from 'react';
import { Button, Modal } from 'antd';
import { DiscountInput, MoneyInput, PercentInput } from './inputs';
import { SYSTEM_DEFAULTS } from './constants';

const FIELD_DEFS = [
  { key: 'coupon', label: '优惠券金额', Input: MoneyInput },
  { key: 'activityDiscount', label: '活动折扣', Input: DiscountInput },
  { key: 'installFee', label: '安装费', Input: MoneyInput },
  { key: 'targetMargin', label: '营业利润率', Input: PercentInput },
];

const formatDefaultTip = (key, value) => {
  if (key === 'targetMargin') return `系统默认 ${Number(value * 100).toFixed(0)}%`;
  if (key === 'activityDiscount') return `系统默认 ${value}（即 ${Number(value * 10).toFixed(0)} 折）`;
  return `系统默认 ${value}`;
};

// 表单主体：每次打开弹窗时重新挂载，初始值取 个性化配置 > 系统默认
const DefaultsForm = ({ defaults, systemDefaults, saving, onSave }) => {
  const [form, setForm] = useState(() => ({ ...systemDefaults, ...(defaults || {}) }));

  return (
    <div>
      <p className="pricing-calc-defaults__tip">
        配置保存到你的账号，仅自己生效。保存后页面中仍使用旧默认值的行会自动更新为新值，手动修改过的行不受影响；之后的新的测算也按此填充。
      </p>
      {FIELD_DEFS.map(({ key, label, Input }) => (
        <div key={key} className="pricing-calc-defaults__row">
          <span className="pricing-calc-defaults__label">{label}</span>
          {React.createElement(Input, {
            style: { width: 160 },
            value: form[key],
            onChange: (next) => setForm((prev) => ({ ...prev, [key]: next })),
          })}
          <span className="pricing-calc-defaults__hint">
            {formatDefaultTip(key, systemDefaults[key])}
          </span>
        </div>
      ))}
      <div className="pricing-calc-defaults__footer">
        <Button onClick={() => setForm({ ...systemDefaults })}>恢复系统默认</Button>
        <Button type="primary" loading={saving} onClick={() => onSave(form)}>保存配置</Button>
      </div>
    </div>
  );
};

/**
 * 个性化默认值配置弹窗：
 * - 每个运营维护自己的默认值，保存到本人账号（服务端按用户隔离）
 * - 用于"新测算/新条码行"的默认值填充；已生成的行与历史快照不受影响
 */
const DefaultsConfigModal = ({
  open,
  onClose,
  defaults,
  systemDefaults = SYSTEM_DEFAULTS,
  saving,
  onSave,
  title = '默认值配置',
}) => (
  <Modal title={title} width={440} open={open} onCancel={onClose} footer={null}>
    {open ? (
      <DefaultsForm
        defaults={defaults}
        systemDefaults={systemDefaults}
        saving={saving}
        onSave={onSave}
      />
    ) : null}
  </Modal>
);

export default DefaultsConfigModal;