import { createRef, Ref, ref } from 'lit/directives/ref.js'
import {repeat} from 'lit/directives/repeat.js'
import GraphQL, { GraphQLOptions, GraphQLBackendType, LightweightType } from '../datasources/GraphQL'
import { COMMAND_ADD_DATA_SOURCE, DATA_SOURCE_CHANGED, DATA_SOURCE_DATA_LOAD_END, DATA_SOURCE_ERROR, DATA_SOURCE_READY, DataSourceEditorViewOptions, IDataSource } from '../types'
import { getDefaultOptions, getElementFromOption } from '../utils'
import { getAllDataSources, addDataSource, removeDataSource } from '../model/dataSourceRegistry'
import { css, html, LitElement, render, TemplateResult } from 'lit'
import { property, state } from 'lit/decorators.js'
import { Editor } from 'grapesjs'

const COMMON_STYLES = css`
    :host {
      font-family: var(--gjs-main-font);
      font-size: var(--gjs-font-size);
    }
    .ds-field {
      padding: 10px;
    }
    .ds-field > span {
      display: block;
    }
    hr.ds-separator {
      border: none;
      border-top: 1px solid var(--ds-button-bg);
    }
    .ds-field input,
    .ds-field select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: var(--gjs-main-dark-color);
      border: none;
      box-shadow: none;
      border-radius: 2px;
      box-sizing: border-box;
      padding: 0;
      position: relative;

      padding: 10px;
      color: inherit;
      width: 100%;
    }
    .ds-btn-prim {
      color:inherit;
      background-color:var(--gjs-main-light-color);
      border-radius:2px;
      padding:3px 6px;
      padding:var(--gjs-input-padding);
      cursor:pointer;
      border:none
    }
    .ds-btn-prim:active {
      background-color:var(--gjs-main-light-color)
    }
    .ds-btn-danger {
      color: var(--gjs-light-color);
      background-color: transparent;
    }
    .ds-btn-danger:hover {
      color: var(--ds-highlight);
    }
    [disabled],
    [readonly] {
      font-style: italic;
    }

    /* Modal specific styles */
    :host(.ds-modal) {
      max-width: 600px;
      width: 90vw;
    }
`

export default (editor: Editor, options: Partial<DataSourceEditorViewOptions> = {}) => {
  // Settings dialog
  if (options.settingsEl) {
    // Get the container element for the UI
    const settingsEl = getElementFromOption(options.settingsEl, 'options.settingsEl')
    const dsSettings: Ref<SettingsDataSources> = createRef()
    editor.on(`${DATA_SOURCE_CHANGED} ${DATA_SOURCE_ERROR} ${DATA_SOURCE_READY} ${DATA_SOURCE_DATA_LOAD_END}`, () => {
      if(dsSettings.value) {
        dsSettings.value.dataSources = [...getAllDataSources()]
        dsSettings.value.requestUpdate()
      } else {
        renderSettings(editor, dsSettings, settingsEl)
      }
    })
    renderSettings(editor, dsSettings, settingsEl)

    // Add a data source
    editor.Commands.add(COMMAND_ADD_DATA_SOURCE, {
      run() {
        dsSettings.value?.openDataSourceModal()
      },
    })
  }
}

function renderSettings(editor: Editor, dsSettings: Ref, settingsEl: HTMLElement) {
  render(html`
    <ds-settings
      ${ref(dsSettings)}
      .dataSources=${[]}
      .editor=${editor}
      @add=${(e: CustomEvent) => {
    const ds = e.detail as GraphQLOptions
    const newDS = new GraphQL(ds)
    addDataSource(newDS)
  }}
      @add-top=${(e: CustomEvent) => {
    const ds = e.detail as GraphQLOptions
    const newDS = new GraphQL(ds)
    addDataSource(newDS)
  }}
      @change=${() => {
    // Refresh the datasources list when a datasource is edited
    if (dsSettings.value) {
      const settings = dsSettings.value as SettingsDataSources
      settings.dataSources = [...getAllDataSources()]
      settings.requestUpdate()
    }
  }}
      @delete=${(e: CustomEvent) => {
    const ds = e.detail as IDataSource
    removeDataSource(ds)
  }}
      ></ds-settings>
  `, settingsEl)
}

/**
 * <ds-settings> is a web component that renders the settings dialog for the DataSourceEditor plugin
 */
class SettingsDataSources extends LitElement {

  @property({ type: Array })
    dataSources: IDataSource[]

  @property({ type: Object })
    editor: Editor | null

  @state()
  private updateCounter: number = 0

  constructor() {
    super()
    this.dataSources = []
    this.editor = null
  }

  connectedCallback() {
    super.connectedCallback()
  }

  openDataSourceModal(dataSource: IDataSource | null = null) {
    if (!this.editor) return

    const isEdit = !!dataSource
    const title = isEdit ? 'Edit Data Source' : 'Add Data Source'

    // Create or use existing data source
    const ds = dataSource || new GraphQL(getDefaultOptions(this.dataSources.length.toString()))

    // Create the form element
    const formElement = document.createElement('ds-settings__data-source') as SettingsDataSource
    formElement.dataSource = ds
    formElement.isEdit = isEdit

    // Handle form events
    const handleSave = () => {
      if (isEdit) {
        // Force new array reference and increment counter to trigger card re-renders
        this.dataSources = [...this.dataSources]
        this.updateCounter++
        this.dispatchEvent(new CustomEvent('change', { detail: ds }))
      } else {
        this.dispatchEvent(new CustomEvent('add', { detail: ds }))
      }
      this.requestUpdate()
      this.editor!.Modal.close()
    }

    const handleDelete = () => {
      this.dispatchEvent(new CustomEvent('delete', { detail: ds }))
      this.editor!.Modal.close()
    }

    const handleCancel = () => {
      this.editor!.Modal.close()
    }

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        this.editor!.Modal.close()
      }
    }

    formElement.addEventListener('change', handleSave)
    formElement.addEventListener('cancel', handleCancel)
    if (isEdit) {
      formElement.addEventListener('delete', handleDelete)
    }

    // Add ESC key handler
    document.addEventListener('keydown', handleKeyDown)

    // Clean up on modal close
    const modalObserver = new MutationObserver(() => {
      if (!this.editor!.Modal.isOpen()) {
        document.removeEventListener('keydown', handleKeyDown)
        modalObserver.disconnect()
      }
    })
    const modalParent = this.editor.Modal.getContentEl()?.parentElement
    if (modalParent) {
      modalObserver.observe(modalParent, {
        attributes: true,
        attributeFilter: ['style', 'class'],
      })
    }

    // Open the modal
    this.editor.Modal.open({
      title,
      content: formElement,
      attributes: { class: 'ds-modal' },
    })
  }

  static styles = [
    COMMON_STYLES,
    css`
      .ds-settings {
        padding: 16px 0;
      }
      .ds-empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        text-align: center;
      }
      .ds-empty-state__content {
        max-width: 300px;
      }
      .ds-empty-state__title {
        margin: 0 0 8px 0;
        font-size: 18px;
        color: inherit;
      }
      .ds-empty-state__description {
        margin: 0 0 24px 0;
        color: var(--gjs-light-color);
        line-height: 1.4;
      }
      .ds-data-sources {
        margin-bottom: 16px;
      }
      .ds-add-section {
        padding: 16px 0;
        border-top: 1px solid var(--ds-button-bg);
        text-align: center;
      }
      .ds-btn-prim--large {
        padding: 12px 24px;
        font-size: 14px;
      }
    `,
  ]

  protected render() {
    const visibleDataSources = this.dataSources.filter(ds => !ds.hidden)

    return html`
      <section class="ds-settings">
        ${visibleDataSources.length === 0 ? html`
          <div class="ds-empty-state">
            <div class="ds-empty-state__content">
              <h3 class="ds-empty-state__title">No Data Sources</h3>
              <p class="ds-empty-state__description">
                Connect to GraphQL APIs to display dynamic data in your website
              </p>
              <button
                type="button"
                class="ds-btn-prim ds-btn-prim--large"
                @click=${() => this.openDataSourceModal()}
              >
                Add Your First Data Source
              </button>
            </div>
          </div>
        ` : html`
          <div class="ds-data-sources">
            ${repeat(visibleDataSources, (ds: IDataSource) => `${ds.id}-${this.updateCounter}`, (ds: IDataSource) => html`
              <ds-data-source-card
                .dataSource=${ds}
                data-id=${ds.id}
                @edit=${(e: CustomEvent) => this.openDataSourceModal(e.detail)}
                @test=${(e: CustomEvent) => this.testConnection(e.detail)}
                @delete=${(e: CustomEvent) => {
    this.dispatchEvent(new CustomEvent('delete', { detail: e.detail }))
  }}
              ></ds-data-source-card>
            `)}
          </div>
          <div class="ds-add-section">
            <button
              type="button"
              class="ds-btn-prim"
              @click=${() => this.openDataSourceModal()}
            >
              Add Data Source
            </button>
          </div>
        `}
      </section>
    `
  }

  testConnection(dataSource: IDataSource) {
    // Find the card component to update its loading state
    const cardElement = this.shadowRoot?.querySelector(`ds-data-source-card[data-id="${dataSource.id}"]`) as DataSourceCard
    if (cardElement) {
      cardElement.isTestingConnection = true
    }

    // Create a temporary form element to handle the connection test
    const tempForm = document.createElement('ds-settings__data-source') as SettingsDataSource
    tempForm.dataSource = dataSource

    // Override the original connectDataSource to handle card updates
    tempForm.connectDataSource = () => {
      if (cardElement) {
        cardElement.isTestingConnection = true
      }

      dataSource.connect().then(() => {
        if (cardElement) {
          cardElement.isTestingConnection = false
        }
        this.dispatchEvent(new CustomEvent('change', { detail: dataSource }))
        this.requestUpdate()
      }).catch((err: Error) => {
        console.error('Data source connection error', { err })
        if (cardElement) {
          cardElement.isTestingConnection = false
        }
        this.requestUpdate()
      })
    }

    tempForm.connectDataSource()
  }
}

if(!customElements.get('ds-settings')) {
  customElements.define('ds-settings', SettingsDataSources)
}


class SettingsDataSource extends LitElement {
  @property({ type: Object })
    dataSource: IDataSource | null
  @property({ type: Boolean })
    isEdit: boolean = false

  // State for the creation flow
  @state()
    errorMessage: string = ''
  @state()
    connected: boolean = false
  @state()
    isLoading: boolean = false
  @state()
    creationPhase: 'config' | 'types' = 'config'  // config = initial form, types = type selection
  @state()
    availableTypes: LightweightType[] = []  // List of types (name + kind) from lightweight query
  @state()
    selectedTypes: Set<string> = new Set()  // Currently selected types
  @state()
    typeSearchQuery: string = ''  // Search/filter for type list
  @state()
    queryTypeName: string = 'Query'  // The query type name from schema introspection

  private loadingIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="3"><animate attributeName="r" values="3;8;3" dur="1s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/></circle></svg>`
  private connectedIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`
  // private unknownIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="2"/></svg>`

  constructor() {
    super()
    this.dataSource = null
  }

  connectedCallback() {
    super.connectedCallback()
  }

  /**
   * Phase 1: Fetch lightweight type names from the GraphQL endpoint
   */
  async fetchTypeNames() {
    if (!this.dataSource || !(this.dataSource instanceof GraphQL)) {
      this.errorMessage = 'Invalid data source'
      return
    }

    this.isLoading = true
    this.errorMessage = ''
    this.requestUpdate()

    try {
      const ds = this.dataSource as GraphQL
      const result = await ds.fetchTypeNames()
      // Store the queryType name from the schema
      this.queryTypeName = result.queryTypeName
      // Sort types by name
      this.availableTypes = result.types.sort((a, b) => a.name.localeCompare(b.name))

      // For existing datasources with disabledTypes, compute selected = all - disabled
      // Otherwise, apply backend-specific default selection
      if (this.isEdit && ds.disabledTypes && ds.disabledTypes.length > 0) {
        const allTypeNames = this.availableTypes.map(t => t.name)
        const selectedNames = allTypeNames.filter(name => !ds.disabledTypes!.includes(name))
        this.selectedTypes = new Set(selectedNames)
      } else {
        const backendType = ds.backendType || 'generic'
        const defaultEnabled = GraphQL.getDefaultEnabledTypes(backendType, this.availableTypes, this.queryTypeName)
        this.selectedTypes = new Set(defaultEnabled)
      }

      // Move to type selection phase
      this.creationPhase = 'types'
      this.isLoading = false
      this.requestUpdate()
    } catch (e) {
      console.error('[Settings] Failed to fetch type names:', e)
      this.errorMessage = (e as Error).message
      this.isLoading = false
      this.requestUpdate()
    }
  }

  /**
   * Check if a type is required (cannot be blacklisted)
   * The queryType and all SCALAR types are required
   */
  isRequiredType(typeName: string): boolean {
    if (typeName === this.queryTypeName) return true
    const type = this.availableTypes.find(t => t.name === typeName)
    return type?.kind === 'SCALAR'
  }

  /**
   * Toggle a type's selected state
   */
  toggleType(typeName: string) {
    // Query and SCALAR types cannot be unchecked - they're always required
    if (this.isRequiredType(typeName)) return

    if (this.selectedTypes.has(typeName)) {
      this.selectedTypes.delete(typeName)
    } else {
      this.selectedTypes.add(typeName)
    }
    this.selectedTypes = new Set(this.selectedTypes) // Trigger reactivity
    this.requestUpdate()
  }

  /**
   * Select all types
   */
  selectAllTypes() {
    this.selectedTypes = new Set(this.availableTypes.map(t => t.name))
    this.requestUpdate()
  }

  /**
   * Deselect all types (except queryType and SCALAR types which are always required)
   */
  deselectAllTypes() {
    // Always keep queryType and SCALAR types selected
    const requiredTypes = this.availableTypes
      .filter(t => t.name === this.queryTypeName || t.kind === 'SCALAR')
      .map(t => t.name)
    this.selectedTypes = new Set(requiredTypes)
    this.requestUpdate()
  }

  /**
   * Reset types to default selection based on backend type
   */
  resetToDefaults() {
    const isGraphQL = this.dataSource instanceof GraphQL
    if (!isGraphQL) return

    const backendType = (this.dataSource as GraphQL).backendType || 'generic'
    const defaultEnabled = GraphQL.getDefaultEnabledTypes(backendType, this.availableTypes, this.queryTypeName)
    this.selectedTypes = new Set(defaultEnabled)
    this.requestUpdate()
  }

  /**
   * Get filtered types based on search query
   * Selected types are always shown first
   */
  getFilteredTypes(): LightweightType[] {
    let types = this.availableTypes
    if (this.typeSearchQuery) {
      const query = this.typeSearchQuery.toLowerCase()
      types = types.filter(t => t.name.toLowerCase().includes(query))
    }
    // Sort: selected types first, then alphabetically within each group
    return types.sort((a, b) => {
      const aSelected = this.selectedTypes.has(a.name)
      const bSelected = this.selectedTypes.has(b.name)
      if (aSelected && !bSelected) return -1
      if (!aSelected && bSelected) return 1
      return a.name.localeCompare(b.name)
    })
  }

  /**
   * Go back to config phase
   */
  goBackToConfig() {
    this.creationPhase = 'config'
    this.availableTypes = []
    this.selectedTypes = new Set()
    this.queryTypeName = 'Query'
    this.errorMessage = ''
    this.requestUpdate()
  }

  /**
   * Handle backend type change - updates selected types based on new backend defaults
   */
  onBackendTypeChange(newBackendType: GraphQLBackendType) {
    if (!this.dataSource || !(this.dataSource instanceof GraphQL)) return

    const ds = this.dataSource as GraphQL
    ds.backendType = newBackendType

    // Apply new default selection based on backend type
    const defaultEnabled = GraphQL.getDefaultEnabledTypes(newBackendType, this.availableTypes, this.queryTypeName)
    this.selectedTypes = new Set(defaultEnabled)

    this.requestUpdate()
  }

  connectDataSource() {
    if(!this.dataSource) throw new Error('No data source provided')

    // Compute disabledTypes from selection (blacklist approach)
    if (this.dataSource instanceof GraphQL && this.availableTypes.length > 0) {
      const ds = this.dataSource as GraphQL
      const allTypeNames = this.availableTypes.map(t => t.name)
      const disabledTypes = allTypeNames.filter(name => !this.selectedTypes.has(name))

      // Set disabled types for persistence (only blacklist, no whitelist)
      ds.disabledTypes = disabledTypes
    }

    this.isLoading = true
    this.errorMessage = ''
    this.requestUpdate()

    this.dataSource.connect().then(() => {
      this.dispatchEvent(new CustomEvent('change'))
      this.errorMessage = ''
      this.connected = true
      this.isLoading = false
      this.requestUpdate()
    }).catch((err: Error) => {
      console.error('Data source connection error', { err })
      this.errorMessage = err.message
      this.connected = false
      this.isLoading = false
      this.requestUpdate()
    })
  }

  static styles = [
    css`
    form {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .ds-field--large {
      flex: 1 1 auto;
    }
    .ds-property__wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex-wrap: wrap;
    }
    .ds-property__wrapper--horiz {
      flex-direction: row;
    }
    .ds-property__wrapper--vert {
      flex-direction: column;
    }
    .ds-status-section {
      margin: 10px 0;
    }
    .ds-status-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
    }
    .ds-status-loading {
      background-color: var(--gjs-main-dark-color);
      color: var(--ds-highlight);
    }
    .ds-status-success {
      background-color: var(--gjs-main-dark-color);
      color: var(--ds-primary);
    }
    .ds-status-error {
      background-color: var(--gjs-main-dark-color);
      color: var(--ds-highlight);
    }
    .ds-actions {
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
    }
    .ds-actions-left {
      display: flex;
      gap: 10px;
    }
    .ds-actions-right {
      display: flex;
      gap: 10px;
      margin-left: auto;
    }
    .ds-no-resize {
      flex: 0 0 auto;
    }
    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    /* Backend selector styles */
    .ds-backend-selector {
      margin-bottom: 15px;
    }
    .ds-backend-options {
      display: flex;
      gap: 10px;
      border: none;
      padding: 0;
      margin: 0;
    }
    .ds-backend-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px 16px;
      border: 2px solid var(--gjs-main-dark-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      background: var(--gjs-main-dark-color);
      min-width: 80px;
    }
    .ds-backend-option:hover {
      border-color: var(--gjs-light-color);
    }
    .ds-backend-option--selected {
      border-color: var(--ds-primary);
      background: rgba(var(--ds-primary-rgb, 76, 175, 80), 0.1);
    }
    .ds-backend-option input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .ds-backend-option svg {
      width: 40px;
      height: 40px;
    }
    .ds-backend-option span {
      font-size: 11px;
      color: var(--gjs-light-color);
      text-align: center;
    }
    .ds-backend-option--beta {
      position: relative;
    }
    .ds-backend-option--beta::after {
      content: 'beta';
      position: absolute;
      top: 4px;
      right: 4px;
      padding: 1px 4px;
      padding-top: 3px;
      font-size: smaller;
      font-weight: bold;
      text-transform: uppercase;
      background: var(--ds-primary);
      color: var(--gjs-secondary-color);
      border-radius: 3px;
      line-height: 1.2;
    }
    /* Inline backend selector (compact for config phase) */
    .ds-backend-selector--inline {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    .ds-backend-option--compact {
      flex-direction: row;
      padding: 8px 14px;
      min-width: auto;
      gap: 8px;
    }
    .ds-backend-option--compact svg {
      width: 20px;
      height: 20px;
    }
    .ds-backend-option--compact span {
      font-size: 13px;
    }
    /* Advanced options accordion */
    .ds-advanced-details {
      margin: 15px 0;
      border: 1px solid var(--gjs-main-dark-color);
      border-radius: 6px;
      background: var(--gjs-main-dark-color);
    }
    .ds-advanced-summary {
      padding: 12px 15px;
      cursor: pointer;
      font-size: 13px;
      color: var(--gjs-light-color);
      user-select: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ds-advanced-summary:hover {
      color: inherit;
    }
    .ds-advanced-summary::before {
      content: '▶';
      font-size: 10px;
      transition: transform 0.2s;
    }
    .ds-advanced-details[open] .ds-advanced-summary::before {
      transform: rotate(90deg);
    }
    .ds-advanced-content {
      padding: 0 15px 15px;
      border-top: 1px solid var(--gjs-main-light-color);
    }
    .ds-hint {
      display: block;
      margin-top: 5px;
      font-size: 11px;
      color: var(--gjs-light-color);
    }
    .ds-help-text {
      margin: 0 0 10px;
      font-size: 11px;
      color: var(--gjs-light-color);
      font-style: italic;
    }
    .ds-types-count-inline {
      font-size: 12px;
      color: var(--gjs-light-color);
      margin-left: auto;
    }
    /* Type selection styles */
    .ds-types-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      flex-wrap: wrap;
      gap: 10px;
    }
    .ds-types-search {
      flex: 1;
      min-width: 150px;
    }
    .ds-types-actions {
      display: flex;
      gap: 5px;
    }
    .ds-types-actions button {
      padding: 4px 8px;
      font-size: 12px;
    }
    .ds-types-list {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid var(--gjs-main-dark-color);
      border-radius: 4px;
      padding: 8px;
      background-color: var(--gjs-main-dark-color);
    }
    .ds-type-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      border-radius: 3px;
      cursor: pointer;
      transition: background-color 0.15s;
    }
    .ds-type-item:hover {
      background-color: var(--gjs-main-light-color);
    }
    .ds-type-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    .ds-type-item label {
      cursor: pointer;
      flex: 1;
      font-family: monospace;
      font-size: 13px;
    }
    .ds-type-kind {
      font-size: 10px;
      padding: 2px 5px;
      border-radius: 3px;
      background-color: var(--gjs-main-light-color);
      color: var(--gjs-light-color);
      text-transform: lowercase;
    }
    .ds-type-kind--scalar {
      background-color: rgba(100, 200, 100, 0.2);
      color: #4caf50;
    }
    .ds-type-kind--object {
      background-color: rgba(100, 150, 255, 0.2);
      color: #2196f3;
    }
    .ds-type-kind--interface {
      background-color: rgba(200, 150, 255, 0.2);
      color: #9c27b0;
    }
    .ds-type-kind--enum {
      background-color: rgba(255, 200, 100, 0.2);
      color: #ff9800;
    }
    .ds-type-kind--union {
      background-color: rgba(255, 150, 150, 0.2);
      color: #f44336;
    }
    .ds-type-kind--input_object {
      background-color: rgba(150, 200, 200, 0.2);
      color: #00bcd4;
    }
    .ds-types-count {
      font-size: 12px;
      color: var(--gjs-light-color);
      margin-top: 8px;
    }
    `,
    COMMON_STYLES,
  ]

  /**
   * Render the configuration form (Phase 1)
   */
  renderConfigPhase(): TemplateResult {
    if (!this.dataSource) throw new Error('No data source provided')
    const dsHeaders: Ref<SettingsHeaders> = createRef()

    return html`
      <h3 class="ds-property__title">
        ${this.dataSource.label || 'Unnamed'}
        <small>${this.dataSource.readonly !== false ? ' (Read-only)' : ''}</small>
      </h3>
      <div class="ds-property__wrapper ds-property__wrapper--horiz">
        <label class="ds-field">
          <span>Label</span>
          <input
            type="text"
            name="label"
            value=${this.dataSource.label}
            @input=${(e: Event) => {
    if (this.dataSource) this.dataSource.label = (e.target as HTMLInputElement).value
    this.requestUpdate()
  }}
            ?readonly=${this.dataSource.readonly !== false}
          />
        </label>
        <label class="ds-field ds-field--large">
          <span>URL</span>
          <input
            type="url"
            name="url"
            value=${this.dataSource.url}
            @input=${(e: Event) => {
    if (this.dataSource) {
      this.dataSource.url = (e.target as HTMLInputElement).value
      this.requestUpdate()
    }
  }}
            ?readonly=${this.dataSource.readonly !== false}
          />
        </label>
        <!-- ID field hidden - not needed by users, auto-generated -->
        <label class="ds-field">
          <span>Method</span>
          <select
            name="method"
            @change=${(e: Event) => { if (this.dataSource) this.dataSource.method = (e.target as HTMLInputElement).value as 'GET' | 'POST' }}
            ?readonly=${this.dataSource.readonly !== false}
            ?disabled=${this.dataSource.readonly !== false}
          >
            <option value="POST" ?selected=${this.dataSource.method === 'POST'}>POST</option>
            <option value="GET" ?selected=${this.dataSource.method === 'GET'}>GET</option>
          </select>
        </label>
      </div>
      <details class="ds-advanced-details">
        <summary class="ds-advanced-summary">HTTP Headers</summary>
        <div class="ds-advanced-content">
          <ds-settings__headers
            ${ref(dsHeaders)}
            .headers=${this.dataSource.headers}
            @change=${() => {
    if (this.dataSource) this.dataSource.headers = dsHeaders.value?.headers || {}
    dsHeaders.value?.requestUpdate()
  }}
            ?readonly=${this.dataSource.readonly !== false}
          ></ds-settings__headers>
        </div>
      </details>

        <div class="ds-field">
          <div class="ds-status-section">
            ${this.isLoading
    ? html`<div class="ds-status-item ds-status-loading">${this.loadingIcon} Fetching types...</div>`
    : this.errorMessage
      ? html`<div class="ds-status-item ds-status-error">Error: ${this.errorMessage}</div>`
      : ''
}
          </div>
        </div>

        <div class="ds-field ds-actions">
          <div class="ds-actions-right">
            <button
              type="button"
              class="ds-btn-prim"
              @click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
            >Cancel</button>
            ${this.isEdit ? html`
              <button
                type="button"
                class="ds-btn-prim"
                ?disabled=${this.isLoading || !this.dataSource.url}
                @click=${() => this.fetchTypeNames()}
              >${this.isLoading ? 'Loading...' : 'Options'}</button>
              <button
                type="submit"
                class="ds-btn-prim"
                ?disabled=${this.isLoading || !this.dataSource.url}
              >${this.isLoading ? 'Applying...' : 'Apply'}</button>
            ` : html`
              <button
                type="submit"
                class="ds-btn-prim"
                ?disabled=${this.isLoading || !this.dataSource.url}
              >${this.isLoading ? 'Fetching...' : 'Next'}</button>
            `}
          </div>
        </div>
      </div>
    `
  }

  /**
   * Render the type selection phase (Phase 2)
   */
  renderTypesPhase(): TemplateResult {
    const filteredTypes = this.getFilteredTypes()
    const selectedCount = this.selectedTypes.size
    const totalCount = this.availableTypes.length
    const isGraphQL = this.dataSource instanceof GraphQL
    const backendType = isGraphQL ? (this.dataSource as GraphQL).backendType : 'generic'

    return html`
      <h3 class="ds-property__title">Data Source Options</h3>
      <p class="ds-help-text">Select your backend type. Any GraphQL API is a supported, choose "GraphQL" for a generic connector.</p>

      <div class="ds-backend-selector">
        <fieldset class="ds-backend-options">
          <label class="ds-backend-option ${backendType === 'generic' ? 'ds-backend-option--selected' : ''}">
            <input
              type="radio"
              name="backendType"
              value="generic"
              ?checked=${backendType === 'generic'}
              @change=${() => this.onBackendTypeChange('generic')}
            />
            <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
              <path fill="#E535AB" d="M57.468 302.66l-14.376-8.3 160.15-277.38 14.376 8.3z"/>
              <path fill="#E535AB" d="M39.8 272.2h320.3v16.6H39.8z"/>
              <path fill="#E535AB" d="M206.348 374.026l-160.21-92.5 8.3-14.376 160.21 92.5zM345.522 132.947l-160.21-92.5 8.3-14.376 160.21 92.5z"/>
              <path fill="#E535AB" d="M54.482 132.883l-8.3-14.375 160.21-92.5 8.3 14.376z"/>
              <path fill="#E535AB" d="M342.568 302.663l-160.15-277.38 14.376-8.3 160.15 277.38zM52.5 107.5h16.6v185H52.5zM330.9 107.5h16.6v185h-16.6z"/>
              <path fill="#E535AB" d="M203.522 367l-7.25-12.558 139.34-80.45 7.25 12.557z"/>
              <path fill="#E535AB" d="M369.5 297.9c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.8 9.7 22.5 31 12.8 47.7M90.9 137c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.7 9.7 22.4 31 12.8 47.7M30.5 297.9c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.8 9.6-38.1 3.9-47.7-12.8M309.1 137c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.7 9.6-38.1 3.9-47.7-12.8M200 395.8c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.2-15.6 34.9-34.9 34.9M200 74c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.3-15.6 34.9-34.9 34.9"/>
            </svg>
            <span>GraphQL</span>
          </label>
          <label class="ds-backend-option ds-backend-option--beta ${backendType === 'wordpress' ? 'ds-backend-option--selected' : ''}">
            <input
              type="radio"
              name="backendType"
              value="wordpress"
              ?checked=${backendType === 'wordpress'}
              @change=${() => this.onBackendTypeChange('wordpress')}
            />
            <svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg">
              <g fill="#21759b">
                <path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/>
                <path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/>
                <path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.14-.225-.269-.464-.374-.724z"/>
                <path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/>
                <path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/>
              </g>
            </svg>
            <span>WordPress</span>
          </label>
          <label class="ds-backend-option ds-backend-option--beta ${backendType === 'gitlab' ? 'ds-backend-option--selected' : ''}">
            <input
              type="radio"
              name="backendType"
              value="gitlab"
              ?checked=${backendType === 'gitlab'}
              @change=${() => this.onBackendTypeChange('gitlab')}
            />
            <svg viewBox="0 0 380 380" xmlns="http://www.w3.org/2000/svg">
              <path fill="#e24329" d="M190 362.6 256.3 158.8H123.7z"/>
              <path fill="#fc6d26" d="M190 362.6 123.7 158.8H15.3z"/>
              <path fill="#fca326" d="m15.3 158.8-13.5 41.6c-1.2 3.8.1 7.9 3.3 10.3L190 362.6z"/>
              <path fill="#e24329" d="M15.3 158.8h108.4L79.8 24.1c-1.4-4.4-7.6-4.4-9 0z"/>
              <path fill="#fc6d26" d="m190 362.6 66.3-203.8h108.4z"/>
              <path fill="#fca326" d="m364.7 158.8 13.5 41.6c1.2 3.8-.1 7.9-3.3 10.3L190 362.6z"/>
              <path fill="#e24329" d="M364.7 158.8H256.3l43.9-134.7c1.4-4.4 7.6-4.4 9 0z"/>
            </svg>
            <span>GitLab</span>
          </label>
          <label class="ds-backend-option ds-backend-option--beta ${backendType === 'strapi' ? 'ds-backend-option--selected' : ''}">
            <input
              type="radio"
              name="backendType"
              value="strapi"
              ?checked=${backendType === 'strapi'}
              @change=${() => this.onBackendTypeChange('strapi')}
            />
            <svg viewBox=".24262095 .26549587 243.32256626 243.58072911" xmlns="http://www.w3.org/2000/svg">
              <g fill="#8e75ff" fill-rule="evenodd">
                <path d="m161.893 165.833v-78.73a5.077 5.077 0 0 0 -5.077-5.076h-78.638v-81.267h159.815a5.077 5.077 0 0 1 5.078 5.077v159.996z"/>
                <path d="m78.178.76v81.267h-75.054a2.539 2.539 0 0 1 -1.796-4.333zm83.715 240.206v-75.133h81.178l-76.844 76.927a2.539 2.539 0 0 1 -4.334-1.794zm-83.715-158.939h81.176a2.539 2.539 0 0 1 2.539 2.538v81.268h-78.638a5.077 5.077 0 0 1 -5.077-5.077z" opacity=".405"/>
              </g>
            </svg>
            <span>Strapi</span>
          </label>
          <label class="ds-backend-option ds-backend-option--beta ${backendType === 'supabase' ? 'ds-backend-option--selected' : ''}">
            <input
              type="radio"
              name="backendType"
              value="supabase"
              ?checked=${backendType === 'supabase'}
              @change=${() => this.onBackendTypeChange('supabase')}
            />
            <svg viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg">
              <path fill="url(#supabase-a)" d="M63.7 110.3c-2.5 3.1-7.6 1.4-7.7-2.6l-1.5-66.2h50.2c9.1 0 14.1 10.5 8.4 17.6L63.7 110.3Z"/>
              <path fill="url(#supabase-b)" fill-opacity=".2" d="M63.7 110.3c-2.5 3.1-7.6 1.4-7.7-2.6l-1.5-66.2h50.2c9.1 0 14.1 10.5 8.4 17.6L63.7 110.3Z"/>
              <path fill="#3ECF8E" d="M45.3 2.7c2.5-3.1 7.6-1.4 7.7 2.6l.7 66.2H4.4c-9.1 0-14-10.5-8.3-17.6L45.3 2.7Z"/>
              <defs>
                <linearGradient id="supabase-a" x1="53.97" x2="94.12" y1="54.97" y2="71.95" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#249361"/><stop offset="1" stop-color="#3ECF8E"/>
                </linearGradient>
                <linearGradient id="supabase-b" x1="36.16" x2="54.48" y1="30.58" y2="65.72" gradientUnits="userSpaceOnUse">
                  <stop/><stop offset="1" stop-opacity="0"/>
                </linearGradient>
              </defs>
            </svg>
            <span>Supabase</span>
          </label>
        </fieldset>
      </div>

      <!-- Advanced: Manual type selection -->
      <details class="ds-advanced-details">
        <summary class="ds-advanced-summary">
          Show / hide fields in the expressions
          <span class="ds-types-count-inline">(${selectedCount}/${totalCount})</span>
        </summary>
        <div class="ds-advanced-content">
          <p class="ds-help-text"><br>Uncheck types you don't want to see in your expressions.</p>
          <div class="ds-types-header">
            <input
              type="text"
              class="ds-types-search"
              placeholder="Search types..."
              .value=${this.typeSearchQuery}
              @input=${(e: Event) => {
    this.typeSearchQuery = (e.target as HTMLInputElement).value
    this.requestUpdate()
  }}
            />
            <div class="ds-types-actions">
              <button type="button" class="ds-btn-prim" @click=${() => this.selectAllTypes()}>Select All</button>
              <button type="button" class="ds-btn-prim" @click=${() => this.deselectAllTypes()}>Deselect All</button>
              <button type="button" class="ds-btn-prim" @click=${() => this.resetToDefaults()}>Reset to Defaults</button>
            </div>
          </div>

          <div class="ds-types-list">
            ${filteredTypes.map(type => {
    const isRequired = this.isRequiredType(type.name)
    return html`
              <div class="ds-type-item" @click=${() => this.toggleType(type.name)}>
                <input
                  type="checkbox"
                  .checked=${this.selectedTypes.has(type.name)}
                  ?disabled=${isRequired}
                  @click=${(e: Event) => e.stopPropagation()}
                  @change=${() => this.toggleType(type.name)}
                />
                <label>${type.name}</label>
                <span class="ds-type-kind ds-type-kind--${type.kind.toLowerCase()}">${type.kind}</span>
              </div>
            `})}
            ${filteredTypes.length === 0 ? html`
              <div style="padding: 20px; text-align: center; color: var(--gjs-light-color);">
                No types match "${this.typeSearchQuery}"
              </div>
            ` : ''}
          </div>

          <div class="ds-types-count">
            ${selectedCount} of ${totalCount} types selected
            ${this.typeSearchQuery ? ` (showing ${filteredTypes.length} matching "${this.typeSearchQuery}")` : ''}
          </div>
        </div>
      </details>

      <div class="ds-field">
        <div class="ds-status-section">
          ${this.isLoading
    ? html`<div class="ds-status-item ds-status-loading">${this.loadingIcon} Connecting...</div>`
    : this.errorMessage
      ? html`<div class="ds-status-item ds-status-error">Error: ${this.errorMessage}</div>`
      : this.connected
        ? html`<div class="ds-status-item ds-status-success">${this.connectedIcon} Connection successful</div>`
        : ''
}
        </div>
      </div>

      <div class="ds-field ds-actions">
        <div class="ds-actions-left">
          <button
            type="button"
            class="ds-btn-prim"
            @click=${() => this.goBackToConfig()}
            ?disabled=${this.isLoading}
          >Back</button>
        </div>
        <div class="ds-actions-right">
          <button
            type="button"
            class="ds-btn-prim"
            @click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
          >Cancel</button>
          <button
            type="submit"
            class="ds-btn-prim"
            ?disabled=${this.isLoading || this.selectedTypes.size === 0}
          >${this.isLoading ? 'Connecting...' : 'Apply'}</button>
        </div>
      </div>
    `
  }

  protected render() {
    if (!this.dataSource) throw new Error('No data source provided')

    return html`
      <form
        ?readonly=${this.dataSource.readonly !== false}
        @submit=${(e: Event) => {
    e.preventDefault()
    e.stopImmediatePropagation()
    // Handle form submission based on current phase
    if (this.creationPhase === 'config') {
      if (this.isEdit) {
        this.connectDataSource()
      } else {
        this.fetchTypeNames()
      }
    } else {
      this.connectDataSource()
    }
  }}
      >
        ${this.creationPhase === 'config' ? this.renderConfigPhase() : this.renderTypesPhase()}
      </form>
    `
  }
}

if(!customElements.get('ds-settings__data-source')) {
  customElements.define('ds-settings__data-source', SettingsDataSource)
}

/**
 * Compact card component for displaying data source summary
 */
class DataSourceCard extends LitElement {
  @property({ type: Object })
    dataSource: IDataSource | null

  @property({ type: Boolean })
    isTestingConnection: boolean = false

  private loadingIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="3"><animate attributeName="r" values="3;8;3" dur="1s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/></circle></svg>`
  // private connectedIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`
  // private errorIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`

  constructor() {
    super()
    this.dataSource = null
    this.isTestingConnection = false
  }

  static styles = [
    css`
      .ds-card {
        background-color: var(--gjs-main-dark-color);
        border: 1px solid var(--ds-button-bg);
        border-radius: 6px;
        padding: 16px;
        margin: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: border-color 0.2s ease, background-color 0.2s ease;
        cursor: pointer;
      }
      .ds-card:hover {
        border-color: var(--ds-highlight);
        background-color: rgba(255, 255, 255, 0.02);
      }
      .ds-card__info {
        flex: 1;
        min-width: 0;
      }
      .ds-card__title {
        font-weight: 500;
        margin: 0 0 4px 0;
        color: inherit;
        display: flex;
        align-items: flex-end;
      }
      .ds-card__url {
        font-size: 12px;
        color: var(--gjs-light-color);
        margin: 0 0 4px 0;
        word-break: break-all;
      }
      .ds-card__logo {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-right: 8px;
        vertical-align: middle;
      }
      .ds-card__backend {
        display: inline-block;
        font-size: 11px;
        font-weight: normal;
        color: var(--gjs-light-color);
        background-color: var(--gjs-main-light-color);
        padding: 2px 6px;
        border-radius: 3px;
        margin-left: 8px;
        vertical-align: middle;
      }
      .ds-card__status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
      }
      .ds-card__status--connected {
        color: var(--ds-primary);
      }
      .ds-card__status--loading {
        color: var(--ds-highlight);
      }
      .ds-card__status--error {
        color: var(--ds-highlight);
      }
      .ds-card__actions {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
        opacity: 0.6;
        transition: opacity 0.2s ease;
      }
      .ds-card:hover .ds-card__actions {
        opacity: 1;
      }
      .ds-card__btn {
        padding: 4px 8px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 11px;
        background-color: transparent;
        color: var(--gjs-light-color);
        transition: background-color 0.2s ease, color 0.2s ease;
      }
      .ds-card__btn:hover {
        background-color: var(--gjs-main-light-color);
        color: inherit;
      }
      .ds-card__btn--danger {
        color: var(--ds-highlight);
      }
      .ds-card__btn--danger:hover {
        background-color: rgba(255, 0, 0, 0.1);
      }
      .ds-card__btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    `,
    COMMON_STYLES,
  ]

  private graphqlLogo = html`<svg class="ds-card__logo" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><path fill="#E535AB" d="M57.468 302.66l-14.376-8.3 160.15-277.38 14.376 8.3z"/><path fill="#E535AB" d="M39.8 272.2h320.3v16.6H39.8z"/><path fill="#E535AB" d="M206.348 374.026l-160.21-92.5 8.3-14.376 160.21 92.5zM345.522 132.947l-160.21-92.5 8.3-14.376 160.21 92.5z"/><path fill="#E535AB" d="M54.482 132.883l-8.3-14.375 160.21-92.5 8.3 14.376z"/><path fill="#E535AB" d="M342.568 302.663l-160.15-277.38 14.376-8.3 160.15 277.38zM52.5 107.5h16.6v185H52.5zM330.9 107.5h16.6v185h-16.6z"/><path fill="#E535AB" d="M203.522 367l-7.25-12.558 139.34-80.45 7.25 12.557z"/><path fill="#E535AB" d="M369.5 297.9c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.8 9.7 22.5 31 12.8 47.7M90.9 137c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.7 9.7 22.4 31 12.8 47.7M30.5 297.9c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.8 9.6-38.1 3.9-47.7-12.8M309.1 137c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.7 9.6-38.1 3.9-47.7-12.8M200 395.8c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.2-15.6 34.9-34.9 34.9M200 74c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.3-15.6 34.9-34.9 34.9"/></svg>`
  private wordpressLogo = html`<svg class="ds-card__logo" viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg"><g fill="#21759b"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.14-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>`
  private gitlabLogo = html`<svg class="ds-card__logo" viewBox="0 0 380 380" xmlns="http://www.w3.org/2000/svg"><path fill="#e24329" d="M190 362.6 256.3 158.8H123.7z"/><path fill="#fc6d26" d="M190 362.6 123.7 158.8H15.3z"/><path fill="#fca326" d="m15.3 158.8-13.5 41.6c-1.2 3.8.1 7.9 3.3 10.3L190 362.6z"/><path fill="#e24329" d="M15.3 158.8h108.4L79.8 24.1c-1.4-4.4-7.6-4.4-9 0z"/><path fill="#fc6d26" d="m190 362.6 66.3-203.8h108.4z"/><path fill="#fca326" d="m364.7 158.8 13.5 41.6c1.2 3.8-.1 7.9-3.3 10.3L190 362.6z"/><path fill="#e24329" d="M364.7 158.8H256.3l43.9-134.7c1.4-4.4 7.6-4.4 9 0z"/></svg>`
  private strapiLogo = html`<svg class="ds-card__logo" viewBox=".24262095 .26549587 243.32256626 243.58072911" xmlns="http://www.w3.org/2000/svg"><g fill="#8e75ff" fill-rule="evenodd"><path d="m161.893 165.833v-78.73a5.077 5.077 0 0 0 -5.077-5.076h-78.638v-81.267h159.815a5.077 5.077 0 0 1 5.078 5.077v159.996z"/><path d="m78.178.76v81.267h-75.054a2.539 2.539 0 0 1 -1.796-4.333zm83.715 240.206v-75.133h81.178l-76.844 76.927a2.539 2.539 0 0 1 -4.334-1.794zm-83.715-158.939h81.176a2.539 2.539 0 0 1 2.539 2.538v81.268h-78.638a5.077 5.077 0 0 1 -5.077-5.077z" opacity=".405"/></g></svg>`
  private supabaseLogo = html`<svg class="ds-card__logo" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg"><path fill="#3ECF8E" d="M63.7 110.3c-2.5 3.1-7.6 1.4-7.7-2.6l-1.5-66.2h50.2c9.1 0 14.1 10.5 8.4 17.6L63.7 110.3Z"/><path fill="#3ECF8E" d="M45.3 2.7c2.5-3.1 7.6-1.4 7.7 2.6l.7 66.2H4.4c-9.1 0-14-10.5-8.3-17.6L45.3 2.7Z"/></svg>`

  protected render() {
    if (!this.dataSource) return html``

    const isConnected = this.dataSource.isConnected()
    const isGraphQL = this.dataSource instanceof GraphQL
    const backendType = isGraphQL ? (this.dataSource as GraphQL).backendType : null
    const backendLogo = backendType === 'wordpress' ? this.wordpressLogo
      : backendType === 'gitlab' ? this.gitlabLogo
        : backendType === 'strapi' ? this.strapiLogo
          : backendType === 'supabase' ? this.supabaseLogo
            : backendType === 'generic' ? this.graphqlLogo
              : null

    return html`
      <div class="ds-card" @click=${() => this.dispatchEvent(new CustomEvent('edit', { detail: this.dataSource }))}>
        <div class="ds-card__info">
          <h4 class="ds-card__title">
            ${backendLogo}
            ${this.dataSource.label || 'Unnamed Data Source'}
          </h4>
          <p class="ds-card__url">${this.dataSource.url || 'No URL configured'}</p>
          ${this.isTestingConnection ? html`
            <div class="ds-card__status ds-card__status--loading">
              ${this.loadingIcon} Testing...
            </div>
          ` : isConnected ? html`
            <div class="ds-card__status ds-card__status--connected">
              Connected
            </div>
          ` : html`
            <div class="ds-card__status ds-card__status--error">
              Not connected
            </div>
          `}
        </div>
        <div class="ds-card__actions">
          <button
            class="ds-card__btn"
            @click=${(e: Event) => { e.stopPropagation(); this.dispatchEvent(new CustomEvent('test', { detail: this.dataSource })) }}
            ?disabled=${this.isTestingConnection}
          >
            ${this.isTestingConnection ? 'Testing...' : 'Test'}
          </button>
          ${this.dataSource.readonly !== false ? '' : html`
            <button
              class="ds-card__btn ds-card__btn--danger"
              @click=${(e: Event) => {
    e.stopPropagation()
    if (confirm(`Are you sure you want to delete the data source "${this.dataSource!.label || this.dataSource!.id}"?`)) {
      this.dispatchEvent(new CustomEvent('delete', { detail: this.dataSource }))
    }
  }}
              ?disabled=${this.isTestingConnection}
            >
              Delete
            </button>
          `}
        </div>
      </div>
    `
  }
}

if(!customElements.get('ds-data-source-card')) {
  customElements.define('ds-data-source-card', DataSourceCard)
}

class SettingsHeaders extends LitElement {
  @property({ type: Array })
    headers: Record<string, string>

  @property({ type: Boolean })
    readonly: boolean

  static styles = [
    css`
    fieldset {
      display: block;
      border: none;
      padding: 0;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    ul > li {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    ul > li > label {
      flex: 1 1 auto;
    }
    ul > li > button {
      margin: 10px;
    }
    `,
    COMMON_STYLES,
  ]

  constructor() {
    super()
    this.headers = {}
    this.readonly = false
  }

  connectedCallback() {
    super.connectedCallback()
  }

  protected render() {
    return html`
      <div class="ds-field">
      <fieldset>
      ${this.readonly ? '' : html`
        <button
          type="button"
          class="ds-btn-prim"
          @click=${() => {
    // Default name and value
    let name = 'Authorization'
    let value = 'Bearer XXXXXX'
    // Make sure the header name is unique
    // Add a number if the header already exists
    let i = 0
    while(typeof this.headers[name] !== 'undefined') {
      i++
      name = `Header ${i}`
      value = ''
    }
    // Add the header
    this.headers = {
      ...this.headers,
      [name]: value,
    }
    this.dispatchEvent(new CustomEvent('change'))
  }}
        >Add a header</button>
      `}
      <ul>
        ${Object.entries(this.headers).map(([name, value]) => html`
          <li>
            <label class="ds-field">
              <span>Name</span>
              <input
                type="text"
                value=${name}
                name=${`header-key-${encodeURI(name)}`}
                @change=${(e: Event) => {
    const target = e.target as HTMLInputElement
    if(!target.value) return
    if (typeof this.headers[name] !== 'undefined') delete this.headers[name]
    this.headers[target.value] = value
    this.dispatchEvent(new CustomEvent('change'))
  }}
                />
            </label>
            <label class="ds-field">
              <span>Value</span>
              <input
                type="text"
                value=${value}
                name=${`header-value-${encodeURI(value)}`}
                @change=${(e: Event) => {
    const target = e.target as HTMLInputElement
    this.headers[name] = target.value
    this.dispatchEvent(new CustomEvent('change'))
  }}
                />
            </label>
            ${this.readonly ? '' : html`
              <button
                type="button"
                class="ds-btn-prim"
                @click=${() => {
    if (typeof this.headers[name] !== 'undefined') delete this.headers[name]
    this.dispatchEvent(new CustomEvent('change'))
  }}
                .disabled=${this.readonly}
              >Delete</button>
            `}
          </li>
        `)}
      </ul>
      </fieldset>
      </div>
    `
  }
}

if(!customElements.get('ds-settings__headers')) {
  customElements.define('ds-settings__headers', SettingsHeaders)
}