import { createTable, type TableOptions } from '@blukavantui/community/table'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/table.css'

export interface Customer { Id: string; Name: string; Balance: number; Active: boolean }
const initialRows: Customer[] = [
  { Id: 'C-101', Name: 'Aster Studio', Balance: 1200, Active: true },
  { Id: 'C-102', Name: 'Birch Goods', Balance: 85, Active: false },
  { Id: 'C-103', Name: 'Cedar Works', Balance: 240, Active: true },
]
// Inject your own API adapter. The default loader only returns local sample data.
export function mount(host: HTMLElement, load: () => Promise<Customer[]> = async () => initialRows) {
  const root = document.createElement('section')
  const refresh = document.createElement('button')
  refresh.type = 'button'; refresh.textContent = 'Refresh customers'
  const empty = document.createElement('button')
  empty.type = 'button'; empty.textContent = 'Show empty state'
  const status = document.createElement('p'); status.setAttribute('role', 'status')
  const target = document.createElement('div')
  root.append(refresh, empty, status, target); host.append(root)
  const options: TableOptions<Customer> = {
    Caption: 'Customer balances', RowKey: 'Id', Rows: initialRows,
    Columns: [
      { Key: 'Name', Header: 'Customer', Sortable: true },
      { Key: 'Balance', Header: 'Balance', Sortable: true, Align: 'Right',
        Format: value => typeof value === 'number' ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value) : '' },
    ],
    Actions: [{ Key: 'open', Label: 'Open', Disabled: row => !row.Active }],
    PageSize: 2, Striped: true, EmptyMessage: 'No customers match this view.',
  }
  const instance = createTable<Customer>(target, options, {
    RowAction(key, row) { status.textContent = `${key}: ${row.Id} — ${row.Name}` },
    SortChanged() { renderState() }, PageChanged() { renderState() },
  })
  function renderState() {
    const state = instance.getState()
    status.textContent = `Page ${state.Page}; sort ${state.SortKey || 'input order'} ${state.SortDirection}`
  }
  let disposed = false, request = 0
  const listeners = new AbortController()
  async function reload() {
    const current = ++request
    instance.update({ Loading: true }); status.textContent = 'Loading customers…'
    try {
      const rows = await load()
      if (disposed || current !== request) return
      instance.update({ Rows: rows, Loading: false }); renderState()
    } catch {
      if (disposed || current !== request) return
      instance.update({ Loading: false }) // Retain previous rows and allow retry.
      status.textContent = 'Could not load customers. Try Refresh again.'
    }
  }
  refresh.addEventListener('click', () => { void reload() }, { signal: listeners.signal })
  empty.addEventListener('click', () => {
    ++request; instance.update({ Rows: [], Loading: false }); renderState()
  }, { signal: listeners.signal })
  renderState()
  return { instance, reload, destroy() {
    disposed = true; ++request; listeners.abort(); instance.destroy(); root.remove()
  } }
}