<template>
    <teleport to="body">
        <div class="modal fade show d-block admin-modal" tabindex="-1" role="dialog" aria-modal="true" @click.self="emit('close')">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Space</h5>
                        <button type="button" class="btn-close" aria-label="Close" @click="emit('close')"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row g-3 mb-4">
                            <div class="col-md-5">
                                <label class="form-label">Name</label>
                                <input v-model="form.name" type="text" class="form-control" />
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Description</label>
                                <input v-model="form.description" type="text" class="form-control" />
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Icon</label>
                                <input v-model="form.icon" type="text" class="form-control" maxlength="20" />
                            </div>
                            <div class="col-12 d-flex justify-content-between align-items-center">
                                <div class="form-check form-switch">
                                    <input id="admin-space-public" v-model="form.is_public" class="form-check-input" type="checkbox" />
                                    <label for="admin-space-public" class="form-check-label">Public space</label>
                                </div>
                                <button class="btn btn-primary" :disabled="savingSpace" @click="saveSpace">
                                    {{ savingSpace ? "Saving..." : "Save Space" }}
                                </button>
                            </div>
                        </div>

                        <hr />

                        <div class="d-flex justify-content-between align-items-center mt-3 mb-2">
                            <h6 class="mb-0">Members</h6>
                            <button class="btn btn-sm btn-outline-secondary" :disabled="loadingMembers" @click="loadMembers">Refresh</button>
                        </div>

                        <form class="row g-2 align-items-end mb-3" @submit.prevent="addMember">
                            <div class="col-md-10">
                                <label class="form-label form-label-sm mb-1">Username</label>
                                <select v-model="newMember.user_id" class="form-select form-select-sm" required>
                                    <option disabled value="">Select user</option>
                                    <option v-for="u in selectableUsers" :key="u.id" :value="u.id">{{ u.username }}</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary btn-sm w-100" :disabled="addingMember">
                                    {{ addingMember ? "..." : "Add" }}
                                </button>
                            </div>
                        </form>

                        <div v-if="loadingMembers" class="text-muted small">Loading members...</div>
                        <div v-else-if="members.length === 0" class="text-muted small">No members found.</div>

                        <div v-else class="table-responsive">
                            <table class="table table-sm align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Username</th>
                                        <th>Joined</th>
                                        <th class="text-end">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="m in members" :key="m.user_id">
                                        <td>{{ m.username || m.user_id }}</td>
                                        <td class="small text-muted">{{ formatDate(m.joined_at) }}</td>
                                        <td class="text-end">
                                            <button class="btn btn-sm btn-outline-danger" :disabled="removingMemberId === m.user_id" @click="removeMember(m)">
                                                {{ removingMemberId === m.user_id ? "Removing..." : "Remove" }}
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div v-if="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
                        <div v-if="success" class="alert alert-success mt-3 mb-0">{{ success }}</div>

                        <hr />
                        <div class="border border-danger rounded p-3 mt-3">
                            <h6 class="text-danger mb-1">Danger Zone</h6>
                            <p class="text-muted small mb-3">Permanently delete this space and all its notes, categories, and members. This cannot be undone.</p>
                            <button class="btn btn-danger btn-sm" :disabled="deleting" @click="deleteSpace">
                                {{ deleting ? "Deleting..." : "Delete Space" }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show admin-modal-backdrop"></div>
    </teleport>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import apiClient from "../services/apiClient";

const props = defineProps({
    space: {
        type: Object,
        required: true,
    },
    users: {
        type: Array,
        default: () => [],
    },
});

const emit = defineEmits(["close", "saved", "deleted"]);

const form = ref({
    name: "",
    description: "",
    icon: "",
    is_public: false,
});

const members = ref([]);
const loadingMembers = ref(false);
const savingSpace = ref(false);
const addingMember = ref(false);
const removingMemberId = ref("");
const error = ref("");
const success = ref("");
const newMember = ref({ user_id: "" });
const deleting = ref(false);

const formatDate = (iso) => (iso ? new Date(iso).toLocaleDateString() : "-");

const clearMessages = () => {
    error.value = "";
    success.value = "";
};

const resetFormFromSpace = () => {
    form.value = {
        name: props.space?.name || "",
        description: props.space?.description || "",
        icon: props.space?.icon || "",
        is_public: !!props.space?.is_public,
    };
};

const selectableUsers = computed(() => {
    const memberIds = new Set(members.value.map((m) => m.user_id));
    return (props.users || []).filter((u) => !memberIds.has(u.id));
});

const loadMembers = async () => {
    loadingMembers.value = true;
    clearMessages();
    try {
        const response = await apiClient.get(`/api/v1/admin/spaces/${props.space.id}/members`);
        members.value = response.data.members || [];
    } catch (e) {
        error.value = e.response?.data || "Failed to load members.";
    } finally {
        loadingMembers.value = false;
    }
};

const saveSpace = async () => {
    savingSpace.value = true;
    clearMessages();
    try {
        const response = await apiClient.put(`/api/v1/admin/spaces/${props.space.id}`, {
            name: form.value.name,
            description: form.value.description,
            icon: form.value.icon,
            is_public: form.value.is_public,
        });
        success.value = "Space updated.";
        emit("saved", response.data);
    } catch (e) {
        error.value = e.response?.data || "Failed to update space.";
    } finally {
        savingSpace.value = false;
    }
};

const addMember = async () => {
    if (!newMember.value.user_id) {
        return;
    }

    addingMember.value = true;
    clearMessages();
    try {
        await apiClient.post(`/api/v1/admin/spaces/${props.space.id}/members`, {
            user_id: newMember.value.user_id,
        });
        success.value = "Member added.";
        newMember.value = { user_id: "" };
        await loadMembers();
    } catch (e) {
        error.value = e.response?.data || "Failed to add member.";
    } finally {
        addingMember.value = false;
    }
};

const removeMember = async (member) => {
    const memberName = member?.username || member?.user_id;
    if (!member?.user_id || !confirm(`Remove member "${memberName}" from this space?`)) {
        return;
    }

    removingMemberId.value = member.user_id;
    clearMessages();
    try {
        await apiClient.delete(`/api/v1/admin/spaces/${props.space.id}/members/${member.user_id}`);
        success.value = "Member removed.";
        await loadMembers();
    } catch (e) {
        error.value = e.response?.data || "Failed to remove member.";
    } finally {
        removingMemberId.value = "";
    }
};

watch(
    () => props.space,
    async () => {
        resetFormFromSpace();
        await loadMembers();
    },
    { immediate: true },
);

const deleteSpace = async () => {
    if (!confirm(`Permanently delete space "${props.space.name}"? All notes, categories, and members will be removed. This cannot be undone.`)) {
        return;
    }
    deleting.value = true;
    clearMessages();
    try {
        await apiClient.delete(`/api/v1/admin/spaces/${props.space.id}`);
        emit("deleted", props.space);
    } catch (e) {
        error.value = e.response?.data || "Failed to delete space.";
    } finally {
        deleting.value = false;
    }
};
</script>

<style scoped>
.admin-modal {
    z-index: 2000;
    overflow-y: auto;
    padding-top: max(0.5rem, env(safe-area-inset-top));
}

.admin-modal-backdrop {
    z-index: 1990;
}

.admin-modal .modal-dialog {
    margin: 1rem auto;
}

@media (max-width: 767.98px) {
    .admin-modal {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .admin-modal .modal-dialog {
        margin: 0.75rem;
        max-width: none;
    }
}
</style>
