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

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

import {
  getProfileWalletConfig,
  upsertProfileWalletConfig,
} from '../api/adminApiClient';
import type { ProfileWalletConfigAdminResponse } from '../api/adminApiTypes';
import { useAdminWriteConfirm } from '../components/useAdminWriteConfirm';
import { handlePageError } from './pageUtils';

interface AdminProfileWalletConfigPageProps {
  token: string;
  result: ProfileWalletConfigAdminResponse | null;
  onUnauthorized: (message?: string) => void;
  onResultChange: (result: ProfileWalletConfigAdminResponse) => void;
}

export function AdminProfileWalletConfigPage({
  token,
  result,
  onUnauthorized,
  onResultChange,
}: AdminProfileWalletConfigPageProps) {
  const [initialMudPoints, setInitialMudPoints] = useState('100');
  const [dailyFreePointsPerDay, setDailyFreePointsPerDay] = useState('20');
  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [loadErrorMessage, setLoadErrorMessage] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const { confirmWrite, confirmDialog } = useAdminWriteConfirm();

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

  async function refreshConfig() {
    setIsLoading(true);
    setLoadErrorMessage('');
    try {
      const response = await getProfileWalletConfig(token);
      onResultChange(response);
      setInitialMudPoints(String(response.initialMudPoints));
      setDailyFreePointsPerDay(String(response.dailyFreePointsPerDay));
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setLoadErrorMessage);
    } finally {
      setIsLoading(false);
    }
  }

  async function handleSave(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (isSaving) {
      return;
    }
    const normalizedDailyFreePointsPerDay = parsePositiveInteger(
      dailyFreePointsPerDay,
    );
    if (!normalizedDailyFreePointsPerDay) {
      setErrorMessage('每日免费泥点数必须是大于 0 的整数');
      return;
    }

    const normalizedInitialMudPoints = parsePositiveInteger(initialMudPoints);
    if (!normalizedInitialMudPoints) {
      setErrorMessage('账号初始泥点数必须是大于 0 的整数');
      return;
    }

    setErrorMessage('');
    const confirmed = await confirmWrite({
      action: '保存账号配置',
      target: `初始 ${normalizedInitialMudPoints} 泥点，每日免费 ${normalizedDailyFreePointsPerDay} 泥点`,
    });
    if (!confirmed) {
      return;
    }

    setIsSaving(true);
    try {
      const response = await upsertProfileWalletConfig(token, {
        initialMudPoints: normalizedInitialMudPoints,
        dailyFreePointsPerDay: normalizedDailyFreePointsPerDay,
      });
      onResultChange(response);
      setInitialMudPoints(String(response.initialMudPoints));
      setDailyFreePointsPerDay(String(response.dailyFreePointsPerDay));
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <AdminPage>
      <AdminPageHeading
        title="账号配置"
        description="泥点钱包"
        actions={
          <AdminButton
            variant="secondary"
            disabled={isLoading}
            type="button"
            onClick={refreshConfig}
          >
            <RefreshCcw size={17} aria-hidden="true" />
            <span>{isLoading ? '刷新中' : '刷新'}</span>
          </AdminButton>
        }
      />

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

      <div className="admin-two-column">
        <AdminPanel as="form" onSubmit={handleSave}>
          <AdminField label="账号初始泥点数">
            <input
              min={1}
              step={1}
              type="number"
              value={initialMudPoints}
              onChange={(event) => setInitialMudPoints(event.target.value)}
            />
          </AdminField>

          <AdminField label="每日免费泥点数">
            <input
              min={1}
              step={1}
              type="number"
              value={dailyFreePointsPerDay}
              onChange={(event) => setDailyFreePointsPerDay(event.target.value)}
            />
          </AdminField>

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

          <AdminButton
            variant="primary"
            disabled={
              isSaving ||
              !parsePositiveInteger(initialMudPoints) ||
              !parsePositiveInteger(dailyFreePointsPerDay)
            }
            type="submit"
          >
            <Save size={17} aria-hidden="true" />
            <span>{isSaving ? '保存中' : '保存'}</span>
          </AdminButton>
        </AdminPanel>

        <AdminListPanel
          busy={isLoading}
          busyText="加载中"
          count={result?.configId ?? '-'}
          className="admin-result-panel"
          emptyText="暂无记录"
          rows={result ? [result] : []}
          title="当前配置"
        >
          {result ? (
            <AdminInfoList
              items={[
                {
                  label: <>初始泥点</>,
                  value: <>{result.initialMudPoints}</>,
                },
                {
                  label: <>每日免费泥点</>,
                  value: <>{result.dailyFreePointsPerDay}</>,
                },
                {
                  label: <>更新人</>,
                  value: <>{result.updatedByDisplayName || '-'}</>,
                },
                {
                  label: <>更新</>,
                  value: <>{formatAdminDateTime(result.updatedAt)}</>,
                },
              ]}
            />
          ) : null}
        </AdminListPanel>
      </div>
      {confirmDialog}
    </AdminPage>
  );
}

function parsePositiveInteger(value: string) {
  const parsed = Number(value);
  return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : 0;
}