<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{config('app.name')}}</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous" referrerpolicy="no-referrer">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"
        crossorigin="anonymous" referrerpolicy="no-referrer">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        .page-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .main-content {
            flex-grow: 1;
        }

        .footer {
            flex-shrink: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: #f8f9fa;
        }

        .select2-container .select2-selection--single {
            height: calc(1.5em + .75rem + 2px);
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: calc(1.5em + .75rem);
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: calc(1.5em + .75rem + 2px);
        }

        .input-group-text {
            border-right: 0;
        }

        .select2-container {
            border-left: 0;
        }

        .btn-save {
            display: none;
        }

        #modalIframe {
            width: 100%;
            height: auto;
            border: 1px solid #ced4da;
            border-radius: .2rem;
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        #modalIframe:focus {
            color: #495057;
            background-color: #fff;
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
        }
    </style>
</head>

<body>
    <div class="page-container">
        <div class="main-content">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="/">{{config('app.name')}}</a>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="/">首页 <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{route('custom')}}">自定义域名</a>
                        </li>
                    </ul>

                    <ul class="navbar-nav ml-auto">
                        <!-- If the user is authenticated -->
                        @auth
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="/home">
                                    {{ __('Dashboard') }}
                                </a>
                                <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
                                             document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                    style="display: none;">
                                    @csrf
                                </form>
                            </div>
                        </li>
                        @else
                        <!-- If the user is not authenticated -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        @if (Route::has('register'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                        @endif
                        @endauth
                    </ul>
                </div>

            </nav>

            <div class="container mt-3">
                <div class="row">

                    <div class="col-5">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="prefixInput" value="{{$rand_prefix}}"
                                placeholder="Enter text">
                            <div class="input-group-append">
                                <span class="input-group-text">@</span>
                            </div>
                            <select class="form-control select2" id="domainList" style="width: auto;">
                                @foreach($domain_list as $domain)
                                <option value="{{$domain}}">{{$domain}}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">

                            <button id="saveBtn" class="btn btn-primary btn-save" style="margin-right: 5px;"
                                type="button">修改邮箱</button>
                            <button id="genBtn" class="btn btn-success" style="margin-right: 5px;"
                                type="button">更换邮箱</button>

                            <input type="hidden" value="" id="mailToCopy">
                            <button id="copyBtn" class="btn btn-info copy-btn" data-clipboard-target="#mailToCopy"
                                type="button">复制邮箱</button>

                        </div>
                    </div>
                    <div class="col-4">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control alert alert-primary" id="auto-reload"
                                value="距离下次刷新还有5秒" disabled readonly>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>发件人</th>
                                        <th>标题</th>
                                        <th>接收时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="mail-list">
                                    <tr id="default-note">
                                        <td colspan="4">
                                            <div class="alert alert-primary" role="alert">
                                                还没收到邮件哦
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- 更多行 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">

                <span class="text-muted">© 2023-{{date('Y')}} 临时邮箱. All rights reserved.</span>
                <a href="https://996.icu"><img src="https://img.shields.io/badge/link-996.icu-red.svg"
                        alt="996.icu" /></a>
                <a href="https://github.com/996icu/996.ICU/blob/master/LICENSE"><img
                        src="https://img.shields.io/badge/license-Anti%20996-blue.svg" alt="996 license" /></a>
                <a href="https://github.com/support-ukraine/support-ukraine">
                    <img src="https://bit.ly/support-ukraine-now" alt="Support Ukraine Badge" />
                </a>
            </div>
        </footer>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- iframe 用于展示 API 返回的内容 -->
                    <iframe id="modalIframe"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>


    <script>
        let block_prefix = JSON.parse('{!!json_encode($block_prefix)!!}');
        let email = "";
        let key = "{{$key}}";
        let isRequestPending = false;
        let countdown = 5;
        let savedPrefix = localStorage.getItem('prefix');
        let savedDomain = localStorage.getItem('domain');


        let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');


        function isValidDomain(domain) {
            var pattern = /^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+\.[a-z]{2,11}$/;
            return pattern.test(domain);
        }

        function dateFmt(dateString) {
            let date = new Date(dateString);

            let year = date.getFullYear();
            let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
            let day = String(date.getDate()).padStart(2, '0');
            let hours = String(date.getHours()).padStart(2, '0');
            let minutes = String(date.getMinutes()).padStart(2, '0');
            let seconds = String(date.getSeconds()).padStart(2, '0');

            let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return formattedDate;
        }


        function fetchMail() {
            if (!isRequestPending) {
                isRequestPending = true;
                $.ajax({
                    url: '/mail',  // 替换为你的后端接口
                    type: 'POST',
                    data: {
                        email: email,
                        key: key
                    },
                    success: function (response) {

                        if (response.data.duplicate == true) {
                            toastr.warning('此邮箱已被设置为私人邮箱,无法使用,已为您生成新的邮箱地址.');
                            let randomStr = generateRandomString(8);
                            $('#prefixInput').val(randomStr);
                            $('#saveBtn').click();
                        }

                        key = response.data.new_key;
                        if (response.data.list.length > 0) {
                            $('#default-note').hide();
                        }
                        $.each(response.data.list, function (k, v) {
                            if ($('#mail-list tr[data-hash="' + v.hash + '"]').length <= 0) {
                                let temp_html = '<tr data-hash="' + v.hash + '"><td>' + v.from + '</td><td>' + v.title + '</td><td>' + dateFmt(v.received_at) + '</td><td><button class="btn btn-primary info-btn btn-sm" data-key="' + v.key + '" type="button">查看</button></td></tr>';
                                $('#mail-list').parent().append(temp_html);
                            }

                        })
                        // 在这里处理你的响应数据
                    },
                    error: function (xhr, status, error) {
                        if (xhr.status == 419) {
                            window.location.reload();
                        }
                        console.error('请求失败:', error);
                        toastr.error(error, '请求失败');
                    },
                    complete: function () {
                        isRequestPending = false;
                    }
                });
            }
        }

        function generateRandomString(length) {
            var result = '';
            var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
            var charactersLength = characters.length;
            for (var i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * charactersLength));
            }
            return result;
        }

        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            $('[data-toggle="tooltip"]').tooltip();


            if (savedPrefix) {
                $('#prefixInput').val(savedPrefix);
            }

            if (savedDomain) {
                if ($('#domainList option[value="' + savedDomain + '"]').length <= 0) {
                    $('#domainList').append('<option value="' + savedDomain + '">' + savedDomain + '</option>');
                }
                $('#domainList').val(savedDomain);

            } else {
                $('#domainList').val('{{$domain_list[0]}}');
            }




            $('.select2').select2({
                tags: true
            });

            var clipboard = new ClipboardJS('.copy-btn');
            clipboard.on('success', function (e) {
                // console.info('Action:', e.action);
                // console.info('Text:', e.text);
                // console.info('Trigger:', e.trigger);
                toastr.success('复制成功');
                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                toastr.error('复制失败');
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });

            $('#domainList').on('change keyup', function () {
                let domain = $('#domainList').val();
                if (!isValidDomain(domain)) {
                    $('#domainList').addClass('is-invalid');
                    $('#domainInvalidFeedback').remove();
                    $('#domainList').parent().append('<div id="domainInvalidFeedback" class="invalid-feedback">请输入一个合法的域名</div>');
                    $('#saveBtn').hide();

                    return false;
                } else {
                    $('#domainList').removeClass('is-invalid');
                    $('#domainInvalidFeedback').remove();
                }
                $('#saveBtn').show();

            });

            $('#prefixInput').on('change keyup', function () {
                this.value = this.value.toLowerCase().replace(/[^a-z0-9]/g, '');
                let textLength = $('#prefixInput').val().length;
                if (textLength < 5 || textLength > 32) {
                    $('#prefixInput').addClass('is-invalid');
                    $('#perfixInvalidFeedback').remove();
                    $('#prefixInput').parent().append('<div id="perfixInvalidFeedback" class="invalid-feedback">长度必须在5到32位之间</div>');
                    $('#saveBtn').hide();

                    return false;
                } else if (block_prefix.includes($('#prefixInput').val())) {
                    $('#prefixInput').addClass('is-invalid');
                    $('#perfixInvalidFeedback').remove();
                    $('#prefixInput').parent().append('<div id="perfixInvalidFeedback" class="invalid-feedback">该前缀不被允许</div>');
                    $('#saveBtn').hide();
                    return false;

                }
                else {
                    $('#prefixInput').removeClass('is-invalid');
                    $('#perfixInvalidFeedback').remove();
                }
                $('#saveBtn').show();



            });


            $('#saveBtn').click(function () {
                email = $('#prefixInput').val() + "@" + $('#domainList').val();
                $('#mailToCopy').val(email);
                console.log("邮箱:" + email);
                localStorage.setItem('prefix', $('#prefixInput').val());
                localStorage.setItem('domain', $('#domainList').val());

                $(this).hide();
            });

            $('#saveBtn').click();


            $('#genBtn').click(function () {
                let randomStr = generateRandomString(8);
                $('#prefixInput').val(randomStr);
                $('#saveBtn').click();
            });

            fetchMail();
            var countdownTimer = setInterval(function () {
                if (isRequestPending) {
                    $('#auto-reload').val('刷新中...');
                    return;
                }
                countdown--;
                $('#auto-reload').val('距离下次刷新还有' + countdown + '秒');
                if (countdown <= 0) {
                    fetchMail();
                    $('#auto-reload').val('刷新中...');
                    countdown = 6;  // 重置为 11，因为下一次循环会立即减 1

                }
            }, 1000);


            setInterval(function () {
                $.get('/refresh-csrf', function (data) {
                    csrfToken = data.csrfToken
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': data.csrfToken
                        }
                    });
                });
            }, 1000 * 60);

            $('#myModal').on('shown.bs.modal', function () {
                let iframeHeight = $('#modalIframe').contents().find("html").height();
                if (iframeHeight <= 600) {
                    $('#modalIframe').css('height', 600);
                } else if (iframeHeight >= 800) {
                    $('#modalIframe').css('height', 800);
                } else {
                    $('#modalIframe').css('height', iframeHeight);
                }
            });

            $(document).on('click', '.info-btn', function () {
                let key = $(this).data('key');
                let apiUrl = '/mail/' + key;

                // 发送 AJAX 请求获取 API 数据
                $.ajax({
                    url: apiUrl,
                    method: 'POST',
                    success: function (response) {
                        try {
                            // 解码 base64
                            let decodedContent = atob(response.data.body);
                            let uint8Array = new Uint8Array(decodedContent.split("").map(char => char.charCodeAt(0)));
                            let text = new TextDecoder('utf-8').decode(uint8Array);
                            $('#modalIframe').attr('srcdoc', text);

                            let decodedTitle = atob(response.data.title);
                            uint8Array = new Uint8Array(decodedTitle.split("").map(char => char.charCodeAt(0)));
                            text = new TextDecoder('utf-8').decode(uint8Array);

                            $('#exampleModalLabel').text(text);
                            // 显示模态框
                            $('#myModal').modal('show');


                        } catch (e) {
                            toastr.error("服务端返回了预料之外的数据.", "数据获取失败");
                            console.error('Error parsing API response or decoding base64:', e);
                        }
                    },
                    error: function (error) {
                        toastr.error("服务端请求异常.", "数据获取失败");
                        console.error('Error fetching API data:', error);
                    }
                });
            });

        });
    </script>
</body>

</html>