/**
 * AllocationRuleForm Component
 * Form for creating and editing income allocation rules
 * 
 * Requirements: 5.3.2, 5.3.5
 */

import React, { useState, useEffect } from 'react';
import type { AllocationRule, Account, PiggyBank } from '../../../types';
import type {
  AllocationRuleFormInput,
  AllocationTargetInput,
} from '../../../services/allocationRuleService';
import { getTargetTypeLabel } from '../../../services/allocationRuleService';
import './AllocationRuleForm.css';

interface AllocationRuleFormProps {
  allocationRule?: AllocationRule;
  accounts: Account[];
  piggyBanks: PiggyBank[];
  onSubmit: (data: AllocationRuleFormInput) => void;
  onCancel: () => void;
  isLoading?: boolean;
}

export const AllocationRuleForm: React.FC<AllocationRuleFormProps> = ({
  allocationRule,
  accounts,
  piggyBanks,
  onSubmit,
  onCancel,
  isLoading = false,
}) => {
  const [formData, setFormData] = useState<AllocationRuleFormInput>({
    name: '',
    triggerType: 'income',
    sourceAccountId: undefined,
    isActive: true,
    targets: [],
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  // Initialize form with allocation rule data if editing
  useEffect(() => {
    if (allocationRule) {
      setFormData({
        name: allocationRule.name,
        triggerType: allocationRule.triggerType as 'income' | 'manual',
        sourceAccountId: allocationRule.sourceAccountId,
        isActive: allocationRule.isActive,
        targets: allocationRule.targets.map((target) => ({
          targetType: target.targetType,
          targetId: target.targetId,
          percentage: target.percentage,
          fixedAmount: target.fixedAmount,
        })),
      });
    }
  }, [allocationRule]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    const checked = (e.target as HTMLInputElement).checked;

    setFormData((prev) => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));

    // Clear error for this field
    if (errors[name]) {
      setErrors((prev) => {
        const newErrors = { ...prev };
        delete newErrors[name];
        return newErrors;
      });
    }
  };

  const handleAddTarget = () => {
    setFormData((prev) => ({
      ...prev,
      targets: [
        ...prev.targets,
        {
          targetType: 'account',
          targetId: accounts.length > 0 ? accounts[0].id : 0,
          percentage: 0,
        },
      ],
    }));
  };

  const handleRemoveTarget = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      targets: prev.targets.filter((_, i) => i !== index),
    }));
  };

  const handleTargetChange = (
    index: number,
    field: keyof AllocationTargetInput,
    value: string | number
  ) => {
    setFormData((prev) => {
      const newTargets = [...prev.targets];
      const target = { ...newTargets[index] };

      if (field === 'targetType') {
        target.targetType = value as 'account' | 'piggy_bank';
        // Reset target ID when type changes
        if (value === 'account') {
          target.targetId = accounts.length > 0 ? accounts[0].id : 0;
        } else {
          target.targetId = piggyBanks.length > 0 ? piggyBanks[0].id : 0;
        }
      } else if (field === 'targetId') {
        target.targetId = Number(value);
      } else if (field === 'percentage') {
        target.percentage = value === '' ? undefined : Number(value);
        target.fixedAmount = undefined; // Clear fixed amount when percentage is set
      } else if (field === 'fixedAmount') {
        target.fixedAmount = value === '' ? undefined : Number(value);
        target.percentage = undefined; // Clear percentage when fixed amount is set
      }

      newTargets[index] = target;
      return { ...prev, targets: newTargets };
    });

    // Clear target errors
    if (errors[`target_${index}`]) {
      setErrors((prev) => {
        const newErrors = { ...prev };
        delete newErrors[`target_${index}`];
        return newErrors;
      });
    }
  };

  const handleAllocationTypeChange = (index: number, type: 'percentage' | 'fixed') => {
    setFormData((prev) => {
      const newTargets = [...prev.targets];
      const target = { ...newTargets[index] };

      if (type === 'percentage') {
        target.percentage = 0;
        target.fixedAmount = undefined;
      } else {
        target.fixedAmount = 0;
        target.percentage = undefined;
      }

      newTargets[index] = target;
      return { ...prev, targets: newTargets };
    });
  };

  const validate = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!formData.name.trim()) {
      newErrors.name = '请输入规则名称';
    }

    if (formData.targets.length === 0) {
      newErrors.targets = '至少需要添加一个分配目标';
    }

    let totalPercentage = 0;

    formData.targets.forEach((target, index) => {
      if (!target.targetId) {
        newErrors[`target_${index}`] = '请选择目标';
      }

      if (target.percentage === undefined && target.fixedAmount === undefined) {
        newErrors[`target_${index}`] = '请设置分配比例或固定金额';
      }

      if (target.percentage !== undefined) {
        if (target.percentage < 0 || target.percentage > 100) {
          newErrors[`target_${index}`] = '分配比例必须在0-100之间';
        }
        totalPercentage += target.percentage;
      }

      if (target.fixedAmount !== undefined && target.fixedAmount <= 0) {
        newErrors[`target_${index}`] = '固定金额必须大于0';
      }
    });

    if (totalPercentage > 100) {
      newErrors.targets = '总分配比例不能超过100%';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validate()) {
      onSubmit(formData);
    }
  };

  const getTotalPercentage = (): number => {
    return formData.targets.reduce((sum, target) => {
      return sum + (target.percentage || 0);
    }, 0);
  };

  const totalPercentage = getTotalPercentage();

  return (
    <form className="allocation-rule-form" onSubmit={handleSubmit}>
      <div className="allocation-rule-form__header">
        <h2 className="allocation-rule-form__title">
          {allocationRule ? '编辑分配规则' : '创建分配规则'}
        </h2>
      </div>

      <div className="allocation-rule-form__body">
        {/* Rule Name */}
        <div className="allocation-rule-form__field">
          <label htmlFor="name" className="allocation-rule-form__label">
            规则名称 <span className="allocation-rule-form__required">*</span>
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className={`allocation-rule-form__input ${errors.name ? 'allocation-rule-form__input--error' : ''}`}
            placeholder="例如：工资分配、奖金分配"
            disabled={isLoading}
          />
          {errors.name && <span className="allocation-rule-form__error">{errors.name}</span>}
        </div>

        {/* Trigger Type */}
        <div className="allocation-rule-form__field">
          <label htmlFor="triggerType" className="allocation-rule-form__label">
            触发方式 <span className="allocation-rule-form__required">*</span>
          </label>
          <select
            id="triggerType"
            name="triggerType"
            value={formData.triggerType}
            onChange={handleChange}
            className="allocation-rule-form__select"
            disabled={isLoading}
          >
            <option value="income">收入触发（记录收入时自动建议）</option>
            <option value="manual">手动触发（需要手动应用）</option>
          </select>
        </div>

        {/* Source Account - only show when trigger type is income */}
        {formData.triggerType === 'income' && (
          <div className="allocation-rule-form__field">
            <label htmlFor="sourceAccountId" className="allocation-rule-form__label">
              触发账户
            </label>
            <select
              id="sourceAccountId"
              name="sourceAccountId"
              value={formData.sourceAccountId || ''}
              onChange={(e) => {
                const value = e.target.value;
                setFormData((prev) => ({
                  ...prev,
                  sourceAccountId: value ? Number(value) : undefined,
                }));
              }}
              className="allocation-rule-form__select"
              disabled={isLoading}
            >
              <option value="">所有账户（任意账户收入都触发）</option>
              {accounts.map((account) => (
                <option key={account.id} value={account.id}>
                  {account.icon} {account.name}
                </option>
              ))}
            </select>
            <span className="allocation-rule-form__hint">
              选择特定账户后，只有该账户收到收入时才会触发分配建议
            </span>
          </div>
        )}

        {/* Is Active */}
        <div className="allocation-rule-form__field allocation-rule-form__field--checkbox">
          <label className="allocation-rule-form__checkbox-label">
            <input
              type="checkbox"
              name="isActive"
              checked={formData.isActive}
              onChange={handleChange}
              className="allocation-rule-form__checkbox"
              disabled={isLoading}
            />
            <span>启用此规则</span>
          </label>
        </div>

        {/* Allocation Targets */}
        <div className="allocation-rule-form__section">
          <div className="allocation-rule-form__section-header">
            <h3 className="allocation-rule-form__section-title">
              分配目标 <span className="allocation-rule-form__required">*</span>
            </h3>
            <button
              type="button"
              onClick={handleAddTarget}
              className="allocation-rule-form__add-btn"
              disabled={isLoading}
            >
              + 添加目标
            </button>
          </div>

          {errors.targets && (
            <span className="allocation-rule-form__error allocation-rule-form__error--section">
              {errors.targets}
            </span>
          )}

          {formData.targets.length === 0 ? (
            <div className="allocation-rule-form__empty">
              <p>暂无分配目标，点击"添加目标"按钮开始配置</p>
            </div>
          ) : (
            <div className="allocation-rule-form__targets">
              {formData.targets.map((target, index) => (
                <div key={index} className="allocation-rule-form__target">
                  <div className="allocation-rule-form__target-header">
                    <span className="allocation-rule-form__target-number">目标 {index + 1}</span>
                    <button
                      type="button"
                      onClick={() => handleRemoveTarget(index)}
                      className="allocation-rule-form__remove-btn"
                      disabled={isLoading}
                      aria-label="删除目标"
                    >
                      ✕
                    </button>
                  </div>

                  {/* Target Type */}
                  <div className="allocation-rule-form__target-field">
                    <label className="allocation-rule-form__label">类型</label>
                    <select
                      value={target.targetType}
                      onChange={(e) => handleTargetChange(index, 'targetType', e.target.value)}
                      className="allocation-rule-form__select"
                      disabled={isLoading}
                    >
                      <option value="account">账户</option>
                      <option value="piggy_bank">存钱罐</option>
                    </select>
                  </div>

                  {/* Target Selection */}
                  <div className="allocation-rule-form__target-field">
                    <label className="allocation-rule-form__label">
                      {getTargetTypeLabel(target.targetType)}
                    </label>
                    <select
                      value={target.targetId}
                      onChange={(e) => handleTargetChange(index, 'targetId', e.target.value)}
                      className="allocation-rule-form__select"
                      disabled={isLoading}
                    >
                      {target.targetType === 'account' ? (
                        accounts.length === 0 ? (
                          <option value="">暂无账户</option>
                        ) : (
                          accounts.map((account) => (
                            <option key={account.id} value={account.id}>
                              {account.icon} {account.name}
                            </option>
                          ))
                        )
                      ) : piggyBanks.length === 0 ? (
                        <option value="">暂无存钱罐</option>
                      ) : (
                        piggyBanks.map((piggyBank) => (
                          <option key={piggyBank.id} value={piggyBank.id}>
                            🐷 {piggyBank.name}
                          </option>
                        ))
                      )}
                    </select>
                  </div>

                  {/* Allocation Type Toggle */}
                  <div className="allocation-rule-form__target-field">
                    <label className="allocation-rule-form__label">分配方式</label>
                    <div className="allocation-rule-form__allocation-type">
                      <button
                        type="button"
                        className={`allocation-rule-form__type-btn ${target.percentage !== undefined ? 'allocation-rule-form__type-btn--active' : ''}`}
                        onClick={() => handleAllocationTypeChange(index, 'percentage')}
                        disabled={isLoading}
                      >
                        按比例
                      </button>
                      <button
                        type="button"
                        className={`allocation-rule-form__type-btn ${target.fixedAmount !== undefined ? 'allocation-rule-form__type-btn--active' : ''}`}
                        onClick={() => handleAllocationTypeChange(index, 'fixed')}
                        disabled={isLoading}
                      >
                        固定金额
                      </button>
                    </div>
                  </div>

                  {/* Percentage or Fixed Amount Input */}
                  {target.percentage !== undefined ? (
                    <div className="allocation-rule-form__target-field">
                      <label className="allocation-rule-form__label">分配比例 (%)</label>
                      <input
                        type="number"
                        value={target.percentage ?? ''}
                        onChange={(e) => handleTargetChange(index, 'percentage', e.target.value)}
                        className="allocation-rule-form__input"
                        placeholder="0"
                        min="0"
                        max="100"
                        step="0.01"
                        disabled={isLoading}
                      />
                    </div>
                  ) : (
                    <div className="allocation-rule-form__target-field">
                      <label className="allocation-rule-form__label">固定金额</label>
                      <input
                        type="number"
                        value={target.fixedAmount ?? ''}
                        onChange={(e) => handleTargetChange(index, 'fixedAmount', e.target.value)}
                        className="allocation-rule-form__input"
                        placeholder="0.00"
                        min="0"
                        step="0.01"
                        disabled={isLoading}
                      />
                    </div>
                  )}

                  {errors[`target_${index}`] && (
                    <span className="allocation-rule-form__error">{errors[`target_${index}`]}</span>
                  )}
                </div>
              ))}
            </div>
          )}

          {/* Total Percentage Display */}
          {totalPercentage > 0 && (
            <div className="allocation-rule-form__total">
              <span className="allocation-rule-form__total-label">总分配比例：</span>
              <span
                className={`allocation-rule-form__total-value ${totalPercentage > 100 ? 'allocation-rule-form__total-value--error' : ''}`}
              >
                {totalPercentage.toFixed(2)}%
              </span>
              {totalPercentage < 100 && (
                <span className="allocation-rule-form__total-hint">
                  （剩余 {(100 - totalPercentage).toFixed(2)}% 将保留在原账户）
                </span>
              )}
            </div>
          )}
        </div>
      </div>

      <div className="allocation-rule-form__footer">
        <button
          type="button"
          onClick={onCancel}
          className="allocation-rule-form__button allocation-rule-form__button--cancel"
          disabled={isLoading}
        >
          取消
        </button>
        <button
          type="submit"
          className="allocation-rule-form__button allocation-rule-form__button--submit"
          disabled={isLoading}
        >
          {isLoading ? '保存中...' : allocationRule ? '更新规则' : '创建规则'}
        </button>
      </div>
    </form>
  );
};

export default AllocationRuleForm;