Live status board

"use client";
import { useState } from "react";
import { LuCircleAlert, LuClock, LuPlane, LuTicket } from "react-icons/lu";
import { FeedStatus, MetricMini, Sparkline } from "@nexera-ui/react";

// Counts every 30 minutes since 07:00 on Wednesday 7 October 2026; the last value is now (11:30).
const TILES = [
  {
    label: "Clocked in",
    icon: <LuClock />,
    data: [12, 48, 121, 168, 182, 186, 184, 186, 187, 186],
    caption: "of 236 expected today",
    spark: "Clocked in since 07:00, rising from 12 to 186 and steady since 09:30",
  },
  {
    label: "Out of office",
    icon: <LuPlane />,
    data: [9, 9, 10, 10, 11, 11, 12, 12, 12, 12],
    caption: "8 on leave, 4 travelling",
    spark: "Out of office since 07:00, rising slowly from 9 to 12",
  },
  {
    label: "Open IT tickets",
    icon: <LuTicket />,
    data: [31, 30, 34, 38, 35, 31, 28, 26, 24, 23],
    caption: "3 marked urgent",
    spark: "Open IT tickets since 07:00, peaking at 38 at 08:30 and falling to 23",
  },
  {
    label: "Approvals waiting",
    icon: <LuCircleAlert />,
    data: [14, 14, 13, 12, 12, 11, 10, 10, 9, 9],
    caption: "Oldest from Monday",
    spark: "Approvals waiting since 07:00, falling from 14 to 9",
  },
];

const EVENTS = [
  { time: "11:28", text: "Mia Jensen approved Luis Ortega's leave request for 19 to 23 October." },
  { time: "11:21", text: "IT ticket #4127, laptop replacement for Chloe Martin, was resolved." },
  { time: "11:14", text: "Omar Haddad accepted his invitation and joined the Customer team." },
  { time: "11:02", text: "Payroll run for October moved to review by Sara Malik." },
];

/** Live status board: today's real-time workplace counts with tiny trends, the latest events and the live connection state. */
export default function LiveStatusBoard() {
  const [connected, setConnected] = useState(false);
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-6xl gap-6">
        <header className="flex flex-wrap items-end justify-between gap-2">
          <div className="grid gap-1">
            <h2 className="text-heading-h2 text-primary">Today at Northwind</h2>
            <p className="text-body-default text-secondary">
              Wednesday 7 October · London office and remote
            </p>
          </div>
          <p className="text-body-small text-muted">
            {connected ? "Live · updated 11:31" : "Paused · showing 11:30"}
          </p>
        </header>

        <ul className="grid gap-4 @xl:grid-cols-2 @5xl:grid-cols-4">
          {TILES.map((tile) => (
            <li
              key={tile.label}
              className="grid gap-3 rounded-lg border border-default bg-surface p-4"
            >
              <span
                aria-hidden="true"
                className="grid size-8 place-items-center rounded-md bg-brand-subtle text-brand-text"
              >
                {tile.icon}
              </span>
              <div className="flex flex-wrap items-end justify-between gap-3">
                <MetricMini
                  label={tile.label}
                  value={String(tile.data[tile.data.length - 1])}
                  caption={tile.caption}
                />
                <Sparkline data={tile.data} aria-label={tile.spark} width={96} height={32} />
              </div>
            </li>
          ))}
        </ul>

        <section
          aria-labelledby="live-events"
          className="grid gap-2 rounded-lg border border-default bg-surface p-4 @3xl:p-6"
        >
          <h3 id="live-events" className="text-heading-h4 text-primary">
            Latest events
          </h3>
          <ol className="grid divide-y divide-subtle">
            {EVENTS.map((event) => (
              <li key={event.time} className="flex gap-4 py-3 text-body-default text-secondary">
                <time className="w-12 shrink-0 text-body-small text-muted tabular-nums">
                  {event.time}
                </time>
                {event.text}
              </li>
            ))}
          </ol>
          {connected ? (
            <FeedStatus status="end">You are up to date · 4 events since 11:00</FeedStatus>
          ) : (
            <FeedStatus
              status="error"
              onRetry={() => {
                setConnected(true);
              }}
              retryLabel="Reconnect"
            >
              Live updates stopped at 11:30. Reconnect to keep the board current.
            </FeedStatus>
          )}
        </section>
      </div>
    </div>
  );
}