LokiStack/frontend/src/pages/settings/components/ImageRegistrySection.tsx

import { memo, useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Globe, Save } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { cn } from '@/lib/utils'
import { settingsApi, type ImageRegistryConfig } from '@/api/settings'
import { toast } from 'sonner'

/**
 * 镜像源设置 — 影响平台拉取的全部镜像(Loki/Grafana/Promtail/Fluent Bit),
 * 参照 kuboard 的国内/海外选择;实时预览四类镜像的生效地址。
 */
export const ImageRegistrySection = memo(function ImageRegistrySection() {
  const { t } = useTranslation('settings')
  const [cfg, setCfg] = useState<ImageRegistryConfig | null>(null)
  const [customHost, setCustomHost] = useState('')
  const [saving, setSaving] = useState(false)

  // 源选项(文案走词典;value 保持字面量类型以匹配 cfg.mode)
  const MODES = [
    { value: 'overseas', label: t('registry.modeOverseasLabel'), desc: t('registry.modeOverseasDesc') },
    { value: 'cn', label: t('registry.modeCnLabel'), desc: t('registry.modeCnDesc') },
    { value: 'custom', label: t('registry.modeCustomLabel'), desc: t('registry.modeCustomDesc') },
  ] as const

  // 组件镜像行(repo 为 placeholder 示例;tagHint 区分「跟随部署版本」与内置版本号)
  const COMPONENTS = [
    { key: 'loki', label: 'Loki', repo: 'grafana/loki', tagHint: t('registry.tagFollowVersion') },
    { key: 'grafana', label: 'Grafana', repo: 'grafana/grafana', tagHint: t('registry.tagFollowVersion') },
    { key: 'promtail', label: 'Promtail', repo: 'grafana/promtail', tagHint: '3.4.0' },
    { key: 'fluentbit', label: 'Fluent Bit', repo: 'fluent/fluent-bit', tagHint: '5.1.5' },
  ] as const

  useEffect(() => {
    settingsApi
      .getImageRegistry()
      .then((c) => {
        setCfg(c)
        setCustomHost(c.customHost || '')
      })
      .catch(() => toast.error(t('registry.errLoad')))
    // 仅首载拉取配置;t 只影响失败 toast,不随语言切换重跑(避免覆盖未保存输入)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleSave = useCallback(async () => {
    if (!cfg) return
    setSaving(true)
    try {
      const saved = await settingsApi.saveImageRegistry({
        mode: cfg.mode,
        customHost: cfg.mode === 'custom' ? customHost : undefined,
        images: cfg.images,
      })
      setCfg(saved)
      toast.success(t('registry.savedToast'))
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t('notify.errSave'))
    } finally {
      setSaving(false)
    }
  }, [cfg, customHost, t])

  if (!cfg) return null

  return (
    <Card className="border-border">
      <CardHeader className="pb-3">
        <CardTitle className="text-base flex items-center gap-2">
          <Globe className="w-4 h-4" />
          {t('registry.cardTitle')}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          {MODES.map((m) => (
            <button
              key={m.value}
              type="button"
              aria-pressed={cfg.mode === m.value}
              onClick={() => setCfg({ ...cfg, mode: m.value })}
              className={cn(
                'text-left rounded-xl border-2 p-3 transition-all',
                cfg.mode === m.value ? 'border-primary bg-primary/5' : 'border-border hover:border-input'
              )}
            >
              <p className={cn('text-sm font-medium', cfg.mode === m.value && 'text-primary')}>{m.label}</p>
              <p className="text-xs text-muted-foreground mt-1">{m.desc}</p>
            </button>
          ))}
        </div>

        {cfg.mode === 'custom' && (
          <div className="space-y-2">
            <Label>{t('registry.customPrefixLabel')}</Label>
            <Input
              placeholder="swr.cn-east-2.myhuaweicloud.com/your-namespace"
              value={customHost}
              onChange={(e) => setCustomHost(e.target.value)}
            />
            <p className="text-xs text-muted-foreground">
              {t('registry.customPrefixHint', { example: customHost || 'your-registry' })}
            </p>
          </div>
        )}

        {/* 各服务镜像自定义 */}
        <div className="space-y-2">
          <Label>{t('registry.imagesLabel')}</Label>
          <div className="space-y-2">
            {COMPONENTS.map(({ key, label, repo, tagHint }) => {
              const img = cfg.images?.[key] || { repository: '', tag: '' }
              const update = (patch: Partial<{ repository: string; tag: string }>) =>
                setCfg({
                  ...cfg,
                  images: { ...(cfg.images || {}), [key]: { ...img, ...patch } },
                })
              return (
                <div key={key} className="grid items-center gap-2 sm:grid-cols-[110px_1fr_150px]">
                  <span className="text-sm font-medium">{label}</span>
                  <Input
                    aria-label={t('registry.repoAria', { label })}
                    value={img.repository}
                    placeholder={repo}
                    onChange={(e) => update({ repository: e.target.value })}
                    className="font-mono text-xs"
                  />
                  <Input
                    aria-label={t('registry.tagAria', { label })}
                    value={img.tag}
                    placeholder={tagHint}
                    onChange={(e) => update({ tag: e.target.value })}
                    className="font-mono text-xs"
                  />
                </div>
              )
            })}
          </div>
          <p className="text-xs text-muted-foreground">
            {t('registry.imagesHintBefore')}
            <code>grafana/loki</code>
            {t('registry.imagesHintAfter')}
          </p>
        </div>

        {/* 生效镜像预览 */}
        <div className="rounded-lg bg-muted/50 p-3 space-y-1.5">
          <p className="text-xs font-medium text-muted-foreground">{t('registry.previewTitle')}</p>
          {([
            ['Loki', cfg.sampleLoki],
            ['Grafana', cfg.sampleGrafana],
            ['Promtail', cfg.samplePromtail],
            ['Fluent Bit', cfg.sampleFluentBit],
          ] as const).map(([name, img]) => (
            <p key={name} className="text-xs font-mono flex gap-2">
              <span className="text-muted-foreground w-20 shrink-0">{name}</span>
              <span className="truncate" title={img}>{img}</span>
            </p>
          ))}
        </div>

        <div className="flex justify-end">
          <Button onClick={handleSave} disabled={saving}>
            <Save className="w-4 h-4 mr-1" />
            {saving ? t('actions.saving') : t('registry.saveButton')}
          </Button>
        </div>
      </CardContent>
    </Card>
  )
})