cc-switch/src/components/UsageScriptModal.tsx

import React, { useState } from "react";
import { Play, Wand2, Eye, EyeOff, Save } from "lucide-react";
import { toast } from "sonner";
import { useTranslation } from "react-i18next";
import { Provider, UsageScript } from "@/types";
import { usageApi, type AppId } from "@/lib/api";
import JsonEditor from "./JsonEditor";
import * as prettier from "prettier/standalone";
import * as parserBabel from "prettier/parser-babel";
import * as pluginEstree from "prettier/plugins/estree";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
import { cn } from "@/lib/utils";

interface UsageScriptModalProps {
  provider: Provider;
  appId: AppId;
  isOpen: boolean;
  onClose: () => void;
  onSave: (script: UsageScript) => void;
}

// 预设模板键名（用于国际化）
const TEMPLATE_KEYS = {
  CUSTOM: "custom",
  GENERAL: "general",
  NEW_API: "newapi",
} as const;

// 生成预设模板的函数（支持国际化）
const generatePresetTemplates = (
  t: (key: string) => string,
): Record<string, string> => ({
  [TEMPLATE_KEYS.CUSTOM]: `({
  request: {
    url: "",
    method: "GET",
    headers: {}
  },
  extractor: function(response) {
    return {
      remaining: 0,
      unit: "USD"
    };
  }
})`,

  [TEMPLATE_KEYS.GENERAL]: `({
  request: {
    url: "{{baseUrl}}/user/balance",
    method: "GET",
    headers: {
      "Authorization": "Bearer {{apiKey}}",
      "User-Agent": "cc-switch/1.0"
    }
  },
  extractor: function(response) {
    return {
      isValid: response.is_active || true,
      remaining: response.balance,
      unit: "USD"
    };
  }
})`,

  [TEMPLATE_KEYS.NEW_API]: `({
  request: {
    url: "{{baseUrl}}/api/user/self",
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer {{accessToken}}",
      "New-Api-User": "{{userId}}"
    },
  },
  extractor: function (response) {
    if (response.success && response.data) {
      return {
        planName: response.data.group || "${t("usageScript.defaultPlan")}",
        remaining: response.data.quota / 500000,
        used: response.data.used_quota / 500000,
        total: (response.data.quota + response.data.used_quota) / 500000,
        unit: "USD",
      };
    }
    return {
      isValid: false,
      invalidMessage: response.message || "${t("usageScript.queryFailedMessage")}"
    };
  },
})`,
});

// 模板名称国际化键映射
const TEMPLATE_NAME_KEYS: Record<string, string> = {
  [TEMPLATE_KEYS.CUSTOM]: "usageScript.templateCustom",
  [TEMPLATE_KEYS.GENERAL]: "usageScript.templateGeneral",
  [TEMPLATE_KEYS.NEW_API]: "usageScript.templateNewAPI",
};

const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
  provider,
  appId,
  isOpen,
  onClose,
  onSave,
}) => {
  const { t } = useTranslation();

  // 生成带国际化的预设模板
  const PRESET_TEMPLATES = generatePresetTemplates(t);

  const [script, setScript] = useState<UsageScript>(() => {
    return (
      provider.meta?.usage_script || {
        enabled: false,
        language: "javascript",
        code: PRESET_TEMPLATES[TEMPLATE_KEYS.GENERAL],
        timeout: 10,
      }
    );
  });

  const [testing, setTesting] = useState(false);

  // 🔧 失焦时的验证（严格）- 仅确保有效整数
  const validateTimeout = (value: string): number => {
    const num = Number(value);
    if (isNaN(num) || value.trim() === "") {
      return 10;
    }
    if (!Number.isInteger(num)) {
      toast.warning(
        t("usageScript.timeoutMustBeInteger") || "超时时间必须为整数",
      );
    }
    if (num < 0) {
      toast.error(
        t("usageScript.timeoutCannotBeNegative") || "超时时间不能为负数",
      );
      return 10;
    }
    return Math.floor(num);
  };

  // 🔧 失焦时的验证（严格）- 自动查询间隔
  const validateAndClampInterval = (value: string): number => {
    const num = Number(value);
    if (isNaN(num) || value.trim() === "") {
      return 0;
    }
    if (!Number.isInteger(num)) {
      toast.warning(
        t("usageScript.intervalMustBeInteger") || "自动查询间隔必须为整数",
      );
    }
    if (num < 0) {
      toast.error(
        t("usageScript.intervalCannotBeNegative") || "自动查询间隔不能为负数",
      );
      return 0;
    }
    const clamped = Math.max(0, Math.min(1440, Math.floor(num)));
    if (clamped !== num && num > 0) {
      toast.info(
        t("usageScript.intervalAdjusted", { value: clamped }) ||
          `自动查询间隔已调整为 ${clamped} 分钟`,
      );
    }
    return clamped;
  };

  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(
    () => {
      const existingScript = provider.meta?.usage_script;
      if (existingScript?.accessToken || existingScript?.userId) {
        return TEMPLATE_KEYS.NEW_API;
      }
      return null;
    },
  );

  const [showApiKey, setShowApiKey] = useState(false);
  const [showAccessToken, setShowAccessToken] = useState(false);

  const handleSave = () => {
    if (script.enabled && !script.code.trim()) {
      toast.error(t("usageScript.scriptEmpty"));
      return;
    }
    if (script.enabled && !script.code.includes("return")) {
      toast.error(t("usageScript.mustHaveReturn"), { duration: 5000 });
      return;
    }
    onSave(script);
    onClose();
  };

  const handleTest = async () => {
    setTesting(true);
    try {
      const result = await usageApi.testScript(
        provider.id,
        appId,
        script.code,
        script.timeout,
        script.apiKey,
        script.baseUrl,
        script.accessToken,
        script.userId,
      );
      if (result.success && result.data && result.data.length > 0) {
        const summary = result.data
          .map((plan) => {
            const planInfo = plan.planName ? `[${plan.planName}]` : "";
            return `${planInfo} ${t("usage.remaining")} ${plan.remaining} ${plan.unit}`;
          })
          .join(", ");
        toast.success(`${t("usageScript.testSuccess")}${summary}`, {
          duration: 3000,
        });
      } else {
        toast.error(
          `${t("usageScript.testFailed")}: ${result.error || t("endpointTest.noResult")}`,
          {
            duration: 5000,
          },
        );
      }
    } catch (error: any) {
      toast.error(
        `${t("usageScript.testFailed")}: ${error?.message || t("common.unknown")}`,
        {
          duration: 5000,
        },
      );
    } finally {
      setTesting(false);
    }
  };

  const handleFormat = async () => {
    try {
      const formatted = await prettier.format(script.code, {
        parser: "babel",
        plugins: [parserBabel as any, pluginEstree as any],
        semi: true,
        singleQuote: false,
        tabWidth: 2,
        printWidth: 80,
      });
      setScript({ ...script, code: formatted.trim() });
      toast.success(t("usageScript.formatSuccess"), { duration: 1000 });
    } catch (error: any) {
      toast.error(
        `${t("usageScript.formatFailed")}: ${error?.message || t("jsonEditor.invalidJson")}`,
        {
          duration: 3000,
        },
      );
    }
  };

  const handleUsePreset = (presetName: string) => {
    const preset = PRESET_TEMPLATES[presetName];
    if (preset) {
      if (presetName === TEMPLATE_KEYS.CUSTOM) {
        setScript({
          ...script,
          code: preset,
          apiKey: undefined,
          baseUrl: undefined,
          accessToken: undefined,
          userId: undefined,
        });
      } else if (presetName === TEMPLATE_KEYS.GENERAL) {
        setScript({
          ...script,
          code: preset,
          accessToken: undefined,
          userId: undefined,
        });
      } else if (presetName === TEMPLATE_KEYS.NEW_API) {
        setScript({
          ...script,
          code: preset,
          apiKey: undefined,
        });
      }
      setSelectedTemplate(presetName);
    }
  };

  const shouldShowCredentialsConfig =
    selectedTemplate === TEMPLATE_KEYS.GENERAL ||
    selectedTemplate === TEMPLATE_KEYS.NEW_API;

  const footer = (
    <>
      <div className="flex gap-2">
        <Button
          variant="secondary"
          size="sm"
          onClick={handleTest}
          disabled={!script.enabled || testing}
        >
          <Play size={14} className="mr-1" />
          {testing ? t("usageScript.testing") : t("usageScript.testScript")}
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={handleFormat}
          disabled={!script.enabled}
          title={t("usageScript.format")}
        >
          <Wand2 size={14} className="mr-1" />
          {t("usageScript.format")}
        </Button>
      </div>

      <div className="flex gap-2">
        <Button
          variant="outline"
          onClick={onClose}
          className="border-border/20 hover:bg-accent hover:text-accent-foreground"
        >
          {t("common.cancel")}
        </Button>
        <Button
          onClick={handleSave}
          className="bg-primary text-primary-foreground hover:bg-primary/90"
        >
          <Save size={16} className="mr-2" />
          {t("usageScript.saveConfig")}
        </Button>
      </div>
    </>
  );

  return (
    <FullScreenPanel
      isOpen={isOpen}
      title={`${t("usageScript.title")} - ${provider.name}`}
      onClose={onClose}
      footer={footer}
    >
      <div className="rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm flex items-center justify-between gap-4">
        <div className="space-y-1">
          <p className="text-sm font-medium leading-none text-foreground">
            {t("usageScript.enableUsageQuery")}
          </p>
          <p className="text-xs text-muted-foreground">
            {t("usageScript.autoQueryIntervalHint")}
          </p>
        </div>
        <Switch
          checked={script.enabled}
          onCheckedChange={(checked) =>
            setScript({ ...script, enabled: checked })
          }
          aria-label={t("usageScript.enableUsageQuery")}
        />
      </div>

      {script.enabled && (
        <div className="space-y-6">
          {/* 预设模板选择 */}
          <div className="space-y-4 rounded-xl border border-border-default bg-card p-4 shadow-sm">
            <div className="flex flex-wrap items-center justify-between gap-2">
              <Label className="text-base font-medium">
                {t("usageScript.presetTemplate")}
              </Label>
              <span className="text-xs text-muted-foreground">
                {t("usageScript.variablesHint")}
              </span>
            </div>
            <div className="flex gap-2 flex-wrap">
              {Object.keys(PRESET_TEMPLATES).map((name) => {
                const isSelected = selectedTemplate === name;
                return (
                  <Button
                    key={name}
                    type="button"
                    variant={isSelected ? "default" : "outline"}
                    size="sm"
                    className={cn(
                      "rounded-lg border",
                      isSelected
                        ? "shadow-sm"
                        : "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground",
                    )}
                    onClick={() => handleUsePreset(name)}
                  >
                    {t(TEMPLATE_NAME_KEYS[name])}
                  </Button>
                );
              })}
            </div>

            {/* 凭证配置 */}
            {shouldShowCredentialsConfig && (
              <div className="space-y-4">
                <h4 className="text-sm font-medium text-foreground">
                  {t("usageScript.credentialsConfig")}
                </h4>

                <div className="grid gap-4 md:grid-cols-2">
                  {selectedTemplate === TEMPLATE_KEYS.GENERAL && (
                    <>
                      <div className="space-y-2">
                        <Label htmlFor="usage-api-key">API Key</Label>
                        <div className="relative">
                          <Input
                            id="usage-api-key"
                            type={showApiKey ? "text" : "password"}
                            value={script.apiKey || ""}
                            onChange={(e) =>
                              setScript({ ...script, apiKey: e.target.value })
                            }
                            placeholder="sk-xxxxx"
                            autoComplete="off"
                            className="bg-card border-border-default"
                          />
                          {script.apiKey && (
                            <button
                              type="button"
                              onClick={() => setShowApiKey(!showApiKey)}
                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
                              aria-label={
                                showApiKey
                                  ? t("apiKeyInput.hide")
                                  : t("apiKeyInput.show")
                              }
                            >
                              {showApiKey ? (
                                <EyeOff size={16} />
                              ) : (
                                <Eye size={16} />
                              )}
                            </button>
                          )}
                        </div>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="usage-base-url">Base URL</Label>
                        <Input
                          id="usage-base-url"
                          type="text"
                          value={script.baseUrl || ""}
                          onChange={(e) =>
                            setScript({ ...script, baseUrl: e.target.value })
                          }
                          placeholder="https://api.example.com"
                          autoComplete="off"
                          className="bg-card border-border-default"
                        />
                      </div>
                    </>
                  )}

                  {selectedTemplate === TEMPLATE_KEYS.NEW_API && (
                    <>
                      <div className="space-y-2">
                        <Label htmlFor="usage-newapi-base-url">Base URL</Label>
                        <Input
                          id="usage-newapi-base-url"
                          type="text"
                          value={script.baseUrl || ""}
                          onChange={(e) =>
                            setScript({ ...script, baseUrl: e.target.value })
                          }
                          placeholder="https://api.newapi.com"
                          autoComplete="off"
                          className="bg-card border-border-default"
                        />
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="usage-access-token">
                          {t("usageScript.accessToken")}
                        </Label>
                        <div className="relative">
                          <Input
                            id="usage-access-token"
                            type={showAccessToken ? "text" : "password"}
                            value={script.accessToken || ""}
                            onChange={(e) =>
                              setScript({
                                ...script,
                                accessToken: e.target.value,
                              })
                            }
                            placeholder={t(
                              "usageScript.accessTokenPlaceholder",
                            )}
                            autoComplete="off"
                            className="bg-card border-border-default"
                          />
                          {script.accessToken && (
                            <button
                              type="button"
                              onClick={() =>
                                setShowAccessToken(!showAccessToken)
                              }
                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
                              aria-label={
                                showAccessToken
                                  ? t("apiKeyInput.hide")
                                  : t("apiKeyInput.show")
                              }
                            >
                              {showAccessToken ? (
                                <EyeOff size={16} />
                              ) : (
                                <Eye size={16} />
                              )}
                            </button>
                          )}
                        </div>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="usage-user-id">
                          {t("usageScript.userId")}
                        </Label>
                        <Input
                          id="usage-user-id"
                          type="text"
                          value={script.userId || ""}
                          onChange={(e) =>
                            setScript({ ...script, userId: e.target.value })
                          }
                          placeholder={t("usageScript.userIdPlaceholder")}
                          autoComplete="off"
                          className="bg-card border-border-default"
                        />
                      </div>
                    </>
                  )}
                </div>
              </div>
            )}
          </div>

          {/* 脚本配置 */}
          <div className="space-y-4 rounded-xl border border-border-default bg-card p-4 shadow-sm">
            <div className="flex items-center justify-between">
              <h4 className="text-base font-medium text-foreground">
                {t("usageScript.scriptConfig")}
              </h4>
              <p className="text-xs text-muted-foreground">
                {t("usageScript.variablesHint")}
              </p>
            </div>

            <div className="grid gap-4">
              <div className="space-y-2">
                <Label htmlFor="usage-request-url">
                  {t("usageScript.requestUrl")}
                </Label>
                <Input
                  id="usage-request-url"
                  type="text"
                  value={script.request?.url || ""}
                  onChange={(e) => {
                    setScript({
                      ...script,
                      request: { ...script.request, url: e.target.value },
                    });
                  }}
                  placeholder={t("usageScript.requestUrlPlaceholder")}
                  className="bg-card border-border-default"
                />
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="usage-method">
                    {t("usageScript.method")}
                  </Label>
                  <Input
                    id="usage-method"
                    type="text"
                    value={script.request?.method || "GET"}
                    onChange={(e) => {
                      setScript({
                        ...script,
                        request: {
                          ...script.request,
                          method: e.target.value.toUpperCase(),
                        },
                      });
                    }}
                    placeholder="GET / POST"
                    className="bg-card border-border-default"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="usage-timeout">
                    {t("usageScript.timeoutSeconds")}
                  </Label>
                  <Input
                    id="usage-timeout"
                    type="number"
                    min={0}
                    value={script.timeout ?? 10}
                    onChange={(e) =>
                      setScript({
                        ...script,
                        timeout: validateTimeout(e.target.value),
                      })
                    }
                    onBlur={(e) =>
                      setScript({
                        ...script,
                        timeout: validateTimeout(e.target.value),
                      })
                    }
                    className="bg-card border-border-default"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="usage-headers">
                  {t("usageScript.headers")}
                </Label>
                <JsonEditor
                  id="usage-headers"
                  value={
                    script.request?.headers
                      ? JSON.stringify(script.request.headers, null, 2)
                      : "{}"
                  }
                  onChange={(value) => {
                    try {
                      const parsed = JSON.parse(value || "{}");
                      setScript({
                        ...script,
                        request: { ...script.request, headers: parsed },
                      });
                    } catch (error) {
                      console.error("Invalid headers JSON", error);
                    }
                  }}
                  height={180}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="usage-body">{t("usageScript.body")}</Label>
                <JsonEditor
                  id="usage-body"
                  value={
                    script.request?.body
                      ? JSON.stringify(script.request.body, null, 2)
                      : "{}"
                  }
                  onChange={(value) => {
                    try {
                      const parsed =
                        value?.trim() === "" ? undefined : JSON.parse(value);
                      setScript({
                        ...script,
                        request: { ...script.request, body: parsed },
                      });
                    } catch (error) {
                      toast.error(
                        t("usageScript.invalidJson") || "Body 必须是合法 JSON",
                      );
                    }
                  }}
                  height={220}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="usage-interval">
                  {t("usageScript.autoIntervalMinutes")}
                </Label>
                <Input
                  id="usage-interval"
                  type="number"
                  min={0}
                  max={1440}
                  value={script.autoIntervalMinutes ?? 0}
                  onChange={(e) =>
                    setScript({
                      ...script,
                      autoIntervalMinutes: validateAndClampInterval(
                        e.target.value,
                      ),
                    })
                  }
                  onBlur={(e) =>
                    setScript({
                      ...script,
                      autoIntervalMinutes: validateAndClampInterval(
                        e.target.value,
                      ),
                    })
                  }
                  className="bg-card border-border-default"
                />
                <p className="text-xs text-muted-foreground">
                  {t("usageScript.autoQueryIntervalHint")}
                </p>
              </div>
            </div>
          </div>

          {/* 提取器代码 */}
          <div className="space-y-4 rounded-xl border border-border-default bg-card p-4 shadow-sm">
            <div className="flex items-center justify-between">
              <Label className="text-base font-medium">
                {t("usageScript.extractorCode")}
              </Label>
              <div className="text-xs text-muted-foreground">
                {t("usageScript.extractorHint")}
              </div>
            </div>
            <JsonEditor
              id="usage-code"
              value={script.code || ""}
              onChange={(value) => setScript({ ...script, code: value })}
              height={480}
              language="javascript"
              showMinimap={false}
            />
          </div>

          {/* 帮助信息 */}
          <div className="rounded-xl border border-border-default bg-card p-4 shadow-sm text-sm text-foreground/90">
            <h4 className="font-medium mb-2">{t("usageScript.scriptHelp")}</h4>
            <div className="space-y-3 text-xs">
              <div>
                <strong>{t("usageScript.configFormat")}</strong>
                <pre className="mt-1 p-2 bg-muted text-foreground rounded border border-border-default text-[10px] overflow-x-auto">
                  {`({
  request: {
    url: "{{baseUrl}}/api/usage",
    method: "POST",
    headers: {
      "Authorization": "Bearer {{apiKey}}",
      "User-Agent": "cc-switch/1.0"
    }
  },
  extractor: function(response) {
    return {
      isValid: !response.error,
      remaining: response.balance,
      unit: "USD"
    };
  }
})`}
                </pre>
              </div>

              <div>
                <strong>{t("usageScript.extractorFormat")}</strong>
                <ul className="mt-1 space-y-0.5 ml-2">
                  <li>{t("usageScript.fieldIsValid")}</li>
                  <li>{t("usageScript.fieldInvalidMessage")}</li>
                  <li>{t("usageScript.fieldRemaining")}</li>
                  <li>{t("usageScript.fieldUnit")}</li>
                  <li>{t("usageScript.fieldPlanName")}</li>
                  <li>{t("usageScript.fieldTotal")}</li>
                  <li>{t("usageScript.fieldUsed")}</li>
                  <li>{t("usageScript.fieldExtra")}</li>
                </ul>
              </div>

              <div className="text-muted-foreground">
                <strong>{t("usageScript.tips")}</strong>
                <ul className="mt-1 space-y-0.5 ml-2">
                  <li>
                    {t("usageScript.tip1", {
                      apiKey: "{{apiKey}}",
                      baseUrl: "{{baseUrl}}",
                    })}
                  </li>
                  <li>{t("usageScript.tip2")}</li>
                  <li>{t("usageScript.tip3")}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      )}
    </FullScreenPanel>
  );
};

export default UsageScriptModal;