"use client";

import { Flag, PhoneForwarded, Play, Tag } from "lucide-react";
import { useState } from "react";

import { SectionCard } from "@/components/editor/section-card";
import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";

import { ActionNodePanel } from "./ActionNodePanel";
import { AgentNodePanel } from "./AgentNodePanel";
import { NodeSelect, ToolOptionPicker } from "./controls";
import type { RuntimeNodeSpec, WorkflowNodeData } from "../specs";
import type { ModelOption, WorkflowSettings } from "../types";

export function NodeSettingsPanel({
  panel = false,
  spec,
  data,
  toolOptions,
  knowledgeOptions,
  llmOptions,
  asrOptions,
  ttsOptions,
  visionOptions,
  workflowSettings,
  onChange,
}: {
  panel?: boolean;
  spec: RuntimeNodeSpec;
  data: WorkflowNodeData;
  toolOptions: ModelOption[];
  knowledgeOptions: ModelOption[];
  llmOptions: ModelOption[];
  asrOptions: ModelOption[];
  ttsOptions: ModelOption[];
  visionOptions: ModelOption[];
  workflowSettings: WorkflowSettings;
  onChange: (patch: WorkflowNodeData) => void;
}) {
  const [draft, setDraft] = useState<WorkflowNodeData>({ ...data });
  const [argumentsJson, setArgumentsJson] = useState(
    JSON.stringify(data.arguments ?? {}, null, 2),
  );
  const [assignmentsJson, setAssignmentsJson] = useState(
    JSON.stringify(data.resultAssignments ?? {}, null, 2),
  );
  const [jsonError, setJsonError] = useState("");
  const commit = (next: WorkflowNodeData) => {
    setDraft(next);
    onChange(next);
  };
  const set = (key: string, val: unknown) =>
    commit({ ...draft, [key]: val });
  const setPatch = (patch: Partial<WorkflowNodeData>) =>
    commit({ ...draft, ...patch });
  const commitActionJson = (
    nextArgumentsJson: string,
    nextAssignmentsJson: string,
  ) => {
    try {
      const args = JSON.parse(nextArgumentsJson) as Record<string, unknown>;
      const assignments = JSON.parse(nextAssignmentsJson) as Record<string, string>;
      if (Array.isArray(args) || Array.isArray(assignments)) throw new Error();
      setJsonError("");
      commit({ ...draft, arguments: args, resultAssignments: assignments });
    } catch {
      setJsonError("参数和结果映射必须是 JSON 对象");
    }
  };

  if (panel) {
    if (spec.type !== "agent") {
      return (
        <WorkflowNodePanelForm
          spec={spec}
          draft={draft}
          set={set}
          toolOptions={toolOptions}
          argumentsJson={argumentsJson}
          assignmentsJson={assignmentsJson}
          jsonError={jsonError}
          setArgumentsJson={setArgumentsJson}
          setAssignmentsJson={setAssignmentsJson}
          commitActionJson={commitActionJson}
        />
      );
    }
    return (
      <AgentNodePanel
        draft={draft}
        set={set}
        setPatch={setPatch}
        workflowSettings={workflowSettings}
        toolOptions={toolOptions}
        knowledgeOptions={knowledgeOptions}
        llmOptions={llmOptions}
        asrOptions={asrOptions}
        ttsOptions={ttsOptions}
        visionOptions={visionOptions}
      />
    );
  }

  return (
    <>
      {!panel && (
        <DialogHeader>
          <DialogTitle className="font-display text-ink">
            编辑{spec.displayName}
          </DialogTitle>
        </DialogHeader>
      )}

      <div className="flex flex-col gap-5 py-2">
        {spec.fields.map((field) => {
          const raw = draft[field.key];
          if (field.type === "switch") {
            return (
              <label
                key={field.key}
                className="flex items-center justify-between gap-3"
              >
                <span className="text-sm font-medium text-foreground">
                  {field.label}
                </span>
                <Switch
                  checked={Boolean(raw)}
                  onCheckedChange={(checked) => set(field.key, checked)}
                />
              </label>
            );
          }
          return (
            <div key={field.key} className="flex flex-col gap-2">
              <label className="text-sm font-medium text-foreground">
                {field.label}
                {field.required && <span className="text-destructive"> *</span>}
              </label>
              {field.type === "textarea" ? (
                <Textarea
                  rows={4}
                  value={(raw as string) ?? ""}
                  onChange={(e) => set(field.key, e.target.value)}
                  className="field-sizing-fixed min-h-32 resize-y border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
                />
              ) : (
                <Input
                  value={(raw as string) ?? ""}
                  onChange={(e) => set(field.key, e.target.value)}
                  className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
                />
              )}
            </div>
          );
        })}

        {spec.type === "agent" && (
          <>
            <NodeSelect
              label="进入节点时"
              value={(draft.entryMode as string) || "wait_user"}
              options={[
                { value: "wait_user", label: "等待用户说话（默认）" },
                { value: "generate", label: "立即让 LLM 回复" },
                { value: "fixed_speech", label: "播放固定进入语" },
              ]}
              onChange={(value) => set("entryMode", value || "wait_user")}
              allowNone={false}
            />
            {draft.entryMode === "fixed_speech" && (
              <div className="block">
                <div className="mb-2 text-sm font-medium text-foreground">
                  固定进入语 <span className="text-destructive">*</span>
                </div>
                <Textarea
                  rows={3}
                  value={draft.entrySpeech ?? ""}
                  onChange={(event) => set("entrySpeech", event.target.value)}
                  placeholder="例如：您好，请告诉我需要处理的问题。"
                  className="field-sizing-fixed min-h-24 resize-y border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
                />
                <span className="mt-2 block text-xs text-muted-soft">
                  支持使用 {"{{variable}}"} 动态变量；只播放语音，不调用 LLM。
                </span>
              </div>
            )}
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium text-foreground">可用工具</label>
              <ToolOptionPicker
                options={toolOptions}
                selectedIds={draft.toolIds ?? []}
                onChange={(toolIds) => set("toolIds", toolIds)}
              />
            </div>
            <NodeSelect
              label="知识库"
              value={(draft.knowledgeBaseId as string) || ""}
              options={knowledgeOptions}
              onChange={(value) => set("knowledgeBaseId", value || "")}
            />
            <NodeSelect
              label="知识库模式"
              value={(draft.knowledgeMode as string) || "disabled"}
              options={[
                { value: "disabled", label: "关闭" },
                { value: "automatic", label: "每轮自动检索" },
                { value: "on_demand", label: "Agent 按需调用" },
              ]}
              onChange={(value) => set("knowledgeMode", value || "disabled")}
              allowNone={false}
            />
            <NodeSelect
              label="ASR 资源"
              value={(draft.asrResourceId as string) || ""}
              options={asrOptions}
              onChange={(value) => set("asrResourceId", value || "")}
              noneLabel="继承 Workflow 默认值"
            />
            <NodeSelect
              label="TTS 资源"
              value={(draft.ttsResourceId as string) || ""}
              options={ttsOptions}
              onChange={(value) => set("ttsResourceId", value || "")}
              noneLabel="继承 Workflow 默认值"
            />
          </>
        )}

        {spec.type === "action" && (
          <>
            <NodeSelect
              label="确定性执行工具"
              value={(draft.toolId as string) || ""}
              options={toolOptions}
              onChange={(value) => set("toolId", value || "")}
              noneLabel="请选择工具"
            />
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium text-foreground">工具参数 JSON</label>
              <Textarea
                rows={5}
                value={argumentsJson}
                onChange={(event) => {
                  const value = event.target.value;
                  setArgumentsJson(value);
                  commitActionJson(value, assignmentsJson);
                }}
                className="field-sizing-fixed min-h-32 resize-y border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
              />
              <span className="text-xs text-muted-soft">字符串值可使用 {"{{variable}}"} 动态变量。</span>
            </div>
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium text-foreground">结果变量映射 JSON</label>
              <Textarea
                rows={4}
                value={assignmentsJson}
                onChange={(event) => {
                  const value = event.target.value;
                  setAssignmentsJson(value);
                  commitActionJson(argumentsJson, value);
                }}
                className="field-sizing-fixed min-h-28 resize-y border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
              />
              <span className="text-xs text-muted-soft">格式：变量名 → 响应 JSON Path。</span>
            </div>
            {jsonError && <span className="text-xs text-destructive">{jsonError}</span>}
          </>
        )}

        {spec.type === "handoff" && (
          <NodeSelect
            label="转交类型"
            value={(draft.targetType as string) || "human"}
            options={[
              { value: "ai", label: "其他 AI" },
              { value: "human", label: "人工" },
              { value: "queue", label: "队列" },
              { value: "phone", label: "电话" },
            ]}
            onChange={(value) => set("targetType", value || "human")}
            allowNone={false}
          />
        )}

        {spec.type === "end" && (
          <NodeSelect
            label="结束范围"
            value={(draft.scope as string) || "session"}
            options={[
              { value: "flow", label: "仅结束 AI 流程" },
              { value: "session", label: "结束音视频会话" },
            ]}
            onChange={(value) => set("scope", value || "session")}
            allowNone={false}
          />
        )}
      </div>
    </>
  );
}

function WorkflowNodePanelForm({
  spec,
  draft,
  set,
  toolOptions,
  argumentsJson,
  assignmentsJson,
  jsonError,
  setArgumentsJson,
  setAssignmentsJson,
  commitActionJson,
}: {
  spec: RuntimeNodeSpec;
  draft: WorkflowNodeData;
  set: (key: string, val: unknown) => void;
  toolOptions: ModelOption[];
  argumentsJson: string;
  assignmentsJson: string;
  jsonError: string;
  setArgumentsJson: (value: string) => void;
  setAssignmentsJson: (value: string) => void;
  commitActionJson: (argumentsValue: string, assignmentsValue: string) => void;
}) {
  return (
    <div className="space-y-3">
      <SectionCard
        icon={<Tag size={15} />}
        title="节点信息"
        description="节点在画布上显示的名称"
      >
        <label className="block">
          <div className="mb-1.5 text-sm font-medium text-foreground">
            节点名称
          </div>
          <Input
            value={draft.name ?? ""}
            onChange={(event) => set("name", event.target.value)}
            className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
          />
        </label>
      </SectionCard>

      {spec.type === "start" && (
        <SectionCard
          icon={<Play size={15} />}
          title="开场白"
          description="会话建立后首先向用户播放的固定内容"
        >
          <label className="block">
            <div className="mb-1.5 text-sm font-medium text-foreground">
              固定开场白
            </div>
            <Textarea
              rows={5}
              value={draft.greeting ?? ""}
              onChange={(event) => set("greeting", event.target.value)}
              placeholder="例如：你好，我是 AI 视频助手，有什么可以帮你？"
              className="field-sizing-fixed min-h-28 resize-y border-hairline-strong bg-background text-sm text-foreground placeholder:text-muted-soft"
            />
          </label>
        </SectionCard>
      )}

      {spec.type === "action" && (
        <ActionNodePanel
          draft={draft}
          set={set}
          toolOptions={toolOptions}
          argumentsJson={argumentsJson}
          assignmentsJson={assignmentsJson}
          jsonError={jsonError}
          setArgumentsJson={setArgumentsJson}
          setAssignmentsJson={setAssignmentsJson}
          commitActionJson={commitActionJson}
        />
      )}

      {spec.type === "handoff" && (
        <SectionCard
          icon={<PhoneForwarded size={15} />}
          title="转交配置"
          description="发送转交事件并继续执行工作流"
        >
          <NodeSelect
            label="转交类型"
            value={(draft.targetType as string) || "human"}
            options={[
              { value: "ai", label: "其他 AI" },
              { value: "human", label: "人工" },
              { value: "queue", label: "队列" },
              { value: "phone", label: "电话" },
            ]}
            onChange={(value) => set("targetType", value || "human")}
            allowNone={false}
          />
          <label className="block">
            <div className="mb-1.5 text-sm font-medium text-foreground">
              转交目标
            </div>
            <Input
              value={draft.target ?? ""}
              onChange={(event) => set("target", event.target.value)}
              placeholder="人工、队列、AI 或电话号码"
              className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
            />
          </label>
          <label className="block">
            <div className="mb-1.5 text-sm font-medium text-foreground">
              转交提示
            </div>
            <Textarea
              rows={4}
              value={draft.message ?? ""}
              onChange={(event) => set("message", event.target.value)}
              placeholder="例如：好的，正在为你转接人工客服。"
              className="field-sizing-fixed min-h-24 resize-y border-hairline-strong bg-background text-sm text-foreground placeholder:text-muted-soft"
            />
          </label>
        </SectionCard>
      )}

      {spec.type === "end" && (
        <SectionCard
          icon={<Flag size={15} />}
          title="结束配置"
          description="结束工作流，并可在结束前播放一段固定回复"
        >
          <NodeSelect
            label="结束范围"
            value={(draft.scope as string) || "session"}
            options={[
              { value: "flow", label: "仅结束 AI 流程" },
              { value: "session", label: "结束音视频会话" },
            ]}
            onChange={(value) => set("scope", value || "session")}
            allowNone={false}
          />
          <label className="block">
            <div className="mb-1.5 text-sm font-medium text-foreground">
              固定结束语
            </div>
            <Textarea
              rows={4}
              value={draft.message ?? ""}
              onChange={(event) => set("message", event.target.value)}
              placeholder="例如：感谢你的来电，再见。"
              className="field-sizing-fixed min-h-24 resize-y border-hairline-strong bg-background text-sm text-foreground placeholder:text-muted-soft"
            />
          </label>
        </SectionCard>
      )}
    </div>
  );
}

/** Agent 右栏：与 AssistantPage 共用紧凑 SectionCard。 */