<?php

use App\Models\Participant;
use App\Services\PostService;
use Illuminate\Support\Facades\Log;
use function Livewire\Volt\{state, mount, rules};

state(['token']);

state([
    'participant' => null,
    'userData' => null,
    'receiverPrompt' => null,
    'receiverUserData' => null,
    'prompt' => '',
    'submissionUrl' => '',
    'isEditingPrompt' => false,
    'isEditingSubmission' => false,
    'submissionData' => null
]);
#todo - check if the post is by them, if not - reject it
rules([
    'prompt' => 'string|min:3',
    'submissionUrl' => [
        'regex:/^https:\/\/sketchersunited\.org\/posts\/\d+$/',
        'max:200',
    ],
]);

mount(function ($token)
{
    $this->token = $token;
    if ($this->token) {
        $this->participant = Participant::findByToken($this->token);

        if ($this->participant) {
            $this->userData = $this->participant->getUserData();
            $this->prompt = $this->participant->prompt ?? '';
            if ($this->participant->receiver) {
                $this->receiverPrompt = $this->participant->receiver->prompt;
                $this->receiverUserData = $this->participant->receiver->getUserData();
                if ($this->participant->submission_url) {
                    $this->submissionUrl = $this->participant->submission_url ?? '';
                    $this->submissionData = PostService::getPostData($this->participant->submission_url);
                    if (!$this->submissionData) {
                        $this->submissionData = null;
                    }
                }
            }
        }
    }
});

$saveEditingPrompt = function ()
{
    if ($this->participant) {
        $this->validate();

        $this->participant->prompt = $this->prompt;
        $this->participant->save();
        $this->isEditingPrompt = false;
    }
};

$cancelEditingPrompt = function ()
{
    $this->prompt = $this->participant->prompt ?? '';
    $this->isEditingPrompt = false;
};

$saveEditingSubmission = function ()
{
    if ($this->participant) {
        $this->validate();

        $this->participant->submission_url = $this->submissionUrl;
        $this->participant->save();
        $this->isEditingSubmission = false;
    }
};

$cancelEditingSubmission = function ()
{
    $this->submissionUrl = $this->participant->submission_url ?? '';
    $this->isEditingSubmission = false;
};

?>

<div>
    @if($participant)
        @if($userData)
            <div class="user-profile">
                <div class="avatar-container">
                    <img src="{{ $userData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
                </div>
                <div class="username-container">
                    You are... <h1 style="margin-bottom:0;padding:0"> &commat;{{ $userData['data']['username'] ?? 'Unknown' }}</h1>
                </div>

            </div>

        @endif

        @if($isEditingPrompt)
                <div class="other-content">
                    <div style="margin-bottom: 15pt;">
                        Your prompt is...
                        <br>
                    </div>
                    <div>
                        <form wire:submit="saveEditingPrompt">
                            <input type="text" id="prompt" wire:model="prompt">

                            @error('prompt')
                            <span class="error">{{ $message }}</span>
                            @enderror
                            <br><br>
                            <button type="submit">Save</button>
                            <button type="button" wire:click="cancelEditingPrompt">Cancel</button>
                        </form>
                    </div>
                </div>
        @else
            <div class="other-content">
                <div>
                    Your prompt is...
                </div>
                <div>
                    <h2>
                        "{{ $prompt ?: 'No prompt set yet.' }}"
                    </h2>
                </div>

                <button wire:click="$set('isEditingPrompt', true)">
                    {{ $prompt ? 'Edit Prompt' : 'Add Prompt' }}
                </button>
                <div>
                    <br>
                    <small style="color:rgba(255,255,255,0.5)">this is what others will draw for you!</small>
                </div>
            </div>
        @endif

        <div class="other-content">
            @if($participant->giving_id)
                You are giving to...
                @if($receiverUserData)
                    <div class="user-profile">
                        <div class="avatar-container">
                            <img src="{{ $receiverUserData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
                        </div>
                        <div class="username-container">
                            <h1> &commat;{{ $receiverUserData['data']['username'] ?? 'Unknown' }}</h1>
                        </div>
                    </div>
                @endif
                <small style="color:rgba(255,255,255,0.5)">want to roll for a different person e.g. you blocked this person? you can dm @username</small>
                <br><br>Their prompt is...
                <div class="other-content">
                 {{$receiverPrompt}} Nothing yet, probably!
                </div>
        </div>

        <div class="other-content">
            <h2> Are you done? </h2>
            <p>You will be able to link to your gift below once submissions are accepted on 22nd December.</p>
            <small style="color:rgba(255,255,255,0.5)">submissions will be accepted up until 5th of january but before then is much more appreciated!</small>

            {{--                @if($isEditingSubmission)--}}
{{--                    <form wire:submit="saveEditingSubmission">--}}
{{--                        <input type="text" id="submissionUrl" wire:model="submissionUrl">--}}

{{--                        @error('submissionUrl')--}}
{{--                        <span class="error">{{ $message }}</span>--}}
{{--                        @enderror--}}

{{--                        <button type="submit">Save</button>--}}

{{--                        <button type="button" wire:click="cancelEditingSubmission">Cancel</button>--}}
{{--                    </form>--}}
{{--                @else--}}
{{--                    <div class="submissionUrl-display">--}}
{{--                        <p>--}}
{{--                            Your submission URL is: <span--}}
{{--                                id="submissionUrl">{{ $submissionUrl ?: 'No submission sent yet.' }}</span>--}}
{{--                        </p>--}}

{{--                        <button wire:click="$set('isEditingSubmission', true)">--}}
{{--                            {{ $submissionUrl ? 'Edit Submission URL' : 'Add Submission URL' }}--}}
{{--                        </button>--}}
{{--                    </div>--}}
{{--                @endif--}}
{{--                @if($submissionData)--}}
{{--                    <h1>Your submission:</h1>--}}
{{--                    <div id="postView">--}}
{{--                        <a href="{{$submissionUrl}}">--}}
{{--                            <h1>{{$submissionData['post']['title']}}</h1>--}}
{{--                            <img src="{{$submissionData['post']['resource_url']}}">--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                @endif--}}
            @elseif($participant->desperate)
                <p>You're in a bind!</p>
            @else
                <p>You haven't been assigned anyone yet. Initial assignments will be made on 13th December.</p>
            @endif
        </div>
        <div class="other-content">
            <a
                href="/withdraw/{{$token}}"
            >
                Withdraw from Secret Sketchers...?
            </a>
        </div>

    @endif

    <style>
        .user-profile {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-width: 100%;
            margin: 15px;
        }

        .other-content {
            display: block;
            padding: 15px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-width: 100%;
            margin: 15px;
        }

        .prompt-content {
            margin-bottom: 10px;
        }

        .prompt-content h2 {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .avatar-container {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            background-color: #ccc;
            flex-shrink: 0;
        }

        .avatar-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .username-container {
            flex-grow: 1;
            min-width: 0;
        }

        .username-container h1 {
            margin: 0;
            font-size: 1.2em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body {
            background-color: #021202;
            margin: 10pt;
            font-family: sans-serif;
            font-size: 2em;
            background-image: url("../img/christmas-bg.png");
            background-size: 140px;
            color: white;
            overflow: hidden;
        }

        div {
            color: white;
        }

        a {
            color: white;
            font-weight: bold;
        }

       </style>
</div>
