status

"use client"

import * as React from "react"
import { Sample } from "@/app/samples"
import { Button } from "@/registry/base-nova/ui/button"
import { MaterialProvider } from "@/registry/base-nova/ui/material"
import { Panel } from "@/registry/base-nova/ui/panel"
import { Readout, ReadoutRow } from "@/registry/base-nova/ui/readout"
import { Status } from "@/registry/base-nova/ui/status"

// #region states
/** No pulse here: a page that holds still never pulses (the build below does, while
 *  it builds). */
function States() {
  return (
    <div className="flex flex-col gap-2 text-sm">
      <Status tone="ok">live</Status>
      <Status tone="warn">degraded</Status>
      <Status tone="bad">failing</Status>
      <Status tone="info">scheduled</Status>
      <Status>paused</Status>
      <Status>idle</Status>
    </div>
  )
}
// #endregion

// #region services
/** Beside names, as a readout's values: the dot follows the value's smaller size. */
function Services() {
  return (
    <Readout className="w-80">
      <ReadoutRow label="api">
        <Status tone="ok">live</Status>
      </ReadoutRow>
      <ReadoutRow label="worker, eu-west-1">
        <Status tone="warn">degraded</Status>
      </ReadoutRow>
      <ReadoutRow label="search index">
        <Status tone="bad">failing since the last schema change</Status>
      </ReadoutRow>
      <ReadoutRow label="mail">
        <Status>paused</Status>
      </ReadoutRow>
    </Readout>
  )
}
// #endregion

// #region build
/** Pulsing only while the work runs: the build ends and the dot stops. */
function Build() {
  const [state, setState] = React.useState<"idle" | "building" | "live">("idle")
  React.useEffect(() => {
    if (state !== "building") return
    const done = window.setTimeout(() => setState("live"), 4000)
    return () => window.clearTimeout(done)
  }, [state])
  return (
    <div className="flex items-center gap-4 text-sm">
      <Button
        variant="outline"
        size="sm"
        disabled={state === "building"}
        onClick={() => setState("building")}
      >
        deploy
      </Button>
      {state === "idle" && <Status>idle</Status>}
      {state === "building" && (
        <Status tone="warn" pulse>
          building
        </Status>
      )}
      {state === "live" && <Status tone="ok">live</Status>}
    </div>
  )
}
// #endregion

// #region dots
/** Dots alone, a row of health checks: each carries its word for a screen reader,
 *  and a title for the hand. */
const CHECKS = [
  { name: "mon", tone: "ok" },
  { name: "tue", tone: "ok" },
  { name: "wed", tone: "warn" },
  { name: "thu", tone: "ok" },
  { name: "fri", tone: "bad" },
  { name: "sat", tone: "ok" },
  { name: "sun", tone: "neutral" },
] as const
const WORDS = {
  ok: "healthy",
  warn: "slow",
  bad: "down",
  neutral: "not checked",
} as const

function Dots() {
  return (
    <ul className="m-0 flex list-none gap-3 p-0 text-sm">
      {CHECKS.map((c) => (
        <li key={c.name} title={`${c.name}: ${WORDS[c.tone]}`}>
          <Status tone={c.tone}>
            <span className="sr-only">
              {c.name}: {WORDS[c.tone]}
            </span>
          </Status>
        </li>
      ))}
    </ul>
  )
}
// #endregion

export default function StatusDemo() {
  return (
    <div className="space-y-8">
      <Sample name="states" glance title="the states" with="states">
        <States />
      </Sample>
      <Sample
        name="pulse"
        title="a pulse while it works"
        description="the pulse is the work in progress: when the build ends the dot holds still. with reduced motion it never moves."
        with="build"
      >
        <Build />
      </Sample>
      <Sample
        name="services"
        title="beside names"
        description="a long word stays on one line; the dot is sized from the words beside it, here a readout's smaller mono."
        with="services"
      >
        <Services />
      </Sample>
      <Sample
        name="sizes"
        title="in proportion to its words"
        description="the dot is 0.7em: in a caption, in body text, in a heading, and on the text's baseline in a sentence."
      >
        <div className="space-y-3">
          <p className="text-xs">
            <Status tone="ok">caption, 12 px</Status>
          </p>
          <p className="text-sm">
            the api has been <Status tone="ok">live</Status> since tuesday.
          </p>
          <h3 className="font-medium text-2xl">
            <Status tone="bad">checkout is down</Status>
          </h3>
        </div>
      </Sample>
      <Sample name="dots" title="dots alone" with="dots">
        <Dots />
      </Sample>
      <Sample
        name="materials"
        title="plain and on glass"
        description="it draws no surface: it reads on whatever holds it."
        with="states"
      >
        <div className="grid gap-4 sm:grid-cols-2">
          <Panel title="services">
            <States />
          </Panel>
          <MaterialProvider material="glass">
            <div className="rounded-xl bg-[url(/lightbox/peaks.jpg)] bg-cover bg-center p-6">
              <Panel title="services">
                <States />
              </Panel>
            </div>
          </MaterialProvider>
        </div>
      </Sample>
    </div>
  )
}