import { useMutation, useQuery } from "@tanstack/react-query"
import { Plus, Trash2, X } from "lucide-react"
import { useState } from "react"

import {
  type ApiError,
  CloudService,
  type PanelDef,
  type PanelPort,
  type PanelsConfig,
  PanelsService,
} from "@/client"
import { initials, resolveIcon } from "@/components/Dashboard/icons"
import { MessagePicker } from "@/components/Dashboard/panels"
import {
  dashboardsQueryOptions,
  panelsQueryOptions,
  useSavePanels,
  useUnpairPanel,
} from "@/components/Dashboard/queries"
import { JsonField } from "@/components/Flow/JsonField"
import { InfoTip, PanelSection } from "@/components/Flow/SidePanel"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Segmented } from "@/components/ui/segmented"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import useAuth from "@/hooks/useAuth"
import useCustomToast from "@/hooks/useCustomToast"
import { cn } from "@/lib/utils"
import { handleError } from "@/utils"

/** As many characters as a device puts on the wall. */
const CODE_LENGTH = 6

/** The store only accepts this shape, so say so before the request does. */
const slugify = (value: string) =>
  value
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "_")

/** Port names the panel firmware knows; `gpio.` takes a pin number. */
// ponytail: free-text ports, no device capability report; add PUT /panels/{id}/device when a second device kind exists
const PORT_SUGGESTIONS = ["gpio.", "backlight", "touch", "mic", "speaker"]

const DIRECTIONS = [
  ["in", "In"],
  ["out", "Out"],
] as const

/** What the server accepts as a port name. */
const portOf = (value: string) =>
  value.toLowerCase().replace(/[^a-z0-9_.]/g, "")

const objectOnly = (value: unknown) =>
  value && typeof value === "object" && !Array.isArray(value)
    ? null
    : "Config is a JSON object"

/**
 * Which dashboards hang on which screen, and adopting the screens themselves.
 *
 * A panel is a device rather than a document: it has no draft and nothing to
 * publish, so it lives in a dialog over the dashboards list instead of a page
 * of its own. Every change saves as it is made — there is no form to submit.
 */
export function PanelsDialog() {
  const { data: config } = useQuery(panelsQueryOptions())
  const { data: dashboards } = useQuery(dashboardsQueryOptions())
  const { user } = useAuth()
  // Where a screen that cannot reach this instance pairs instead. The
  // issuer is the portal as a browser reaches it, which is not always the
  // address this machine dialled — enrolment may have named a container.
  const { data: cloud } = useQuery({
    queryKey: ["cloud", "status"],
    queryFn: async () =>
      (await CloudService.readStatus()) as {
        enrolled: boolean
        issuer: string | null
        instance_id: string | null
      },
  })
  const remoteHost =
    cloud?.enrolled && cloud.issuer && cloud.instance_id
      ? `${cloud.issuer.replace(/\/$/, "")}/i/${cloud.instance_id}`
      : ""
  const save = useSavePanels()
  const { showErrorToast } = useCustomToast()
  // Reading panels is any account's; every change to them is a superuser's.
  const canEdit = Boolean(user?.is_superuser)
  const [name, setName] = useState("")

  const panels = config?.panels ?? []
  const known = dashboards?.data ?? []
  // The instance's own address, not this browser's: administering through
  // the portal puts the page on the portal's origin, and a screen cannot be
  // sent there — it has no portal session and could not hold a panel
  // credential if it had one.
  const host = config?.frontend_host ?? ""

  const write = (next: PanelsConfig) =>
    save.mutate(
      { ...next, version: config?.version },
      {
        onError: (error) =>
          (error as ApiError).status === 409
            ? showErrorToast(
                "Someone else changed the panels first. Their version is shown now, so make the change again.",
              )
            : handleError.call(showErrorToast, error as ApiError),
      },
    )

  const replace = (id: string, panel: PanelDef) =>
    write({ panels: panels.map((p) => (p.id === id ? panel : p)) })

  const newId = slugify(name)
  const taken = panels.some((panel) => panel.id === newId)

  return (
    <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-lg">
      <DialogHeader>
        <DialogTitle>Panels</DialogTitle>
        <DialogDescription>
          A panel is one screen and the dashboards it shows. Point the device at
          a link and it asks for a code you enter here.
        </DialogDescription>
      </DialogHeader>

      <div className="grid gap-6">
        {panels.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            No panels yet. Add one below.
          </p>
        ) : null}

        {panels.map((panel) => (
          <PanelRow
            key={panel.id}
            panel={panel}
            host={host}
            remoteHost={remoteHost}
            canEdit={canEdit}
            dashboards={known.map((dashboard) => ({
              name: dashboard.name,
              title: dashboard.title || dashboard.name,
              icon: dashboard.icon ?? "",
            }))}
            onChange={(next) => replace(panel.id, next)}
            onRemove={() =>
              write({ panels: panels.filter((p) => p.id !== panel.id) })
            }
          />
        ))}

        {canEdit ? (
          <>
            <Separator />

            <form
              className="flex items-end gap-2"
              onSubmit={(event) => {
                event.preventDefault()
                if (!newId || taken) return
                write({
                  panels: [...panels, { id: newId, title: name.trim() }],
                })
                setName("")
              }}
            >
              <div className="grid flex-1 gap-1">
                <label className="text-sm" htmlFor="new-panel">
                  New panel
                </label>
                <Input
                  id="new-panel"
                  value={name}
                  placeholder="hallway"
                  autoComplete="off"
                  data-testid="new-panel-name"
                  onChange={(event) => setName(event.target.value)}
                />
              </div>
              <Button
                type="submit"
                disabled={!newId || taken}
                data-testid="add-panel"
              >
                Add panel
              </Button>
            </form>
            {taken ? (
              <p className="text-sm text-destructive">
                There is already a panel called {newId}.
              </p>
            ) : null}
          </>
        ) : null}
      </div>
    </DialogContent>
  )
}

function PanelRow({
  panel,
  host,
  remoteHost,
  canEdit,
  dashboards,
  onChange,
  onRemove,
}: {
  panel: PanelDef
  /** Where this instance answers, as it knows itself. */
  host: string
  /** Where the portal serves this instance, when it is enrolled. */
  remoteHost: string
  /**
   * Whether this account may change anything here. Every control below saves
   * through the same superuser-only PUT, so a reader gets the panel and its
   * links — worth seeing — with the writes turned off rather than a 403.
   */
  canEdit: boolean
  dashboards: { name: string; title: string; icon: string }[]
  onChange: (next: PanelDef) => void
  onRemove: () => void
}) {
  const { showSuccessToast, showErrorToast } = useCustomToast()
  const [code, setCode] = useState("")
  // Unpairing cannot be undone from here — the screen has to be at hand to
  // read out a new code — so the button asks a second time before it fires.
  // ponytail: a two-step button rather than a dialog, since this one already
  // lives inside a dialog.
  const [confirmUnpair, setConfirmUnpair] = useState(false)
  // Removing the panel throws away more than unpairing does, so it asks the
  // same way — the icon turns destructive and only the second press fires.
  const [confirmRemove, setConfirmRemove] = useState(false)
  const unpair = useUnpairPanel(panel.id)
  const assigned = panel.dashboards ?? []
  const typed = code.trim().toUpperCase()

  // Approving a code adopts whatever is holding it, so say what that is while
  // there is still time to stop.
  const { data: waiting } = useQuery({
    queryKey: ["pending-device", typed],
    queryFn: () => PanelsService.pendingDevice({ code: typed }),
    enabled: canEdit && typed.length === CODE_LENGTH,
    retry: false,
  })

  const pair = useMutation({
    mutationFn: () =>
      PanelsService.approvePairing({
        panelId: panel.id,
        requestBody: { code: typed },
      }),
    onSuccess: () => {
      setCode("")
      showSuccessToast("Paired. The screen switches over within a few seconds.")
    },
    onError: handleError.bind(showErrorToast),
  })

  const toggle = (dashboard: string) =>
    onChange({
      ...panel,
      // ponytail: order follows the order they were ticked. Arrows if anyone
      // asks for them.
      dashboards: assigned.includes(dashboard)
        ? assigned.filter((name) => name !== dashboard)
        : [...assigned, dashboard],
    })

  const link = host ? `${host}/panel/${panel.id}` : ""
  const remoteLink = remoteHost ? `${remoteHost}/panel` : ""
  // The trash icon carries no text of its own, so the confirm step says what
  // the next press does through the label a reader or a hover gets.
  const removeLabel = confirmRemove
    ? `Confirm: remove ${panel.id}`
    : `Remove ${panel.id}`

  return (
    <div className="grid gap-3" data-testid={`panel-${panel.id}`}>
      <div className="flex items-center gap-2">
        <Input
          value={panel.title}
          placeholder={panel.id}
          aria-label={`Title of ${panel.id}`}
          disabled={!canEdit}
          onChange={(event) =>
            onChange({ ...panel, title: event.target.value })
          }
        />
        <span className="shrink-0 text-sm text-muted-foreground">
          {panel.id}
        </span>
        <Button
          variant={confirmRemove ? "destructive" : "ghost"}
          size="icon-touch"
          className={cn("shrink-0", !confirmRemove && "text-muted-foreground")}
          aria-label={removeLabel}
          title={removeLabel}
          data-testid={`remove-panel-${panel.id}`}
          disabled={!canEdit}
          onBlur={() => setConfirmRemove(false)}
          onClick={() => {
            if (!confirmRemove) {
              setConfirmRemove(true)
              return
            }
            setConfirmRemove(false)
            onRemove()
          }}
        >
          <Trash2 />
        </Button>
      </div>

      <label
        htmlFor={`touch-${panel.id}`}
        className="flex items-center gap-2 text-sm"
      >
        <span className="flex-1">Touch friendly</span>
        <InfoTip label="Touch friendly">
          Bigger controls and a bigger rail, and nothing that only happens on
          hover. Set here rather than on a dashboard because it describes the
          screen: the same dashboard may also hang somewhere with a mouse.
        </InfoTip>
        <Switch
          id={`touch-${panel.id}`}
          checked={panel.touch === true}
          disabled={!canEdit}
          data-testid={`panel-touch-${panel.id}`}
          onCheckedChange={(touch) => onChange({ ...panel, touch })}
        />
      </label>

      {dashboards.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          No dashboards to assign yet.
        </p>
      ) : (
        <div className="grid gap-2">
          {dashboards.map((dashboard) => {
            const position = assigned.indexOf(dashboard.name)
            const id = `assign-${panel.id}-${dashboard.name}`
            // What this dashboard draws on the rail. Shown rather than set: the
            // icon belongs to the document, and this dialog has no draft to put
            // a change into.
            const Glyph = resolveIcon(dashboard.icon)
            return (
              <label
                key={dashboard.name}
                htmlFor={id}
                className="flex items-center gap-2 text-sm"
              >
                <Checkbox
                  id={id}
                  checked={position >= 0}
                  data-testid={id}
                  disabled={!canEdit}
                  onCheckedChange={() => toggle(dashboard.name)}
                />
                <span
                  aria-hidden
                  className="flex size-5 shrink-0 items-center justify-center text-xs font-medium text-muted-foreground"
                >
                  {Glyph ? (
                    <Glyph className="size-4" />
                  ) : (
                    initials(dashboard.title)
                  )}
                </span>
                <span className="flex-1 truncate">{dashboard.title}</span>
                {position >= 0 ? (
                  <span className="text-xs text-muted-foreground">
                    {position + 1}
                  </span>
                ) : null}
              </label>
            )
          })}
        </div>
      )}

      <PanelIo panel={panel} canEdit={canEdit} onChange={onChange} />

      <div className="grid gap-2">
        <Input
          readOnly
          value={link}
          placeholder="This instance has no address set"
          aria-label={`Link for ${panel.id}`}
          className="text-muted-foreground"
          onFocus={(event) => event.currentTarget.select()}
        />
        {remoteLink ? (
          <div className="flex items-center gap-2">
            <Input
              readOnly
              value={remoteLink}
              aria-label={`Portal link for ${panel.id}`}
              className="text-muted-foreground"
              data-testid={`remote-link-${panel.id}`}
              onFocus={(event) => event.currentTarget.select()}
            />
          </div>
        ) : null}
        {canEdit ? (
          <>
            <form
              className="flex gap-2"
              onSubmit={(event) => {
                event.preventDefault()
                if (typed) pair.mutate()
              }}
            >
              <Input
                value={code}
                placeholder="Code shown on the screen"
                aria-label={`Pairing code for ${panel.id}`}
                autoComplete="off"
                maxLength={CODE_LENGTH}
                data-testid={`pair-code-${panel.id}`}
                onChange={(event) => setCode(event.target.value.toUpperCase())}
              />
              <Button
                type="submit"
                variant="outline"
                disabled={!typed || pair.isPending}
                data-testid={`pair-${panel.id}`}
              >
                Pair device
              </Button>
            </form>
            {typed.length === CODE_LENGTH ? (
              <p
                className="text-xs text-muted-foreground"
                data-testid={`pending-${panel.id}`}
              >
                {waiting
                  ? `${waiting.device}${waiting.remote ? " · via portal" : ""}`
                  : "No device is waiting on that code."}
              </p>
            ) : null}

            <div className="flex flex-wrap items-center gap-2">
              <Button
                variant={confirmUnpair ? "destructive" : "outline"}
                disabled={unpair.isPending}
                data-testid={`unpair-${panel.id}`}
                onBlur={() => setConfirmUnpair(false)}
                onClick={() => {
                  if (!confirmUnpair) {
                    setConfirmUnpair(true)
                    return
                  }
                  setConfirmUnpair(false)
                  unpair.mutate(undefined, {
                    onSuccess: () =>
                      showSuccessToast(
                        "Unpaired. The screen asks for a new code.",
                      ),
                    onError: (error) =>
                      handleError.call(showErrorToast, error as ApiError),
                  })
                }}
              >
                {confirmUnpair
                  ? "Confirm: sign this screen out"
                  : "Unpair screen"}
              </Button>
              <InfoTip label="Unpair screen">
                Sends the screen hanging here back to a pairing code, keeping
                the panel, its dashboards and their arrangement. Removing the
                panel throws all three away instead. A screen paired through the
                portal holds a credential this does not reach; revoke that one
                there.
              </InfoTip>
            </div>
          </>
        ) : null}
      </div>
    </div>
  )
}

/**
 * The device's own inputs and outputs, each wired to a message.
 *
 * Every change saves as it is made, like the rest of the dialog. A new port
 * is held here until it has both a name and a message, since the server
 * refuses a port without either.
 */
function PanelIo({
  panel,
  canEdit,
  onChange,
}: {
  panel: PanelDef
  canEdit: boolean
  onChange: (next: PanelDef) => void
}) {
  const io = panel.io ?? []
  const [draft, setDraft] = useState<PanelPort | null>(null)
  const listId = `ports-${panel.id}`

  const write = (next: PanelPort[]) => onChange({ ...panel, io: next })
  const keepDraft = (next: PanelPort) => {
    if (!next.port || !next.message) return setDraft(next)
    setDraft(null)
    write([...io, next])
  }

  return (
    <PanelSection
      title="I/O"
      help="Hardware on the device itself, such as a GPIO pin or its microphone. In publishes to the message, Out follows it, and Config goes to the device as it is."
    >
      <datalist id={listId}>
        {PORT_SUGGESTIONS.map((port) => (
          <option key={port} value={port} />
        ))}
      </datalist>
      {/* `disabled` on a fieldset reaches every control inside it. */}
      <fieldset disabled={!canEdit} className="grid min-w-0 gap-4">
        {io.length === 0 && !draft ? (
          <p className="text-sm text-muted-foreground">No ports yet.</p>
        ) : null}
        {io.map((row, index) => (
          <IoRow
            // Ports have no id, and two may share a name until one is renamed.
            key={index}
            row={row}
            listId={listId}
            testId={`io-${panel.id}-${index}`}
            onChange={(next) =>
              write(io.map((one, at) => (at === index ? next : one)))
            }
            onRemove={() => write(io.filter((_, at) => at !== index))}
          />
        ))}
        {draft ? (
          <IoRow
            row={draft}
            listId={listId}
            testId={`io-${panel.id}-new`}
            onChange={keepDraft}
            onRemove={() => setDraft(null)}
          />
        ) : null}
        {canEdit && !draft ? (
          <Button
            variant="outline"
            size="sm-touch"
            className="justify-self-start"
            data-testid={`add-port-${panel.id}`}
            onClick={() => setDraft({ port: "", message: "", direction: "in" })}
          >
            <Plus />
            Add port
          </Button>
        ) : null}
      </fieldset>
    </PanelSection>
  )
}

function IoRow({
  row,
  listId,
  testId,
  onChange,
  onRemove,
}: {
  row: PanelPort
  /** The datalist of port names to suggest. */
  listId: string
  testId: string
  onChange: (next: PanelPort) => void
  onRemove: () => void
}) {
  const name = row.port || "new port"
  return (
    <div className="grid gap-2" data-testid={testId}>
      <div className="flex items-center gap-2">
        <Input
          // Remounted with whatever was saved, so a refused name snaps back.
          key={row.port}
          defaultValue={row.port}
          placeholder="Port, e.g. gpio.4"
          aria-label={`Port of ${name}`}
          autoComplete="off"
          list={listId}
          onBlur={(event) => {
            const port = portOf(event.currentTarget.value)
            event.currentTarget.value = port || row.port
            if (port && port !== row.port) onChange({ ...row, port })
          }}
        />
        <div className="shrink-0">
          <Segmented
            value={row.direction}
            options={DIRECTIONS}
            label={`Direction of ${name}`}
            onChange={(direction) =>
              onChange({
                ...row,
                direction: direction as PanelPort["direction"],
              })
            }
          />
        </div>
        <Button
          variant="ghost"
          size="icon-touch"
          className="shrink-0 text-muted-foreground"
          aria-label={`Remove ${name}`}
          title={`Remove ${name}`}
          onClick={onRemove}
        >
          <X />
        </Button>
      </div>
      <div className="flex items-center gap-2">
        <div className="min-w-0 flex-1">
          <MessagePicker
            value={row.message}
            label={`Message of ${name}`}
            hideLabel
            // A port the device publishes from needs a message a flow takes in.
            filter={
              row.direction === "in"
                ? (message) => message.writable !== false
                : undefined
            }
            onPick={(message) => onChange({ ...row, message })}
          />
        </div>
        <JsonField
          value={row.config ?? {}}
          label={`Config of ${name}`}
          check={objectOnly}
          className="h-9 w-28 shrink-0"
          onChange={(config) =>
            onChange({ ...row, config: config as PanelPort["config"] })
          }
        />
      </div>
    </div>
  )
}