"use client"

import { useTranslations } from "next-intl"
import { type ReactElement } from "react"

import { type AiProviderSummary } from "@/modules/settings/actions"
import { Badge } from "@/shared/components/ui/badge"
import { Label } from "@/shared/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"

const NEW_PROVIDER_VALUE = "__new__"

interface AiProviderSelectorProps {
  /** 已有服务商列表 */
  providers: AiProviderSummary[]
  /** 当前选中的服务商 ID（空字符串表示新建） */
  selectedId: string
  /** 当前用户 ID，用于判断是否为创建者 */
  currentUserId?: string
  /** 选择变更回调 */
  onSelectChange: (value: string) => void
}

/**
 * AI 服务商选择器
 *
 * 负责：
 * - 渲染已有服务商下拉选择（含"新建"选项）
 * - 展示当前选中服务商的密钥状态与可见性徽章
 *
 * 不包含任何业务逻辑，仅做展示与事件转发。
 */
export function AiProviderSelector({
  providers,
  selectedId,
  currentUserId,
  onSelectChange,
}: AiProviderSelectorProps): ReactElement {
  const t = useTranslations("settings.ai.providers")

  const selectedProvider = providers.find((item) => item.id === selectedId) ?? null

  const renderProviderLabel = (item: AiProviderSummary): string => {
    const parts = [item.provider, "·", item.model]
    if (item.isDefault) parts.push(`(${t("setDefault")})`)
    return parts.join(" ")
  }

  const renderVisibilityBadge = (item: AiProviderSummary): ReactElement => {
    const isOwner = currentUserId !== undefined && item.createdBy === currentUserId
    return (
      <span className="ml-2 inline-flex gap-1">
        {item.visibility === "public" ? (
          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4">
            {t("badgePublic")}
          </Badge>
        ) : (
          <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4">
            {t("badgePrivate")}
          </Badge>
        )}
        {isOwner ? (
          <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 text-muted-foreground">
            {t("badgeOwner")}
          </Badge>
        ) : null}
      </span>
    )
  }

  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <div className="space-y-2">
        <Label>{t("existing")}</Label>
        <Select value={selectedId || NEW_PROVIDER_VALUE} onValueChange={onSelectChange}>
          <SelectTrigger>
            <SelectValue placeholder={t("selectPlaceholder")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={NEW_PROVIDER_VALUE}>{t("createNew")}</SelectItem>
            {providers.map((item) => (
              <SelectItem key={item.id} value={item.id}>
                {renderProviderLabel(item)}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label>{t("keyStatus")}</Label>
        <div className="flex items-center rounded-md border px-3 py-2 text-sm text-muted-foreground">
          {selectedProvider ? renderVisibilityBadge(selectedProvider) : null}
          <span className="ml-auto">
            {selectedProvider?.apiKeyLast4
              ? `${t("stored")} • ****${selectedProvider.apiKeyLast4}`
              : t("noKey")}
          </span>
        </div>
      </div>
    </div>
  )
}