OpenFlare/frontend/components/common/settings/auth-source-modal.tsx

"use client"

import {useEffect, useState} from "react"
import {toast} from "sonner"
import {Button} from "@/components/ui/button"
import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog"
import {Input} from "@/components/ui/input"
import {Label} from "@/components/ui/label"
import {Switch} from "@/components/ui/switch"
import services from "@/lib/services"
import type {AuthSource, AuthSourceRequest} from "@/lib/services/admin"

const emptyForm: AuthSourceRequest = {
  name: "",
  type: "oidc",
  display_name: "",
  is_active: false,
  client_id: "",
  client_secret: "",
  openid_discovery_url: "",
  scopes: "openid profile email",
  icon_url: "",
}

export function AuthSourceModal({
  isOpen,
  source,
  onClose,
  onChanged,
}: {
  isOpen: boolean
  source: AuthSource | null
  onClose: () => void
  onChanged: () => Promise<void>
}) {
  const [form, setForm] = useState<AuthSourceRequest>(emptyForm)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    if (isOpen) {
      if (source) {
        setForm({
          name: source.name,
          type: source.type,
          display_name: source.display_name,
          is_active: source.is_active,
          client_id: source.client_id,
          client_secret: "",
          openid_discovery_url: source.openid_discovery_url,
          scopes: source.scopes || "openid profile email",
          icon_url: source.icon_url,
        })
      } else {
        setForm(emptyForm)
      }
    } else {
      setForm(emptyForm)
      setSaving(false)
    }
  }, [isOpen, source])

  const saveSource = async () => {
    setSaving(true)
    try {
      if (source) {
        await services.adminAuthSource.updateAuthSource(source.id, form)
      } else {
        await services.adminAuthSource.createAuthSource(form)
      }
      await onChanged()
      toast.success("认证源已保存")
      onClose()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "保存认证源失败")
    } finally {
      setSaving(false)
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-xl">
        <DialogHeader>
          <DialogTitle>{source ? "编辑认证源" : "新增认证源"}</DialogTitle>
          <DialogDescription>
            {source ? "修改系统自定义的 OIDC 认证源参数。" : "配置新的自定义 OIDC 认证源。"}
          </DialogDescription>
        </DialogHeader>

        <div className="grid gap-4 md:grid-cols-2 pt-2">
          <div className="space-y-2">
            <Label>标识符 (英文名称)</Label>
            <Input
              value={form.name}
              disabled={!!source}
              onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
              placeholder="例如: github"
            />
          </div>
          <div className="space-y-2">
            <Label>展示名称</Label>
            <Input
              value={form.display_name}
              onChange={(e) => setForm((prev) => ({ ...prev, display_name: e.target.value }))}
              placeholder="例如: GitHub 登录"
            />
          </div>
          <div className="space-y-2">
            <Label>Client ID</Label>
            <Input
              value={form.client_id}
              onChange={(e) => setForm((prev) => ({ ...prev, client_id: e.target.value }))}
            />
          </div>
          <div className="space-y-2">
            <Label>Client Secret</Label>
            <Input
              value={form.client_secret}
              onChange={(e) => setForm((prev) => ({ ...prev, client_secret: e.target.value }))}
              placeholder={source ? "留空则保留原值" : ""}
            />
          </div>
          <div className="space-y-2 md:col-span-2">
            <Label>Discovery URL (OIDC 发行方 URL)</Label>
            <Input
              value={form.openid_discovery_url}
              onChange={(e) => setForm((prev) => ({ ...prev, openid_discovery_url: e.target.value }))}
              placeholder="https://..."
            />
          </div>
          <div className="space-y-2">
            <Label>Scopes</Label>
            <Input
              value={form.scopes}
              onChange={(e) => setForm((prev) => ({ ...prev, scopes: e.target.value }))}
            />
          </div>
          <div className="space-y-2">
            <Label>图标 URL (可选)</Label>
            <Input
              value={form.icon_url}
              onChange={(e) => setForm((prev) => ({ ...prev, icon_url: e.target.value }))}
              placeholder="https://... 或留空"
            />
          </div>
          <div className="flex items-center justify-between rounded-xl border border-dashed p-3 md:col-span-2 bg-muted/10">
            <div>
              <div className="font-medium text-sm">启用认证源</div>
              <div className="text-xs text-muted-foreground">启用后会立即显示在登录页和账号绑定中。</div>
            </div>
            <Switch checked={form.is_active} onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: checked }))} />
          </div>
          <div className="md:col-span-2 flex justify-end gap-2 pt-2 border-t mt-2">
            <Button variant="outline" type="button" onClick={onClose}>
              取消
            </Button>
            <Button type="button" onClick={saveSource} disabled={saving} variant="secondary">
              {saving ? "保存中..." : "保存"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}