tower/apps/web/app/my/groups/[id]/page.tsx

import { getApiBaseUrl, getMemberToken } from '../../../_lib/api';
import Link from 'next/link';

interface MemberGroupSummary {
  id: string;
  name: string;
  tenantId: string;
  scopes: string[];
  retentionDays: number;
  policyVersion: string;
  consentStatus: 'GRANTED' | 'REVOKED' | 'PENDING';
  joinedAt: string;
}

async function fetchGroup(token: string, id: string): Promise<MemberGroupSummary | null> {
  const res = await fetch(`${getApiBaseUrl()}/my/groups/${id}`, {
    headers: { Accept: 'application/json', Authorization: `Bearer ${token}` },
    cache: 'no-store',
  }).catch(() => null);
  if (!res || !res.ok) return null;
  return (await res.json()) as MemberGroupSummary;
}

export default async function MyGroupDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const token = await getMemberToken();
  if (!token) {
    return (
      <div className="max-w-2xl mx-auto mt-12 p-6 rounded-lg border border-yellow-200 bg-yellow-50">
        <h1 className="text-lg font-semibold text-yellow-800">Sign in required</h1>
        <p className="text-sm text-yellow-700">Complete onboarding to view group details.</p>
      </div>
    );
  }

  const group = await fetchGroup(token, id);
  if (!group) {
    return (
      <div className="max-w-2xl mx-auto mt-12 p-6 rounded-lg border border-red-200 bg-red-50">
        <h1 className="text-lg font-semibold text-red-800">Group not found</h1>
        <p className="text-sm text-red-700">
          You aren&apos;t a member of this group, or it has been removed.
        </p>
        <Link href="/my/groups" className="text-sm text-blue-600 underline mt-3 inline-block">
          ← Back to your groups
        </Link>
      </div>
    );
  }

  return (
    <div className="max-w-2xl mx-auto mt-12 p-6 rounded-lg border border-gray-200 bg-white">
      <Link href="/my/groups" className="text-xs text-gray-500 underline">
        ← All groups
      </Link>
      <h1 className="text-xl font-semibold mt-2 mb-4">{group.name}</h1>
      <dl className="text-sm space-y-2">
        <div>
          <dt className="inline font-medium">Status: </dt>
          <dd className="inline">{group.consentStatus}</dd>
        </div>
        <div>
          <dt className="inline font-medium">Scopes: </dt>
          <dd className="inline">{group.scopes.join(', ')}</dd>
        </div>
        <div>
          <dt className="inline font-medium">Retention: </dt>
          <dd className="inline">{group.retentionDays} days</dd>
        </div>
        <div>
          <dt className="inline font-medium">Policy version: </dt>
          <dd className="inline">{group.policyVersion}</dd>
        </div>
        <div>
          <dt className="inline font-medium">Joined: </dt>
          <dd className="inline">{new Date(group.joinedAt).toLocaleString()}</dd>
        </div>
      </dl>
      <p className="mt-4 text-xs text-gray-500">
        Use the &quot;Revoke consent&quot; button on{' '}
        <Link href="/my/groups" className="underline">
          your groups list
        </Link>{' '}
        to opt out of this group.
      </p>
    </div>
  );
}