<?php

use App\Models\MeetupEvent;
use App\Models\User;
use App\Traits\SeoTrait;
use Livewire\Attributes\Validate;
use Livewire\Volt\Component;

new class extends Component {
    use SeoTrait;

    public MeetupEvent $event;
    public $country = 'de';

    #[Validate('required|min:2')]
    public string $name = '';

    public bool $willShowUp = false;
    public bool $perhapsShowUp = false;
    public array $attendees = [];
    public array $mightAttendees = [];

    public function mount(): void
    {
        $this->country = request()->route('country');
        $this->name = auth()->user()->name ?? '';
        $this->loadAttendees();
    }

    public function with(): array
    {
        return [
            'event' => $this->event->load('meetup'),
        ];
    }

    private function getUserIdentifier(): string
    {
        return auth()->check()
            ? 'id_'.auth()->id()
            : 'anon_'.session()->getId();
    }

    private function loadAttendees(): void
    {
        $identifier = $this->getUserIdentifier();
        $attendees = collect($this->event->attendees ?? []);
        $mightAttendees = collect($this->event->might_attendees ?? []);

        // Check if user is in attendees
        $attendeeEntry = $attendees->first(fn($v) => str($v)->startsWith($identifier));
        if ($attendeeEntry) {
            $this->name = str($attendeeEntry)->after('|')->toString();
            $this->willShowUp = true;
        }

        // Check if user is in might_attendees
        $mightAttendeeEntry = $mightAttendees->first(fn($v) => str($v)->startsWith($identifier));
        if ($mightAttendeeEntry) {
            $this->name = str($mightAttendeeEntry)->after('|')->toString();
            $this->perhapsShowUp = true;
        }

        $this->attendees = $this->mapAttendees($attendees);
        $this->mightAttendees = $this->mapAttendees($mightAttendees);
    }

    private function mapAttendees($collection): array
    {
        return $collection->map(function ($value) {
            $isAnon = str($value)->contains('anon_');
            $id = $isAnon ? -1 : str($value)->before('|')->after('id_')->toInteger();

            return [
                'id' => $id,
                'user' => $id > 0 ? User::query()
                    ->select(['id', 'name', 'profile_photo_path'])
                    ->find($id)
                    ?->append('profile_photo_url')
                    ->toArray() : null,
                'name' => str($value)->after('|')->toString(),
            ];
        })->toArray();
    }

    public function attend(): void
    {
        $this->validate();
        $this->removeFromLists();

        $attendees = collect($this->event->attendees ?? []);
        $entry = $this->getUserIdentifier().'|'.$this->name;

        if (!$attendees->contains($entry)) {
            $attendees->push($entry);
            $this->event->update(['attendees' => $attendees->toArray()]);
        }

        $this->loadAttendees();
    }

    public function mightAttend(): void
    {
        $this->validate();
        $this->removeFromLists();

        $mightAttendees = collect($this->event->might_attendees ?? []);
        $entry = $this->getUserIdentifier().'|'.$this->name;

        if (!$mightAttendees->contains($entry)) {
            $mightAttendees->push($entry);
            $this->event->update(['might_attendees' => $mightAttendees->toArray()]);
        }

        $this->loadAttendees();
    }

    public function cannotCome(): void
    {
        $this->removeFromLists();
        $this->loadAttendees();
    }

    private function removeFromLists(): void
    {
        $identifier = $this->getUserIdentifier();

        $attendees = collect($this->event->attendees ?? [])
            ->reject(fn($v) => str($v)->startsWith($identifier));

        $mightAttendees = collect($this->event->might_attendees ?? [])
            ->reject(fn($v) => str($v)->startsWith($identifier));

        $this->event->update([
            'attendees' => $attendees->toArray(),
            'might_attendees' => $mightAttendees->toArray(),
        ]);

        $this->willShowUp = false;
        $this->perhapsShowUp = false;
    }
}; ?>

<div class="container mx-auto px-4 py-8">
    <!-- Breadcrumb -->
    <div class="mb-6">
        <flux:text class="text-sm text-zinc-600 dark:text-zinc-400">
            <a href="{{ route('meetups.landingpage', ['meetup' => $event->meetup->slug, 'country' => $country]) }}"
               class="hover:underline">
                {{ $event->meetup->name }}
            </a>
            <span class="mx-2">/</span>
            <span>{{ $event->start->format('d.m.Y') }}</span>
        </flux:text>
    </div>

    <!-- Event Details -->
    <flux:card class="max-w-3xl">
        <flux:heading size="xl" class="mb-4">
            <flux:icon.calendar class="inline w-6 h-6 mr-2"/>
            {{ $event->start->format('d.m.Y') }}
        </flux:heading>

        <div class="space-y-4">
            <!-- Date and Time -->
            <div class="flex items-center text-zinc-700 dark:text-zinc-300">
                <flux:icon.clock class="w-5 h-5 mr-3"/>
                <div>
                    <div class="font-semibold">{{ $event->start->format('H:i') }} Uhr</div>
                    <div
                        class="text-sm text-zinc-600 dark:text-zinc-400">{{ $event->start->isoFormat('dddd, D. MMMM YYYY') }}</div>
                </div>
            </div>

            <!-- Location -->
            @if($event->location)
                <div class="flex items-center text-zinc-700 dark:text-zinc-300">
                    <flux:icon.map-pin class="w-5 h-5 mr-3"/>
                    <div>
                        <div class="font-semibold">{{ __('Ort') }}</div>
                        <div class="text-sm">{{ $event->location }}</div>
                    </div>
                </div>
            @endif

            <!-- Description -->
            @if($event->description)
                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
                    <flux:heading size="lg" class="mb-2">{{ __('Beschreibung') }}</flux:heading>
                    <flux:text class="whitespace-pre-wrap">{{ $event->description }}</flux:text>
                </div>
            @endif

            <!-- Link -->
            @if($event->link)
                <div class="pt-4">
                    <flux:button href="{{ $event->link }}" target="_blank" variant="primary">
                        <flux:icon.arrow-top-right-on-square class="w-5 h-5 mr-2"/>
                        {{ __('Mehr Informationen') }}
                    </flux:button>
                </div>
            @endif

            <!-- RSVP Section -->
            <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
                <flux:heading size="lg" class="mb-4">{{ __('Teilnahme') }}</flux:heading>

                <div class="space-y-4">

                    @if(!auth()->check())
                        <flux:callout variant="warning" icon="exclamation-triangle" inline>
                            <flux:callout.heading>{{ __('Du bist nicht eingloggt und musst deshalb den Namen selbst eintippen.') }}</flux:callout.heading>
                            <x-slot name="actions">
                                <flux:button :href="route('login')">{{ __('Log in') }}</flux:button>
                            </x-slot>
                        </flux:callout>
                    @endif

                    <!-- Name Input -->
                    <flux:field>
                        <flux:label>{{ __('Dein Name') }}</flux:label>
                        <flux:input wire:model="name" type="text" placeholder="{{ __('Name eingeben') }}"/>
                        @error('name')
                        <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>

                    <!-- Action Buttons -->
                    <div class="flex flex-wrap gap-2">
                        <flux:button
                            class="cursor-pointer"
                            icon="check"
                            wire:click="attend"
                            variant="{{ $willShowUp ? 'primary' : 'outline' }}"
                        >
                            {{ __('Ich komme') }}
                        </flux:button>

                        <flux:button
                            class="cursor-pointer"
                            icon="question-mark-circle"
                            wire:click="mightAttend"
                            variant="{{ $perhapsShowUp ? 'primary' : 'outline' }}"
                        >
                            {{ __('Vielleicht') }}
                        </flux:button>

                        @if($willShowUp || $perhapsShowUp)
                            <flux:button
                                class="cursor-pointer"
                                icon="x-mark"
                                wire:click="cannotCome"
                                variant="ghost"
                            >
                                {{ __('Absagen') }}
                            </flux:button>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Attendees -->
            @if(count($attendees) > 0)
                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
                    <flux:heading size="lg" class="mb-2">
                        {{ __('Zusagen') }} ({{ count($attendees) }})
                    </flux:heading>
                    <div class="flex flex-wrap gap-2">
                        @foreach($attendees as $attendee)
                            @if($attendee['user'])
                                <div
                                    class="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full">
                                    <flux:avatar size="xs" :src="$attendee['user']['profile_photo_url']"/>
                                    <span class="text-sm">{{ $attendee['name'] }}</span>
                                </div>
                            @else
                                <flux:badge>{{ $attendee['name'] }}</flux:badge>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Might Attend -->
            @if(count($mightAttendees) > 0)
                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
                    <flux:heading size="lg" class="mb-2">
                        {{ __('Vielleicht') }} ({{ count($mightAttendees) }})
                    </flux:heading>
                    <div class="flex flex-wrap gap-2">
                        @foreach($mightAttendees as $attendee)
                            @if($attendee['user'])
                                <div
                                    class="flex items-center gap-2 px-3 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-full">
                                    <flux:avatar size="xs" :src="$attendee['user']['profile_photo_url']"/>
                                    <span class="text-sm">{{ $attendee['name'] }}</span>
                                </div>
                            @else
                                <flux:badge variant="outline">{{ $attendee['name'] }}</flux:badge>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </flux:card>

    <!-- Back Button -->
    <div class="mt-6">
        <flux:button
            href="{{ route('meetups.landingpage', ['meetup' => $event->meetup->slug, 'country' => $country]) }}"
            variant="ghost">
            <flux:icon.arrow-left class="w-5 h-5 mr-2"/>
            {{ __('Zurück zum Meetup') }}
        </flux:button>
    </div>
</div>