<template>
  <div class="overflow-y-auto">
    <div class="mx-auto flex max-w-3xl flex-col gap-4 px-4 py-6">
      <header class="flex flex-wrap items-center gap-3">
        <RouterLink :to="{ name: 'groups' }" class="text-sm text-zinc-400 hover:text-zinc-200">← {{ t('groups.title') }}</RouterLink>
        <h1 v-if="group" class="flex items-center gap-2 text-lg font-semibold text-zinc-100">
          <span class="h-3 w-3 rounded-full" :style="{ backgroundColor: group.color ?? '#52525b' }" />
          {{ group.label }}
        </h1>
        <div class="ml-auto flex flex-wrap items-center gap-2">
          <button v-if="group" class="btn text-xs" :class="editingRepos ? 'border-sky-700 text-sky-300' : ''" @click="editingRepos = !editingRepos">
            {{ editingRepos ? t('groups.editDone') : t('groups.edit') }}
          </button>
          <button class="btn text-xs" :disabled="groupRepos.length === 0" @click="showFeatureModal = true">{{ t('groups.newFeature') }}</button>
          <div class="flex overflow-hidden rounded border border-zinc-800">
            <button class="px-2 py-1 text-xs" :class="view === 'list' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400'" @click="view = 'list'">
              {{ t('groups.viewList') }}
            </button>
            <button class="px-2 py-1 text-xs" :class="view === 'grid' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400'" @click="view = 'grid'">
              {{ t('groups.viewGrid') }}
            </button>
          </div>
          <button class="btn text-xs" :disabled="worktrees.loading" @click="refresh">{{ t('sessions.refresh') }}</button>
          <LanguageSwitcher />
        </div>
      </header>

      <p v-if="!group" class="text-sm text-zinc-500">{{ t('common.loading') }}</p>

      <template v-else>
        <!-- édition de la composition : ajouter/retirer des repos déjà enregistrés -->
        <div v-if="editingRepos" class="flex flex-col gap-1 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 text-xs text-zinc-400">
          {{ t('groups.reposLabel') }}
          <p v-if="worktrees.repos.length === 0" class="text-zinc-600">{{ t('groups.noReposRegistered') }}</p>
          <div v-else class="flex flex-wrap gap-2">
            <label
              v-for="repo in worktrees.repos"
              :key="repo.id"
              class="flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-950/40 px-2 py-1"
            >
              <input type="checkbox" :checked="group.repoIds.includes(repo.id)" @change="toggleRepo(repo.id)" />
              <span class="text-zinc-300">{{ repo.label }}</span>
            </label>
          </div>
        </div>

        <!-- mode liste : réutilise RepoSection (worktrees + sessions + dialogues inline) -->
        <template v-if="view === 'list'">
          <p v-if="groupRepos.length === 0 && missingRepoIds.length === 0" class="text-sm text-zinc-500">{{ t('groups.noReposInGroup') }}</p>
          <RepoSection v-for="repo in groupRepos" :key="repo.id" :repo="repo" />
          <div
            v-for="id in missingRepoIds"
            :key="id"
            class="flex items-center gap-2 rounded-lg border border-amber-900/50 bg-amber-950/20 p-3 text-sm text-amber-300"
          >
            <span class="flex-1">{{ t('groups.missingRepo') }} <span class="font-mono text-xs text-amber-500/70">{{ id }}</span></span>
            <button class="btn text-xs" @click="removeRepo(id)">{{ t('groups.removeFromGroup') }}</button>
          </div>
        </template>

        <!-- mode grille : terminaux côte à côte -->
        <TerminalGrid v-else :sessions="activeGroupSessions" />
      </template>
    </div>

    <CrossRepoFeatureModal
      v-if="showFeatureModal && group"
      :repos="groupRepos"
      @close="showFeatureModal = false"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import type { SessionSummary } from '@arboretum/shared';
import { useGroupsStore } from '../stores/groups';
import { useWorktreesStore } from '../stores/worktrees';
import { useSessionsStore } from '../stores/sessions';
import LanguageSwitcher from '../components/LanguageSwitcher.vue';
import RepoSection from '../components/RepoSection.vue';
import TerminalGrid from '../components/TerminalGrid.vue';
import CrossRepoFeatureModal from '../components/CrossRepoFeatureModal.vue';

const { t } = useI18n();
const route = useRoute();
const groups = useGroupsStore();
const worktrees = useWorktreesStore();
const sessions = useSessionsStore();

const groupId = computed(() => String(route.params.id));
const group = computed(() => groups.byId(groupId.value));
const view = ref<'list' | 'grid'>('list');
const editingRepos = ref(false);
const showFeatureModal = ref(false);

const groupRepos = computed(() => groups.reposInGroup(groupId.value));

// repoIds du groupe absents du store worktrees (repo supprimé mais membership pas encore purgée côté UI).
const missingRepoIds = computed(() => {
  const g = group.value;
  if (!g) return [];
  const known = new Set(worktrees.repos.map((r) => r.id));
  return g.repoIds.filter((id) => !known.has(id));
});

// sessions vivantes et attachables des repos du groupe, en version live (store sessions).
const activeGroupSessions = computed<SessionSummary[]>(() => {
  const byId = new Map<string, SessionSummary>();
  for (const snap of groups.sessionsInGroup(groupId.value)) {
    const live = sessions.sessions.find((x) => x.id === snap.id) ?? snap;
    if (live.live && live.attachable) byId.set(live.id, live);
  }
  return [...byId.values()];
});

onMounted(() => {
  void groups.fetchGroups();
  void worktrees.fetchAll();
  void sessions.fetchSessions();
  groups.startRealtime();
  worktrees.startRealtime();
  sessions.startRealtime();
});

onUnmounted(() => {
  groups.stopRealtime();
  worktrees.stopRealtime();
  sessions.stopRealtime();
});

async function refresh(): Promise<void> {
  await Promise.all([groups.fetchGroups(), worktrees.fetchAll(), sessions.fetchSessions()]);
}

async function toggleRepo(repoId: string): Promise<void> {
  const g = group.value;
  if (!g) return;
  if (g.repoIds.includes(repoId)) await groups.removeRepoFromGroup(g.id, repoId);
  else await groups.addRepoToGroup(g.id, repoId);
}

async function removeRepo(repoId: string): Promise<void> {
  const g = group.value;
  if (g) await groups.removeRepoFromGroup(g.id, repoId);
}
</script>
