<?php

use App\Models\Timeline;
use Livewire\Volt\Component;

new class extends Component
{
    public Timeline $timeline;

    public function mount(Timeline $timeline): void
    {
        // Authorization: Ensure client owns this timeline
        abort_unless($timeline->user_id === auth()->id(), 403);

        $this->timeline = $timeline->load(['updates' => fn ($q) => $q->oldest()]);
    }
}; ?>

<div class="max-w-3xl mx-auto">
    {{-- Header --}}
    <div class="flex justify-between items-start mb-6">
        <div>
            <flux:heading size="xl">{{ $timeline->case_name }}</flux:heading>
            @if($timeline->case_reference)
                <p class="text-zinc-600 dark:text-zinc-400">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
            @endif
        </div>
        <flux:badge :variant="$timeline->status->value === 'active' ? 'success' : 'default'">
            {{ __('client.' . $timeline->status->value) }}
        </flux:badge>
    </div>

    {{-- Timeline Updates --}}
    <div class="relative">
        {{-- Vertical line --}}
        <div class="absolute start-4 top-0 bottom-0 w-0.5 bg-amber-500/30"></div>

        <div class="space-y-6">
            @forelse($timeline->updates as $update)
                <div wire:key="update-{{ $update->id }}" class="relative ps-12">
                    {{-- Dot --}}
                    <div class="absolute start-2 top-2 w-4 h-4 rounded-full bg-amber-500 border-4 border-amber-50 dark:border-zinc-900"></div>

                    <div class="bg-white dark:bg-zinc-800 p-4 rounded-lg shadow-sm">
                        <div class="text-sm text-zinc-500 dark:text-zinc-400 mb-2">
                            {{ $update->created_at->translatedFormat('l, d M Y - g:i A') }}
                        </div>
                        <div class="prose prose-sm dark:prose-invert max-w-none">
                            {!! $update->update_text !!}
                        </div>
                    </div>
                </div>
            @empty
                <p class="text-center text-zinc-500 dark:text-zinc-400 py-8">
                    {{ __('client.no_updates_yet') }}
                </p>
            @endforelse
        </div>
    </div>

    <div class="mt-6">
        <flux:button href="{{ route('client.timelines.index') }}">
            {{ __('client.back_to_cases') }}
        </flux:button>
    </div>
</div>
