tessera-ctl/apps/web/src/app/(portal)/admin/groups/page.tsx

'use client';

import { useCallback, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { useAuthStore } from '@/lib/stores/auth-store';
import { GroupFormModal } from './components/GroupFormModal';
import { GroupMembersModal } from './components/GroupMembersModal';
import { DeleteGroupDialog } from './components/DeleteGroupDialog';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';

export interface Group {
  id: string;
  tenantId: string;
  name: string;
  ldapDn: string | null;
  internalName: string | null;
  isDefault: boolean;
  createdAt: string;
  updatedAt: string;
  memberCount: number;
}

/**
 * Admin group management page (PERM-01, D-14). Sixth admin nav entry.
 * ADMIN and SUPER_ADMIN can access — the role check here is display only,
 * not enforcement; every /groups route is protected server-side by
 * RolesGuard (T-15-22).
 */
export default function AdminGroupsPage() {
  const t = useTranslations('admin.groups');
  const tCommon = useTranslations('common');
  const currentUser = useAuthStore((s) => s.user);

  const [groups, setGroups] = useState<Group[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [togglingDefaultId, setTogglingDefaultId] = useState<string | null>(null);

  const [showFormModal, setShowFormModal] = useState(false);
  const [editingGroup, setEditingGroup] = useState<Group | null>(null);
  const [membersGroup, setMembersGroup] = useState<Group | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Group | null>(null);

  const hasAccess =
    currentUser?.role === 'ADMIN' || currentUser?.role === 'SUPER_ADMIN';

  const fetchGroups = useCallback(async () => {
    try {
      const res = await fetch(`${API_URL}/groups`, { credentials: 'include' });
      if (res.ok) {
        setGroups(await res.json());
      }
    } catch {
      // silently fail — matches the read-path precedent of the other admin pages
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (hasAccess) {
      fetchGroups();
    } else {
      setLoading(false);
    }
  }, [hasAccess, fetchGroups]);

  const openCreate = () => {
    setEditingGroup(null);
    setShowFormModal(true);
  };

  const openEdit = (group: Group) => {
    setEditingGroup(group);
    setShowFormModal(true);
  };

  const handleToggleDefault = async (group: Group) => {
    setTogglingDefaultId(group.id);
    setError(null);
    const nextValue = !group.isDefault;
    // Optimistic update, same pattern as AdminModulesPage.toggleModule.
    setGroups((prev) =>
      prev.map((g) => (g.id === group.id ? { ...g, isDefault: nextValue } : g)),
    );
    try {
      const res = await fetch(`${API_URL}/groups/${group.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ isDefault: nextValue }),
      });
      if (res.ok) {
        // Setting one group's default flag unsets it on every other group
        // in the tenant (D-13, server-side transaction) — a full refetch
        // is the only way the table reflects that exclusivity correctly.
        fetchGroups();
      } else {
        setGroups((prev) =>
          prev.map((g) => (g.id === group.id ? { ...g, isDefault: group.isDefault } : g)),
        );
        const body = await res.text().catch(() => '');
        setError(`${res.status}: ${body}`);
      }
    } catch (err) {
      setGroups((prev) =>
        prev.map((g) => (g.id === group.id ? { ...g, isDefault: group.isDefault } : g)),
      );
      setError(String(err));
    } finally {
      setTogglingDefaultId(null);
    }
  };

  if (!hasAccess) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <p className="text-lg text-muted-foreground">{tCommon('accessDenied')}</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-foreground">{t('title')}</h1>
        <button
          type="button"
          onClick={openCreate}
          className="btn btn-primary"
        >
          {t('create')}
        </button>
      </div>

      {error && (
        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
          {error}
        </div>
      )}

      {loading ? (
        <p className="text-muted-foreground">{tCommon('loading')}</p>
      ) : groups.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <h2 className="text-lg font-semibold text-foreground mb-2">{t('noGroups')}</h2>
          <p className="text-sm text-muted-foreground mb-6">{t('noGroupsBody')}</p>
          <button
            type="button"
            onClick={openCreate}
            className="btn btn-primary"
          >
            {t('create')}
          </button>
        </div>
      ) : (
        <div className="overflow-x-auto rounded-md border border-border">
          <table className="w-full text-sm">
            <thead className="bg-muted/50">
              <tr>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('name')}
                </th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('ldapBinding')}
                </th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('defaultGroup')}
                </th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('memberCount')}
                </th>
                <th className="px-4 py-3 text-right font-medium text-muted-foreground">
                  {t('actions')}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {groups.map((group) => (
                <tr key={group.id} className="hover:bg-muted/30 transition-colors">
                  <td className="px-4 py-3 font-medium text-foreground">
                    <span title={group.name}>{group.internalName ?? group.name}</span>
                  </td>
                  <td className="px-4 py-3">
                    <span
                      className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${
                        group.ldapDn
                          ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                          : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500'
                      }`}
                    >
                      {group.ldapDn ? t('boundBadge') : t('manualBadge')}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <button
                      type="button"
                      onClick={() => handleToggleDefault(group)}
                      disabled={togglingDefaultId === group.id}
                      aria-label={group.isDefault ? t('isDefault') : t('setDefault')}
                      title={group.isDefault ? t('isDefault') : t('setDefault')}
                      className={`rounded px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-wait ${
                        group.isDefault
                          ? 'text-primary'
                          : 'text-muted-foreground hover:text-foreground'
                      }`}
                    >
                      <svg
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill={group.isDefault ? 'currentColor' : 'none'}
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                      </svg>
                    </button>
                  </td>
                  <td className="px-4 py-3 text-muted-foreground">{group.memberCount}</td>
                  <td className="px-4 py-3 text-right">
                    <div className="flex items-center justify-end gap-2">
                      <button
                        type="button"
                        onClick={() => openEdit(group)}
                        className="rounded px-2 py-1 text-xs text-foreground hover:bg-muted transition-colors"
                      >
                        {tCommon('edit')}
                      </button>
                      <button
                        type="button"
                        onClick={() => setMembersGroup(group)}
                        className="rounded px-2 py-1 text-xs text-foreground hover:bg-muted transition-colors"
                      >
                        {t('membersButton')}
                      </button>
                      <button
                        type="button"
                        onClick={() => setDeleteTarget(group)}
                        className="rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10 transition-colors"
                      >
                        {tCommon('delete')}
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {showFormModal && (
        <GroupFormModal
          group={editingGroup}
          onClose={() => setShowFormModal(false)}
          onSaved={fetchGroups}
        />
      )}

      {membersGroup && (
        <GroupMembersModal
          group={membersGroup}
          onClose={() => setMembersGroup(null)}
          onChanged={fetchGroups}
        />
      )}

      {deleteTarget && (
        <DeleteGroupDialog
          group={deleteTarget}
          onClose={() => setDeleteTarget(null)}
          onDeleted={fetchGroups}
        />
      )}
    </div>
  );
}