<?php

use Livewire\Volt\Component;
use Livewire\WithPagination;

new class extends Component
{
    use WithPagination;

    public function with(): array
    {
        return [
            'activeTimelines' => auth()->user()
                ->timelines()
                ->active()
                ->withCount('updates')
                ->with(['updates' => fn ($q) => $q->latest()->limit(1)])
                ->latest('updated_at')
                ->paginate(10, pageName: 'active'),

            'archivedTimelines' => auth()->user()
                ->timelines()
                ->archived()
                ->withCount('updates')
                ->latest('updated_at')
                ->paginate(10, pageName: 'archived'),
        ];
    }
}; ?>

<div class="max-w-4xl mx-auto">
    <flux:heading size="xl" class="mb-6 text-xl sm:text-2xl">{{ __('client.my_cases') }}</flux:heading>

    {{-- Active Timelines --}}
    @if($activeTimelines->total() > 0)
        <div class="mb-6 sm:mb-8">
            <h2 class="text-base sm:text-lg font-semibold text-zinc-900 mb-4">{{ __('client.active_cases') }}</h2>
            <div class="space-y-3 sm:space-y-4">
                @foreach($activeTimelines as $timeline)
                    <div wire:key="timeline-{{ $timeline->id }}" class="bg-white p-3 sm:p-4 rounded-lg border-s-4 border-amber-500 shadow-sm">
                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-zinc-900 truncate">{{ $timeline->case_name }}</h3>
                                @if($timeline->case_reference)
                                    <p class="text-sm text-zinc-600">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
                                @endif
                                <p class="text-xs sm:text-sm text-zinc-500 mt-1">
                                    {{ __('client.updates') }}: {{ $timeline->updates_count }}
                                    @if($timeline->updates->first())
                                        · {{ __('client.last_update') }}: {{ $timeline->updates->first()->created_at->diffForHumans() }}
                                    @endif
                                </p>
                            </div>
                            <div class="flex items-center gap-2 flex-shrink-0">
                                <flux:badge color="green">{{ __('client.active') }}</flux:badge>
                                <flux:button size="sm" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
                                    {{ __('client.view') }}
                                </flux:button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($activeTimelines->hasPages())
                <div class="mt-4">
                    {{ $activeTimelines->links() }}
                </div>
            @endif
        </div>
    @endif

    {{-- Archived Timelines --}}
    @if($archivedTimelines->total() > 0)
        <div>
            <h2 class="text-base sm:text-lg font-semibold text-zinc-600 mb-4">{{ __('client.archived_cases') }}</h2>
            <div class="space-y-3 sm:space-y-4 opacity-75">
                @foreach($archivedTimelines as $timeline)
                    <div wire:key="timeline-{{ $timeline->id }}" class="bg-zinc-50 p-3 sm:p-4 rounded-lg shadow-sm">
                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-zinc-700 truncate">{{ $timeline->case_name }}</h3>
                                @if($timeline->case_reference)
                                    <p class="text-sm text-zinc-500">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
                                @endif
                                <p class="text-xs sm:text-sm text-zinc-400 mt-1">
                                    {{ __('client.updates') }}: {{ $timeline->updates_count }}
                                </p>
                            </div>
                            <div class="flex items-center gap-2 flex-shrink-0">
                                <flux:badge>{{ __('client.archived') }}</flux:badge>
                                <flux:button size="sm" variant="outline" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
                                    {{ __('client.view') }}
                                </flux:button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($archivedTimelines->hasPages())
                <div class="mt-4">
                    {{ $archivedTimelines->links() }}
                </div>
            @endif
        </div>
    @endif

    {{-- Empty State --}}
    @if($activeTimelines->total() === 0 && $archivedTimelines->total() === 0)
        <div class="empty-state">
            <flux:icon name="folder-open" class="empty-state-icon text-zinc-300" />
            <p class="text-zinc-500">{{ __('client.no_cases_yet') }}</p>
        </div>
    @endif
</div>
