mitlist/fe/src/pages/GroupDetailPage.vue

<template>
  <main class="container page-padding">
    <div v-if="loading" class="text-center">
      <div class="spinner-dots" role="status"><span /><span /><span /></div>
      <p>Loading group details...</p>
    </div>
    <div v-else-if="error" class="alert alert-error" role="alert">
      <div class="alert-content">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-alert-triangle" />
        </svg>
        {{ error }}
      </div>
    </div>
    <div v-else-if="group">
      <h1 class="mb-3">Group: {{ group.name }}</h1>

      <!-- Group Members Section -->
      <div class="card mt-3">
        <div class="card-header">
          <h3>Group Members</h3>
        </div>
        <div class="card-body">
          <div v-if="group.members && group.members.length > 0" class="members-list">
            <div v-for="member in group.members" :key="member.id" class="member-item">
              <div class="member-info">
                <span class="member-name">{{ member.email }}</span>
                <span class="member-role" :class="member.role?.toLowerCase()">{{ member.role || 'Member' }}</span>
              </div>
              <button v-if="canRemoveMember(member)" class="btn btn-danger btn-sm" @click="removeMember(member.id)"
                :disabled="removingMember === member.id">
                <span v-if="removingMember === member.id" class="spinner-dots-sm"
                  role="status"><span /><span /><span /></span>
                Remove
              </button>
            </div>
          </div>
          <div v-else class="text-muted">
            No members found.
          </div>
        </div>
      </div>

      <!-- Placeholder for lists related to this group -->
      <div class="mt-4">
        <ListsPage :group-id="groupId" />
      </div>

      <!-- Invite Members Section -->
      <div class="card mt-3">
        <div class="card-header">
          <h3>Invite Members</h3>
        </div>
        <div class="card-body">
          <button class="btn btn-secondary" @click="generateInviteCode" :disabled="generatingInvite">
            <span v-if="generatingInvite" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
            Generate Invite Code
          </button>
          <div v-if="inviteCode" class="form-group mt-2">
            <label for="inviteCodeInput" class="form-label">Invite Code:</label>
            <div class="flex items-center">
              <input id="inviteCodeInput" type="text" :value="inviteCode" class="form-input flex-grow" readonly />
              <button class="btn btn-neutral btn-icon-only ml-1" @click="copyInviteCodeHandler"
                aria-label="Copy invite code">
                <svg class="icon">
                  <use xlink:href="#icon-clipboard"></use>
                </svg> <!-- Assuming #icon-clipboard is 'content_copy' -->
              </button>
            </div>
            <p v-if="copySuccess" class="form-success-text mt-1">Invite code copied to clipboard!</p>
          </div>
        </div>
      </div>

    </div>

    <div v-else class="alert alert-info" role="status">
      <div class="alert-content">Group not found or an error occurred.</div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
// import { useRoute } from 'vue-router';
import { apiClient, API_ENDPOINTS } from '@/config/api'; // Assuming path
import { useClipboard } from '@vueuse/core';
import ListsPage from './ListsPage.vue'; // Import ListsPage
import { useNotificationStore } from '@/stores/notifications';

interface Group {
  id: string | number;
  name: string;
  members?: GroupMember[];
}

interface GroupMember {
  id: number;
  email: string;
  role?: string;
}

const props = defineProps<{
  id: string;
}>();

// const route = useRoute();
// const $q = useQuasar(); // Not used anymore

const notificationStore = useNotificationStore();
const group = ref<Group | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
const inviteCode = ref<string | null>(null);
const generatingInvite = ref(false);
const copySuccess = ref(false);
const removingMember = ref<number | null>(null);

// groupId is directly from props.id now, which comes from the route path param
const groupId = computed(() => props.id);

const { copy, copied, isSupported: clipboardIsSupported } = useClipboard({
  source: computed(() => inviteCode.value || '')
});

const fetchGroupDetails = async () => {
  if (!groupId.value) return;
  loading.value = true;
  error.value = null;
  try {
    const response = await apiClient.get(API_ENDPOINTS.GROUPS.BY_ID(String(groupId.value)));
    group.value = response.data;
  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : 'Failed to fetch group details.';
    error.value = message;
    console.error('Error fetching group details:', err);
    notificationStore.addNotification({ message, type: 'error' });
  } finally {
    loading.value = false;
  }
};

const generateInviteCode = async () => {
  if (!groupId.value) return;
  generatingInvite.value = true;
  inviteCode.value = null;
  copySuccess.value = false;
  try {
    const response = await apiClient.post(API_ENDPOINTS.INVITES.BASE, {
      group_id: groupId.value, // Ensure this matches API expectation (string or number)
    });
    inviteCode.value = response.data.invite_code;
    notificationStore.addNotification({ message: 'Invite code generated successfully!', type: 'success' });
  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : 'Failed to generate invite code.';
    console.error('Error generating invite code:', err);
    notificationStore.addNotification({ message, type: 'error' });
  } finally {
    generatingInvite.value = false;
  }
};

const copyInviteCodeHandler = async () => {
  if (!clipboardIsSupported.value || !inviteCode.value) {
    notificationStore.addNotification({ message: 'Clipboard not supported or no code to copy.', type: 'warning' });
    return;
  }
  await copy(inviteCode.value);
  if (copied.value) {
    copySuccess.value = true;
    setTimeout(() => (copySuccess.value = false), 2000);
    // Optionally, notify success via store if preferred over inline message
    // notificationStore.addNotification({ message: 'Invite code copied!', type: 'info' });
  } else {
    notificationStore.addNotification({ message: 'Failed to copy invite code.', type: 'error' });
  }
};

const canRemoveMember = (member: GroupMember): boolean => {
  // Only allow removing members if the current user is the owner
  // and the member is not the owner themselves
  return group.value?.members?.some(m => m.role === 'owner' && m.id === member.id) === false;
};

const removeMember = async (memberId: number) => {
  if (!groupId.value) return;

  removingMember.value = memberId;
  try {
    await apiClient.delete(API_ENDPOINTS.GROUPS.MEMBER(String(groupId.value), String(memberId)));
    // Refresh group details to update the members list
    await fetchGroupDetails();
    notificationStore.addNotification({
      message: 'Member removed successfully',
      type: 'success'
    });
  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : 'Failed to remove member';
    console.error('Error removing member:', err);
    notificationStore.addNotification({ message, type: 'error' });
  } finally {
    removingMember.value = null;
  }
};

onMounted(() => {
  fetchGroupDetails();
});
</script>

<style scoped>
.page-padding {
  padding: 1rem;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

/* Adjusted from Valerie UI for tighter fit */

.form-success-text {
  color: var(--success);
  /* Or a darker green for text */
  font-size: 0.9rem;
  font-weight: bold;
}

.flex-grow {
  flex-grow: 1;
}

/* Members list styles */
.members-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.member-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--surface-2);
}

.member-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.member-name {
  font-weight: 500;
}

.member-role {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  background-color: var(--surface-3);
}

.member-role.owner {
  background-color: var(--primary);
  color: white;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.text-muted {
  color: var(--text-2);
  font-style: italic;
}
</style>