import type { RelayClientDeviceRecord } from "@t3tools/contracts/relay";import { SmartphoneIcon } from "lucide-react"; import { useManagedRelayDevices } from "../../cloud/managedRelayState";import { Badge } from "../ui/badge";import { Button } from "../ui/button";import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";import { Skeleton } from "../ui/skeleton";import {  mobileClientNotificationDetail,  mobileClientPlatformLabel,  mobileClientUpdatedAtLabel,} from "./MobileClientsUserProfilePage.logic";import {  ClerkUserProfilePage,  ClerkUserProfileRefreshButton,  ClerkUserProfileRow,} from "./ClerkUserProfilePage"; const MOBILE_CLIENT_SKELETON_ROWS = ["primary", "secondary"] as const; function MobileClientStatusBadge({  enabled,  label,}: {  readonly enabled: boolean;  readonly label: string;}) {  return (    <Badge variant={enabled ? "success" : "outline"}>      {label}: {enabled ? "On" : "Off"}    </Badge>  );} function MobileClientRow({ device }: { readonly device: RelayClientDeviceRecord }) {  return (    <ClerkUserProfileRow icon={<SmartphoneIcon className="size-4" />}>      <div className="flex flex-col gap-0.5 sm:flex-row sm:items-start sm:justify-between sm:gap-3">        <div className="min-w-0">          <h3 className="truncate text-[0.8125rem] leading-[1.125rem] font-medium text-foreground">            {device.label}          </h3>          <p className="text-xs leading-[1.125rem] text-muted-foreground">            {mobileClientPlatformLabel(device)}          </p>        </div>        <p className="shrink-0 text-[0.6875rem] leading-4 text-muted-foreground/75">          {mobileClientUpdatedAtLabel(device.updatedAt)}        </p>      </div>      <div className="mt-2 flex flex-wrap gap-1.5">        <MobileClientStatusBadge          enabled={device.notifications.enabled}          label="Push notifications"        />        <MobileClientStatusBadge enabled={device.liveActivities.enabled} label="Live Activities" />      </div>      <p className="mt-1.5 text-xs leading-[1.125rem] text-muted-foreground/80">        {mobileClientNotificationDetail(device)}      </p>    </ClerkUserProfileRow>  );} function MobileClientsSkeleton() {  return (    <div aria-label="Loading mobile clients" className="divide-y border-t" role="status">      {MOBILE_CLIENT_SKELETON_ROWS.map((row) => (        <div key={row} className="py-4">          <div className="flex gap-3">            <Skeleton className="size-8 shrink-0 rounded-lg" />            <div className="flex-1 space-y-2">              <Skeleton className="h-3.5 w-36" />              <Skeleton className="h-3 w-28" />              <div className="flex gap-2">                <Skeleton className="h-4.5 w-28" />                <Skeleton className="h-4.5 w-24" />              </div>            </div>          </div>        </div>      ))}    </div>  );} function EmptyMobileClients() {  return (    <Empty className="min-h-64 gap-4 border-t px-6 py-10 md:p-10">      <EmptyMedia className="mb-0" variant="icon">        <SmartphoneIcon />      </EmptyMedia>      <EmptyHeader>        <EmptyTitle className="text-[1.0625rem] leading-6">No mobile clients</EmptyTitle>        <EmptyDescription className="text-[0.8125rem] leading-[1.125rem]">          Sign in to T3 Code on your iPhone to register it for push notifications and Live          Activities.        </EmptyDescription>      </EmptyHeader>    </Empty>  );} export function MobileClientsUserProfilePage() {  const devicesState = useManagedRelayDevices();  const devices = devicesState.data ?? [];  const isInitialLoad =    !devicesState.accountId || (devicesState.data === null && !devicesState.error);  const hasErrorWithoutData = devicesState.error !== null && devicesState.data === null;   return (    <ClerkUserProfilePage      title="Mobile clients"      description="Devices registered to receive T3 Connect activity from your environments."      action={        <ClerkUserProfileRefreshButton          isPending={devicesState.isPending}          onClick={devicesState.refresh}        />      }    >      <div>        {devicesState.error ? (          <div            className="mb-4 flex flex-col gap-3 border-t border-destructive/35 py-3 text-[0.8125rem] sm:flex-row sm:items-center sm:justify-between"            role="alert"          >            <div>              <p className="font-medium text-destructive-foreground">                Could not load mobile clients              </p>              <p className="mt-0.5 text-xs text-muted-foreground">{devicesState.error}</p>            </div>            <Button size="xs" variant="outline" onClick={devicesState.refresh}>              Try again            </Button>          </div>        ) : null}         {isInitialLoad ? (          <MobileClientsSkeleton />        ) : hasErrorWithoutData ? null : devices.length > 0 ? (          <ul className="border-t">            {devices.map((device) => (              <MobileClientRow key={device.deviceId} device={device} />            ))}          </ul>        ) : (          <EmptyMobileClients />        )}      </div>    </ClerkUserProfilePage>  );}