"use client"

// Deleting a note, in two steps: the button asks, and a second press does it. The attached files are
// not deleted with the note (they are the project's); the confirmation says so.

import { type ProjectSlugs, useTransport } from "@conusai-kit/ui"
import { type ReactElement, useState } from "react"

export interface DeleteNoteLabels {
  readonly button: string
  readonly confirm: string
  readonly yes: string
  readonly no: string
  readonly failed: string
}

export function DeleteNote({
  slugs,
  noteId,
  listHref,
  labels,
}: {
  slugs: ProjectSlugs
  noteId: string
  /** Where to go once the note is gone. */
  listHref: string
  labels: DeleteNoteLabels
}): ReactElement {
  const { call, describe } = useTransport()
  const [state, setState] = useState<{ kind: "idle" | "asking" | "busy" } | { kind: "failed"; detail: string }>({
    kind: "idle",
  })

  const remove = async (): Promise<void> => {
    setState({ kind: "busy" })
    try {
      await call("notes.note.delete", { ...slugs, noteId })
      window.location.assign(listHref)
    } catch (error) {
      setState({ kind: "failed", detail: describe(error) })
    }
  }

  return (
    <div>
      {state.kind === "asking" || state.kind === "busy" ? (
        <fieldset>
          <legend>{labels.button}</legend>
          <p>{labels.confirm}</p>
          <button type="button" disabled={state.kind === "busy"} onClick={() => void remove()}>
            {labels.yes}
          </button>
          <button type="button" disabled={state.kind === "busy"} onClick={() => setState({ kind: "idle" })}>
            {labels.no}
          </button>
        </fieldset>
      ) : (
        <button type="button" onClick={() => setState({ kind: "asking" })}>
          {labels.button}
        </button>
      )}
      {state.kind === "failed" ? (
        <p className="app-error" role="alert">
          {labels.failed.replace("{detail}", state.detail)}
        </p>
      ) : null}
    </div>
  )
}