import { TRPCError } from '@trpc/server';
import { CheckCircle2, AlertCircle } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui';
import { Alert, AlertDescription, AlertTitle } from '@repo/ui';
import { api } from '@/lib/trpc/server';
import { PingClient } from './ping-client';

/**
 * Smoke-test home page. Uses the RSC tRPC caller (server-side) to invoke the
 * ping procedure end-to-end:
 *
 *   RSC → tRPC caller → protectedProcedure → Prisma → Postgres → Tenant row
 *
 * If the call throws (e.g. UNAUTHORIZED because no session), the error is
 * caught and rendered as a legible failure card.
 */
export default async function HomePage() {
  let result:
    | { ok: true; payload: Awaited<ReturnType<typeof api.ping.ping>> }
    | { ok: false; message: string; code: string } = {
    ok: false,
    message: 'init',
    code: 'INIT',
  };

  try {
    const payload = await api.ping.ping();
    result = { ok: true, payload };
  } catch (err) {
    if (err instanceof TRPCError) {
      result = { ok: false, message: err.message, code: err.code };
    } else if (err instanceof Error) {
      result = { ok: false, message: err.message, code: 'UNKNOWN' };
    } else {
      result = { ok: false, message: String(err), code: 'UNKNOWN' };
    }
  }

  return (
    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-stretch justify-center gap-6 p-6">
      <header className="text-center">
        <h1 className="text-3xl font-bold tracking-tight">FieldOps Operator</h1>
        <p className="text-sm text-muted-foreground">Scaffold smoke test</p>
      </header>

      {result.ok ? (
        <Card data-testid="ping-success">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-green-600" />
              Connected
            </CardTitle>
            <CardDescription>
              End-to-end path verified: RSC → tRPC → Prisma → Postgres.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2 text-sm">
            <div>
              <span className="font-medium">Tenant: </span>
              <span data-testid="tenant-name">{result.payload.tenant.name}</span>
            </div>
            <div className="text-muted-foreground">
              <span className="font-medium">id:</span> {result.payload.tenant.id}
            </div>
            <div className="text-muted-foreground">
              <span className="font-medium">at:</span> {result.payload.timestamp}
            </div>
          </CardContent>
        </Card>
      ) : (
        <Alert variant="destructive" data-testid="ping-failure">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Ping failed ({result.code})</AlertTitle>
          <AlertDescription className="space-y-2">
            <p>{result.message}</p>
            <p className="text-xs">
              If this says <code>UNAUTHORIZED</code>, set{' '}
              <code>AUTH_DEV_AUTOLOGIN=true</code> in <code>.env</code> for local dev,
              or sign in via Auth.js.
            </p>
          </AlertDescription>
        </Alert>
      )}

      <PingClient />
    </main>
  );
}