<?php

use Livewire\Component;
use App\Models\LegalPage;

new class extends Component
{
    public LegalPage $page;
    public $content = '';

    public function render()
    {
        return $this->view()->layout('layouts::auth');
    }

    public function mount(LegalPage $page)
    {
        $this->page = $page;
        $this->content = $page->content;
    }

    public function save()
    {
        $this->validate([
            'content' => 'required',
        ]);

        $this->page->update([
            'content' => $this->content,
        ]);

        session()->flash('message', 'Legal page updated successfully.');
        return $this->redirect(route('admin.legal'), navigate: true);
    }
};
?>

<div class="max-content max-w-[900px]">
    <header class="flex justify-between items-center mb-10">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.legal') }}" wire:navigate class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-50 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </a>
            <div>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ $page->title }}</h1>
                <p class="text-sm text-gray-500 mt-1">Edit the legal text for the public website.</p>
            </div>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.legal') }}" wire:navigate class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 transition-colors">Cancel</a>
            <button type="button" wire:click="save" wire:loading.attr="disabled" class="px-8 py-2 bg-sage text-white text-sm font-medium rounded-md hover:bg-sage-dark transition-colors disabled:opacity-50" style="background-color: #99BC85;">
                <span wire:loading.remove wire:target="save">Update Page</span>
                <span wire:loading wire:target="save">Updating...</span>
            </button>
        </div>
    </header>

    @if (session()->has('message'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('message') }}</span>
        </div>
    @endif

    <form wire:submit.prevent="save" class="space-y-8">
        <div class="card p-10">
            <div class="mb-8 border-b border-gray-100 pb-6">
                <h2 class="text-sm font-semibold">Page Content</h2>
                <p class="text-xs text-gray-400 mt-1">Use standard formatting for legal clarity.</p>
            </div>

            <div wire:ignore>
                <div id="editor" style="height: 400px;"></div>
            </div>
            @error('content') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
        </div>

        <div class="flex justify-end gap-3 pb-12">
            <a href="{{ route('admin.legal') }}" wire:navigate class="px-8 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 transition-colors">Discard</a>
            <button type="submit" wire:loading.attr="disabled" class="px-10 py-2 bg-sage text-white text-sm font-medium rounded-md hover:bg-sage-dark transition-colors disabled:opacity-50" style="background-color: #99BC85;">
                <span wire:loading.remove wire:target="save">Update Page</span>
                <span wire:loading wire:target="save">Updating...</span>
            </button>
        </div>
    </form>

    <!-- Quill.js Rich Text Editor -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        (function() {
            function initQuill() {
                const editorEl = document.getElementById('editor');
                if (!editorEl || editorEl.classList.contains('ql-container')) return;
                
                const quill = new Quill('#editor', {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline'],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            ['link', 'clean']
                        ]
                    }
                });

                quill.root.innerHTML = @js($content);

                quill.on('text-change', function() {
                    @this.set('content', quill.root.innerHTML);
                });
            }

            initQuill();
            document.addEventListener('livewire:navigated', initQuill);
        })();
    </script>
</div>
