import { useState, useSyncExternalStore } from "react"
import { createRoot } from "react-dom/client"
import { flushSync } from "react-dom"
import {
  browserSettings,
  type SettingDefinition,
} from "@pathmx/core/settings/browser"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "../dialog.tsx"
import "../styles.css"
import "./styles.css"

const label = (name: string) =>
  name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase())

function Section({ definition }: { definition: SettingDefinition }) {
  const settings = browserSettings()!
  const [message, setMessage] = useState("")
  const [failed, setFailed] = useState(false)
  const revision = useSyncExternalStore(
    (refresh) => settings.subscribe(definition, refresh),
    () => {
      try {
        return settings.read(definition).revision
      } catch (error) {
        return String(error)
      }
    },
  )
  let snapshot
  try {
    snapshot = settings.read(definition)
  } catch (error) {
    return (
      <p role="alert">
        Settings could not be loaded: {String(error)}. Your saved data has been
        retained.
      </p>
    )
  }
  const { value, overrides } = snapshot
  const fields = definition.jsonSchema.properties as Record<
    string,
    {
      type: string
      enum?: string[]
      description?: string
      minimum?: number
      maximum?: number
    }
  >
  function save(next: Record<string, unknown>) {
    try {
      settings.set(definition, next, { revision })
      setMessage("Saved on this browser.")
      setFailed(false)
    } catch (error) {
      setMessage(error instanceof Error ? error.message : String(error))
      setFailed(true)
    }
  }
  return (
    <section
      className="pmx-settings-section"
      aria-label={String(
        definition.jsonSchema.title ?? label(definition.plugin),
      )}
    >
      {Object.entries(fields).map(([name, field]) => {
        const id = `pmx-setting-${definition.plugin}-${name}`
        const title = field.description ?? label(name)
        function change(next: unknown) {
          const updated = { ...overrides }
          if (next === undefined) delete updated[name]
          else updated[name] = next
          save(updated)
        }
        return (
          <div className="pmx-settings-field" key={name}>
            <label htmlFor={id}>{title}</label>
            {field.enum ? (
              <select
                id={id}
                value={String(overrides[name] ?? "")}
                onChange={(event) => change(event.target.value || undefined)}
              >
                <option value="">Use default</option>
                {field.enum.map((option) => (
                  <option value={option} key={option}>
                    {option === "default" ? "No preset" : label(option)}
                  </option>
                ))}
              </select>
            ) : field.type === "boolean" ? (
              <input
                id={id}
                type="checkbox"
                checked={Boolean(value[name])}
                onChange={(event) => change(event.target.checked)}
              />
            ) : (
              <input
                id={id}
                type={
                  field.type === "number" || field.type === "integer"
                    ? "number"
                    : "text"
                }
                min={field.minimum}
                max={field.maximum}
                value={String(value[name] ?? "")}
                onChange={(event) =>
                  change(
                    event.target.value === ""
                      ? undefined
                      : field.type === "string"
                        ? event.target.value
                        : Number(event.target.value),
                  )
                }
              />
            )}
          </div>
        )
      })}
      <button
        type="button"
        className="pmx-button"
        data-variant="outline"
        onClick={() => save({})}
      >
        Reset {String(definition.jsonSchema.title ?? label(definition.plugin))}
      </button>
      <p className="pmx-settings-status" role={failed ? "alert" : "status"}>
        {message}
      </p>
    </section>
  )
}

let returnFocus: HTMLElement | null = null
let show: (section: string, trigger: HTMLElement) => void = () => {}
function SettingsDialog() {
  const [open, setOpen] = useState(false)
  const [section, setSection] = useState("theme")
  show = (section, trigger) => {
    returnFocus = trigger
    setSection(section)
    setOpen(true)
  }
  const settings = browserSettings()
  if (!settings) return null
  const selected = settings.definition(section) ?? settings.definitions[0]
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent
        className="pmx-settings-dialog"
        finalFocus={() => returnFocus}
      >
        <DialogHeader>
          <DialogTitle>Settings</DialogTitle>
          <DialogDescription>
            Personal preferences · Saved on this browser
          </DialogDescription>
        </DialogHeader>
        <div className="pmx-settings-tabs" aria-label="Settings sections">
          {settings.definitions.map((definition) => (
            <button
              type="button"
              className="pmx-button"
              data-variant={definition === selected ? "primary" : "ghost"}
              aria-pressed={definition === selected}
              key={definition.plugin}
              onClick={() => setSection(definition.plugin)}
            >
              {String(definition.jsonSchema.title ?? label(definition.plugin))}
            </button>
          ))}
        </div>
        {selected && <Section key={selected.plugin} definition={selected} />}
        <DialogClose className="pmx-button" data-variant="outline">
          Done
        </DialogClose>
      </DialogContent>
    </Dialog>
  )
}

let root: ReturnType<typeof createRoot> | undefined
export function openSettings({
  section,
  returnFocus,
}: {
  section: string
  returnFocus: HTMLElement
}) {
  if (!root) {
    const host = document.createElement("div")
    host.dataset.pmxSettingsHost = ""
    document.body.append(host)
    root = createRoot(host, { identifierPrefix: "pmx-settings-" })
    flushSync(() => root!.render(<SettingsDialog />))
  }
  flushSync(() => show(section, returnFocus))
}