import type { Node } from "@xyflow/react";
import { NODE_KINDS } from "./nodeCatalog";

// 右检查器：按选中节点的类型渲染配置表单；空选时显示图级提示。
export function Inspector({
  node,
  onChange,
  onDelete,
}: {
  node: Node | null;
  onChange: (id: string, patch: Record<string, unknown>) => void;
  onDelete: (id: string) => void;
}) {
  if (!node) {
    return (
      <div className="p-4 text-xs text-gray-400">
        选中一个节点查看/编辑配置。
        <br />
        从左侧面板添加节点，拖动连线编排。
      </div>
    );
  }
  const data = node.data as { kind: string; label?: string; config?: Record<string, unknown> };
  const k = NODE_KINDS[data.kind] ?? NODE_KINDS.output;
  const config = data.config ?? {};

  const setConfig = (key: string, value: unknown) =>
    onChange(node.id, { config: { ...config, [key]: value } });

  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between border-b p-3">
        <span className={`rounded px-1.5 py-0.5 text-[11px] font-medium ${k.badge}`}>{k.label}</span>
        <button onClick={() => onDelete(node.id)} className="text-xs text-rose-500 hover:underline">
          删除
        </button>
      </div>
      <div className="flex flex-col gap-3 overflow-auto p-3">
        <label className="text-xs text-gray-500">
          标签
          <input
            className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
            value={data.label ?? ""}
            onChange={(e) => onChange(node.id, { label: e.target.value })}
          />
        </label>
        {k.fields.map((f) => {
          const v = config[f.key];
          return (
            <label key={f.key} className="text-xs text-gray-500">
              {f.label}
              {f.required && <span className="text-rose-500"> *</span>}
              {f.type === "select" ? (
                <select
                  className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
                  value={String(v ?? "")}
                  onChange={(e) => setConfig(f.key, e.target.value)}
                >
                  {f.options?.map((o) => (
                    <option key={o}>{o}</option>
                  ))}
                </select>
              ) : f.type === "textarea" ? (
                <textarea
                  className="mt-1 h-16 w-full resize-none rounded border px-2 py-1 text-sm text-gray-900"
                  value={String(v ?? "")}
                  placeholder={f.placeholder}
                  onChange={(e) => setConfig(f.key, e.target.value)}
                />
              ) : f.type === "checkbox" ? (
                <input
                  type="checkbox"
                  className="ml-2 align-middle"
                  checked={Boolean(v)}
                  onChange={(e) => setConfig(f.key, e.target.checked)}
                />
              ) : (
                <input
                  type={f.type === "number" ? "number" : "text"}
                  className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
                  value={String(v ?? "")}
                  placeholder={f.placeholder}
                  onChange={(e) =>
                    setConfig(f.key, f.type === "number" ? Number(e.target.value) : e.target.value)
                  }
                />
              )}
            </label>
          );
        })}
      </div>
    </div>
  );
}