<script setup>
import { computed, ref, watch } from "vue";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import DerivedValueEditor from "../../../DerivedValueEditor.vue";
import ValidationRulesField from "../../../ValidationRulesField.vue";
import { Field, FieldLabel } from "../../../../ui/field";
import { InputGroup, InputGroupInput } from "../../../../ui/input-group";
import { Locale as LocaleField } from "../../../../ui/locale";
import { Markdown } from "../../../../ui/markdown";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "../../../../ui/select";
import { Switch } from "../../../../ui/switch";
import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
import { DEFAULT_FIELD_ORIENTATION, FIELD_ORIENTATION_OPTIONS } from "../../../utils/common";
import { DataSource } from "../../../../table/schema";
import { schema } from "./schema";
defineOptions({ name: "ShwfedTreeComboboxMultiFieldConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(fieldSchema, f);
const dataSourceSchema = DataSource(() => {
});
const dataSourceFieldTitle = (f) => getStructFieldTitle(dataSourceSchema, f) ?? f;
const dataSourceFieldDescription = (f) => getStructFieldDescription(dataSourceSchema, f);
const nodeExtraVars = {
  node: {
    type: "dyn",
    label: "\u5F53\u524D\u8282\u70B9",
    description: "\u7531 `\u6570\u636E` \u8868\u8FBE\u5F0F\u8FD4\u56DE\u7684\u6BCF\u4E00\u9879\uFF1B\u7C7B\u578B\u5728\u914D\u7F6E\u65F6\u672A\u77E5\uFF08`dyn`\uFF09"
  }
};
const nodeJsonExtraVars = {
  json: {
    type: "optional<dyn>",
    label: "HTTP \u54CD\u5E94\u4F53",
    description: "\u5DF2\u89E3\u6790\u7684 JSON \u54CD\u5E94\uFF1B\u672A\u914D\u7F6E `request` \u65F6\u4E3A `none`"
  }
};
const bindingText = computed({
  get: () => value.value.binding ?? "",
  set: (next) => {
    const trimmed = next.trim();
    if (trimmed.length === 0) {
      const { binding: _omit, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, binding: trimmed };
    }
  }
});
const CASCADE_OPTIONS = [
  {
    value: "independent",
    label: "\u72EC\u7ACB",
    description: "\u52FE\u9009 / \u53D6\u6D88\u53EA\u4F5C\u7528\u4E8E\u5F53\u524D\u8282\u70B9\uFF1B\u7236\u5B50\u4E92\u4E0D\u5F71\u54CD"
  },
  {
    value: "cascade-down",
    label: "\u5411\u4E0B\u7EA7\u8054",
    description: "\u52FE\u9009\u7236\u8282\u70B9\u81EA\u52A8\u52FE\u9009\u5176\u5168\u90E8\u53EF\u9009\u540E\u4EE3\uFF1B\u53D6\u6D88\u65F6\u540C\u7406\u3002\u7236\u8282\u70B9\u7684\u52FE\u9009\u72B6\u6001\u72EC\u7ACB\u8FFD\u8E2A"
  },
  {
    value: "cascade-both",
    label: "\u53CC\u5411\u7EA7\u8054",
    description: "\u5728\u5411\u4E0B\u7EA7\u8054\u57FA\u7840\u4E0A\uFF0C\u7236\u8282\u70B9\u53CD\u6620\u540E\u4EE3\u52FE\u9009\u72B6\u6001\uFF08\u5168\u9009\u2192\u9009\u4E2D\u3001\u90E8\u5206\u2192\u534A\u9009\u3001\u5168\u4E0D\u9009\u2192\u672A\u9009\uFF09"
  }
];
const cascadeOpen = ref(false);
const hoveredCascade = ref(null);
watch(cascadeOpen, (isOpen) => {
  hoveredCascade.value = isOpen ? value.value.cascade ?? "independent" : null;
});
const hoveredCascadeDescription = computed(
  () => CASCADE_OPTIONS.find((o) => o.value === hoveredCascade.value)?.description
);
function setDataSourceData(next) {
  value.value = {
    ...value.value,
    dataSource: { ...value.value.dataSource, data: next }
  };
}
function setDataSourceRequest(next) {
  const trimmed = next.trim();
  if (trimmed.length === 0) {
    const { request: _omit, ...rest } = value.value.dataSource;
    value.value = { ...value.value, dataSource: rest };
  } else {
    value.value = {
      ...value.value,
      dataSource: { ...value.value.dataSource, request: next }
    };
  }
}
function setOptionalExpression(key, next) {
  if (next.length === 0) {
    const { [key]: _omit, ...rest } = value.value;
    value.value = rest;
  } else {
    value.value = { ...value.value, [key]: next };
  }
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <!-- Row 1: 内部名称 + 绑定路径 -->
    <div class="grid grid-cols-2 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('displayName')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('displayName')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("displayName") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            :model-value="value.displayName ?? ''"
            placeholder="例：所属部门"
            @update:model-value="(v) => {
  const s = String(v ?? '');
  value = { ...value, displayName: s.length > 0 ? s : void 0 };
}"
          />
        </InputGroup>
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('binding')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('binding')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("binding") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            v-model="bindingText"
            placeholder="例：user.departmentIds"
            class="font-mono"
          />
        </InputGroup>
      </Field>
    </div>

    <!-- Row 2: 标签 + 占位符 + 提示 -->
    <div class="grid grid-cols-3 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('label')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('label')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("label") }}
        </FieldLabel>
        <LocaleField
          translate-hint="form field label"
          :model-value="value.label"
          @update:model-value="(v) => value = { ...value, label: v }"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('placeholder')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('placeholder')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("placeholder") }}
        </FieldLabel>
        <LocaleField
          :model-value="value.placeholder"
          @update:model-value="(v) => value = { ...value, placeholder: v }"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('tooltip')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('tooltip')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("tooltip") }}
        </FieldLabel>
        <LocaleField
          markdown
          translate-hint="form field tooltip"
          :model-value="value.tooltip"
          @update:model-value="(v) => value = { ...value, tooltip: v }"
        />
      </Field>
    </div>

    <!-- Row 3: orientation -->
    <div class="grid grid-cols-3 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('orientation')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('orientation')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("orientation") }}
        </FieldLabel>
        <Select
          :model-value="value.orientation ?? DEFAULT_FIELD_ORIENTATION"
          @update:model-value="(v) => value = { ...value, orientation: v }"
        >
          <SelectTrigger class="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem
              v-for="opt in FIELD_ORIENTATION_OPTIONS"
              :key="opt.value"
              :value="opt.value"
            >
              {{ opt.label }}
            </SelectItem>
          </SelectContent>
        </Select>
      </Field>
    </div>

    <!-- 数据源 -->
    <h3 class="text-xs font-medium text-zinc-500">
      {{ fieldTitle("dataSource") }}
    </h3>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="dataSourceFieldDescription('request')"
          #tooltip
        >
          <Markdown
            :source="dataSourceFieldDescription('request')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ dataSourceFieldTitle("request") }}
      </FieldLabel>
      <ExpressionEditor
        :model-value="value.dataSource.request ?? ''"
        placeholder="如 http.get('/api/departments/tree')"
        result-type="HttpRequest"
        multiline
        class="min-h-20"
        @update:model-value="setDataSourceRequest"
      />
    </Field>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="dataSourceFieldDescription('data')"
          #tooltip
        >
          <Markdown
            :source="dataSourceFieldDescription('data')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ dataSourceFieldTitle("data") }}
      </FieldLabel>
      <ExpressionEditor
        :model-value="value.dataSource.data"
        placeholder="如 json.?value.roots.orValue([])"
        result-type="list"
        :extra-vars="nodeJsonExtraVars"
        @update:model-value="setDataSourceData"
      />
    </Field>

    <!-- 节点 -->
    <h3 class="text-xs font-medium text-zinc-500">
      节点
    </h3>

    <div class="grid grid-cols-2 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('nodeKey')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('nodeKey')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("nodeKey") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.nodeKey"
          placeholder="例：string(node.id)"
          :result-type="['string', 'number', 'dyn']"
          :extra-vars="nodeExtraVars"
          class="min-h-10"
          @update:model-value="(v) => value = { ...value, nodeKey: v }"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('nodeChildren')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('nodeChildren')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("nodeChildren") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.nodeChildren"
          placeholder="例：has(node.children) ? node.children : null"
          result-type="list"
          :extra-vars="nodeExtraVars"
          class="min-h-10"
          @update:model-value="(v) => value = { ...value, nodeChildren: v }"
        />
      </Field>
    </div>

    <div class="grid grid-cols-2 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('nodeLabel')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('nodeLabel')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("nodeLabel") }}
        </FieldLabel>
        <LocaleField
          markdown
          translate-hint="tree node label"
          :model-value="value.nodeLabel"
          @update:model-value="(v) => value = { ...value, nodeLabel: v }"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('nodeTooltip')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('nodeTooltip')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("nodeTooltip") }}
        </FieldLabel>
        <LocaleField
          markdown
          translate-hint="tree node tooltip"
          :model-value="value.nodeTooltip"
          @update:model-value="(v) => value = { ...value, nodeTooltip: v }"
        />
      </Field>
    </div>

    <!-- 搜索: 额外关键词 -->
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('keywords')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('keywords')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("keywords") }}
      </FieldLabel>
      <ExpressionEditor
        :model-value="value.keywords ?? ''"
        placeholder="例：[node.code, node.alias]"
        result-type="list"
        :extra-vars="nodeExtraVars"
        class="min-h-10"
        @update:model-value="(v) => setOptionalExpression('keywords', v)"
      />
    </Field>

    <!-- 行为: 节点可选条件 + 级联模式 + 默认全部展开 -->
    <div class="grid grid-cols-3 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('nodeSelectable')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('nodeSelectable')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("nodeSelectable") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.nodeSelectable ?? ''"
          placeholder="例：!has(node.disabled) || !node.disabled"
          result-type="bool"
          :extra-vars="nodeExtraVars"
          class="min-h-10"
          @update:model-value="(v) => setOptionalExpression('nodeSelectable', v)"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('cascade')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('cascade')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("cascade") }}
        </FieldLabel>
        <Select
          v-model:open="cascadeOpen"
          :model-value="value.cascade ?? 'independent'"
          @update:model-value="(v) => value = { ...value, cascade: v }"
        >
          <SelectTrigger class="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem
              v-for="opt in CASCADE_OPTIONS"
              :key="opt.value"
              :value="opt.value"
              @mouseenter="hoveredCascade = opt.value"
              @focus="hoveredCascade = opt.value"
            >
              {{ opt.label }}
            </SelectItem>
            <div
              v-if="hoveredCascadeDescription"
              data-slot="cascade-description"
              class="mt-1 border-t border-zinc-200 px-2 py-1.5 text-xs text-zinc-500"
            >
              {{ hoveredCascadeDescription }}
            </div>
          </SelectContent>
        </Select>
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('expandAll')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('expandAll')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("expandAll") }}
        </FieldLabel>
        <div>
          <Switch
            :model-value="value.expandAll ?? false"
            @update:model-value="(v) => value = { ...value, expandAll: v }"
          />
        </div>
      </Field>
    </div>

    <!-- 通用: 隐藏 / 禁用 / 只读 + 派生值 -->
    <div class="grid grid-cols-3 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template #tooltip>
            <Markdown
              :source="fieldDescription('required') ?? '\u8FD4\u56DE `true` \u65F6\u663E\u793A\u5FC5\u586B\u661F\u53F7\u5E76\u8981\u6C42\u975E\u7A7A'"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("required") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.required ?? ''"
          placeholder="例：form.type == 'company'"
          result-type="bool"
          class="min-h-10"
          @update:model-value="(v) => value = { ...value, required: v.length > 0 ? v : void 0 }"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template #tooltip>
            <Markdown
              :source="fieldDescription('hidden') ?? '\u8FD4\u56DE `true` \u65F6\u5B57\u6BB5\u5728\u6240\u6709\u5E03\u5C40\u4E2D\u90FD\u4E0D\u6E32\u67D3'"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("hidden") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.hidden ?? ''"
          placeholder="例：form.role == 'guest'"
          result-type="bool"
          class="min-h-10"
          @update:model-value="(v) => setOptionalExpression('hidden', v)"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template #tooltip>
            <Markdown
              :source="fieldDescription('disabled') ?? '\u8FD4\u56DE `true` \u65F6\u4ECD\u6E32\u67D3\u4F46\u4E0D\u53EF\u52FE\u9009'"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("disabled") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.disabled ?? ''"
          placeholder="例：form.status == 'locked'"
          result-type="bool"
          class="min-h-10"
          @update:model-value="(v) => setOptionalExpression('disabled', v)"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template #tooltip>
            <Markdown
              :source="fieldDescription('readonly') ?? '\u8FD4\u56DE `true` \u65F6\u4EC5\u4EE5\u7EAF\u6587\u672C\u5C55\u793A\u5F53\u524D\u5DF2\u52FE\u9009\u8282\u70B9\u7684\u6807\u7B7E'"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("readonly") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.readonly ?? ''"
          placeholder="例：form.id != null"
          result-type="bool"
          class="min-h-10"
          @update:model-value="(v) => setOptionalExpression('readonly', v)"
        />
      </Field>
    </div>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template #tooltip>
          <Markdown
            :source="fieldDescription('derived')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("derived") }}
      </FieldLabel>
      <DerivedValueEditor
        :model-value="value.derived"
        result-type="list"
        placeholder="例：form.defaultDepartmentIds"
        @update:model-value="(v) => value = { ...value, derived: v }"
      />
    </Field>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template #tooltip>
          <Markdown
            :source="fieldDescription('validations')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("validations") }}
      </FieldLabel>
      <ValidationRulesField
        :model-value="value.validations"
        @update:model-value="(v) => value = { ...value, validations: v.length > 0 ? v : void 0 }"
      />
    </Field>
  </div>
</template>
