"use client"

import { useTranslations } from "next-intl"
import { Settings } from "lucide-react"
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/shared/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/shared/components/ui/dialog"
import { Button } from "@/shared/components/ui/button"
import type { Control } from "react-hook-form"

/** AI Provider 摘要信息（与 settings 模块类型兼容） */
export type AiProviderOption = {
  id: string
  provider: string
  model: string
  isDefault: boolean
}

type AiProviderSelectorProps = {
  /** react-hook-form control */
  control: Control<Record<string, unknown>>
  /** 表单字段名 */
  name: string
  /** Provider 列表 */
  providers: AiProviderOption[]
  /** 是否加载中 */
  loading?: boolean
  /** Provider 标签映射 */
  providerLabels?: Record<string, string>
  /** 管理面板触发器 */
  managePanel?: React.ReactNode
  /** 管理面板打开状态 */
  manageOpen?: boolean
  onManageOpenChange?: (open: boolean) => void
}

/**
 * AI Provider 选择器
 *
 * 可复用的表单字段组件，用于选择 AI Provider。
 * 从 exam-ai-generator.tsx 抽取，支持在任何需要 AI Provider 选择的表单中复用。
 */
export function AiProviderSelector({
  control,
  name,
  providers,
  loading = false,
  providerLabels,
  managePanel,
  manageOpen,
  onManageOpenChange,
}: AiProviderSelectorProps): React.ReactNode {
  const t = useTranslations("ai")

  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <div className="flex items-center justify-between gap-2">
            <FormLabel>{t("provider.label")}</FormLabel>
            {managePanel ? (
              <Dialog open={manageOpen} onOpenChange={onManageOpenChange}>
                <DialogTrigger asChild>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="h-7 px-2 text-muted-foreground hover:text-foreground"
                  >
                    <Settings className="mr-1 h-3.5 w-3.5" />
                    {t("provider.manage")}
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[960px]">
                  <DialogHeader>
                    <DialogTitle>{t("provider.manageTitle")}</DialogTitle>
                    <DialogDescription>{t("provider.manageDescription")}</DialogDescription>
                  </DialogHeader>
                  {managePanel}
                </DialogContent>
              </Dialog>
            ) : null}
          </div>
          <Select value={field.value as string} onValueChange={field.onChange} disabled={loading}>
            <FormControl>
              <SelectTrigger>
                <SelectValue
                  placeholder={loading ? t("provider.loading") : t("provider.placeholder")}
                />
              </SelectTrigger>
            </FormControl>
            <SelectContent>
              {providers.map((item) => (
                <SelectItem key={item.id} value={item.id}>
                  {providerLabels?.[item.provider] ?? item.provider} · {item.model}
                  {item.isDefault ? ` (${t("provider.default")})` : ""}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <FormDescription>{t("provider.description")}</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
  )
}
