@extends('layouts.app')

@section('title', 'AI Image Generator')

@section('content')


<section class="imagegen-page">

    <div class="container-fluid px-lg-5">


        <!-- =================================================
             HEADER
        ================================================== -->

        <div class="imagegen-header">

            <div class="imagegen-badge">

                <i class="bi bi-stars"></i>

                AI IMAGE GENERATOR

            </div>


            <h1>

                Turn Your Ideas Into
                <span>Visuals.</span>

            </h1>


            <p>

                Describe what you imagine and let AI
                transform your words into stunning images.

            </p>

        </div>



        <!-- =================================================
             GENERATOR CARD
        ================================================== -->

        <div class="imagegen-card">

            <div class="imagegen-grid">


                <!-- =========================================
                     PROMPT PANEL
                ========================================== -->

                <div class="generator-panel">

                    <div class="panel-heading">

                        <div class="panel-title">

                            <i class="bi bi-pencil-square"></i>

                            Describe Your Image

                        </div>

                    </div>


                    <label
                        for="imagePrompt"
                        class="prompt-label"
                    >

                        Your Prompt

                    </label>


                    <div class="prompt-wrapper">

                        <textarea
                            id="imagePrompt"
                            class="prompt-input"
                            maxlength="2000"
                            placeholder="Describe the image you want to create...

Example:
A cinematic portrait of a young Indonesian woman standing in a tropical coffee plantation at golden hour, dramatic lighting, realistic photography..."
                        ></textarea>


                        <div
                            id="promptCounter"
                            class="prompt-counter"
                        >
                            0 / 2000
                        </div>

                    </div>



                    <!-- =====================================
                         QUICK IDEAS
                    ====================================== -->

                    <div class="quick-title">

                        Try an idea

                    </div>


                    <div class="quick-prompts">


                        <button
                            type="button"
                            class="quick-prompt"
                            data-prompt="A cinematic portrait of a mysterious traveler standing in a futuristic city at night, dramatic lighting, ultra realistic photography"
                        >

                            <i class="bi bi-camera-reels"></i>

                            Cinematic

                        </button>


                        <button
                            type="button"
                            class="quick-prompt"
                            data-prompt="A beautiful tropical coffee plantation at sunrise, golden light, misty mountains, cinematic photography, highly detailed"
                        >

                            <i class="bi bi-tree"></i>

                            Nature

                        </button>


                        <button
                            type="button"
                            class="quick-prompt"
                            data-prompt="A futuristic luxury product advertisement, premium studio lighting, black background, dramatic reflections, commercial photography"
                        >

                            <i class="bi bi-box-seam"></i>

                            Product

                        </button>


                        <button
                            type="button"
                            class="quick-prompt"
                            data-prompt="A magical fantasy landscape with ancient mountains, glowing flowers, waterfalls and a mysterious castle, epic cinematic atmosphere"
                        >

                            <i class="bi bi-stars"></i>

                            Fantasy

                        </button>


                    </div>



                    <!-- =====================================
                         OPTIONS
                    ====================================== -->

                    <div class="options-grid">


                        <!-- STYLE -->

                        <div class="option-group">

                            <label for="imageStyle">

                                <i class="bi bi-stars"></i>

                                STYLE

                            </label>


                            <select
                                id="imageStyle"
                                class="generator-select"
                            >

                                <option value="">
                                    Choose a style
                                </option>


                                @if(isset($styles))

                                    @foreach($styles as $style)

                                        <option
                                            value="{{ $style->id }}"
                                        >
                                            {{ $style->name }}
                                        </option>

                                    @endforeach

                                @endif

                            </select>

                        </div>



                        <!-- ASPECT RATIO -->

                        <div class="option-group">

                            <label for="aspectRatio">

                                <i class="bi bi-aspect-ratio"></i>

                                ASPECT RATIO

                            </label>


                            <select
                                id="aspectRatio"
                                class="generator-select"
                            >

                                <option value="1:1">
                                    Square · 1:1
                                </option>

                                <option value="16:9">
                                    Landscape · 16:9
                                </option>

                                <option value="9:16">
                                    Portrait · 9:16
                                </option>

                                <option value="4:3">
                                    Standard · 4:3
                                </option>

                            </select>

                        </div>


                    </div>



                    <!-- =====================================
                         GENERATE
                    ====================================== -->

                    <button
                        type="button"
                        id="generateButton"
                        class="generate-button"
                    >

                        <i class="bi bi-stars"></i>

                        Generate Image

                    </button>


                </div>



                <!-- =========================================
                     RESULT PANEL
                ========================================== -->

                <div class="generator-panel result-panel">

                    <div class="panel-heading">

                        <div class="panel-title">

                            <i class="bi bi-image"></i>

                            Your Result

                        </div>

                    </div>


                    <div class="result-box">


                        <!-- PLACEHOLDER -->

                        <div
                            id="resultPlaceholder"
                            class="result-placeholder"
                        >

                            <div class="result-icon">

                                <i class="bi bi-magic"></i>

                            </div>


                            <h3>

                                Your image will appear here

                            </h3>


                            <p>

                                Describe your idea below,
                                then click Generate Image
                                to create your visual.

                            </p>

                        </div>


                        <!-- GENERATED IMAGE -->

                        <img
                            id="generatedImage"
                            class="generated-image"
                            src=""
                            alt="Generated AI image"
                            style="display: none;"
                        >

                    </div>



                    <!-- RESULT INFO -->

                    <div class="result-info">


                        <div class="result-status">

                            <span class="status-dot"></span>

                            <span id="resultStatus">
                                Ready to create
                            </span>

                        </div>


                        <a
                            href="#"
                            id="downloadButton"
                            class="download-button"
                            download="creasy-ai-image.png"
                            style="display: none;"
                        >

                            <i class="bi bi-download"></i>

                            Download

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>



<script>

document.addEventListener('DOMContentLoaded', function () {


    /* =====================================================
       ELEMENTS
    ====================================================== */

    const promptInput =
        document.getElementById('imagePrompt');

    const promptCounter =
        document.getElementById('promptCounter');

    const quickPrompts =
        document.querySelectorAll('.quick-prompt');

    const generateButton =
        document.getElementById('generateButton');

    const generatedImage =
        document.getElementById('generatedImage');

    const resultPlaceholder =
        document.getElementById('resultPlaceholder');

    const downloadButton =
        document.getElementById('downloadButton');

    const resultStatus =
        document.getElementById('resultStatus');


    /* =====================================================
       PROMPT COUNTER
    ====================================================== */

    function updateCounter() {

        const length =
            promptInput.value.length;

        promptCounter.textContent =
            length + ' / 2000';

    }


    promptInput.addEventListener(
        'input',
        updateCounter
    );


    /* =====================================================
       QUICK PROMPTS
    ====================================================== */

    quickPrompts.forEach(function (button) {

        button.addEventListener(
            'click',
            function () {

                promptInput.value =
                    this.dataset.prompt;

                updateCounter();

                promptInput.focus();

            }
        );

    });


    /* =====================================================
       GENERATE
       
       TEMPORARY ONLY
       NANTI DIHUBUNGKAN KE API
    ====================================================== */

    generateButton.addEventListener(
    'click',
    async function () {

        const prompt = promptInput.value.trim();

        const style =
            document.getElementById('imageStyle').value;

        const aspectRatio =
            document.getElementById('aspectRatio').value;


        if (!prompt) {

            promptInput.focus();

            return;

        }


        // ==========================================
        // LOADING
        // ==========================================

        generateButton.disabled = true;

        generateButton.innerHTML =
            '<i class="bi bi-arrow-repeat"></i> Generating...';

        resultStatus.textContent =
            'Creating your image...';

        resultPlaceholder.style.display =
            'flex';

        generatedImage.style.display =
            'none';

        downloadButton.style.display =
            'none';


        try {

            // ======================================
            // REQUEST KE LARAVEL
            // ======================================

            const response = await fetch(
                "{{ url('/generate-image') }}",
                {

                    method: 'POST',

                    headers: {

                        'Content-Type':
                            'application/json',

                        'Accept':
                            'application/json',

                        'X-CSRF-TOKEN':
                            "{{ csrf_token() }}"

                    },

                    body: JSON.stringify({

                        prompt: prompt,

                        category: aspectRatio,

                        style: style

                    })

                }
            );


            const data =
                await response.json();


            // ======================================
            // CEK RESPONSE
            // ======================================

            if (!response.ok || data.status !== 'success') {

                throw new Error(
                    data.message ||
                    'Gagal membuat gambar.'
                );

            }


            // ======================================
            // URL GAMBAR
            // ======================================

            const imageUrl =
                data.data.download_url;


            generatedImage.src =
                imageUrl;


            generatedImage.onload =
                function () {

                    resultPlaceholder.style.display =
                        'none';

                    generatedImage.style.display =
                        'block';


                    resultStatus.textContent =
                        'Image generated successfully';


                    downloadButton.href =
                        imageUrl;

                    downloadButton.style.display =
                        'inline-flex';

                };


        } catch (error) {

            console.error(
                'Generate Image Error:',
                error
            );


            resultStatus.textContent =
                error.message ||
                'Failed to generate image.';


            resultPlaceholder.style.display =
                'flex';

            generatedImage.style.display =
                'none';


        } finally {

            // ======================================
            // RESET BUTTON
            // ======================================

            generateButton.disabled =
                false;

            generateButton.innerHTML =
                '<i class="bi bi-stars"></i> Generate Image';

        }

    }
);

});
</script>

@endsection