import type {
  FormSchema,
  FormSectionSchema,
  SettingsGroup,
  SettingsModalSchema,
  SettingsTab,
  SettingsTabInput,
} from '../types'
import type { AccessControlled } from '../permissions'
import { normalizeItemInput } from '../utils/items'

export const APPEARANCE_TAB_ID = 'appearance'

export const APPEARANCE_TAB: SettingsTab = {
  id: APPEARANCE_TAB_ID,
  label: 'Appearance',
  // Heroicons "swatch" — the built-in tab sits beside plugin tabs that all
  // carry icons, so it needs one of its own to keep the rail consistent.
  icon: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"></path></svg>',
  description: 'Theme, color palette, and table density',
}

// Map settings groups onto the form-builder's flat-section shape.
// `title: ''` because the rail/pane header already shows the group name.
export function buildFlatSettingsSchema(schema: SettingsModalSchema): FormSchema {
  return {
    sections: schema.groups.map<FormSectionSchema>((group) => ({
      id: group.id,
      title: '',
      fields: group.fields,
      columns: group.columns,
      condition: group.condition,
    })),
  }
}

export function filterSettingsSchemaByAccess(
  schema: SettingsModalSchema,
  canShow: (item: AccessControlled) => boolean
): SettingsModalSchema {
  const groups = schema.groups.flatMap((group) => {
    if (!canShow(group)) return []

    const fields = group.fields.filter(canShow)
    if (fields.length === 0) return []

    return [{ ...group, fields }]
  })

  return { groups }
}

export function settingsGroupToTab(group: SettingsGroup): SettingsTab {
  return {
    id: group.id,
    label: group.label,
    icon: group.icon,
    description: group.description,
  }
}

export function normalizeVisibleSettingsTabs(
  tabs: SettingsTabInput[],
  canShow: (item: AccessControlled) => boolean
): SettingsTab[] {
  return tabs.map(normalizeItemInput).filter(canShow)
}

export function buildSettingsTabs(
  baseTabs: SettingsTab[],
  showAppearance: boolean,
  appearanceFirst = false
): SettingsTab[] {
  if (!showAppearance) return baseTabs
  return appearanceFirst ? [APPEARANCE_TAB, ...baseTabs] : [...baseTabs, APPEARANCE_TAB]
}