"use client"

// The project's automatic PDF indexing (core-11): an administrator picks the collection uploaded PDFs
// go into, or turns it off. The write answers the new state, so the form shows it without re-running
// the page's loader (the module declares live collections; test/live-writes.test.ts).

import type { ProjectSlugs } from "@conusai-kit/ui"
import { useWrite } from "@conusai-kit/ui/data"
import { FormLayout, PageSection, SelectField } from "@conusai-kit/ui/patterns"
import { type ReactElement, useState } from "react"

export interface AutoIndexFormLabels {
  readonly heading: string
  readonly hint: string
  readonly label: string
  readonly off: string
  readonly submit: string
  readonly busy: string
  readonly done: string
}

/** The select's value for "off": a collection name is lower-case letters, digits and dashes, never this. */
const OFF = "_off"

export function AutoIndexForm({
  slugs,
  collections,
  current,
  labels,
}: {
  slugs: ProjectSlugs
  collections: readonly string[]
  current: string | null
  labels: AutoIndexFormLabels
}): ReactElement {
  const setAutoIndex = useWrite<ProjectSlugs & { collectionName: string | null }, { collectionName: string | null }>(
    "knowledge.autoindex.set",
    { org: slugs.org },
  )
  const [selected, setSelected] = useState<string | null>(current)
  const [done, setDone] = useState(false)

  const save = async (_: unknown, data: FormData): Promise<void> => {
    const value = data.get("collection")
    const collectionName = typeof value === "string" && value !== OFF ? value : null
    setDone(false)
    const answer = await setAutoIndex.mutate({ ...slugs, collectionName })
    setSelected(answer.collectionName)
    setDone(true)
  }

  return (
    <PageSection title={labels.heading} level={3} variant="card">
      <p>{labels.hint}</p>
      <FormLayout submitLabel={labels.submit} busyLabel={labels.busy} onSubmit={save}>
        <SelectField
          name="collection"
          label={labels.label}
          defaultValue={selected ?? OFF}
          options={[{ value: OFF, label: labels.off }, ...collections.map((name) => ({ value: name, label: name }))]}
        />
      </FormLayout>
      {done ? <p role="status">{labels.done}</p> : null}
    </PageSection>
  )
}