@extends('user.layouts.app')

@section('content')

    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h4 class="mb-3 mb-md-0">Settings</h4>
        </div>
        <div class="d-flex align-items-center flex-wrap text-nowrap">

        </div>
    </div>

    <ul class="nav nav-tabs" id="settingsTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a href="{{ route('user.setting.workspace') }}" class="nav-link" id="workspace-tab">
                <i class="me-1 icon-md" data-feather="grid"></i>Workspace
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="teammates-tab" data-bs-toggle="tab" data-bs-target="#teammates"
                    type="button" role="tab" aria-controls="teammates" aria-selected="true">
                <i class="me-1 icon-md" data-feather="users"></i>Teammates
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="profile-tab" href="{{ route('user.setting.profile') }}">
                <i class="me-1 icon-md" data-feather="user"></i>Profile
            </a>
        </li>
    </ul>

    <div class="tab-content border border-top-0 p-3" id="settingsTabsContent">
        <div class="tab-pane fade show active" id="teammates" role="tabpanel" aria-labelledby="teammates-tab">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4>Active users</h4>
                    <p class="text-muted">Manage your active users and permissions.</p>
                </div>
                <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#inviteTeammateModal">Add new
                    user
                </button>
            </div>

            <div id="teammates-list">
                <!-- Teammates will be loaded via API -->
            </div>

            <h4 class="mt-4">Workspace Invitations (<span id="invitations-count">{{ $invitations->count() }}</span>)
            </h4>
            <div id="invitations-list" class="mt-2">
                <!-- Invitations will be loaded via API -->
            </div>
        </div>
    </div>

    <!-- Invite Teammate Modal -->
    <div class="modal fade" id="inviteTeammateModal" tabindex="-1" aria-labelledby="inviteTeammateModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="inviteTeammateModalLabel">{{ $workspace->name }} workspace sharing</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>This workspace has {{ $workspace->users()->count() }}
                        collaborator{{ $workspace->users()->count() == 1 ? '' : 's' }}. Adding a workspace collaborator
                        will give them access to ALL bases within this workspace.</p>
                    <form id="inviteTeammateForm">
                        @csrf
                        <div class="d-flex align-items-center mb-3">
                            <input type="email" name="email" class="form-control me-2"
                                   placeholder="musmangeee@gmail.com" required>
                            <select name="role" class="form-select me-2" style="width: 150px;">
                                <option value="member">Creator</option>
                                <option value="admin">Admin</option>
                            </select>
                            <button type="submit" class="btn btn-secondary">Send Invite</button>
                        </div>
                        <div class="text-danger error-message" id="invite-error"></div>
                    </form>
                    <h5>Workspace Invitations (<span id="modal-invitations-count">{{ $invitations->count() }}</span>)
                    </h5>
                    <div id="modal-invitations-list" class="mt-2">
                        <!-- Invitations will be loaded via API -->
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ asset('assets/vendors/moment/moment.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            loadTeammates();

            // Load teammates and invitations
            function loadTeammates() {
                $.ajax({
                    url: '{{ route("api.user.setting.teammates.index") }}',
                    method: 'GET',
                    headers: {
                        'Authorization': 'Bearer ' + getApiToken(),
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        // Render teammates
                        const teammatesList = $('#teammates-list');
                        teammatesList.empty();
                        response.teammates.forEach(teammate => {
                            const memberSince = moment(teammate.pivot.created_at).fromNow();
                            const isOwner = teammate.id === {{ $workspace->user_id }};
                            const teammateHtml = `
                            <div class="d-flex align-items-center mb-3 teammate-item" data-user-id="${teammate.id}">
                                <img src="{{ asset('assets/images/default-user.png') }}" alt="${teammate.name}" class="rounded-circle me-3" style="width: 40px; height: 40px;">
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">${teammate.name}</h6>
                                    <small class="text-muted">${teammate.email}</small>
                                </div>
                                <div class="text-muted me-3">
                                    <i class="link-icon me-1" data-feather="clock"></i>${memberSince}
                                </div>
                                <div class="me-3">
                                    <i class="link-icon me-1" data-feather="user"></i>
                                    <span class="role-label">${teammate.pivot.role.charAt(0).toUpperCase() + teammate.pivot.role.slice(1)}</span>
                                    ${isOwner ? '' : `
                                        <select class="role-select d-none form-select form-select-sm d-inline-block" style="width: auto;">
                                            <option value="owner" ${teammate.pivot.role === 'owner' ? 'selected' : ''}>Owner</option>
                                            <option value="admin" ${teammate.pivot.role === 'admin' ? 'selected' : ''}>Admin</option>
                                            <option value="member" ${teammate.pivot.role === 'member' ? 'selected' : ''}>Member</option>
                                        </select>
                                    `}
                                </div>
                                <div>
                                    ${isOwner ? '' : `
                                        <button class="btn btn-sm btn-outline-primary edit-role-btn me-1"><i class="link-icon" data-feather="edit"></i></button>
                                        <button class="btn btn-sm btn-outline-danger remove-teammate-btn"><i class="link-icon" data-feather="trash-2"></i></button>
                                    `}
                                </div>
                            </div>
                        `;
                            teammatesList.append(teammateHtml);
                        });

                        // Render invitations
                        renderInvitations(response.invitations);

                        feather.replace();
                    },
                    error: function (xhr) {
                        console.error('Error loading teammates:', xhr.responseJSON);
                    }
                });
            }

            // Render invitations
            function renderInvitations(invitations) {
                const invitationsList = $('#invitations-list');
                const modalInvitationsList = $('#modal-invitations-list');
                invitationsList.empty();
                modalInvitationsList.empty();
                const count = invitations.length;
                $('#invitations-count, #modal-invitations-count').text(count);

                if (count === 0) {
                    invitationsList.html('<p class="text-muted">No pending invitations.</p>');
                    modalInvitationsList.html('<p class="text-muted">No pending invitations.</p>');
                    return;
                }

                invitations.forEach(invitation => {
                    const invitedAt = moment(invitation.created_at).fromNow();
                    const invitationHtml = `
                    <div class="d-flex align-items-center mb-2">
                        <div class="flex-grow-1">
                            <p class="mb-0">${invitation.email}</p>
                            <small class="text-muted">Invited ${invitedAt} as ${invitation.role}</small>
                        </div>
                    </div>
                `;
                    invitationsList.append(invitationHtml);
                    modalInvitationsList.append(invitationHtml);
                });
            }

            // Handle invite form submission
            $('#inviteTeammateForm').on('submit', function (e) {
                e.preventDefault();

                $('#invite-error').text('');

                const formData = new FormData(this);
                $.ajax({
                    url: '{{ route("api.user.setting.teammates.invite") }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'Authorization': 'Bearer ' + getApiToken(),
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        $('#inviteTeammateModal').modal('hide');
                        $('#inviteTeammateForm')[0].reset();
                        loadTeammates();
                    },
                    error: function (xhr) {
                        $('#invite-error').text(xhr.responseJSON.message || 'An error occurred.');
                    }
                });
            });

            // Handle edit role button
            $(document).on('click', '.edit-role-btn', function () {
                const teammateItem = $(this).closest('.teammate-item');
                const roleLabel = teammateItem.find('.role-label');
                const roleSelect = teammateItem.find('.role-select');
                const editBtn = $(this);

                if (roleSelect.hasClass('d-none')) {
                    roleLabel.addClass('d-none');
                    roleSelect.removeClass('d-none');
                    editBtn.find('i').attr('data-feather', 'check');
                } else {
                    const newRole = roleSelect.val();
                    const userId = teammateItem.data('user-id');

                    $.ajax({
                        url: '{{ url("api/teammates") }}/' + userId + '/role',
                        method: 'POST',
                        data: {role: newRole},
                        headers: {
                            'Authorization': 'Bearer ' + getApiToken(),
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            roleLabel.text(newRole.charAt(0).toUpperCase() + newRole.slice(1));
                            roleLabel.removeClass('d-none');
                            roleSelect.addClass('d-none');
                            editBtn.find('i').attr('data-feather', 'edit');
                            feather.replace();
                        },
                        error: function (xhr) {
                            console.error('Error updating role:', xhr.responseJSON);
                        }
                    });
                }
            });

            // Handle remove teammate button
            $(document).on('click', '.remove-teammate-btn', function () {
                if (!confirm('Are you sure you want to remove this teammate?')) return;

                const teammateItem = $(this).closest('.teammate-item');
                const userId = teammateItem.data('user-id');

                $.ajax({
                    url: '{{ url("api/teammates") }}/' + userId,
                    method: 'DELETE',
                    headers: {
                        'Authorization': 'Bearer ' + getApiToken(),
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        teammateItem.remove();
                    },
                    error: function (xhr) {
                        console.error('Error removing teammate:', xhr.responseJSON);
                    }
                });
            });

            // Handle tab navigation
            $('#workspace-tab').on('click', function () {
                window.location.href = '{{ route("user.setting.workspace") }}';
            });

            // Placeholder function to get API token
            function getApiToken() {
                return window.authToken;
            }
        });
    </script>
@endsection