sexy/components/devices/DevicesTable.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";

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

function DeviceNameCell({ device }: { device: DeviceRow }) {
  const router = useRouter();
  const [value, setValue] = useState(device.displayName ?? device.bleName);
  const [saving, setSaving] = useState(false);

  async function handleSave() {
    if (value.trim().length === 0) return;
    setSaving(true);
    const res = await fetch(`/api/devices/${device.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ displayName: value.trim() }),
    });
    setSaving(false);
    if (res.ok) {
      toast.success("Renamed");
      router.refresh();
    } else {
      toast.error("Could not rename device");
    }
  }

  return (
    <div className="flex items-center gap-2">
      <Input value={value} onChange={(e) => setValue(e.target.value)} className="h-8 max-w-48" />
      <Button size="sm" variant="outline" onClick={handleSave} disabled={saving}>
        Save
      </Button>
    </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>
  );
}