{fieldLabelText(field)} {#if field.secret} {at("settings_badge_secret", {}, "Secret")} {/if} {#if isOverridden(field)} {at("settings_badge_override", {}, "Override")} {/if} {field.key} {#if fieldDescriptionText(field)} {fieldDescriptionText(field)} {/if}

{#if field.type === "bool"}

setBoolField(field, checked)} class="admin-switch-root" > {valueFor(field) ? at("enabled", {}, "Включено") : at("disabled", {}, "Выключено")}

{:else if field.type === "color"} settingsStore.markDirty(field.key, e.currentTarget.value)} /> settingsStore.markDirty(field.key, e.currentTarget.value)} /> {:else if field.type === "icon"} {@const selectedIconName = iconValue(field)} {@const SelectedIcon = iconComponent(selectedIconName)} openIconPicker(field)} > {#if SelectedIcon} {/if} {iconLabel(field)} {#if !iconIsDefault(field)} settingsStore.markDirty(field.key, "")} > {at("clear", {}, "Clear")} {/if} {:else if field.choices && field.choices.length > 0} settingsStore.markDirty(field.key, value)} /> {:else if field.type === "int" || field.type === "float"} settingsStore.markDirty(field.key, e.currentTarget.value)} /> {:else if field.type === "text"}

settingsStore.markDirty(field.key, e.currentTarget.value)}
        />
      {:else if field.type === "json"}
        <div class="admin-json-toolbar">
          <FileInput
            id={"json-file-" + field.key}
            class="admin-json-file-input"
            accept="application/json,.json"
            onchange={(event) => handleJsonFile(field, event)}
          />
          <label
            class="admin-btn admin-btn-sm admin-btn-ghost admin-json-upload"
            for={"json-file-" + field.key}
          >
            <FileText size={13} />
            {at("settings_json_upload", {}, "Load .json")}
          </label>
          {#if valueFor(field)}
            <AdminButton
              size="sm"
              variant="ghost"
              onclick={() => settingsStore.markDirty(field.key, "")}
            >
              <X size={12} />
              {at("clear", {}, "Clear")}
            </AdminButton>
          {/if}
        </div>
        <Textarea
          class="admin-setting-textarea admin-setting-json-textarea"
          rows="10"
          spellcheck="false"
          placeholder={fieldPlaceholderText(field)}
          value={valueFor(field) ?? ""}
          oninput={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
        />
      {:else if field.secret}
        <Input
          class="input"
          type={revealed ? "text" : "password"}
          placeholder={secretPlaceholder(field)}
          autocomplete="off"
          value={valueFor(field) ?? ""}
          oninput={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
        />
        <AdminButton
          size="sm"
          variant="ghost"
          aria-label={revealed ? at("hide", {}, "Скрыть") : at("show", {}, "Показать")}
          onclick={() => toggleSecretReveal(field.key)}
        >
          {#if revealed}<EyeOff size={13} />{:else}<Eye size={13} />{/if}
        </AdminButton>
      {:else}
        <Input
          class="input"
          type="text"
          placeholder={fieldPlaceholderText(field)}
          value={valueFor(field) ?? ""}
          oninput={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
        />
      {/if}
      {#if isOverridden(field) || settingsDirty[field.key]}
        <AdminButton size="sm" variant="ghost" onclick={() => settingsStore.resetField(field)}>
          <X size={12} />
          {at("reset", {}, "Сбросить")}
        </AdminButton>
      {/if}
    </div>
  </div>
{/snippet}

{#if settingsLoading || !visibleSettingsSections.length}
  <AdminEmptyState
    >{settingsLoading
      ? at("loading", {}, "Загрузка…")
      : at("no_data", {}, "Нет данных")}</AdminEmptyState
  >
{:else}
  <div
    style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;"
  >
    <p class="admin-muted" style="margin:0;">
      {at(
        "settings_hint",
        {},
        "Изменения в админке имеют приоритет над .env. Кнопка «Сбросить» возвращает значение из переменных окружения."
      )}
    </p>
    <div style="display:flex; gap:8px;">
      <AdminButton size="sm" variant="ghost" onclick={toggleAllSections}>
        {settingsAllOpen
          ? at("collapse_all", {}, "Свернуть всё")
          : at("expand_all", {}, "Развернуть всё")}
      </AdminButton>
      {#if Object.keys(settingsDirty).length > 0}
        <AdminButton
          size="sm"
          variant="primary"
          onclick={() => settingsStore.saveSettings(onSettingsSaved)}
          disabled={settingsSaving}
        >
          {settingsSaving ? at("saving", {}, "Сохранение...") : at("save", {}, "Сохранить")}
        </AdminButton>
      {/if}
    </div>
  </div>
  <Accordion.Root type="multiple" bind:value={settingsOpenSections} class="admin-accordion">
    {#each visibleSettingsSections as section}
      {@const dirtyInSection = section.fields.filter((f) => Boolean(settingsDirty[f.key])).length}
      {@const overriddenInSection = section.fields.filter((f) => isOverridden(f)).length}
      <Accordion.Item value={section.id} class="admin-accordion-item admin-card">
        <Accordion.Header class="admin-accordion-header">
          <Accordion.Trigger class="admin-accordion-trigger">
            <span class="admin-accordion-title">{sectionTitle(section.id)}</span>
            <span class="admin-accordion-meta">
              {at(
                "settings_params_count",
                { count: section.fields.length },
                `${section.fields.length} параметров`
              )}{#if overriddenInSection}
                · {at(
                  "settings_overridden_count",
                  { count: overriddenInSection },
                  `${overriddenInSection} override`
                )}{/if}{#if dirtyInSection}
                · {at(
                  "settings_dirty_count",
                  { count: dirtyInSection },
                  `${dirtyInSection} изм.`
                )}{/if}
            </span>
            <ChevronRight size={16} class="admin-accordion-chev" />
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content class="admin-accordion-content">
          {@const groups = groupSectionFields(section)}
          {@const rootGroup = groups.find((g) => !g.label)}
          {@const labelGroups = groups.filter((g) => g.label)}
          <div class="admin-settings-fields">
            {#if rootGroup}
              {#if rootGroup.webhook}
                {@render renderWebhookHint(rootGroup.webhook)}
              {/if}
              {@render renderGroupedFields(section, rootGroup)}
            {/if}
            {#if labelGroups.length}
              <Accordion.Root
                type="multiple"
                value={settingsOpenSubsections[section.id] || []}
                onValueChange={(v) =>
                  (settingsOpenSubsections = { ...settingsOpenSubsections, [section.id]: v })}
                class="admin-subsection-accordion"
              >
                {#each labelGroups as group}
                  {@const subDirty = group.fields.filter((f) =>
                    Boolean(settingsDirty[f.key])
                  ).length}
                  {@const subOverridden = group.fields.filter((f) => isOverridden(f)).length}
                  <Accordion.Item value={group.id} class="admin-settings-subsection">
                    <Accordion.Header class="admin-accordion-header">
                      <Accordion.Trigger class="admin-settings-subsection-trigger">
                        <strong>{subsectionTitle(group)}</strong>
                        <span class="admin-settings-subsection-meta">
                          {at(
                            "settings_fields_count",
                            { count: group.fields.length },
                            `${group.fields.length} полей`
                          )}{#if subOverridden}
                            · {at(
                              "settings_overridden_count",
                              { count: subOverridden },
                              `${subOverridden} override`
                            )}{/if}{#if subDirty}
                            · {at(
                              "settings_dirty_count",
                              { count: subDirty },
                              `${subDirty} изм.`
                            )}{/if}
                        </span>
                        <ChevronRight size={14} class="admin-accordion-chev" />
                      </Accordion.Trigger>
                    </Accordion.Header>
                    <Accordion.Content class="admin-accordion-content">
                      <div class="admin-settings-subsection-body">
                        {#if group.webhook}
                          {@render renderWebhookHint(group.webhook)}
                        {/if}
                        {@render renderGroupedFields(section, group)}
                      </div>
                    </Accordion.Content>
                  </Accordion.Item>
                {/each}
              </Accordion.Root>
            {/if}
          </div>
        </Accordion.Content>
      </Accordion.Item>
    {/each}
  </Accordion.Root>
{/if}

<Dialog
  open={Boolean(iconPickerField)}
  title={at("settings_icon_picker_title", {}, "Choose icon")}
  description={iconPickerField ? fieldLabelText(iconPickerField) : ""}
  closeLabel={at("close", {}, "Close")}
  onclose={closeIconPicker}
  class="admin-icon-picker-dialog"
>
  <div class="admin-icon-picker-body">
    {#if iconPickerField}
      {@const currentIconName = iconValue(iconPickerField)}
      {@const CurrentIcon = iconComponent(currentIconName)}
      <div class="admin-icon-picker-current">
        <span class="admin-icon-picker-current-preview" aria-hidden="true">
          {#if CurrentIcon}
            <svelte:component this={CurrentIcon} size={24} />
          {/if}
        </span>
        <span class="admin-icon-picker-current-meta">
          <small>{at("settings_icon_current", {}, "Current icon")}</small>
          <strong>{iconLabel(iconPickerField)}</strong>
        </span>
        {#if !iconIsDefault(iconPickerField)}
          <AdminButton
            size="sm"
            variant="ghost"
            onclick={() => settingsStore.markDirty(iconPickerField.key, "")}
          >
            <X size={12} />
            {at("settings_icon_use_default", {}, "Use default")}
          </AdminButton>
        {/if}
      </div>
    {/if}
    <div class="admin-icon-picker-toolbar">
      <label class="admin-icon-picker-search">
        <Search size={15} />
        <Input
          bind:value={iconPickerSearch}
          class="input"
          type="text"
          placeholder={at("search", {}, "Search")}
        />
      </label>
    </div>
    <ScrollArea class="admin-icon-picker-scroll" maxHeight="min(52vh, 460px)">
      <div class="admin-icon-picker-grid">
        {#each filteredIconOptions as iconName}
          {@const Icon = iconComponent(iconName)}
          <button
            class:active={iconPickerField && iconValue(iconPickerField) === iconName}
            class="admin-icon-picker-option"
            type="button"
            onclick={() => selectIcon(iconName)}
          >
            {#if Icon}
              <svelte:component this={Icon} size={18} />
            {/if}
            <span>{iconName}</span>
          </button>
        {/each}
      </div>
    </ScrollArea>
  </div>
</Dialog>