'use client';

import styles from './co-managed-wallet.module.scss';

interface ThresholdConfigProps {
  thresholdT: number;
  thresholdN: number;
  onThresholdTChange: (value: number) => void;
  onThresholdNChange: (value: number) => void;
  disabled?: boolean;
}

/**
 * 阈值配置组件 (T-of-N)
 */
export default function ThresholdConfig({
  thresholdT,
  thresholdN,
  onThresholdTChange,
  onThresholdNChange,
  disabled = false,
}: ThresholdConfigProps) {
  const handleTDecrease = () => {
    if (thresholdT > 1) {
      onThresholdTChange(thresholdT - 1);
    }
  };

  const handleTIncrease = () => {
    if (thresholdT < thresholdN) {
      onThresholdTChange(thresholdT + 1);
    }
  };

  const handleNDecrease = () => {
    if (thresholdN > 2) {
      const newN = thresholdN - 1;
      onThresholdNChange(newN);
      if (thresholdT > newN) {
        onThresholdTChange(newN);
      }
    }
  };

  const handleNIncrease = () => {
    if (thresholdN < 10) {
      onThresholdNChange(thresholdN + 1);
    }
  };

  return (
    <div className={styles.thresholdConfig}>
      <div className={styles.thresholdConfig__item}>
        <span className={styles.thresholdConfig__label}>签名阈值 (T)</span>
        <div className={styles.thresholdConfig__control}>
          <button
            type="button"
            className={styles.thresholdConfig__btn}
            onClick={handleTDecrease}
            disabled={disabled || thresholdT <= 1}
            aria-label="减少签名阈值"
          >
            -
          </button>
          <span className={styles.thresholdConfig__value}>{thresholdT}</span>
          <button
            type="button"
            className={styles.thresholdConfig__btn}
            onClick={handleTIncrease}
            disabled={disabled || thresholdT >= thresholdN}
            aria-label="增加签名阈值"
          >
            +
          </button>
        </div>
      </div>

      <div className={styles.thresholdConfig__divider}>of</div>

      <div className={styles.thresholdConfig__item}>
        <span className={styles.thresholdConfig__label}>参与方总数 (N)</span>
        <div className={styles.thresholdConfig__control}>
          <button
            type="button"
            className={styles.thresholdConfig__btn}
            onClick={handleNDecrease}
            disabled={disabled || thresholdN <= 2}
            aria-label="减少参与方总数"
          >
            -
          </button>
          <span className={styles.thresholdConfig__value}>{thresholdN}</span>
          <button
            type="button"
            className={styles.thresholdConfig__btn}
            onClick={handleNIncrease}
            disabled={disabled || thresholdN >= 10}
            aria-label="增加参与方总数"
          >
            +
          </button>
        </div>
      </div>
    </div>
  );
}
