import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Check, ChevronDown, ChevronRight, Eye, EyeOff, Pencil, Upload, RotateCcw, X, RefreshCw } from "lucide-react";
import type { ProviderConfig, ProviderAdvancedParams, OpenAIApiFormat, ProviderStyle } from "../../../../infrastructure/ai/types";
import { PROVIDER_PRESETS, resolveOpenAIApi, resolveProviderStyle } from "../../../../infrastructure/ai/types";
import { normalizeOllamaSdkBaseURL } from "../../../../infrastructure/ai/ollamaCompatBaseUrl";
import { sanitizeContextWindow } from "../../../../infrastructure/ai/contextCompaction";
import {
  probeProviderConnection,
  validateProviderProbeInputs,
  type ProviderProbeHealth,
} from "../../../../infrastructure/ai/providerConnectionProbe";
import { encryptField, decryptField } from "../../../../infrastructure/persistence/secureFieldAdapter";
import { useI18n } from "../../../../application/i18n/I18nProvider";
import { Button } from "../../../ui/button";
import { cn } from "../../../../lib/utils";
import type { BuiltinProviderIcon } from "./types";
import { BUILTIN_PROVIDER_ICONS, getFetchBridge } from "./types";
import type { ProviderFormState } from "./types";
import { ModelSelector } from "./ModelSelector";
import { mergeModelContextWindow } from "./modelMetadata";
import { ProviderIconBadge } from "./ProviderIconBadge";

const ICON_PIXEL_SIZE = 64;
const ICON_WEBP_QUALITY = 0.85;
const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;

async function compressIconFileToDataUrl(file: File): Promise<string> {
  if (file.size > MAX_UPLOAD_BYTES) {
    throw new Error("Image too large; please use an image under 5 MB.");
  }
  const sourceUrl = await new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = () => reject(reader.error ?? new Error("Failed to read file"));
    reader.readAsDataURL(file);
  });
  const img = await new Promise<HTMLImageElement>((resolve, reject) => {
    const el = new Image();
    el.onload = () => resolve(el);
    el.onerror = () => reject(new Error("Failed to decode image"));
    el.src = sourceUrl;
  });
  const canvas = document.createElement("canvas");
  canvas.width = ICON_PIXEL_SIZE;
  canvas.height = ICON_PIXEL_SIZE;
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("Canvas 2D context unavailable");
  ctx.clearRect(0, 0, ICON_PIXEL_SIZE, ICON_PIXEL_SIZE);
  const scale = Math.min(ICON_PIXEL_SIZE / img.width, ICON_PIXEL_SIZE / img.height);
  const w = img.width * scale;
  const h = img.height * scale;
  ctx.drawImage(img, (ICON_PIXEL_SIZE - w) / 2, (ICON_PIXEL_SIZE - h) / 2, w, h);
  return canvas.toDataURL("image/webp", ICON_WEBP_QUALITY);
}

const STYLE_OPTIONS: ReadonlyArray<ProviderStyle> = ["anthropic", "openai", "google"];
const OPENAI_API_OPTIONS: ReadonlyArray<OpenAIApiFormat> = ["chat", "responses"];

/** Same box as the h-8 fields above. Transparent border keeps primary aligned with outline. */
const PROVIDER_ACTION_CLASS = "box-border h-8 px-3 gap-1.5 text-sm font-medium leading-none";

export const ProviderConfigForm: React.FC<{
  provider: ProviderConfig;
  onSave: (updates: Partial<ProviderConfig>) => void;
  onCancel: () => void;
}> = ({ provider, onSave, onCancel }) => {
  const { t } = useI18n();
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const [form, setForm] = useState<ProviderFormState>({
    name: provider.name ?? PROVIDER_PRESETS[provider.providerId]?.name ?? "",
    apiKey: "",
    baseURL: provider.baseURL ?? PROVIDER_PRESETS[provider.providerId]?.defaultBaseURL ?? "",
    defaultModel: provider.defaultModel ?? "",
    contextWindow: provider.contextWindow != null ? String(provider.contextWindow) : "",
    modelContextWindows: provider.modelContextWindows ?? {},
    skipTLSVerify: provider.skipTLSVerify ?? false,
    advancedParams: provider.advancedParams ?? {},
    style: provider.style ?? "",
    openaiApi: resolveOpenAIApi(provider),
    iconId: provider.iconId ?? "",
    iconDataUrl: provider.iconDataUrl ?? "",
  });
  const [showApiKey, setShowApiKey] = useState(false);
  const [isDecrypting, setIsDecrypting] = useState(false);
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [showIconPicker, setShowIconPicker] = useState(false);
  const [iconError, setIconError] = useState<string | null>(null);
  const [contextWindowError, setContextWindowError] = useState<string | null>(null);
  const [apiKeySourceVersion, setApiKeySourceVersion] = useState(0);
  const [isTesting, setIsTesting] = useState(false);
  const [probeResult, setProbeResult] = useState<{
    health: ProviderProbeHealth;
    message: string;
  } | null>(null);
  const probeRequestIdRef = useRef(0);

  const preset = PROVIDER_PRESETS[provider.providerId];
  const resolvedStyle: ProviderStyle = form.style || resolveProviderStyle({ providerId: provider.providerId });
  const resolvedBaseURL = provider.providerId === "ollama"
    ? normalizeOllamaSdkBaseURL(form.baseURL || preset?.defaultBaseURL || "")
    : (form.baseURL || preset?.defaultBaseURL || "");
  const modelMetadataSourceKey = useMemo(() => JSON.stringify({
    providerId: provider.providerId,
    baseURL: form.baseURL || preset?.defaultBaseURL || "",
    modelsEndpoint: preset?.modelsEndpoint ?? "",
    apiKeySourceVersion,
    style: resolvedStyle,
    skipTLSVerify: form.skipTLSVerify,
  }), [
    provider.providerId,
    form.baseURL,
    apiKeySourceVersion,
    form.skipTLSVerify,
    preset?.defaultBaseURL,
    preset?.modelsEndpoint,
    resolvedStyle,
  ]);
  const probeFingerprint = useMemo(() => JSON.stringify({
    baseURL: form.baseURL || preset?.defaultBaseURL || "",
    apiKey: form.apiKey,
    style: resolvedStyle,
    skipTLSVerify: form.skipTLSVerify,
    modelsEndpoint: preset?.modelsEndpoint ?? "",
  }), [
    form.apiKey,
    form.baseURL,
    form.skipTLSVerify,
    preset?.defaultBaseURL,
    preset?.modelsEndpoint,
    resolvedStyle,
  ]);
  const modelMetadataSourceKeyRef = useRef<string | null>(null);
  const probeFingerprintRef = useRef<string | null>(null);
  const previewProvider: Pick<ProviderConfig, "providerId" | "name" | "iconId" | "iconDataUrl"> = {
    providerId: provider.providerId,
    name: form.name,
    iconId: form.iconId || undefined,
    iconDataUrl: form.iconDataUrl || undefined,
  };

  // Decrypt and load existing API key on mount
  useEffect(() => {
    if (provider.apiKey) {
      setIsDecrypting(true);
      decryptField(provider.apiKey)
        .then((decrypted) => {
          setForm((prev) => ({ ...prev, apiKey: decrypted ?? "" }));
        })
        .catch(() => {
          // If decryption fails, show raw value
          setForm((prev) => ({ ...prev, apiKey: provider.apiKey ?? "" }));
        })
        .finally(() => setIsDecrypting(false));
    }
  }, [provider.apiKey]);

  useEffect(() => {
    if (modelMetadataSourceKeyRef.current == null) {
      modelMetadataSourceKeyRef.current = modelMetadataSourceKey;
      return;
    }
    if (modelMetadataSourceKeyRef.current === modelMetadataSourceKey) return;

    modelMetadataSourceKeyRef.current = modelMetadataSourceKey;
    setForm((prev) => Object.keys(prev.modelContextWindows).length > 0
      ? { ...prev, modelContextWindows: {} }
      : prev);
  }, [modelMetadataSourceKey]);

  useEffect(() => {
    if (probeFingerprintRef.current == null) {
      probeFingerprintRef.current = probeFingerprint;
      return;
    }
    if (probeFingerprintRef.current === probeFingerprint) return;

    probeFingerprintRef.current = probeFingerprint;
    probeRequestIdRef.current += 1;
    setProbeResult(null);
    setIsTesting(false);
  }, [probeFingerprint]);

  const [advancedParamRaw, setAdvancedParamRaw] = useState<Record<string, string>>({});
  const handleAdvancedParam = useCallback((key: keyof ProviderAdvancedParams, raw: string) => {
    setAdvancedParamRaw((prev) => ({ ...prev, [key]: raw }));
    setForm((prev) => {
      const next = { ...prev.advancedParams };
      if (raw.trim() === "" || raw.trim() === "-") {
        delete next[key];
      } else {
        const num = Number(raw);
        if (!Number.isNaN(num)) {
          next[key] = num;
        }
      }
      return { ...prev, advancedParams: next };
    });
  }, []);

  const handleIconFileSelect = useCallback(async (file: File | null) => {
    setIconError(null);
    if (!file) return;
    if (!/^image\//.test(file.type)) {
      setIconError(t("ai.providers.icon.errorType"));
      return;
    }
    try {
      const dataUrl = await compressIconFileToDataUrl(file);
      setForm((prev) => ({ ...prev, iconDataUrl: dataUrl, iconId: "" }));
    } catch (err) {
      setIconError(err instanceof Error ? err.message : String(err));
    }
  }, [t]);

  const handlePickBuiltin = useCallback((icon: BuiltinProviderIcon) => {
    setIconError(null);
    setForm((prev) => ({ ...prev, iconId: icon.id, iconDataUrl: "", name: icon.name }));
  }, []);

  const handleResetIcon = useCallback(() => {
    setIconError(null);
    setForm((prev) => ({ ...prev, iconId: "", iconDataUrl: "" }));
  }, []);

  const handleApiKeyChange = useCallback((value: string) => {
    setApiKeySourceVersion((version) => version + 1);
    setForm((prev) => ({ ...prev, apiKey: value }));
  }, []);

  const handleTestConnection = useCallback(async () => {
    const baseURL = resolvedBaseURL;
    const inputCheck = validateProviderProbeInputs({
      baseURL,
      apiKey: form.apiKey,
      providerId: provider.providerId,
    });
    if (!inputCheck.ok) {
      probeRequestIdRef.current += 1;
      setIsTesting(false);
      setProbeResult({
        health: "error",
        message: t(
          inputCheck.reason === "missing_base_url"
            ? "ai.providers.test.missingBaseUrl"
            : "ai.providers.test.missingApiKey",
        ),
      });
      return;
    }

    const requestId = ++probeRequestIdRef.current;
    setIsTesting(true);
    setProbeResult(null);
    try {
      const run = await probeProviderConnection({
        bridge: getFetchBridge(),
        baseURL,
        apiKey: form.apiKey,
        providerId: provider.providerId,
        style: resolvedStyle,
        presetModelsEndpoint: preset?.modelsEndpoint,
        skipTLSVerify: form.skipTLSVerify,
      });
      if (probeRequestIdRef.current !== requestId) return;
      if (!run.ok) {
        setProbeResult({
          health: "error",
          message: t(
            run.reason === "missing_base_url"
              ? "ai.providers.test.missingBaseUrl"
              : run.reason === "missing_api_key"
                ? "ai.providers.test.missingApiKey"
                : "ai.providers.test.unavailable",
          ),
        });
        return;
      }
      const classified = run.classification;
      const latency = String(classified.latencyMs);
      if (classified.health === "ok") {
        setProbeResult({
          health: "ok",
          message: t("ai.providers.test.ok", { latency }),
        });
      } else if (classified.health === "warn") {
        const warnKey = classified.modelCount === 0 || classified.error
          ? "ai.providers.test.warn"
          : "ai.providers.test.warnSlow";
        setProbeResult({
          health: "warn",
          message: t(warnKey, { latency }),
        });
      } else {
        const detail = classified.error
          || (classified.statusCode ? `HTTP ${classified.statusCode}` : "error");
        setProbeResult({
          health: "error",
          message: t("ai.providers.test.error", { detail }),
        });
      }
    } catch (err) {
      if (probeRequestIdRef.current !== requestId) return;
      setProbeResult({
        health: "error",
        message: t("ai.providers.test.error", {
          detail: err instanceof Error ? err.message : String(err),
        }),
      });
    } finally {
      if (probeRequestIdRef.current === requestId) setIsTesting(false);
    }
  }, [form.apiKey, form.skipTLSVerify, preset?.modelsEndpoint, provider.providerId, resolvedBaseURL, resolvedStyle, t]);

  const handleSave = useCallback(async () => {
    const cleanedParams: ProviderAdvancedParams = {};
    const ap = form.advancedParams;
    if (ap.maxTokens != null && Number.isFinite(ap.maxTokens) && ap.maxTokens > 0) cleanedParams.maxTokens = Math.max(1, Math.round(ap.maxTokens));
    if (ap.temperature != null) cleanedParams.temperature = Math.min(2, Math.max(0, ap.temperature));
    if (ap.topP != null) cleanedParams.topP = Math.min(1, Math.max(0, ap.topP));
    if (ap.frequencyPenalty != null) cleanedParams.frequencyPenalty = Math.min(2, Math.max(-2, ap.frequencyPenalty));
    if (ap.presencePenalty != null) cleanedParams.presencePenalty = Math.min(2, Math.max(-2, ap.presencePenalty));

    const trimmedName = form.name.trim();
    const defaultName = PROVIDER_PRESETS[provider.providerId]?.name ?? "";
    const rawContextWindow = form.contextWindow.trim();
    const rawContextWindowNumber = Number(rawContextWindow);
    if (rawContextWindow && (!Number.isInteger(rawContextWindowNumber) || rawContextWindowNumber <= 0)) {
      setContextWindowError(t("ai.providers.contextWindow.error"));
      return;
    }
    const manualContextWindow = rawContextWindow ? sanitizeContextWindow(rawContextWindow) : undefined;
    if (rawContextWindow && manualContextWindow == null) {
      setContextWindowError(t("ai.providers.contextWindow.error"));
      return;
    }
    setContextWindowError(null);

    const updates: Partial<ProviderConfig> = {
      name: trimmedName || defaultName,
      baseURL: provider.providerId === "ollama"
        ? resolvedBaseURL
        : (form.baseURL || undefined),
      defaultModel: form.defaultModel || undefined,
      contextWindow: manualContextWindow,
      modelContextWindows: Object.keys(form.modelContextWindows).length > 0 ? form.modelContextWindows : undefined,
      skipTLSVerify: form.skipTLSVerify || undefined,
      advancedParams: Object.keys(cleanedParams).length > 0 ? cleanedParams : undefined,
      style: form.style || undefined,
      openaiApi: resolvedStyle === "openai" && form.openaiApi === "responses" ? "responses" : undefined,
      iconId: form.iconId || undefined,
      iconDataUrl: form.iconDataUrl || undefined,
    };

    // Encrypt API key before saving
    if (form.apiKey) {
      updates.apiKey = await encryptField(form.apiKey);
    } else {
      updates.apiKey = undefined;
    }

    onSave(updates);
  }, [form, onSave, provider.providerId, resolvedBaseURL, resolvedStyle, t]);

  return (
    <div className="mt-3 space-y-3 border-t border-border/40 pt-3">
      {/* Display: icon + name */}
      <div className="space-y-1.5">
        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.name')}</label>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setShowIconPicker((v) => !v)}
            className="group relative shrink-0 rounded-md transition-all hover:brightness-110 hover:ring-2 hover:ring-primary/45 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
            aria-label={t('ai.providers.icon.change')}
            title={t('ai.providers.icon.change')}
          >
            <ProviderIconBadge provider={previewProvider} />
            <span
              aria-hidden="true"
              className="pointer-events-none absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border border-background bg-primary text-primary-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
            >
              <Pencil size={9} strokeWidth={2.5} />
            </span>
          </button>
          <input
            type="text"
            value={form.name}
            onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
            placeholder={t('ai.providers.name.placeholder')}
            className="flex-1 h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
          />
        </div>
        {showIconPicker && (
          <div className="rounded-md border border-border/50 bg-muted/20 p-2 space-y-2">
            <div className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-1.5">
              {BUILTIN_PROVIDER_ICONS.map((icon) => {
                const isSelected = form.iconId === icon.id && !form.iconDataUrl;
                return (
                  <button
                    key={icon.id}
                    type="button"
                    onClick={() => (isSelected ? handleResetIcon() : handlePickBuiltin(icon))}
                    title={icon.label}
                    aria-label={icon.label}
                    aria-pressed={isSelected}
                    className={cn(
                      "flex items-center gap-2 px-2 py-1.5 rounded-md border text-left transition-colors min-w-0",
                      isSelected
                        ? "border-primary/70 bg-primary/15"
                        : "border-transparent hover:border-border hover:bg-muted/40",
                    )}
                  >
                    <ProviderIconBadge
                      provider={{ providerId: provider.providerId, name: icon.label, iconId: icon.id }}
                      size="md"
                    />
                    <span className="text-xs text-foreground/85 truncate">{icon.label}</span>
                  </button>
                );
              })}
            </div>
            <div className="flex items-center gap-2 pt-2 border-t border-border/40">
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                className="hidden"
                onChange={(e) => void handleIconFileSelect(e.target.files?.[0] ?? null)}
              />
              <Button variant="ghost" size="sm" onClick={() => fileInputRef.current?.click()}>
                <Upload size={12} className="mr-1.5" />
                {t('ai.providers.icon.upload')}
              </Button>
              <Button variant="ghost" size="sm" onClick={handleResetIcon}>
                <RotateCcw size={12} className="mr-1.5" />
                {t('ai.providers.icon.reset')}
              </Button>
              {form.iconDataUrl && (
                <span className="text-[10px] text-muted-foreground">{t('ai.providers.icon.uploadedNote')}</span>
              )}
              <div className="ml-auto" />
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setShowIconPicker(false)}
                aria-label={t('ai.providers.icon.close')}
                title={t('ai.providers.icon.close')}
              >
                <X size={12} className="mr-1.5" />
                {t('ai.providers.icon.close')}
              </Button>
            </div>
            {iconError && <p className="text-[11px] text-destructive">{iconError}</p>}
          </div>
        )}
      </div>

      {/* Provider style */}
      <div className="space-y-1.5">
        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.style')}</label>
        <div className="flex items-center gap-1.5">
          {STYLE_OPTIONS.map((style) => {
            const isSelected = resolvedStyle === style;
            const isInherited = !form.style && isSelected;
            return (
              <button
                key={style}
                type="button"
                onClick={() => setForm((prev) => ({ ...prev, style: prev.style === style ? "" : style }))}
                className={cn(
                  "h-7 px-2.5 rounded-md text-xs border transition-colors",
                  isSelected
                    ? "border-primary/70 bg-primary/15 text-foreground"
                    : "border-border/50 bg-background text-muted-foreground hover:text-foreground hover:bg-muted/40",
                )}
                aria-pressed={isSelected}
              >
                {t(`ai.providers.style.${style}`)}
                {isInherited && (
                  <span className="ml-1 text-[9px] text-muted-foreground/70">({t('ai.providers.style.inherited')})</span>
                )}
              </button>
            );
          })}
        </div>
        <p className="text-[11px] text-muted-foreground/70">{t('ai.providers.style.help')}</p>
      </div>

      {resolvedStyle === "openai" && (
        <div className="space-y-1.5">
          <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.openaiApi')}</label>
          <div className="flex items-center gap-1.5">
            {OPENAI_API_OPTIONS.map((format) => {
              const isSelected = form.openaiApi === format;
              return (
                <button
                  key={format}
                  type="button"
                  onClick={() => setForm((prev) => ({ ...prev, openaiApi: format }))}
                  className={cn(
                    "h-7 px-2.5 rounded-md text-xs border transition-colors",
                    isSelected
                      ? "border-primary/70 bg-primary/15 text-foreground"
                      : "border-border/50 bg-background text-muted-foreground hover:text-foreground hover:bg-muted/40",
                  )}
                  aria-pressed={isSelected}
                >
                  {t(`ai.providers.openaiApi.${format}`)}
                </button>
              );
            })}
          </div>
          <p className="text-[11px] text-muted-foreground/70">{t('ai.providers.openaiApi.help')}</p>
        </div>
      )}

      {/* API Key */}
      <div className="space-y-1.5">
        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.apiKey')}</label>
        <div className="flex items-center gap-2">
          <div className="relative flex-1">
            <input
              type={showApiKey ? "text" : "password"}
              value={isDecrypting ? "" : form.apiKey}
              onChange={(e) => handleApiKeyChange(e.target.value)}
              placeholder={isDecrypting ? t('ai.providers.apiKey.decrypting') : t('ai.providers.apiKey.placeholder')}
              disabled={isDecrypting}
              className="w-full h-8 rounded-md border border-input bg-background px-3 pr-9 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
            />
            <button
              type="button"
              onClick={() => setShowApiKey(!showApiKey)}
              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            >
              {showApiKey ? <EyeOff size={14} /> : <Eye size={14} />}
            </button>
          </div>
        </div>
      </div>

      {/* Base URL */}
      <div className="space-y-1.5">
        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.baseUrl')}</label>
        <input
          type="text"
          value={form.baseURL}
          onChange={(e) => setForm((prev) => ({ ...prev, baseURL: e.target.value }))}
          placeholder={preset?.defaultBaseURL || "https://"}
          className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
        />
        {resolvedStyle === "anthropic" ? (
          <p className="text-[11px] text-muted-foreground/70">{t('ai.providers.baseUrl.anthropicHelp')}</p>
        ) : null}
        {provider.providerId === "ollama" ? (
          <p className="text-[11px] text-muted-foreground/70">{t('ai.providers.baseUrl.ollamaHelp')}</p>
        ) : null}
      </div>

      {/* Default Model */}
      <div className="space-y-1.5">
        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.defaultModel')}</label>
        <ModelSelector
          value={form.defaultModel}
          onChange={(val) => setForm((prev) => ({ ...prev, defaultModel: val }))}
          onModelMetadata={(model) => {
            setForm((prev) => ({
              ...prev,
              modelContextWindows: mergeModelContextWindow(prev.modelContextWindows, model.id, model.contextWindow) ?? prev.modelContextWindows,
            }));
          }}
          baseURL={resolvedBaseURL}
          modelsEndpoint={preset?.modelsEndpoint}
          presetModels={preset?.defaultModels}
          apiKey={form.apiKey}
          providerId={provider.providerId}
          style={resolvedStyle}
          skipTLSVerify={form.skipTLSVerify}
        />
      </div>

      {/* Context window */}
      <div className="space-y-1.5">
        <label className="text-xs font-medium text-muted-foreground">{t('ai.providers.contextWindow')}</label>
        <input
          type="number"
          min={1}
          step={1}
          value={form.contextWindow}
          onChange={(e) => {
            setContextWindowError(null);
            setForm((prev) => ({ ...prev, contextWindow: e.target.value }));
          }}
          placeholder={
            form.defaultModel && form.modelContextWindows[form.defaultModel]
              ? String(form.modelContextWindows[form.defaultModel])
              : t('ai.providers.contextWindow.placeholder')
          }
          className={cn(
            "w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
            contextWindowError && "border-destructive focus-visible:ring-destructive",
          )}
        />
        {contextWindowError && <p className="text-[11px] text-destructive">{contextWindowError}</p>}
        <p className="text-[11px] text-muted-foreground/70">{t('ai.providers.contextWindow.help')}</p>
      </div>

      {/* Skip TLS Verification */}
      <label className="flex items-center gap-2 cursor-pointer">
        <input
          type="checkbox"
          checked={form.skipTLSVerify}
          onChange={(e) => setForm((prev) => ({ ...prev, skipTLSVerify: e.target.checked }))}
          className="rounded border-input"
        />
        <span className="text-xs text-muted-foreground">{t('ai.providers.skipTLSVerify')}</span>
      </label>

      {/* Advanced Parameters */}
      <div className="space-y-2">
        <button
          type="button"
          onClick={() => setShowAdvanced(!showAdvanced)}
          className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
        >
          {showAdvanced ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
          {t('ai.providers.advancedParams')}
        </button>
        {showAdvanced && (
          <div className="space-y-2.5 pl-1 border-l-2 border-border/40 ml-1">
            <p className="text-[11px] text-muted-foreground/70 pl-3">{t('ai.providers.advancedParams.hint')}</p>
            {/* max_tokens */}
            <div className="space-y-1 pl-3">
              <label className="text-xs text-muted-foreground">max_tokens</label>
              <input
                type="number"
                min={1}
                step={1}
                value={advancedParamRaw.maxTokens ?? (form.advancedParams.maxTokens != null ? String(form.advancedParams.maxTokens) : "")}
                onChange={(e) => handleAdvancedParam("maxTokens", e.target.value)}
                placeholder={t('ai.providers.advancedParams.maxTokens.placeholder')}
                className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
              />
            </div>
            {/* temperature */}
            <div className="space-y-1 pl-3">
              <label className="text-xs text-muted-foreground">temperature <span className="text-muted-foreground/50">(0–2)</span></label>
              <input
                type="number"
                min={0}
                max={2}
                step={0.1}
                value={advancedParamRaw.temperature ?? (form.advancedParams.temperature != null ? String(form.advancedParams.temperature) : "")}
                onChange={(e) => handleAdvancedParam("temperature", e.target.value)}
                placeholder={t('ai.providers.advancedParams.default')}
                className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
              />
            </div>
            {/* top_p */}
            <div className="space-y-1 pl-3">
              <label className="text-xs text-muted-foreground">top_p <span className="text-muted-foreground/50">(0–1)</span></label>
              <input
                type="number"
                min={0}
                max={1}
                step={0.05}
                value={advancedParamRaw.topP ?? (form.advancedParams.topP != null ? String(form.advancedParams.topP) : "")}
                onChange={(e) => handleAdvancedParam("topP", e.target.value)}
                placeholder={t('ai.providers.advancedParams.default')}
                className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
              />
            </div>
            {/* frequency_penalty */}
            <div className="space-y-1 pl-3">
              <label className="text-xs text-muted-foreground">frequency_penalty <span className="text-muted-foreground/50">(-2–2)</span></label>
              <input
                type="number"
                min={-2}
                max={2}
                step={0.1}
                value={advancedParamRaw.frequencyPenalty ?? (form.advancedParams.frequencyPenalty != null ? String(form.advancedParams.frequencyPenalty) : "")}
                onChange={(e) => handleAdvancedParam("frequencyPenalty", e.target.value)}
                placeholder={t('ai.providers.advancedParams.default')}
                className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
              />
            </div>
            {/* presence_penalty */}
            <div className="space-y-1 pl-3">
              <label className="text-xs text-muted-foreground">presence_penalty <span className="text-muted-foreground/50">(-2–2)</span></label>
              <input
                type="number"
                min={-2}
                max={2}
                step={0.1}
                value={advancedParamRaw.presencePenalty ?? (form.advancedParams.presencePenalty != null ? String(form.advancedParams.presencePenalty) : "")}
                onChange={(e) => handleAdvancedParam("presencePenalty", e.target.value)}
                placeholder={t('ai.providers.advancedParams.default')}
                className="w-full h-8 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
              />
            </div>
          </div>
        )}
      </div>

      {/* Actions */}
      <div className="flex flex-col gap-2 pt-1">
        <div className="flex items-center gap-2">
          <Button
            variant="default"
            size="sm"
            className={cn(PROVIDER_ACTION_CLASS, "border border-transparent")}
            onClick={() => void handleSave()}
          >
            <Check size={14} className="size-3.5 shrink-0" />
            {t('common.save')}
          </Button>
          <Button
            variant="outline"
            size="sm"
            className={PROVIDER_ACTION_CLASS}
            onClick={() => void handleTestConnection()}
            disabled={isTesting || isDecrypting}
          >
            <RefreshCw size={14} className={cn("size-3.5 shrink-0", isTesting && "animate-spin")} />
            {isTesting ? t('ai.providers.test.testing') : t('ai.providers.test')}
          </Button>
          <Button variant="ghost" size="sm" className={PROVIDER_ACTION_CLASS} onClick={onCancel}>
            {t('common.cancel')}
          </Button>
        </div>
        {(isTesting || probeResult) && (
          <p
            className={cn(
              "text-[11px]",
              isTesting && "text-muted-foreground",
              probeResult?.health === "ok" && "text-emerald-500",
              probeResult?.health === "warn" && "text-amber-500",
              probeResult?.health === "error" && "text-destructive",
            )}
            role="status"
            aria-live="polite"
          >
            {isTesting ? t('ai.providers.test.testing') : probeResult?.message}
          </p>
        )}
      </div>
    </div>
  );
};