"use client"

// The organization's brand settings: a name, two colours and two logos, with a preview of both themes
// that updates as a colour is typed. Saving is two kinds of call -- `branding.brand.set` for the text
// fields and `branding.logo.set` for each file chosen -- both administrators' acts, both audited by
// the kernel. A member who is not an administrator sees the same page, read-only.
//
// A save is therefore up to five calls, and a failure in the middle leaves the earlier ones applied:
// the calls are one transaction each, never one transaction together. An atomic
// `branding.brand.update` (fields, clears and uploads in one procedure) is the known improvement and
// needs a contract addition; until then a failed save is retried as a whole, which is safe because
// every call is idempotent for the same input.

import { isHexColor } from "@conusai-kit/brand"
import { useDataClient } from "@conusai-kit/ui/data"
import { FormLayout, type FormValues, PageSection, TextField, usePageNavigation } from "@conusai-kit/ui/patterns"
import { Button, Field, FieldDescription, FieldGroup, FieldLabel, Input, useHydrated } from "@conusai-kit/ui/primitives"
import { type ReactElement, useId, useState } from "react"
import type { BrandView, LogoVariant } from "../contract/index.js"
import { logoUrl, tenantLogo } from "../contract/logo.js"
import { BrandPreview, type PreviewLabels } from "./brand-preview.js"

export interface BrandFormLabels {
  readonly displayName: string
  readonly primary: string
  readonly accent: string
  readonly colourHint: string
  readonly logoLight: string
  readonly logoDark: string
  readonly logoHint: string
  readonly currentLogo: string
  /** The heading of the list that says which logo each theme shows. */
  readonly logoShows: string
  readonly logoOwn: string
  /** Contains `{other}`. */
  readonly logoOther: string
  readonly logoApp: string
  /** Contains `{theme}`. */
  readonly clearLogo: string
  readonly themeLight: string
  readonly themeDark: string
  readonly save: string
  readonly saved: string
  readonly readOnly: string
  readonly preview: PreviewLabels
}

const emptyToNull = (value: string): string | null => (value.trim().length === 0 ? null : value.trim())

function base64Of(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onerror = () => reject(reader.error ?? new Error("the file could not be read"))
    reader.onload = () => {
      const url = String(reader.result)
      resolve(url.slice(url.indexOf(",") + 1))
    }
    reader.readAsDataURL(file)
  })
}

export function BrandForm({
  org,
  brand,
  canEdit,
  defaultPrimary,
  labels,
}: {
  org: string
  brand: BrandView
  canEdit: boolean
  defaultPrimary: string
  labels: BrandFormLabels
}): ReactElement {
  const ready = useHydrated()
  const navigation = usePageNavigation()
  const client = useDataClient()
  const id = useId()
  const [primary, setPrimary] = useState(brand.primary ?? "")
  const [accent, setAccent] = useState(brand.accent ?? "")
  const [saved, setSaved] = useState(false)
  const [uploadRevision, setUploadRevision] = useState(0)
  const [cleared, setCleared] = useState<readonly LogoVariant[]>([])

  // The logos as they will be once saved: a cleared one is gone, so the fallback it leaves is what the list says.
  const shown = {
    logoLight: cleared.includes("light") ? null : brand.logoLight,
    logoDark: cleared.includes("dark") ? null : brand.logoDark,
  }
  const valid = (value: string): boolean => value.trim() === "" || isHexColor(value.trim())
  const previewPrimary = isHexColor(primary.trim()) ? primary.trim() : brand.primary
  const previewAccent = isHexColor(accent.trim()) ? accent.trim() : brand.accent

  const save = async ({ displayName = "" }: FormValues, form: FormData): Promise<void> => {
    setSaved(false)
    await client.call("branding.brand.set", {
      org,
      displayName: emptyToNull(displayName),
      primary: emptyToNull(primary),
      accent: emptyToNull(accent),
    })
    for (const variant of cleared) await client.call("branding.logo.clear", { org, variant })
    for (const variant of ["light", "dark"] as const) {
      const file = form.get(`logo-${variant}`)
      if (file instanceof File && file.size > 0) {
        await client.call("branding.logo.set", { org, variant, contentType: file.type, body: await base64Of(file) })
      }
    }
    await navigation.refresh()
    setCleared([])
    setUploadRevision((revision) => revision + 1)
    setSaved(true)
  }

  const colourField = (name: string, label: string, value: string, set: (value: string) => void) => (
    <TextField
      name={name}
      label={label}
      value={value}
      onChange={(event) => set(event.currentTarget.value)}
      disabled={!canEdit}
      maxLength={7}
      spellCheck={false}
      autoComplete="off"
      aria-invalid={!valid(value)}
      aria-describedby={`${id}-colour-hint`}
    />
  )

  const fields = (
    <>
      <TextField
        name="displayName"
        label={labels.displayName}
        defaultValue={brand.displayName ?? ""}
        disabled={!canEdit}
        maxLength={60}
      />
      {colourField("primary", labels.primary, primary, setPrimary)}
      {colourField("accent", labels.accent, accent, setAccent)}
      <FieldDescription id={`${id}-colour-hint`}>{labels.colourHint}</FieldDescription>
      {(["light", "dark"] as const).map((variant) => {
        const current = variant === "light" ? brand.logoLight : brand.logoDark
        const theme = variant === "light" ? labels.themeLight : labels.themeDark
        return (
          <Field key={variant}>
            <FieldLabel>{variant === "light" ? labels.logoLight : labels.logoDark}</FieldLabel>
            <Input
              key={uploadRevision}
              name={`logo-${variant}`}
              type="file"
              accept="image/png,image/webp,image/svg+xml"
              disabled={!canEdit}
              aria-describedby={`${id}-logo-hint`}
            />
            {current && !cleared.includes(variant) ? (
              <>
                <img
                  src={logoUrl(current, "1x")}
                  srcSet={`${logoUrl(current, "1x")} 1x, ${logoUrl(current, "2x")} 2x`}
                  alt={labels.currentLogo}
                  height={32}
                />
                {canEdit ? (
                  <Button
                    type="button"
                    variant="outline"
                    disabled={!ready}
                    onClick={() => setCleared([...cleared, variant])}
                  >
                    {labels.clearLogo.replace("{theme}", theme)}
                  </Button>
                ) : null}
              </>
            ) : null}
          </Field>
        )
      })}
      <FieldDescription id={`${id}-logo-hint`}>{labels.logoHint}</FieldDescription>
      <PageSection title={labels.logoShows}>
        <ul>
          {(["light", "dark"] as const).map((theme) => {
            const choice = tenantLogo(shown, theme)
            const state =
              choice === null
                ? labels.logoApp
                : choice.variant === theme
                  ? labels.logoOwn
                  : labels.logoOther.replace(
                      "{other}",
                      choice.variant === "light" ? labels.themeLight : labels.themeDark,
                    )
            return (
              <li key={theme}>
                {theme === "light" ? labels.preview.light : labels.preview.dark}: {state}
              </li>
            )
          })}
        </ul>
      </PageSection>
      <BrandPreview
        primary={previewPrimary}
        accent={previewAccent}
        defaultPrimary={defaultPrimary}
        labels={labels.preview}
      />
    </>
  )

  if (!canEdit) {
    return (
      <>
        <p role="note">{labels.readOnly}</p>
        <FieldGroup>{fields}</FieldGroup>
      </>
    )
  }
  return (
    <>
      <FormLayout submitLabel={labels.save} submitDisabled={!valid(primary) || !valid(accent)} onSubmit={save}>
        {fields}
      </FormLayout>
      <p role="status">{saved ? labels.saved : ""}</p>
    </>
  )
}