3x-ui/frontend/src/pages/index/GeodataSection.tsx

import { useCallback, useEffect, useRef, useState, useId } from 'react';
import { useTranslation } from 'react-i18next';
import { Alert, Button, Form, Input, Modal, Select, Space, Spin, Typography, message } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';

import { XrayConfigPayloadSchema } from '@/schemas/xray';
import { isOutboundProtocol } from '@/schemas/primitives';
import { HttpUtil } from '@/utils';

interface GeodataAssetRow {
  url: string;
  file: string;
}

interface GeodataSectionProps {
  active: boolean;
  onBusy: (e: { busy: boolean; tip?: string }) => void;
  onClose: () => void;
}

const DEFAULT_CRON = '0 4 * * *';
// Xray resolves `file` inside its asset directory; since 26.10.29 a scheduled one must be .dat.
const FILE_NAME_PATTERN = /^[A-Za-z0-9._-]+\.dat$/i;

function fileNameFromUrl(url: string): string {
  try {
    const seg = new URL(url).pathname.split('/').filter(Boolean).pop() || '';
    return FILE_NAME_PATTERN.test(seg) ? seg : '';
  } catch {
    return '';
  }
}

export default function GeodataSection({ active, onBusy, onClose }: GeodataSectionProps) {
  const { t } = useTranslation();
  const uid = useId();
  const [modal, modalContextHolder] = Modal.useModal();
  const [messageApi, messageContextHolder] = message.useMessage();
  const [loading, setLoading] = useState(false);
  const [cron, setCron] = useState(DEFAULT_CRON);
  const [outbound, setOutbound] = useState<string | undefined>(undefined);
  const [rows, setRows] = useState<GeodataAssetRow[]>([]);
  const [standardSources, setStandardSources] = useState<GeodataAssetRow[]>([]);
  const [outboundTags, setOutboundTags] = useState<string[]>([]);
  const [template, setTemplate] = useState<Record<string, unknown> | null>(null);
  const outboundTestUrlRef = useRef('');

  const load = useCallback(async () => {
    try {
      const msg = await HttpUtil.post('/panel/api/xray/', undefined, { silent: true });
      if (!msg?.success || typeof msg.obj !== 'string') return;
      const parsed = XrayConfigPayloadSchema.safeParse(JSON.parse(msg.obj));
      if (!parsed.success) return;
      const payload = parsed.data;
      const next = payload.xraySetting as Record<string, unknown>;
      setTemplate(next);
      outboundTestUrlRef.current =
        typeof payload.outboundTestUrl === 'string' ? payload.outboundTestUrl : '';

      const geodata = (next.geodata || {}) as Record<string, unknown>;
      const assets = Array.isArray(geodata.assets) ? geodata.assets : [];
      setRows(
        assets
          .filter((a): a is Record<string, unknown> => !!a && typeof a === 'object')
          .map((a) => ({ url: String(a.url ?? ''), file: String(a.file ?? '') })),
      );
      setCron(typeof geodata.cron === 'string' && geodata.cron ? geodata.cron : DEFAULT_CRON);
      setOutbound(
        typeof geodata.outbound === 'string' && geodata.outbound ? geodata.outbound : undefined,
      );
      setStandardSources(payload.geodataSources ?? []);

      // Download outbound candidates: template outbounds + subscription outbounds.
      // Skip blackhole outbounds — routing a download through one just drops it.
      const tags = new Set<string>();
      const outbounds = Array.isArray(next.outbounds) ? next.outbounds : [];
      for (const o of outbounds) {
        if (!o || typeof o !== 'object') continue;
        const rec = o as Record<string, unknown>;
        if (isOutboundProtocol(rec, 'blackhole')) continue;
        const tag = rec.tag;
        if (typeof tag === 'string' && tag) tags.add(tag);
      }
      const subTags = Array.isArray(payload.subscriptionOutboundTags)
        ? payload.subscriptionOutboundTags
        : [];
      for (const tag of subTags) {
        if (typeof tag === 'string' && tag) tags.add(tag);
      }
      setOutboundTags([...tags]);
    } finally {
      setLoading(false);
    }
  }, []);

  const [wasActive, setWasActive] = useState(false);
  if (active !== wasActive) {
    setWasActive(active);
    if (active) setLoading(true);
  }

  useEffect(() => {
    if (active) void load();
  }, [active, load]);

  function setRow(index: number, patch: Partial<GeodataAssetRow>) {
    setRows((prev) => prev.map((r, i) => (i === index ? { ...r, ...patch } : r)));
  }

  function onUrlBlur(index: number) {
    setRows((prev) =>
      prev.map((r, i) => (i === index && !r.file ? { ...r, file: fileNameFromUrl(r.url) } : r)),
    );
  }

  function addStandardSources() {
    setRows((prev) => {
      const files = new Set(prev.map((row) => row.file));
      return [...prev, ...standardSources.filter((source) => !files.has(source.file))];
    });
  }

  function save() {
    if (!template) return;
    const assets = rows
      .map((r) => ({ url: r.url.trim(), file: r.file.trim() }))
      .filter((r) => r.url || r.file);
    for (const a of assets) {
      // Xray's geodata downloader accepts HTTPS URLs only.
      if (!/^https:\/\/\S+$/i.test(a.url)) {
        messageApi.error(t('pages.index.geodataInvalidUrl'));
        return;
      }
      if (!FILE_NAME_PATTERN.test(a.file)) {
        messageApi.error(t('pages.index.geodataInvalidFile'));
        return;
      }
    }
    const cronValue = cron.trim();
    if (assets.length > 0 && cronValue && cronValue.split(/\s+/).length !== 5) {
      messageApi.error(t('pages.index.geodataInvalidCron'));
      return;
    }

    modal.confirm({
      title: t('pages.index.geodataConfirmTitle'),
      content: t('pages.index.geodataConfirmContent'),
      okText: t('confirm'),
      cancelText: t('cancel'),
      onOk: async () => {
        const next: Record<string, unknown> = { ...template };
        if (assets.length === 0) {
          delete next.geodata;
        } else {
          const geodata: Record<string, unknown> = { assets };
          if (cronValue) geodata.cron = cronValue;
          if (outbound) geodata.outbound = outbound;
          next.geodata = geodata;
        }
        onClose();
        onBusy({ busy: true, tip: t('pages.index.dontRefresh') });
        try {
          const msg = await HttpUtil.post('/panel/api/xray/update', {
            xraySetting: JSON.stringify(next, null, 2),
            outboundTestUrl: outboundTestUrlRef.current,
          });
          if (msg?.success) {
            await HttpUtil.post('/panel/api/server/restartXrayService');
          }
        } finally {
          onBusy({ busy: false });
        }
      },
    });
  }

  return (
    <div>
      {modalContextHolder}
      {messageContextHolder}
      <Spin aria-live="off" spinning={loading}>
        <Alert type="info" className="mb-12" title={t('pages.index.geodataHint')} showIcon />
        <Form layout="vertical">
          <Form.Item
            htmlFor={`${uid}-cron`}
            label={t('pages.index.geodataCron')}
            style={{ marginBottom: 8 }}
          >
            <Input
              id={`${uid}-cron`}
              value={cron}
              placeholder={DEFAULT_CRON}
              onChange={(e) => setCron(e.target.value)}
            />
          </Form.Item>
          <Form.Item
            htmlFor={`${uid}-outbound`}
            label={t('pages.index.geodataOutbound')}
            style={{ marginBottom: 8 }}
          >
            <Select
              id={`${uid}-outbound`}
              style={{ width: '100%' }}
              allowClear
              value={outbound}
              onChange={(v) => setOutbound(v)}
              options={outboundTags.map((tag) => ({ label: tag, value: tag }))}
            />
          </Form.Item>
        </Form>
        <Space orientation="vertical" style={{ width: '100%' }} size={8}>
          {rows.length === 0 && (
            <Typography.Text type="secondary">{t('pages.index.geodataEmpty')}</Typography.Text>
          )}
          {rows.map((row, i) => (
            <Space.Compact key={i} style={{ width: '100%' }}>
              <Input
                aria-label={`URL ${i + 1}`}
                style={{ width: '60%' }}
                placeholder="https://example.com/geosite_custom.dat"
                value={row.url}
                onChange={(e) => setRow(i, { url: e.target.value })}
                onBlur={() => onUrlBlur(i)}
              />
              <Input
                aria-label={`${t('pages.index.geodataFile')} ${i + 1}`}
                style={{ width: '40%' }}
                placeholder={t('pages.index.geodataFile')}
                value={row.file}
                onChange={(e) => setRow(i, { file: e.target.value })}
              />
              <Button
                aria-label={t('delete')}
                icon={<DeleteOutlined aria-hidden />}
                onClick={() => setRows((p) => p.filter((_, j) => j !== i))}
              />
            </Space.Compact>
          ))}
          <div className="actions-row">
            <Button
              icon={<PlusOutlined aria-hidden />}
              onClick={() => setRows((p) => [...p, { url: '', file: '' }])}
            >
              {t('pages.index.geodataAddFile')}
            </Button>
            <Button onClick={addStandardSources} disabled={standardSources.length === 0}>
              {t('pages.index.geodataUseStandardSources')}
            </Button>
            <Button type="primary" onClick={save} disabled={loading || !template}>
              {t('pages.index.geodataSaveRestart')}
            </Button>
          </div>
        </Space>
      </Spin>
    </div>
  );
}