<?php

use App\Enums\ConsultationStatus;
use App\Enums\TimelineStatus;
use App\Enums\UserStatus;
use App\Models\User;
use Livewire\Volt\Component;

new class extends Component {
    public User $client;

    public function mount(User $client): void
    {
        $this->client = $client->loadCount([
            'consultations',
            'consultations as pending_consultations_count' => fn ($q) => $q->where('status', ConsultationStatus::Pending),
            'consultations as completed_consultations_count' => fn ($q) => $q->where('status', ConsultationStatus::Completed),
            'timelines',
            'timelines as active_timelines_count' => fn ($q) => $q->where('status', TimelineStatus::Active),
        ]);
    }
}; ?>

<div>
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
                {{ __('clients.back_to_clients') }}
            </flux:button>
        </div>
        <div class="flex flex-wrap gap-2">
            <flux:button variant="outline" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-company').show()" icon="building-office">
                {{ __('clients.convert_to_company') }}
            </flux:button>
            <flux:button variant="primary" :href="route('admin.clients.individual.edit', $client)" wire:navigate icon="pencil">
                {{ __('clients.edit_client') }}
            </flux:button>
        </div>
    </div>

    <div class="mb-6">
        <flux:heading size="xl">{{ __('clients.client_profile') }}</flux:heading>
        <flux:text class="mt-1 text-zinc-500">{{ $client->full_name }}</flux:text>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        {{-- Client Information --}}
        <div class="lg:col-span-2">
            <div class="rounded-lg border border-zinc-200 bg-white">
                <div class="border-b border-zinc-200 px-6 py-4">
                    <flux:heading size="lg">{{ __('clients.client_information') }}</flux:heading>
                </div>
                <div class="p-6">
                    <div class="flex items-start gap-6">
                        <flux:avatar size="xl" :name="$client->full_name" />
                        <div class="flex-1">
                            <div class="grid gap-6 sm:grid-cols-2">
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.full_name') }}</flux:text>
                                    <flux:text class="mt-1 text-zinc-900">{{ $client->full_name }}</flux:text>
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.national_id') }}</flux:text>
                                    <flux:text class="mt-1 text-zinc-900">{{ $client->national_id }}</flux:text>
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.email') }}</flux:text>
                                    <flux:text class="mt-1 text-zinc-900">{{ $client->email }}</flux:text>
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.phone') }}</flux:text>
                                    <flux:text class="mt-1 text-zinc-900">{{ $client->phone }}</flux:text>
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.preferred_language') }}</flux:text>
                                    <flux:text class="mt-1 text-zinc-900">
                                        {{ $client->preferred_language === 'ar' ? __('clients.arabic') : __('clients.english') }}
                                    </flux:text>
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.status') }}</flux:text>
                                    <div class="mt-1">
                                        @if ($client->status === UserStatus::Active)
                                            <flux:badge color="green">{{ __('clients.active') }}</flux:badge>
                                        @else
                                            <flux:badge color="red">{{ __('clients.deactivated') }}</flux:badge>
                                        @endif
                                    </div>
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.member_since') }}</flux:text>
                                    <flux:text class="mt-1 text-zinc-900">{{ $client->created_at->format('Y-m-d') }}</flux:text>
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-500">{{ __('clients.user_type') }}</flux:text>
                                    <flux:text class="mt-1 text-zinc-900">{{ __('clients.individual') }}</flux:text>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Stats Sidebar --}}
        <div class="space-y-6">
            {{-- Consultation Summary --}}
            <div class="rounded-lg border border-zinc-200 bg-white">
                <div class="border-b border-zinc-200 px-6 py-4">
                    <flux:heading size="lg">{{ __('clients.consultation_history') }}</flux:heading>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <flux:text class="text-sm text-zinc-500">{{ __('clients.total_consultations') }}</flux:text>
                            <flux:badge color="zinc">{{ $client->consultations_count }}</flux:badge>
                        </div>
                        <div class="flex items-center justify-between">
                            <flux:text class="text-sm text-zinc-500">{{ __('clients.pending_consultations') }}</flux:text>
                            <flux:badge color="yellow">{{ $client->pending_consultations_count }}</flux:badge>
                        </div>
                        <div class="flex items-center justify-between">
                            <flux:text class="text-sm text-zinc-500">{{ __('clients.completed_consultations') }}</flux:text>
                            <flux:badge color="green">{{ $client->completed_consultations_count }}</flux:badge>
                        </div>
                    </div>
                    @if ($client->consultations_count > 0)
                        <div class="mt-4 border-t border-zinc-200 pt-4">
                            <flux:text class="text-sm text-zinc-500">
                                {{ __('clients.view_all_consultations') }}
                            </flux:text>
                        </div>
                    @else
                        <div class="mt-4 border-t border-zinc-200 pt-4">
                            <flux:text class="text-sm text-zinc-500">
                                {{ __('clients.no_consultations') }}
                            </flux:text>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Timeline Summary --}}
            <div class="rounded-lg border border-zinc-200 bg-white">
                <div class="border-b border-zinc-200 px-6 py-4">
                    <flux:heading size="lg">{{ __('clients.timeline_history') }}</flux:heading>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <flux:text class="text-sm text-zinc-500">{{ __('clients.total_timelines') }}</flux:text>
                            <flux:badge color="zinc">{{ $client->timelines_count }}</flux:badge>
                        </div>
                        <div class="flex items-center justify-between">
                            <flux:text class="text-sm text-zinc-500">{{ __('clients.active_timelines') }}</flux:text>
                            <flux:badge color="blue">{{ $client->active_timelines_count }}</flux:badge>
                        </div>
                    </div>
                    @if ($client->timelines_count > 0)
                        <div class="mt-4 border-t border-zinc-200 pt-4">
                            <flux:text class="text-sm text-zinc-500">
                                {{ __('clients.view_all_timelines') }}
                            </flux:text>
                        </div>
                    @else
                        <div class="mt-4 border-t border-zinc-200 pt-4">
                            <flux:text class="text-sm text-zinc-500">
                                {{ __('clients.no_timelines') }}
                            </flux:text>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Lifecycle Actions Section --}}
    <div class="mt-6 rounded-lg border border-zinc-200 bg-white p-6">
        <flux:heading size="lg" class="mb-4">{{ __('clients.account_actions') }}</flux:heading>
        <livewire:admin.clients.lifecycle-actions :client="$client" />
    </div>

    <livewire:admin.clients.convert-to-company-modal :client="$client" />
</div>
