import { useState } from 'react';
import { Button, Checkbox, Field, Input, Select } from '../components/ui.jsx';
import { Icon, PageTitle, Toolbar, Panel, ApiNotice, Modal, ConfirmDialog, SimpleTable } from '../components/layout.jsx';
import { vendors, gateways } from '../fixtures/devFixtures.js';
import { explainApiError } from '../api.js';

export function VendorGatewaysPage({ gatewayRows: apiGatewayRows, setGatewayRows: setApiGatewayRows, vendorRows: apiVendorRows, apiLoading, apiError, refreshApi, can = () => true, onUpdateGateway, onToggleGatewayStatus, onDeleteGateway }) {
  const [localGatewayRows, setLocalGatewayRows] = useState(gateways);
  const gatewayRows = Array.isArray(apiGatewayRows) ? apiGatewayRows : localGatewayRows;
  const setGatewayRows = setApiGatewayRows || setLocalGatewayRows;
  const vendorOptions = apiVendorRows?.length ? apiVendorRows : vendors;
  const [actionError, setActionError] = useState('');
  const [editingGateway, setEditingGateway] = useState(null);
  const [gatewayConfirm, setGatewayConfirm] = useState(null);
  const provinceOptions = ['北京', '上海', '广东', '浙江', '江苏', '新疆', '西藏', '港澳台', '海外'];
  const codecOptions = ['PCMA', 'PCMU', 'G729', 'G722', 'OPUS'];
  const canManage = can('vendor_gateways.manage');
  const splitList = (value) => (value && !['无', '-'].includes(value) ? value.split(/[,，、]/).map((item) => item.trim()).filter(Boolean) : []);
  const splitTimeRanges = (value) => {
    const ranges = String(value || '')
      .split(/[,，、\n]/)
      .map((item) => {
        const [start = '', end = ''] = item.split('-').map((part) => part.trim());
        return { start, end };
      })
      .filter((item) => item.start || item.end);
    return ranges.length ? ranges : [{ start: '', end: '' }];
  };
  const splitRate = (value) => String(value || '').replace(/[^\d]/g, '');
  const formatMinuteRate = (cycle, rate) => {
    const billingCycle = Number(cycle);
    const cycleRate = Number(rate);
    if (!billingCycle || !Number.isFinite(billingCycle) || !Number.isFinite(cycleRate)) return '-';
    return `¥${((cycleRate * 60) / billingCycle).toFixed(4)}/分钟`;
  };
  const rewritePoolRows = (value) => {
    const rows = Array.isArray(value) ? value.map((item) => ({ caller: item.caller || '', weight: String(item.weight || 1) })) : [];
    return rows.length ? rows : [{ caller: '', weight: '1' }];
  };
  const emptyGatewayForm = {
    vendor: vendorOptions[0]?.name || '',
    name: '',
    authMode: 'IP',
    ipAddress: '',
    sipAccount: '',
    sipPassword: '',
    concurrencyLimit: '',
    billingCycle: '60',
    cycleRate: '',
    requestRate: '',
    blockedProvinces: [],
    forbiddenPeriods: [{ start: '', end: '' }],
    codecs: [],
    landingCalleePrefix: '',
    callerRewritePool: [{ caller: '', weight: '1' }],
  };
  const [gatewayForm, setGatewayForm] = useState(emptyGatewayForm);
  const openEditGateway = (gateway) => {
    setEditingGateway(gateway);
    const rateValue = splitRate(gateway.requestRate);
    setGatewayForm({
      vendor: gateway.vendor,
      name: gateway.name,
      authMode: gateway.authMode,
      ipAddress: gateway.ipAddress || '',
      sipAccount: gateway.sipAccount || '',
      sipPassword: gateway.sipPassword || '',
      concurrencyLimit: String(gateway.concurrencyLimit),
      billingCycle: String(gateway.billingCycle || 60),
      cycleRate: String(gateway.cycleRate ?? ''),
      requestRate: rateValue,
      blockedProvinces: splitList(gateway.blockedProvinces),
      forbiddenPeriods: splitTimeRanges(gateway.callTimeLimit),
      codecs: splitList(gateway.codecs),
      landingCalleePrefix: gateway.landingCalleePrefix || '',
      callerRewritePool: rewritePoolRows(gateway.callerRewritePool),
    });
  };
  const closeEditGateway = () => {
    setEditingGateway(null);
    setGatewayForm(emptyGatewayForm);
  };
  const submitGateway = async (event) => {
    event.preventDefault();
    if (!editingGateway || !gatewayForm.name.trim() || !gatewayForm.concurrencyLimit || !gatewayForm.billingCycle || !gatewayForm.cycleRate || !gatewayForm.requestRate) return;
    const billingCycle = Number(gatewayForm.billingCycle);
    const cycleRate = Number(gatewayForm.cycleRate);
    const cpsLimit = Number(gatewayForm.requestRate);
    if (!Number.isFinite(billingCycle) || billingCycle <= 0 || billingCycle > 60 || !Number.isFinite(cycleRate) || cycleRate < 0) return;
    if (!Number.isInteger(cpsLimit) || cpsLimit < 1 || cpsLimit > 10000) return;
    const ipAddress = gatewayForm.ipAddress.trim();
    const sipAccount = gatewayForm.sipAccount.trim();
    const sipPassword = gatewayForm.sipPassword.trim();
    const authValid = gatewayForm.authMode === 'IP' ? ipAddress : ipAddress && sipAccount;
    if (!authValid) return;
    const vendorId = vendorOptions.find((vendor) => vendor.name === gatewayForm.vendor)?.id || editingGateway.vendorId;
    const callerRewritePool = gatewayForm.callerRewritePool
      .map((item) => ({ caller: item.caller.trim(), weight: Number(item.weight || 1), status: 'ENABLED' }))
      .filter((item) => item.caller);
    const body = {
      vendorId,
      name: gatewayForm.name.trim(),
      authMode: gatewayForm.authMode === 'SIP注册' ? 'SIP_DIGEST' : gatewayForm.authMode,
      host: ipAddress,
      port: editingGateway.port || 5060,
      transport: editingGateway.transport || 'udp',
      sipUsername: sipAccount || undefined,
      cpsLimit,
      concurrencyLimit: Number(gatewayForm.concurrencyLimit),
      billingCycleSec: billingCycle,
      cycleRate: String(cycleRate),
      landingCalleePrefix: gatewayForm.landingCalleePrefix.trim() || null,
      callerRewritePool,
      forbiddenPeriods: gatewayForm.forbiddenPeriods
        .filter((period) => period.start || period.end)
        .map((period) => ({ weekdayMask: 127, startTime: `${period.start || '00:00'}:00`, endTime: `${period.end || '23:59'}:00` })),
      codecs: gatewayForm.codecs.map((codec, index) => ({ codec, priority: index + 1 })),
      prefixRules: [],
    };
    if (sipPassword) {
      body.sipPassword = sipPassword;
    }
    setActionError('');
    try {
      if (onUpdateGateway) {
        await onUpdateGateway(editingGateway.id, body);
      } else {
        setGatewayRows((rows) => rows.map((gateway) => (
          gateway.id === editingGateway.id
            ? {
                ...gateway,
                vendor: gatewayForm.vendor,
                vendorId,
                name: body.name,
                authMode: gatewayForm.authMode,
                ipAddress,
                sipAccount,
                sipPassword: sipPassword ? '******' : gateway.sipPassword,
                concurrencyLimit: body.concurrencyLimit,
                billingCycle,
                cycleRate,
                requestRate: cpsLimit,
                blockedProvinces: gatewayForm.blockedProvinces.length ? gatewayForm.blockedProvinces.join('、') : '无',
                callTimeLimit: gatewayForm.forbiddenPeriods
                  .filter((period) => period.start || period.end)
                  .map((period) => `${period.start || '00:00'}-${period.end || '23:59'}`)
                  .join('、') || '无',
                codecs: gatewayForm.codecs.length ? gatewayForm.codecs.join(', ') : '-',
                landingCalleePrefix: body.landingCalleePrefix || '',
                callerRewritePool,
                calleePrefixTransform: '-',
                callerPrefixTransform: '-',
              }
            : gateway
        )));
      }
      closeEditGateway();
    } catch (error) {
      setActionError(explainApiError(error));
    }
  };
  const toggleArrayValue = (field, value) => {
    setGatewayForm((form) => ({
      ...form,
      [field]: form[field].includes(value) ? form[field].filter((item) => item !== value) : [...form[field], value],
    }));
  };
  const updateCallerRewrite = (index, key, value) => {
    setGatewayForm((form) => ({
      ...form,
      callerRewritePool: form.callerRewritePool.map((rule, ruleIndex) => (ruleIndex === index ? { ...rule, [key]: value } : rule)),
    }));
  };
  const addCallerRewrite = () => {
    setGatewayForm((form) => ({ ...form, callerRewritePool: [...form.callerRewritePool, { caller: '', weight: '1' }] }));
  };
  const removeCallerRewrite = (index) => {
    setGatewayForm((form) => ({
      ...form,
      callerRewritePool: form.callerRewritePool.length > 1 ? form.callerRewritePool.filter((_, ruleIndex) => ruleIndex !== index) : [{ caller: '', weight: '1' }],
    }));
  };
  const updateForbiddenPeriod = (index, key, value) => {
    setGatewayForm((form) => ({
      ...form,
      forbiddenPeriods: form.forbiddenPeriods.map((period, periodIndex) => (
        periodIndex === index ? { ...period, [key]: value } : period
      )),
    }));
  };
  const addForbiddenPeriod = () => {
    setGatewayForm((form) => ({ ...form, forbiddenPeriods: [...form.forbiddenPeriods, { start: '', end: '' }] }));
  };
  const removeForbiddenPeriod = (index) => {
    setGatewayForm((form) => ({
      ...form,
      forbiddenPeriods: form.forbiddenPeriods.length > 1 ? form.forbiddenPeriods.filter((_, periodIndex) => periodIndex !== index) : [{ start: '', end: '' }],
    }));
  };
  const toggleVendorGatewayStatus = async (gateway) => {
    setActionError('');
    try {
      if (onToggleGatewayStatus) {
        await onToggleGatewayStatus(gateway);
        return;
      }
      setGatewayRows((rows) => rows.map((item) => (
        item.id === gateway.id ? { ...item, status: item.status === '启用' ? '禁用' : '启用' } : item
      )));
    } catch (error) {
      setActionError(explainApiError(error));
    }
  };
  const deleteVendorGateway = async (gateway) => {
    setActionError('');
    try {
      if (onDeleteGateway) {
        await onDeleteGateway(gateway.id);
        return;
      }
      setGatewayRows((rows) => rows.filter((item) => item.id !== gateway.id));
    } catch (error) {
      setActionError(explainApiError(error));
    }
  };

  return (
    <>
      <PageTitle title="落地网关管理" desc="管理供应商落地网关认证、并发、价格和号码限制策略。" actions={canManage ? <Button icon={<Icon type="plus" />}>新增落地网关</Button> : null} />
      <ApiNotice loading={apiLoading} error={apiError || actionError} onRetry={refreshApi} />
      <Toolbar>
        <Field label="供应商"><Select defaultValue="all"><option value="all">全部供应商</option>{vendorOptions.map((vendor) => <option key={vendor.id}>{vendor.name}</option>)}</Select></Field>
        <Field label="落地网关名称"><Input placeholder="搜索网关名称" /></Field>
        <Button icon={<Icon type="search" />}>查询</Button>
      </Toolbar>
      <section className="content-grid">
        <Panel title="落地网关列表" className="wide-panel">
          <SimpleTable loading={apiLoading} rows={gatewayRows} columns={[
            { key: 'vendor', label: '供应商名称', width: '156px', className: 'table-cell-compact' },
            { key: 'name', label: '落地网关名称', width: '168px', className: 'table-cell-compact' },
            { key: 'authMode', label: '认证方式' },
            { key: 'authTarget', label: 'IP/账号', render: (row) => (row.authMode === 'IP' ? row.ipAddress : row.sipAccount) },
            { key: 'requestRate', label: 'CPS' },
            { key: 'concurrencyLimit', label: '并发上限' },
            { key: 'minuteRate', label: '价格', render: (row) => formatMinuteRate(row.billingCycle, row.cycleRate) },
            { key: 'landingCalleePrefix', label: '落地被叫前缀', render: (row) => row.landingCalleePrefix || '-' },
            { key: 'callerRewriteCount', label: '指定主叫数', render: (row) => (row.callerRewritePool || []).length },
            { key: 'status', label: '状态', status: true },
            {
              key: 'actions',
              label: '操作',
              render: (row) => (
                <div className="table-actions">
                  {canManage ? <Button size="sm" variant="outline" onClick={() => openEditGateway(row)}>编辑</Button> : null}
                  {canManage ? (
                    <Button size="sm" variant={row.status === '启用' ? 'ghost' : 'secondary'} onClick={() => setGatewayConfirm({ type: 'toggle', row })}>
                      {row.status === '启用' ? '禁用' : '启用'}
                    </Button>
                  ) : null}
                  {canManage ? <Button size="sm" variant="danger" onClick={() => setGatewayConfirm({ type: 'delete', row })}>删除</Button> : '-'}
                </div>
              ),
            },
          ]} />
        </Panel>
      </section>
      {editingGateway ? (
        <Modal title="编辑落地网关" onClose={closeEditGateway} size="lg">
          <form className="modal-form" onSubmit={submitGateway}>
            <div className="match-grid">
              <Field label={<span>供应商名称 <span className="required-star">*</span></span>}>
                <Select value={gatewayForm.vendor} onChange={(event) => setGatewayForm({ ...gatewayForm, vendor: event.target.value })} required>
                  {vendorOptions.map((vendor) => <option key={vendor.id}>{vendor.name}</option>)}
                </Select>
              </Field>
              <Field label={<span>落地网关名称 <span className="required-star">*</span></span>}>
                <Input value={gatewayForm.name} onChange={(event) => setGatewayForm({ ...gatewayForm, name: event.target.value })} placeholder="请输入落地网关名称" required />
              </Field>
              <Field label={<span>认证方式 <span className="required-star">*</span></span>}>
                <Select value={gatewayForm.authMode} onChange={(event) => setGatewayForm({ ...gatewayForm, authMode: event.target.value, ipAddress: '', sipAccount: '', sipPassword: '' })} required>
                  <option>IP</option>
                  <option>SIP注册</option>
                </Select>
              </Field>
              <Field label={<span>落地主机/IP <span className="required-star">*</span></span>}>
                <Input value={gatewayForm.ipAddress} onChange={(event) => setGatewayForm({ ...gatewayForm, ipAddress: event.target.value })} placeholder="例如 203.0.113.18 或 sip.carrier.local" required />
              </Field>
              {gatewayForm.authMode !== 'IP' ? (
                <>
                  <Field label={<span>SIP账号 <span className="required-star">*</span></span>}>
                    <Input value={gatewayForm.sipAccount} onChange={(event) => setGatewayForm({ ...gatewayForm, sipAccount: event.target.value })} placeholder="请输入 SIP 账号" required />
                  </Field>
                  <Field label="SIP密码（留空不修改）">
                    <Input type="password" value={gatewayForm.sipPassword} onChange={(event) => setGatewayForm({ ...gatewayForm, sipPassword: event.target.value })} placeholder="至少 12 位" />
                  </Field>
                </>
              ) : null}
              <Field label={<span>并发上限 <span className="required-star">*</span></span>}>
                <Input type="number" min="1" value={gatewayForm.concurrencyLimit} onChange={(event) => setGatewayForm({ ...gatewayForm, concurrencyLimit: event.target.value })} placeholder="例如 800" required />
              </Field>
              <div className="rate-config-card">
                <div className="rate-config-head">
                  <strong>费率配置</strong>
                  <span>{formatMinuteRate(gatewayForm.billingCycle, gatewayForm.cycleRate)}</span>
                </div>
                <div className="rate-config-fields">
                  <Field label={<span>计费周期 <span className="required-star">*</span></span>}>
                    <Input type="number" min="1" max="60" value={gatewayForm.billingCycle} onChange={(event) => setGatewayForm({ ...gatewayForm, billingCycle: event.target.value })} placeholder="最大 60 秒" required />
                  </Field>
                  <Field label={<span>周期费率 <span className="required-star">*</span></span>}>
                    <Input type="number" min="0" step="0.0001" value={gatewayForm.cycleRate} onChange={(event) => setGatewayForm({ ...gatewayForm, cycleRate: event.target.value })} placeholder="例如 0.02" required />
                  </Field>
                </div>
              </div>
              <Field label={<span>CPS <span className="required-star">*</span></span>}>
                <Input type="number" min="1" max="10000" step="1" value={gatewayForm.requestRate} onChange={(event) => setGatewayForm({ ...gatewayForm, requestRate: event.target.value })} placeholder="1-10000" required />
              </Field>
              <div className="config-card">
                <strong>屏蔽省份</strong>
                <div className="option-grid">
                  {provinceOptions.map((province) => (
                    <Checkbox key={province} label={province} checked={gatewayForm.blockedProvinces.includes(province)} onChange={() => toggleArrayValue('blockedProvinces', province)} />
                  ))}
                </div>
              </div>
              <div className="config-card">
                <div className="config-card-head">
                  <strong>禁呼时段</strong>
                  <Button type="button" size="sm" variant="outline" onClick={addForbiddenPeriod}>添加时段</Button>
                </div>
                <div className="rule-list">
                  {gatewayForm.forbiddenPeriods.map((period, index) => (
                    <div className="time-range" key={`forbidden-${index}`}>
                      <Input type="time" value={period.start} onChange={(event) => updateForbiddenPeriod(index, 'start', event.target.value)} />
                      <span>至</span>
                      <Input type="time" value={period.end} onChange={(event) => updateForbiddenPeriod(index, 'end', event.target.value)} />
                      <Button type="button" size="sm" variant="danger" onClick={() => removeForbiddenPeriod(index)}>删除</Button>
                    </div>
                  ))}
                </div>
              </div>
              <div className="config-card">
                <strong>语音编码限制</strong>
                <div className="option-grid">
                  {codecOptions.map((codec) => (
                    <Checkbox key={codec} label={codec} checked={gatewayForm.codecs.includes(codec)} onChange={() => toggleArrayValue('codecs', codec)} />
                  ))}
                </div>
              </div>
              <div className="config-card config-card-wide">
                <strong>落地要求被叫前缀</strong>
                <Input value={gatewayForm.landingCalleePrefix} onChange={(event) => setGatewayForm({ ...gatewayForm, landingCalleePrefix: event.target.value })} placeholder="可为空，例如 86 或 ABC" />
              </div>
              <div className="config-card config-card-wide">
                <div className="config-card-head">
                  <strong>落地要求指定主叫</strong>
                  <Button type="button" size="sm" variant="outline" onClick={addCallerRewrite}>添加号码</Button>
                </div>
                <div className="rule-list">
                  {gatewayForm.callerRewritePool.map((rule, index) => (
                    <div className="prefix-rule" key={`caller-${index}`}>
                      <Input value={rule.caller} onChange={(event) => updateCallerRewrite(index, 'caller', event.target.value)} placeholder="指定主叫，如 02160010001" />
                      <span>权重</span>
                      <Input type="number" min="1" value={rule.weight} onChange={(event) => updateCallerRewrite(index, 'weight', event.target.value)} />
                      <Button type="button" size="sm" variant="danger" onClick={() => removeCallerRewrite(index)}>删除</Button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="modal-actions">
              <Button type="button" variant="outline" onClick={closeEditGateway}>取消</Button>
              <Button type="submit">保存修改</Button>
            </div>
          </form>
        </Modal>
      ) : null}
      {gatewayConfirm ? (
        <ConfirmDialog
          title={gatewayConfirm.type === 'delete' ? '删除落地网关确认' : `${gatewayConfirm.row.status === '启用' ? '禁用' : '启用'}落地网关确认`}
          confirmLabel={gatewayConfirm.type === 'delete' ? '确认删除' : `确认${gatewayConfirm.row.status === '启用' ? '禁用' : '启用'}`}
          confirmVariant={gatewayConfirm.type === 'delete' ? 'danger' : 'primary'}
          onCancel={() => setGatewayConfirm(null)}
          onConfirm={() => {
            const { type, row } = gatewayConfirm;
            setGatewayConfirm(null);
            return type === 'delete' ? void deleteVendorGateway(row) : void toggleVendorGatewayStatus(row);
          }}
        >
          {gatewayConfirm.type === 'delete' ? (
            <p>确认删除落地网关「{gatewayConfirm.row.name}」吗？删除后该网关将不再参与落地。</p>
          ) : (
            <p>确认{gatewayConfirm.row.status === '启用' ? '禁用' : '启用'}落地网关「{gatewayConfirm.row.name}」吗？</p>
          )}
        </ConfirmDialog>
      ) : null}
    </>
  );
}