// `/schema-ui` — the SAME notes as `/` (index.tsx), but rendered by the
// schema-driven UI components instead of hand-wired hooks. index.tsx wires
// useSubscription + useMutation + form state by hand (the reactive baseline);
// this page binds <DataTable> to `notes.list` and <AutoForm> to `notes.create`.
// The columns + fields come straight from the descriptors' effect/Schema, and
// validation, live updates, and auto-optimistic come for free — no glue code.
//
// Delete this page if you don't need it; it's here to show the binding.

import { AutoForm, DataTable, Field } from '@voltro/web'
import type { PageMeta } from '@voltro/web'
import type { ReactNode } from 'react'
import { T, useTFn } from '@voltro/i18n'
import { getCatalog } from '../../locales/index'

const TENANT = 'acme'

// Locale-aware tab title (cookie-i18n — @voltro/web hands meta the active locale).
export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
  title: getCatalog(locale)['meta.schemaUi.title'],
})

const SchemaUiPage = (): ReactNode => {
  const t = useTFn()
  return (
    <section style={{ display: 'grid', gap: '1.5rem' }}>
      <header>
        <h1 style={{ fontSize: 24, marginBottom: 4 }}><T id="schemaUi.heading" /></h1>
        <p style={{ color: '#666', marginTop: 0, fontSize: 13 }}>
          <T
            id="schemaUi.intro"
            values={{
              a: (c: ReactNode) => <a href="/">{c}</a>,
              strong: (c: ReactNode) => <strong>{c}</strong>,
              code: (c: ReactNode) => <code>{c}</code>,
            }}
          />
        </p>
      </header>

      <div>
        <h2 style={{ fontSize: 16 }}>
          <T id="schemaUi.createHeading" values={{ code: (c: ReactNode) => <code>{c}</code> }} />
        </h2>
        {/* Rung 3 — own the layout: show title + body; tenantId is a default. */}
        <AutoForm
          api="app"
          mutation="notes.create"
          defaults={{ tenantId: TENANT, done: false }}
          submitLabel={t('schemaUi.submitLabel')}
        >
          {() => (
            <>
              <Field name="title" />
              <Field name="body" />
            </>
          )}
        </AutoForm>
      </div>

      <div>
        <h2 style={{ fontSize: 16 }}>
          <T id="schemaUi.listHeading" values={{ code: (c: ReactNode) => <code>{c}</code> }} />
        </h2>
        {/* Columns inferred from the query's output schema; rows are a live
            subscription that updates on every notes.create. Add a `rowActions`
            prop once your api defines a per-row mutation (e.g. notes.delete). */}
        <DataTable api="app" query="notes.list" emptyText={t('schemaUi.emptyText')} />
      </div>
    </section>
  )
}

export default SchemaUiPage