sexy/components/devices/DevicesTable.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Check, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";

export interface DeviceRow {
  id: number;
  displayName: string | null;
  bleName: string;
  lastConnectedAt: number | null;
}

const AUTOSAVE_DELAY_MS = 600;

function DeviceNameCell({ device }: { device: DeviceRow }) {
  const router = useRouter();
  const initial = device.displayName ?? device.bleName;
  const [value, setValue] = useState(initial);
  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
  const lastSaved = useRef(initial);

  useEffect(() => {
    const trimmed = value.trim();
    if (trimmed.length === 0 || trimmed === lastSaved.current) return;

    setStatus("saving");
    const timer = setTimeout(async () => {
      const res = await fetch(`/api/devices/${device.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ displayName: trimmed }),
      });
      if (res.ok) {
        lastSaved.current = trimmed;
        setStatus("saved");
        router.refresh();
      } else {
        setStatus("idle");
        toast.error("Could not rename device");
      }
    }, AUTOSAVE_DELAY_MS);

    return () => clearTimeout(timer);
  }, [value, device.id, router]);

  useEffect(() => {
    if (status !== "saved") return;
    const timer = setTimeout(() => setStatus("idle"), 1500);
    return () => clearTimeout(timer);
  }, [status]);

  return (
    <div className="flex items-center gap-2">
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        aria-label="Device display name"
        className="max-w-48 min-w-0 border-b-2 border-transparent bg-transparent text-sm font-medium text-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-primary focus:border-b-primary [field-sizing:content]"
      />
      <div className="relative flex size-4 shrink-0 items-center justify-center">
        <Loader2
          className={cn(
            "absolute size-4 animate-spin text-muted-foreground transition-opacity",
            status === "saving" ? "opacity-100" : "opacity-0",
          )}
        />
        <Check
          className={cn(
            "absolute size-4 text-primary transition-opacity",
            status === "saved" ? "opacity-100" : "opacity-0",
          )}
        />
      </div>
    </div>
  );
}

export function DevicesTable({ devices }: { devices: DeviceRow[] }) {
  if (devices.length === 0) {
    return <p className="text-sm text-muted-foreground">No devices seen yet - connect one from the Control page.</p>;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Display name</TableHead>
          <TableHead>Advertised name</TableHead>
          <TableHead>Last connected</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {devices.map((d) => (
          <TableRow key={d.id}>
            <TableCell>
              <DeviceNameCell device={d} />
            </TableCell>
            <TableCell className="bp-readout text-muted-foreground">{d.bleName}</TableCell>
            <TableCell className="bp-readout text-muted-foreground">
              {d.lastConnectedAt ? new Date(d.lastConnectedAt).toLocaleString() : "Never"}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}