import { useState } from 'react';
import { Button, Input, Modal, Select } from '@/components/ui';
import { isValidMoneyInput, moneyUnitsToYuan, yuanToMoneyUnits } from '@/utils/currency';
import { baseCarrierOptions, cmppVersionOptions, regionOptions } from './channelModel';
import type { BaseCarrier, ChannelModalState, LongMessageReceiptMode, SmsChannel } from './channelTypes';

export function ChannelFormModal({
  modal,
  onClose,
  onSubmit,
}: {
  modal: ChannelModalState;
  onClose: () => void;
  onSubmit: (channel: SmsChannel) => void;
}) {
  const channel = modal.channel;
  const [name, setName] = useState(channel?.name ?? '');
  const [carriers, setCarriers] = useState<BaseCarrier[]>(channel?.carriers ?? ['mobile']);
  const [carrierError, setCarrierError] = useState('');
  const [unitPrice, setUnitPrice] = useState(channel ? moneyUnitsToYuan(channel.unitPrice).toFixed(4) : '0.0300');
  const [unitPriceError, setUnitPriceError] = useState('');
  const [region, setRegion] = useState(channel?.sendRegion ?? '全国');
  const [gatewayHost, setGatewayHost] = useState(channel?.gatewayHost ?? '');
  const [gatewayPort, setGatewayPort] = useState(channel?.gatewayPort ?? '7890');
  const [businessCode, setBusinessCode] = useState(channel?.businessCode ?? 'SMS');
  const [corpCode, setCorpCode] = useState(channel?.corpCode ?? '');
  const [account, setAccount] = useState(channel?.account ?? '');
  const [cmppVersion, setCmppVersion] = useState<'2.0' | '3.0'>(channel?.cmppVersion ?? '2.0');
  const [password, setPassword] = useState('');
  const [accessNo, setAccessNo] = useState(channel?.accessNo ?? '');
  const [extensionDigits, setExtensionDigits] = useState(String(channel?.extensionDigits ?? 0));
  const [flowLimit, setFlowLimit] = useState(String(channel?.rateLimitPerSecond ?? 100));
  const [desiredConnections, setDesiredConnections] = useState(String(channel?.desiredConnections ?? 1));
  const [windowSize, setWindowSize] = useState(String(channel?.windowSize ?? 16));
  const [heartbeatIntervalSeconds, setHeartbeatIntervalSeconds] = useState(
    String(channel?.heartbeatIntervalSeconds ?? 30),
  );
  const [heartbeatMissThreshold, setHeartbeatMissThreshold] = useState(String(channel?.heartbeatMissThreshold ?? 3));
  const [longMessageReceiptMode, setLongMessageReceiptMode] = useState<LongMessageReceiptMode>(
    channel?.longMessageReceiptMode ?? 'per_segment',
  );

  function submit() {
    if (carriers.length === 0) {
      setCarrierError('至少选择一个运营商');
      return;
    }
    if (!isValidMoneyInput(unitPrice)) {
      setUnitPriceError('单价必须是非负金额，且最多保留小数点后 4 位');
      return;
    }
    onSubmit({
      id: channel?.id ?? String(Math.floor(10000 + Math.random() * 80000)),
      name: name || '新建短信通道',
      carrier: carriers.length === 3 ? 'all' : carriers[0],
      carriers,
      sendRegion: region,
      unitPrice: yuanToMoneyUnits(unitPrice),
      status: channel?.status ?? 'connecting',
      total: channel?.total ?? 0,
      submitFailureRate: channel?.submitFailureRate ?? 0,
      submitFailureCount: channel?.submitFailureCount ?? 0,
      successRate: channel?.successRate ?? 0,
      successCount: channel?.successCount ?? 0,
      unknownRate: channel?.unknownRate ?? 0,
      unknownCount: channel?.unknownCount ?? 0,
      failureRate: channel?.failureRate ?? 0,
      failureCount: channel?.failureCount ?? 0,
      gatewayHost,
      gatewayPort,
      businessCode: businessCode.trim() || 'SMS',
      corpCode,
      account,
      accessNo,
      cmppVersion,
      desiredConnections: Number(desiredConnections) || 1,
      windowSize: Number(windowSize) || 16,
      heartbeatIntervalSeconds: Number(heartbeatIntervalSeconds) || 30,
      heartbeatMissThreshold: Number(heartbeatMissThreshold) || 3,
      extensionDigits: Number(extensionDigits),
      longMessageReceiptMode,
      rateLimitPerSecond: Number(flowLimit),
      passwordCipher: password || undefined,
    });
  }

  return (
    <Modal
      closeOnBackdrop={modal.mode === 'edit'}
      closeOnEscape={modal.mode === 'edit'}
      footer={
        <>
          <Button onClick={onClose} variant="ghost">
            关闭
          </Button>
          <Button onClick={submit}>确认</Button>
        </>
      }
      onClose={onClose}
      open
      size="xl"
      title={
        <div className="template-modal-title">
          <h2>{modal.mode === 'edit' ? '编辑通道' : '创建通道'}</h2>
        </div>
      }
    >
      <div className="sms-channel-form">
        <section>
          <h3>业务信息</h3>
          <div className="sms-channel-form-grid">
            <Input
              label="* 通道名称"
              onChange={(event) => setName(event.target.value)}
              placeholder="请输入通道名称"
              value={name}
            />
            <div className="sms-channel-radio-row">
              <span>* 运营商</span>
              {baseCarrierOptions.map((item) => (
                <label key={item.value}>
                  <input
                    checked={carriers.includes(item.value)}
                    onChange={() => {
                      setCarriers((current) =>
                        current.includes(item.value)
                          ? current.filter((carrier) => carrier !== item.value)
                          : [...current, item.value],
                      );
                      setCarrierError('');
                    }}
                    type="checkbox"
                  />
                  {item.label}
                </label>
              ))}
              {carrierError ? <small className="form-error">{carrierError}</small> : null}
            </div>
            <Input
              error={unitPriceError}
              label="* 单价（元）"
              min="0"
              onChange={(event) => {
                setUnitPrice(event.target.value);
                setUnitPriceError('');
              }}
              step="0.0001"
              type="number"
              value={unitPrice}
            />
            <Select
              label="* 发送地区"
              onChange={(event) => setRegion(event.target.value)}
              options={regionOptions}
              value={region}
            />
          </div>
        </section>

        <section>
          <h3>参数配置</h3>
          <div className="sms-channel-form-grid">
            <Input disabled label="* 协议选择" value="CMPP" />
            <div className="sms-channel-inline-field">
              <Input
                label="* 网关地址"
                onChange={(event) => setGatewayHost(event.target.value)}
                placeholder="请输入网关地址"
                value={gatewayHost}
              />
              <Input label="端口" onChange={(event) => setGatewayPort(event.target.value)} value={gatewayPort} />
            </div>
            <Input
              hint="对应 CMPP Service_Id，最多 10 个 ASCII 字符。"
              label="* 业务代码"
              maxLength={10}
              onChange={(event) => setBusinessCode(event.target.value.toUpperCase())}
              value={businessCode}
            />
            <Input
              label="* 企业代码"
              onChange={(event) => setCorpCode(event.target.value)}
              placeholder="请输入企业代码"
              value={corpCode}
            />
            <Input
              label="* 网关账号"
              onChange={(event) => setAccount(event.target.value)}
              placeholder="请输入网关账号"
              value={account}
            />
            <Select
              label="* CMPP版本"
              onChange={(event) => setCmppVersion(event.target.value as '2.0' | '3.0')}
              options={cmppVersionOptions}
              value={cmppVersion}
            />
            <Input
              hint={modal.mode === 'edit' ? '已配置的密码不会回显；留空保持不变，填写新密码才更新。' : undefined}
              label="网关密码"
              autoComplete="new-password"
              name="cmpp-gateway-password"
              onChange={(event) => setPassword(event.target.value)}
              placeholder={modal.mode === 'edit' ? '留空不修改' : '请输入网关密码'}
              required={modal.mode === 'create'}
              type="password"
              value={password}
            />
            <div className="sms-channel-inline-field">
              <Input
                autoComplete="off"
                label="* 接入号"
                name="cmpp-access-number"
                onChange={(event) => setAccessNo(event.target.value)}
                placeholder="请输入通道接入号"
                value={accessNo}
              />
              <Input
                label="扩展位数"
                max="20"
                min="0"
                onChange={(event) => setExtensionDigits(event.target.value)}
                type="number"
                value={extensionDigits}
              />
            </div>
            <Input
              label="* 通道流速"
              max="2000"
              min="1"
              onChange={(event) => setFlowLimit(event.target.value)}
              suffix="条/秒"
              type="number"
              value={flowLimit}
            />
            <Input
              label="* 期望连接数"
              onChange={(event) => setDesiredConnections(event.target.value)}
              placeholder="1"
              value={desiredConnections}
            />
            <Input
              label="* 提交窗口"
              onChange={(event) => setWindowSize(event.target.value)}
              placeholder="16"
              value={windowSize}
            />
            <Input
              hint="平台主动向供应商发送 ACTIVE_TEST 的间隔"
              label="* 心跳间隔"
              min="1"
              onChange={(event) => setHeartbeatIntervalSeconds(event.target.value)}
              suffix="秒"
              type="number"
              value={heartbeatIntervalSeconds}
            />
            <Input
              hint="连续未收到心跳响应达到该次数后重连"
              label="* 心跳失败阈值"
              min="1"
              onChange={(event) => setHeartbeatMissThreshold(event.target.value)}
              suffix="次"
              type="number"
              value={heartbeatMissThreshold}
            />
            <Select
              label="* 长短信成功回执口径"
              onChange={(event) => setLongMessageReceiptMode(event.target.value as LongMessageReceiptMode)}
              options={[
                { label: '逐分片回执（默认）', value: 'per_segment' },
                { label: '整条级回执（一条成功代表全部成功）', value: 'message_level' },
              ]}
              value={longMessageReceiptMode}
            />
            <p className="page-inline-hint">
              仅在供应商明确约定长短信成功只返回一条整条级回执时选择“整条级”，否则保持逐分片。
            </p>
          </div>
        </section>
      </div>
    </Modal>
  );
}