@props(['placeholder' => ''])
<div class="custom--card card">
    <div class="seo-content-wrapper">
        <div class="seo-content-wrapper__left">
            <h5 class="mb-3">{{ __($writingAssistant->name) }}</h5>
            <form id="generateArticle" class="article-box">
                <div class="row gy-3">
                    <div class="col-12">
                        <label class="form--label">@lang('Enter prompt')</label>
                        <textarea class="form--control" name="prompt" rows="10" placeholder="@lang($placeholder)" required></textarea>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn--base rounded-3 w-100 generateBtn">@lang('Submit')</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="seo-content-wrapper__right">
            <div class="seo-content-view">
                <div class="blank__content" id="formView">
                    <div class="placeholder-glow">
                        <svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="128" height="128" color="hsl(var(--white))" fill="none">
                            <path d="M11 21H10C6.22876 21 4.34315 21 3.17157 19.8284C2 18.6569 2 16.7712 2 13V10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.22876 2 10 2H12C15.7712 2 17.6569 2 18.8284 3.17157C20 4.34315 20 6.22876 20 10V10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M17.4069 14.4036C17.6192 13.8655 18.3808 13.8655 18.5931 14.4036L18.6298 14.4969C19.1482 15.8113 20.1887 16.8518 21.5031 17.3702L21.5964 17.4069C22.1345 17.6192 22.1345 18.3808 21.5964 18.5931L21.5031 18.6298C20.1887 19.1482 19.1482 20.1887 18.6298 21.5031L18.5931 21.5964C18.3808 22.1345 17.6192 22.1345 17.4069 21.5964L17.3702 21.5031C16.8518 20.1887 15.8113 19.1482 14.4969 18.6298L14.4036 18.5931C13.8655 18.3808 13.8655 17.6192 14.4036 17.4069L14.4969 17.3702C15.8113 16.8518 16.8518 15.8113 17.3702 14.4969L17.4069 14.4036Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M7 7H15M7 11.5H15M7 16H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <h6>@lang('Smart content, Real results, 100% AI-powered')</h6>
                    </div>
                </div>
                <div class="gallary-details-card-loader d-none" id="loaderView">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="sparkle">
                        <defs>
                            <linearGradient id="starGradient" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(266)">
                                <stop offset="-11.87%" stop-color="hsl(var(--base-two))" />
                                <stop offset="114.26%" stop-color="hsl(var(--base))" />
                            </linearGradient>
                        </defs>
                        <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="currentColor"
                              d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z">
                        </path>
                        <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="currentColor"
                              d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z">
                        </path>
                        <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="currentColor"
                              d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z">
                        </path>
                    </svg>
                    <p class="gallary-details-card-loader__text">@lang('Processing Your content generation...')</p>
                </div>
                <div class="h-100 d-none" id="dataShow"></div>
            </div>
            <div class="seo-content-view__footer flex-align justify-content-between d-none" id="actionArea">
                <div class="d-flex gap-3">
                    <button class="btn btn--base btn--sm rounded-2" id="copyBtn"><i class="fa-regular fa-copy"></i> @lang('Copy')</button>
                </div>
                <div class="d-flex gap-3">
                    <a href="" class="btn btn--sm btn--gray" id="downloadLink"><i class="fa-solid fa-download"></i></a>
                    <button type="button" class="btn btn--sm btn--gray" id="refreshBtn"><i class="fa-solid fa-rotate-right"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('style')
    <style>
        .h-100 {
            overflow-y: auto;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";


            let formView = $("#formView");
            let loaderView = $("#loaderView");
            let dataShow = $("#dataShow");
            let actionArea = $("#actionArea");

            $("#generateArticle").on('submit', function(e) {
                e.preventDefault();
                let form = $(this);

                let prompt = $('[name=prompt]').val();
                let assistant = "{{ $writingAssistant->slug }}";

                let data = {
                    _token: "{{ csrf_token() }}",
                    prompt: prompt
                }
                resetForm();
                $.ajax({
                    type: "POST",
                    url: `{{ route('user.writing.assistant.generate', '') }}/${assistant}`,
                    data: data,
                    beforeSend: function() {
                        $(form).find('.generateBtn').addClass('processing').prop('disabled', true);
                        formView.addClass('d-none');
                        loaderView.removeClass('d-none');
                    },
                    success: function(response) {
                        loaderView.addClass('d-none');
                        $(form).find('.generateBtn').removeClass('processing').prop('disabled', false);
                        if (response.status == 'error') {
                            resetForm();
                            notify('error', response.message.error);
                            return;
                        }
                        dataShow.removeClass('d-none');
                        actionArea.removeClass('d-none');
                        $("#downloadLink").attr('href', response.data.route)
                        typeText('dataShow', response.data.content, 15);
                    },
                    error: function(xhr) {
                        $(form).find('.generateBtn').removeClass('processing').prop('disabled', false);
                        resetForm();
                        notify('error', 'Invalid error from API');
                    }
                });
            });

            function resetForm() {
                if (!dataShow.hasClass('d-none')) {
                    dataShow.addClass('d-none');
                }
                if (!actionArea.hasClass('d-none')) {
                    actionArea.addClass('d-none');
                }

                if (formView.hasClass('d-none')) {
                    formView.removeClass('d-none');
                }
            }

            function typeText(elementId, text, speed = 50) {
                const el = document.getElementById(elementId);
                el.innerHTML = "";
                let i = 0;

                function typing() {
                    if (i < text.length) {
                        const char = text.charAt(i);
                        if (char === "\n") {
                            el.innerHTML += "<br>";
                        } else {
                            el.innerHTML += char;
                        }
                        i++;

                        // 👇 Auto-scroll to the bottom while typing
                        el.scrollTop = el.scrollHeight;

                        setTimeout(typing, speed);
                    }
                }
                typing();
            }

            $(document).on('click', '#copyBtn', async function(en) {
                en.preventDefault();

                try {
                    let copyContent = dataShow;
                    let textToCopy = copyContent.html()
                        .replace(/<br\s*\/?>/gi, '\n')
                        .replace(/&nbsp;/g, ' ')
                        .replace(/<\/p>/gi, '\n\n')
                        .replace(/<[^>]+>/g, '');

                    textToCopy = textToCopy.trim();

                    if (!textToCopy) {
                        notify('error', 'Nothing to copy!');
                        return;
                    }

                    await navigator.clipboard.writeText(textToCopy);
                    notify('success', 'Copied to clipboard!');

                } catch (err) {
                    console.error('Copy failed: ', err);
                    notify('error', 'Failed to copy. Please copy manually.');
                }
            });

            $(document).on('click', '#refreshBtn', function(e) {
                e.preventDefault();
                $('[name=prompt]').val('')
                resetForm();
            });

        })(jQuery)
    </script>
@endpush