Genarrative/apps/admin-web/src/pages/AdminGrayReleaseConfigPage.tsx

import {
  AdminActionRow,
  AdminAlert,
  AdminButton,
  AdminField,
  AdminFormRow,
  AdminListPanel,
  AdminPage,
  AdminPageHeading,
  AdminPanel,
  formatAdminDateTime,
} from '@genarrative/shared/components';
import { Plus, RefreshCcw, Save } from 'lucide-react';
import { type FormEvent, useEffect, useState } from 'react';

import {
  getAdminFeatureGateConfig,
  upsertAdminFeatureGateConfig,
} from '../api/adminApiClient';
import type {
  AdminFeatureGateConfigPayload,
  AdminUpsertFeatureGateConfigRequest,
} from '../api/adminApiTypes';
import { useAdminWriteConfirm } from '../components/useAdminWriteConfirm';
import { handlePageError, splitLines } from './pageUtils';

interface AdminGrayReleaseConfigPageProps {
  token: string;
  onUnauthorized: (message?: string) => void;
}

interface GateTargetOption {
  prefix: string;
  suffix: string;
  key: string;
  label: string;
  description: string;
}

const GATE_PREFIX_LABELS: Record<string, string> = {
  'image-editor': '画布',
  agc: '客户端',
  'game-distribution': '游戏分发',
};

const FIXED_GATE_TARGETS: GateTargetOption[] = [
  {
    prefix: 'agc',
    suffix: 'template-library',
    key: 'agc:template-library',
    label: '模板库',
    description: '客户端模板库灰度',
  },
  {
    prefix: 'image-editor',
    suffix: 'agent-sidebar',
    key: 'image-editor:agent-sidebar',
    label: 'Agent 侧边栏',
    description: '画布 Agent 入口灰度',
  },
  {
    prefix: 'game-distribution',
    suffix: 'publish',
    key: 'game-distribution:publish',
    label: '游戏发布',
    description:
      '游戏发布入口灰度：未配置或关闭时对已登录作者默认开放，开启后只放行白名单 / 灰度命中',
  },
];

export function AdminGrayReleaseConfigPage({
  token,
  onUnauthorized,
}: AdminGrayReleaseConfigPageProps) {
  const [gates, setGates] = useState<AdminFeatureGateConfigPayload[]>([]);
  const [selectedGateKey, setSelectedGateKey] = useState('');
  const [gatePrefix, setGatePrefix] = useState('');
  const [gateKey, setGateKey] = useState('');
  const [enabled, setEnabled] = useState(false);
  const [rolloutPercent, setRolloutPercent] = useState('0');
  const [allowUserIds, setAllowUserIds] = useState('');
  const [allowUserTags, setAllowUserTags] = useState('');
  const [denyUserIds, setDenyUserIds] = useState('');
  const [description, setDescription] = useState('');
  const [listErrorMessage, setListErrorMessage] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const { confirmWrite, confirmDialog } = useAdminWriteConfirm();

  useEffect(() => {
    void refreshFeatureGates();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  async function refreshFeatureGates() {
    const requestToken = token.trim();
    if (!requestToken) {
      setGates([]);
      setListErrorMessage('');
      setIsLoading(false);
      return;
    }

    setIsLoading(true);
    setListErrorMessage('');
    try {
      const featureGateResponse = await getAdminFeatureGateConfig(requestToken);
      setGates(featureGateResponse.gates);
      const selectedGate = featureGateResponse.gates.find(
        (gate) => gate.gateKey === selectedGateKey,
      );
      if (selectedGate) {
        fillForm(selectedGate);
      }
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setListErrorMessage);
    } finally {
      setIsLoading(false);
    }
  }

  async function handleSave(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const requestToken = token.trim();
    if (isSaving || !requestToken) {
      return;
    }

    setErrorMessage('');
    const payload = buildPayload();
    const confirmed = await confirmWrite({
      action: '保存灰度配置',
      target: payload.gateKey,
    });
    if (!confirmed) {
      return;
    }

    setIsSaving(true);
    try {
      const response = await upsertAdminFeatureGateConfig(
        requestToken,
        payload,
      );
      setGates(response.gates);
      const savedGate = response.gates.find(
        (gate) => gate.gateKey === payload.gateKey,
      );
      if (savedGate) {
        fillForm(savedGate);
      } else {
        setSelectedGateKey(payload.gateKey);
      }
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setIsSaving(false);
    }
  }

  function handleGatePrefixSelect(
    nextPrefix: string,
    gateTargetOptions: GateTargetOption[],
  ) {
    setGatePrefix(nextPrefix);
    if (!nextPrefix) {
      setSelectedGateKey('');
      setGateKey('');
      return;
    }

    const nextOptions = gateTargetOptions.filter(
      (option) => option.prefix === nextPrefix,
    );
    const onlyOption = nextOptions[0];
    if (nextOptions.length === 1 && onlyOption) {
      applyGateTarget(onlyOption);
      return;
    }

    setSelectedGateKey('');
    setGateKey('');
  }

  function handleGateTargetSelect(
    suffix: string,
    gateTargetOptions: GateTargetOption[],
  ) {
    if (!gatePrefix || !suffix) {
      return;
    }

    const option = gateTargetOptions.find(
      (item) => item.prefix === gatePrefix && item.suffix === suffix,
    );
    if (option) {
      applyGateTarget(option);
    }
  }

  function applyGateTarget(option: GateTargetOption) {
    const existingGate = gates.find((gate) => gate.gateKey === option.key);
    if (existingGate) {
      fillForm(existingGate);
      return;
    }

    setSelectedGateKey('');
    setGatePrefix(option.prefix);
    setGateKey(option.key);
    setEnabled(option.key === 'agc:template-library');
    setRolloutPercent('0');
    setAllowUserIds('');
    setAllowUserTags('');
    setDenyUserIds('');
    setDescription(option.description);
    setErrorMessage('');
  }

  // 预设里尚未创建行的开关也要可见：运营需要先看到 key 才能配置灰度。
  const unconfiguredGateTargets = FIXED_GATE_TARGETS.filter(
    (option) => !gates.some((gate) => gate.gateKey === option.key),
  );

  function buildPayload(): AdminUpsertFeatureGateConfigRequest {
    return {
      gateKey: gateKey.trim(),
      enabled,
      rolloutPercent: parseRolloutPercent(rolloutPercent),
      allowUserIds: splitLines(allowUserIds),
      allowUserTags: splitLines(allowUserTags),
      denyUserIds: splitLines(denyUserIds),
      description: description.trim(),
    };
  }

  function fillForm(entry: AdminFeatureGateConfigPayload) {
    setSelectedGateKey(entry.gateKey);
    setGatePrefix(resolveGatePrefix(entry.gateKey));
    setGateKey(entry.gateKey);
    setEnabled(entry.enabled);
    setRolloutPercent(String(entry.rolloutPercent));
    setAllowUserIds(entry.allowUserIds.join('\n'));
    setAllowUserTags(entry.allowUserTags.join('\n'));
    setDenyUserIds(entry.denyUserIds.join('\n'));
    setDescription(entry.description);
    setErrorMessage('');
  }

  function resetForm() {
    setSelectedGateKey('');
    setGatePrefix('');
    setGateKey('');
    setEnabled(false);
    setRolloutPercent('0');
    setAllowUserIds('');
    setAllowUserTags('');
    setDenyUserIds('');
    setDescription('');
    setErrorMessage('');
  }

  const canSave =
    gateKey.trim().length > 0 && isRolloutPercentInputValid(rolloutPercent);
  const gateTargetOptions = FIXED_GATE_TARGETS;
  const gatePrefixOptions = buildGatePrefixOptions(gateTargetOptions);
  const gateTargetsForPrefix = gateTargetOptions.filter(
    (option) => option.prefix === gatePrefix,
  );
  const selectedGateTargetSuffix =
    gateTargetsForPrefix.find((option) => option.key === gateKey)?.suffix ?? '';

  return (
    <AdminPage wide>
      <AdminPageHeading
        title="灰度发布"
        description="开关配置"
        actions={
          <AdminActionRow>
            <AdminButton variant="secondary" type="button" onClick={resetForm}>
              <Plus size={17} aria-hidden="true" />
              <span>新增 Gate</span>
            </AdminButton>
            <AdminButton
              variant="secondary"
              disabled={isLoading}
              type="button"
              onClick={refreshFeatureGates}
            >
              <RefreshCcw size={17} aria-hidden="true" />
              <span>{isLoading ? '刷新中' : '刷新'}</span>
            </AdminButton>
          </AdminActionRow>
        }
      />

      {listErrorMessage ? <AdminAlert>{listErrorMessage}</AdminAlert> : null}

      <div className="admin-two-column admin-two-column-wide">
        <AdminPanel as="form" onSubmit={handleSave}>
          <AdminField as="div" label="Gate Key 选择">
            <div className="admin-gate-key-selectors">
              <select
                aria-label="Gate Key 前缀"
                value={gatePrefix}
                onChange={(event) =>
                  handleGatePrefixSelect(event.target.value, gateTargetOptions)
                }
              >
                <option value="">选择前缀</option>
                {gatePrefixOptions.map((option) => (
                  <option key={option.prefix} value={option.prefix}>
                    {option.prefix}（{option.label}）
                  </option>
                ))}
              </select>
              <select
                aria-label="Gate Key 目标"
                disabled={!gatePrefix || gateTargetsForPrefix.length === 0}
                value={selectedGateTargetSuffix}
                onChange={(event) =>
                  handleGateTargetSelect(event.target.value, gateTargetOptions)
                }
              >
                <option value="">选择目标</option>
                {gateTargetsForPrefix.map((option) => (
                  <option key={option.key} value={option.suffix}>
                    {option.label}（{option.suffix}）
                  </option>
                ))}
              </select>
            </div>
          </AdminField>

          <AdminFormRow>
            <AdminField label="Gate Key" fill>
              <input
                value={gateKey}
                onChange={(event) => setGateKey(event.target.value)}
              />
            </AdminField>
            <label className="admin-switch-field">
              <input
                checked={enabled}
                type="checkbox"
                onChange={(event) => setEnabled(event.target.checked)}
              />
              <span>启用</span>
            </label>
          </AdminFormRow>

          <AdminField label="灰度比例" compact>
            <input
              max={100}
              min={0}
              step={1}
              type="number"
              value={rolloutPercent}
              onChange={(event) => setRolloutPercent(event.target.value)}
            />
          </AdminField>

          <AdminFormRow>
            <AdminField label="允许用户 ID">
              <textarea
                rows={6}
                value={allowUserIds}
                onChange={(event) => setAllowUserIds(event.target.value)}
              />
            </AdminField>
            <AdminField label="允许用户标签">
              <textarea
                rows={6}
                value={allowUserTags}
                onChange={(event) => setAllowUserTags(event.target.value)}
              />
            </AdminField>
          </AdminFormRow>

          <AdminField label="拒绝用户 ID">
            <textarea
              rows={5}
              value={denyUserIds}
              onChange={(event) => setDenyUserIds(event.target.value)}
            />
          </AdminField>

          <AdminField label="描述">
            <textarea
              rows={3}
              value={description}
              onChange={(event) => setDescription(event.target.value)}
            />
          </AdminField>

          {errorMessage ? <AdminAlert>{errorMessage}</AdminAlert> : null}

          <AdminButton
            variant="primary"
            disabled={isSaving || !canSave}
            type="submit"
          >
            <Save size={17} aria-hidden="true" />
            <span>{isSaving ? '保存中' : '保存配置'}</span>
          </AdminButton>
        </AdminPanel>

        <AdminListPanel
          columns={[
            {
              key: 'gateKey',
              label: 'Gate',
              sortable: true,
              sortDescription: 'Gate Key',
            },
            {
              key: 'rolloutPercent',
              label: '比例',
              sortable: true,
              sortValue: (gate) => gate.rolloutPercent,
            },
            {
              key: 'enabled',
              label: '状态',
              sortable: true,
              sortDescription: '启用状态',
              sortValue: (gate) => (gate.enabled ? 1 : 0),
            },
          ]}
          renderRow={(gate) => (
            <tr
              data-active={gate.gateKey === selectedGateKey}
              key={gate.gateKey}
            >
              <td>
                <AdminButton
                  variant="text"
                  type="button"
                  onClick={() => fillForm(gate)}
                >
                  {gate.gateKey}
                </AdminButton>
                <small>{formatAdminDateTime(gate.updatedAt)}</small>
              </td>
              <td>{gate.rolloutPercent}%</td>
              <td>{gate.enabled ? '启用' : '停用'}</td>
            </tr>
          )}
          title="Gate 列表"
          count={gates.length}
          rows={gates}
          busy={isLoading}
          busyText="加载中"
          emptyText="暂无 Gate"
          size="compact"
        />

        <AdminListPanel
          columns={[
            {
              key: 'key',
              label: 'Gate',
              sortable: true,
              sortDescription: 'Gate Key',
            },
            { key: 'description', label: '说明', sortable: true },
            { key: 'action', label: '操作' },
          ]}
          renderRow={(option) => (
            <tr key={option.key}>
              <td>
                {option.key}
                <small>
                  {GATE_PREFIX_LABELS[option.prefix] ?? option.prefix} ·{' '}
                  {option.label}
                </small>
              </td>
              <td>{option.description}</td>
              <td>
                <AdminButton
                  variant="text"
                  type="button"
                  onClick={() => applyGateTarget(option)}
                >
                  配置
                </AdminButton>
              </td>
            </tr>
          )}
          title="可配置开关"
          count={unconfiguredGateTargets.length}
          rows={unconfiguredGateTargets}
          busy={isLoading}
          busyText="加载中"
          emptyText="预设开关都已创建"
          size="compact"
        />
      </div>

      {confirmDialog}
    </AdminPage>
  );
}

function parseRolloutPercent(value: string) {
  const parsed = Number.parseFloat(value);
  if (!Number.isFinite(parsed)) {
    return 0;
  }
  return Math.min(100, Math.max(0, parsed));
}

function isRolloutPercentInputValid(value: string) {
  const parsed = Number.parseFloat(value);
  return Number.isFinite(parsed) && parsed >= 0 && parsed <= 100;
}

function buildGatePrefixOptions(gateTargetOptions: GateTargetOption[]) {
  const seen = new Set<string>();
  return gateTargetOptions.flatMap((option) => {
    if (seen.has(option.prefix)) {
      return [];
    }
    seen.add(option.prefix);
    return [
      {
        prefix: option.prefix,
        label: GATE_PREFIX_LABELS[option.prefix] ?? option.prefix,
      },
    ];
  });
}

function resolveGatePrefix(gateKey: string) {
  const separatorIndex = gateKey.indexOf(':');
  if (separatorIndex <= 0) {
    return '';
  }
  const prefix = gateKey.slice(0, separatorIndex);
  return GATE_PREFIX_LABELS[prefix] ? prefix : '';
}