'use client';

import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui';
import { trpc } from '@/lib/trpc/client';

/**
 * Client-side ping. Demonstrates the second tRPC path: client hooks +
 * TanStack Query. The RSC caller above the fold and this hook hit the same
 * procedure — both must succeed for the hybrid wiring to be considered green.
 */
export function PingClient() {
  const query = trpc.ping.ping.useQuery();

  return (
    <Card data-testid="ping-client">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          {query.isPending ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : query.isError ? (
            <AlertCircle className="h-4 w-4 text-destructive" />
          ) : (
            <CheckCircle2 className="h-4 w-4 text-green-600" />
          )}
          Client-side ping (useQuery)
        </CardTitle>
        <CardDescription>Round-trips through /api/trpc.</CardDescription>
      </CardHeader>
      <CardContent className="text-sm">
        {query.isPending && <span>Loading…</span>}
        {query.isError && (
          <span className="text-destructive" data-testid="ping-client-error">
            {query.error.message}
          </span>
        )}
        {query.data && (
          <span data-testid="ping-client-tenant">tenant: {query.data.tenant.name}</span>
        )}
      </CardContent>
    </Card>
  );
}