<script setup>
import { ref, computed } from 'vue';
import { useAuth } from '../composables/Core/useAuth.js';
import CooperativeDetail from '@/Pages/CooperativeDetail.vue';
import DocumentRepository from '@/Pages/Fragments/DocumentRepository.vue';
import GovernanceResolutions from '@/Pages/Fragments/GovernanceResolutions.vue';

const { user } = useAuth();

const activeOrgHash = computed(() => {
    const coops = user.value?.settings?.cooperatives;
    if (Array.isArray(coops) && coops.length > 0) return coops[0];
    return null;
});

const hubTab = ref('overview');
</script>

<template>
    <div class="cooperative-hub-page pb-5">
        <div class="tf-container mt-3">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="fw_7 mb-0 d-flex align-items-center gap-2">
                    <i class="fas fa-landmark text-primary opacity-50"></i>
                    Cooperative Hub
                </h5>
                <div class="d-flex gap-1 bg-soft-primary p-1 rounded-pill">
                    <button
                        @click="hubTab = 'overview'"
                        :class="['btn btn-xs rounded-pill px-3', hubTab === 'overview' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
                    >Overview</button>
                    <button
                        @click="hubTab = 'docs'"
                        :class="['btn btn-xs rounded-pill px-3', hubTab === 'docs' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
                    >Docs</button>
                    <button
                        @click="hubTab = 'votes'"
                        :class="['btn btn-xs rounded-pill px-3', hubTab === 'votes' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
                    >Resolutions</button>
                </div>
            </div>

            <div v-if="!activeOrgHash" class="alert alert-warning small">
                No active cooperative is configured for your account.
            </div>

            <div v-else class="card border-0 shadow-sm rounded-20 bg-white overflow-hidden p-0">
                <div v-if="hubTab === 'overview'">
                    <CooperativeDetail :target="activeOrgHash" />
                </div>
                <div v-else-if="hubTab === 'docs'" class="p-3">
                    <DocumentRepository :org-hash="activeOrgHash" />
                </div>
                <div v-else-if="hubTab === 'votes'" class="p-3">
                    <GovernanceResolutions :org-hash="activeOrgHash" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 50rem;
}
.bg-soft-primary {
    background-color: rgba(var(--primary-rgb), 0.1);
}
</style>
