/**
 * PopupComponent
 * A specialized popup component for connection management
 */
Vue.component('popup-component', {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        connections: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            newConnection: {
                Name: "",
                ConnectionString: "",
                Platform: "SharePoint"
            }
        };
    },
    methods: {
        CloseModal() {
            this.$emit("CloseModal");
        },
        ConnectTo(connection) {
            this.$emit("ConnectTo", connection);
        },
        async SaveConnectionString() {
            try {
                await fetch("/api/ContentTree/UpdateConnectionString", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.newConnection)
                });
                this.$emit('connection-saved');
                this.newConnection = {
                    Name: "",
                    ConnectionString: "",
                    Platform: "SharePoint"
                };
                Helpers.showNotification('Connection saved successfully', 'success');
            } catch (error) {
                console.error('Error saving connection:', error);
                Helpers.showNotification('Error saving connection', 'error');
            }
        },
        async DeleteConnection(connection) {
            if (confirm("Are you sure you want to delete this connection?")) {
                try {
                    await fetch(`/api/ContentTree/DeleteConnectionString?id=${connection.id}`);
                    this.$emit('connection-deleted');
                    Helpers.showNotification('Connection deleted successfully', 'success');
                } catch (error) {
                    console.error('Error deleting connection:', error);
                    Helpers.showNotification('Error deleting connection', 'error');
                }
            }
        }
    },
    template: `
        <div class="modal fade" id="manage-connections" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Manage Connections</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="CloseModal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h4>Existing Connections ({{connections.length}}):</h4>
                        <table class="table table-striped table-hover table-bordered mb-3">
                            <thead class="table-dark">
                                <tr>
                                    <th scope="col">Id</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Platform</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(cs, csIdx) in connections">
                                    <td>{{cs.id}}</td>
                                    <td>{{cs.name}}</td>
                                    <td>{{cs.platform}}</td>
                                    <td>
                                        <span style="cursor:pointer" @click="ConnectTo(cs)">Connect</span> | 
                                        <span class="text-danger" style="cursor:pointer" @click="DeleteConnection(cs)">Delete</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <h4 class="mt-5 mb-2">Add New Connection:</h4>
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input v-model="newConnection.Name" type="text" class="form-control" id="name" required>
                        </div>
                        <div class="form-group">
                            <label for="connectionString">Connection String:</label>
                            <input v-model="newConnection.ConnectionString" type="password" class="form-control" id="connectionString" required autocomplete="off">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="SaveConnectionString">Save</button>
                        <button type="button" class="btn btn-secondary" @click="CloseModal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    `,
    watch: {
        visible: {
            immediate: true,
            handler(newVal) {
                try {
                    if (window.jQuery && window.jQuery.fn.modal) {
                        if (newVal) {
                            window.jQuery('#manage-connections').modal('show');
                        } else {
                            window.jQuery('#manage-connections').modal('hide');
                        }
                    } else {
                        console.error('jQuery or Bootstrap modal not available');
                    }
                } catch (e) {
                    console.error('Error toggling modal:', e);
                }
            }
        }
    }
}); 