<?php

use App\Enums\PostStatus;
use App\Models\AdminLog;
use App\Models\Post;
use Livewire\Volt\Component;

new class extends Component
{
    public Post $post;

    public string $title_ar = '';
    public string $title_en = '';
    public string $body_ar = '';
    public string $body_en = '';
    public string $status = 'draft';

    public bool $showPreview = false;
    public bool $showDeleteModal = false;

    public function mount(Post $post): void
    {
        $this->post = $post;
        $this->title_ar = $post->title['ar'] ?? '';
        $this->title_en = $post->title['en'] ?? '';
        $this->body_ar = $post->body['ar'] ?? '';
        $this->body_en = $post->body['en'] ?? '';
        $this->status = $post->status->value;
    }

    public function rules(): array
    {
        return [
            'title_ar' => ['required', 'string', 'max:255'],
            'title_en' => ['required', 'string', 'max:255'],
            'body_ar' => ['required', 'string'],
            'body_en' => ['required', 'string'],
            'status' => ['required', 'in:draft,published'],
        ];
    }

    public function messages(): array
    {
        return [
            'title_ar.required' => __('posts.title_ar_required'),
            'title_en.required' => __('posts.title_en_required'),
            'body_ar.required' => __('posts.body_ar_required'),
            'body_en.required' => __('posts.body_en_required'),
        ];
    }

    public function save(): void
    {
        $validated = $this->validate();

        $oldValues = $this->post->toArray();

        $this->post->update([
            'title' => [
                'ar' => $validated['title_ar'],
                'en' => $validated['title_en'],
            ],
            'body' => [
                'ar' => clean($validated['body_ar']),
                'en' => clean($validated['body_en']),
            ],
            'status' => $validated['status'],
            'published_at' => $validated['status'] === 'published' && ! $this->post->published_at
                ? now()
                : $this->post->published_at,
        ]);

        AdminLog::create([
            'admin_id' => auth()->id(),
            'action' => 'update',
            'target_type' => 'post',
            'target_id' => $this->post->id,
            'old_values' => $oldValues,
            'new_values' => $this->post->fresh()->toArray(),
            'ip_address' => request()->ip(),
            'created_at' => now(),
        ]);

        session()->flash('success', __('posts.post_saved'));
    }

    public function saveDraft(): void
    {
        $this->status = 'draft';
        $this->save();
    }

    public function publish(): void
    {
        $this->status = 'published';
        $this->save();
    }

    public function autoSave(): void
    {
        if ($this->status === 'draft') {
            $this->post->update([
                'title' => [
                    'ar' => $this->title_ar,
                    'en' => $this->title_en,
                ],
                'body' => [
                    'ar' => clean($this->body_ar),
                    'en' => clean($this->body_en),
                ],
            ]);
        }
    }

    public function preview(): void
    {
        $this->showPreview = true;
    }

    public function closePreview(): void
    {
        $this->showPreview = false;
    }

    public function delete(): void
    {
        $this->showDeleteModal = true;
    }

    public function confirmDelete(): void
    {
        AdminLog::create([
            'admin_id' => auth()->id(),
            'action' => 'delete',
            'target_type' => 'post',
            'target_id' => $this->post->id,
            'old_values' => $this->post->toArray(),
            'ip_address' => request()->ip(),
            'created_at' => now(),
        ]);

        $this->post->delete();

        session()->flash('success', __('posts.post_deleted'));

        $this->redirect(route('admin.posts.index'), navigate: true);
    }

    public function cancelDelete(): void
    {
        $this->showDeleteModal = false;
    }
}; ?>

<div wire:poll.60s="autoSave">
    <div class="mb-6">
        <flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate icon="arrow-left">
            {{ __('posts.back_to_posts') }}
        </flux:button>
    </div>

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div>
            <flux:heading size="xl">{{ __('posts.edit_post') }}</flux:heading>
            <p class="text-sm text-zinc-500 mt-1">
                {{ __('posts.last_updated') }}: {{ $post->updated_at->diffForHumans() }}
                @if($status === 'draft')
                    <span class="text-amber-600">({{ __('posts.auto_save_enabled') }})</span>
                @endif
            </p>
        </div>
        <flux:badge :color="$status === 'published' ? 'green' : 'amber'">
            {{ __('enums.post_status.' . $status) }}
        </flux:badge>
    </div>

    @if(session('success'))
        <flux:callout variant="success" class="mb-6">
            {{ session('success') }}
        </flux:callout>
    @endif

    <div class="rounded-lg border border-zinc-200 bg-white p-6">
        <form wire:submit="save" class="space-y-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Arabic Fields -->
                <div class="space-y-4">
                    <flux:heading size="sm">{{ __('posts.arabic_content') }}</flux:heading>

                    <flux:field>
                        <flux:label class="required">{{ __('posts.title') }} ({{ __('posts.arabic') }})</flux:label>
                        <flux:input wire:model="title_ar" dir="rtl" required />
                        <flux:error name="title_ar" />
                    </flux:field>

                    <flux:field>
                        <flux:label class="required">{{ __('posts.body') }} ({{ __('posts.arabic') }})</flux:label>
                        <div wire:ignore>
                            <input id="body_ar" type="hidden" wire:model="body_ar" value="{{ $body_ar }}">
                            <trix-editor
                                input="body_ar"
                                dir="rtl"
                                class="trix-content prose prose-sm max-w-none bg-white rounded-lg border border-zinc-200 min-h-[200px]"
                                x-data
                                x-on:trix-change="$wire.set('body_ar', $event.target.value)"
                            ></trix-editor>
                        </div>
                        <flux:error name="body_ar" />
                    </flux:field>
                </div>

                <!-- English Fields -->
                <div class="space-y-4">
                    <flux:heading size="sm">{{ __('posts.english_content') }}</flux:heading>

                    <flux:field>
                        <flux:label class="required">{{ __('posts.title') }} ({{ __('posts.english') }})</flux:label>
                        <flux:input wire:model="title_en" required />
                        <flux:error name="title_en" />
                    </flux:field>

                    <flux:field>
                        <flux:label class="required">{{ __('posts.body') }} ({{ __('posts.english') }})</flux:label>
                        <div wire:ignore>
                            <input id="body_en" type="hidden" wire:model="body_en" value="{{ $body_en }}">
                            <trix-editor
                                input="body_en"
                                class="trix-content prose prose-sm max-w-none bg-white rounded-lg border border-zinc-200 min-h-[200px]"
                                x-data
                                x-on:trix-change="$wire.set('body_en', $event.target.value)"
                            ></trix-editor>
                        </div>
                        <flux:error name="body_en" />
                    </flux:field>
                </div>
            </div>

            <div class="flex items-center justify-between gap-4 border-t border-zinc-200 pt-6">
                <div>
                    <flux:button variant="danger" type="button" wire:click="delete">
                        {{ __('posts.delete_post') }}
                    </flux:button>
                </div>
                <div class="flex items-center gap-4">
                    <flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate>
                        {{ __('common.cancel') }}
                    </flux:button>
                    <flux:button type="button" wire:click="preview">
                        {{ __('posts.preview') }}
                    </flux:button>
                    @if($status === 'published')
                        <flux:button type="button" wire:click="saveDraft">
                            {{ __('posts.unpublish') }}
                        </flux:button>
                        <flux:button variant="primary" type="button" wire:click="publish">
                            {{ __('posts.save_changes') }}
                        </flux:button>
                    @else
                        <flux:button type="button" wire:click="saveDraft">
                            {{ __('posts.save_draft') }}
                        </flux:button>
                        <flux:button variant="primary" type="button" wire:click="publish">
                            {{ __('posts.publish') }}
                        </flux:button>
                    @endif
                </div>
            </div>
        </form>
    </div>

    {{-- Preview Modal --}}
    <flux:modal wire:model="showPreview" class="max-w-4xl">
        <div class="p-6">
            <flux:heading size="lg" class="mb-4">{{ __('posts.preview') }}</flux:heading>

            <div class="space-y-6">
                <div class="border-b border-zinc-200 pb-4">
                    <h3 class="font-semibold text-lg mb-2 text-zinc-600">{{ __('posts.arabic_content') }}</h3>
                    <h2 class="text-xl font-bold text-zinc-900" dir="rtl">{{ $title_ar }}</h2>
                    <div class="prose prose-sm mt-2 max-w-none" dir="rtl">{!! clean($body_ar) !!}</div>
                </div>

                <div>
                    <h3 class="font-semibold text-lg mb-2 text-zinc-600">{{ __('posts.english_content') }}</h3>
                    <h2 class="text-xl font-bold text-zinc-900">{{ $title_en }}</h2>
                    <div class="prose prose-sm mt-2 max-w-none">{!! clean($body_en) !!}</div>
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <flux:button wire:click="closePreview">{{ __('common.close') }}</flux:button>
            </div>
        </div>
    </flux:modal>

    {{-- Delete Confirmation Modal --}}
    <flux:modal wire:model="showDeleteModal">
        <div class="space-y-4">
            <flux:heading size="lg">{{ __('posts.delete_post') }}</flux:heading>

            <flux:callout variant="danger">
                {{ __('posts.delete_post_warning') }}
            </flux:callout>

            <p class="text-zinc-700">
                {{ __('posts.deleting_post', ['title' => $post->getTitle()]) }}
            </p>

            <div class="flex gap-3 justify-end pt-4">
                <flux:button wire:click="cancelDelete">
                    {{ __('common.cancel') }}
                </flux:button>
                <flux:button variant="danger" wire:click="confirmDelete">
                    {{ __('posts.delete_permanently') }}
                </flux:button>
            </div>
        </div>
    </flux:modal>
</div>

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
<style>
    trix-toolbar [data-trix-button-group="file-tools"] {
        display: none;
    }
</style>
@endpush

@push('scripts')
<script src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
@endpush