blockchain/apps/portal/app/portal/dashboard/page.tsx

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useAccount } from "wagmi";

import {
  IdentityConsumer,
  type PortalIdentity,
} from "@/components/auth/identity-gate";
import { PageShell } from "@/components/layout/page-shell";
import { Badge } from "@/components/ui/badge";
import { Button, buttonVariants } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { WalletsPanel } from "@/components/wallet/wallets-panel";
import { MOCK_TRANSACTIONS } from "@/lib/explorer-mock";
import { hasVault, readVault, shortAddress } from "@/lib/mavi/storage";
import {
  membershipFor,
  roleCapabilities,
  roleLabel,
  type MembershipProfile,
} from "@/lib/membership";
import { cn } from "@/lib/utils";

export default function DashboardPage() {
  return (
    <IdentityConsumer>
      {(identity) => <DashboardBody identity={identity} />}
    </IdentityConsumer>
  );
}

function DashboardBody({ identity }: { identity: PortalIdentity }) {
  const router = useRouter();
  const [indexerLive, setIndexerLive] = useState<boolean | null>(null);
  const [maviShort, setMaviShort] = useState<string | null>(null);
  const { address: wagmiAddress, isConnected } = useAccount();

  useEffect(() => {
    if (hasVault()) {
      const a = readVault()?.address;
      setMaviShort(a ? shortAddress(a) : null);
    } else {
      setMaviShort(null);
    }
  }, []);

  useEffect(() => {
    if (!identity.isLoading && !identity.isSignedIn) {
      router.replace("/portal/sign-in");
    }
  }, [identity.isLoading, identity.isSignedIn, router]);

  useEffect(() => {
    let cancelled = false;
    void fetch("/api/explorer-health")
      .then((r) => r.json())
      .then((d: { ok?: boolean }) => {
        if (!cancelled) setIndexerLive(Boolean(d.ok));
      })
      .catch(() => {
        if (!cancelled) setIndexerLive(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  if (identity.isLoading) {
    return (
      <PageShell title="Dashboard" description="Checking your session…">
        <div className="space-y-4" aria-busy="true" aria-live="polite">
          <div className="h-8 w-40 animate-pulse rounded-md bg-muted" />
          <div className="grid gap-4 sm:grid-cols-3">
            {[0, 1, 2].map((i) => (
              <div
                key={i}
                className="h-32 animate-pulse rounded-xl border border-border bg-muted/40"
              />
            ))}
          </div>
          <p className="text-sm text-muted-foreground">Loading your session…</p>
        </div>
      </PageShell>
    );
  }

  if (!identity.isSignedIn) {
    return (
      <PageShell title="Dashboard" description="Sign in required.">
        <p className="text-sm text-muted-foreground">
          Redirecting to sign in…
        </p>
      </PageShell>
    );
  }

  const linkedWallet =
    wagmiAddress || identity.walletAddress || null;

  const membership = membershipFor({
    isSignedIn: identity.isSignedIn,
    source: identity.source,
    walletAddress: linkedWallet,
    label: identity.label,
  });
  const recent = MOCK_TRANSACTIONS.slice(0, 4);

  const walletsTitle = (() => {
    const parts: string[] = [];
    if (linkedWallet) parts.push(shortAddress(linkedWallet));
    if (maviShort && maviShort !== (linkedWallet ? shortAddress(linkedWallet) : "")) {
      parts.push(maviShort);
    }
    if (parts.length === 0) return "Not connected";
    if (parts.length === 1) return parts[0]!;
    return `${parts[0]} · ${parts[1]}`;
  })();

  return (
    <PageShell
      title="Dashboard"
      description="Your personal view of the krypco network."
    >
      <div className="mb-6 flex flex-wrap items-center gap-3">
        <Badge variant="accent">
          {identity.source === "wallet"
            ? "Wallet login"
            : identity.source === "konnos"
              ? "Konnos"
              : identity.source === "briven"
                ? "Email login"
                : "Demo session"}
        </Badge>
        {isConnected || identity.walletAddress ? (
          <Badge variant="outline">Wallet linked</Badge>
        ) : null}
        <span className="text-sm text-muted-foreground">{identity.label}</span>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="ml-auto"
          onClick={() =>
            void identity.signOut().then(() => router.push("/portal/sign-in"))
          }
        >
          Sign out
        </Button>
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        <MembershipCard membership={membership} />
        <Card>
          <CardHeader>
            <CardDescription>Wallets</CardDescription>
            <CardTitle className="font-mono text-base">{walletsTitle}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <WalletsPanel
              onConnected={() => {
                /* stay on dashboard */
              }}
            />
            <Link
              href="/portal/connect-wallet"
              className={cn(
                buttonVariants({ variant: "ghost", size: "sm" }),
                "px-0",
              )}
            >
              Full wallet guide →
            </Link>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardDescription>Network</CardDescription>
            <CardTitle className="text-lg">
              {indexerLive === null
                ? "Checking…"
                : indexerLive
                  ? "Hybrid live"
                  : "Hybrid preview"}
            </CardTitle>
          </CardHeader>
          <CardContent className="text-sm text-muted-foreground">
            {indexerLive
              ? "Indexer is up — explorer shows live sim data."
              : "Explorer falls back to mock until the indexer is running."}
          </CardContent>
        </Card>
      </div>

      <Card className="mt-6">
        <CardHeader>
          <CardTitle>Roles (light)</CardTitle>
          <CardDescription>
            Simple access labels for this portal. Deep chain membership and paid
            tiers come later.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex flex-wrap gap-2">
            {membership.roles.map((r) => (
              <Badge key={r} variant="outline">
                {roleLabel(r)}
              </Badge>
            ))}
          </div>
          <ul className="list-inside list-disc text-sm text-muted-foreground">
            {membership.roles.flatMap((r) =>
              roleCapabilities(r).map((c) => (
                <li key={`${r}-${c}`}>{c}</li>
              )),
            )}
          </ul>
          <div className="flex flex-wrap gap-2 pt-1">
            <Link
              href="/portal/machine-auth"
              className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}
            >
              Machine auth status
            </Link>
            <Link
              href="/portal/explorer"
              className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}
            >
              Open explorer
            </Link>
          </div>
        </CardContent>
      </Card>

      <Card className="mt-6">
        <CardHeader>
          <CardTitle>Recent activity (sample)</CardTitle>
          <CardDescription>
            Sample transactions so the dashboard feels real. Live personal
            history needs the indexer + your addresses.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          {recent.map((tx) => (
            <div
              key={tx.hash}
              className="flex flex-wrap items-center justify-between gap-2 border-b border-border/50 pb-3 last:border-0 last:pb-0"
            >
              <Link
                href={`/portal/explorer/tx/${encodeURIComponent(tx.hash)}`}
                className="font-mono text-[13px] text-accent-hover hover:underline"
              >
                {tx.hash.slice(0, 10)}…{tx.hash.slice(-6)}
              </Link>
              <Badge variant={tx.status}>{tx.status}</Badge>
              <span className="text-sm tabular-nums text-muted-foreground">
                {tx.value}
              </span>
            </div>
          ))}
          <Link
            href="/portal/explorer"
            className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}
          >
            Open explorer
          </Link>
        </CardContent>
      </Card>
    </PageShell>
  );
}

function MembershipCard({ membership }: { membership: MembershipProfile }) {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Membership</CardDescription>
        <CardTitle className="text-lg">{membership.tierLabel}</CardTitle>
      </CardHeader>
      <CardContent className="text-sm text-muted-foreground">
        {membership.blurb}
      </CardContent>
    </Card>
  );
}