<?php

use App\Enums\PotentialClientType;
use App\Models\PotentialClient;
use Livewire\Volt\Component;

new class extends Component {
    public PotentialClient $potentialClient;

    public bool $showDeleteModal = false;

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

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

    public function delete(): void
    {
        $this->potentialClient->delete();

        session()->flash('success', __('potential-clients.deleted_success'));
        $this->redirect(route('admin.potential-clients.index'), navigate: true);
    }
}; ?>

<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.potential-clients.index')" wire:navigate icon="arrow-left">
                {{ __('potential-clients.back_to_list') }}
            </flux:button>
        </div>
        <div class="flex flex-wrap gap-2">
            <flux:button variant="primary" :href="route('admin.potential-clients.edit', $potentialClient)" wire:navigate icon="pencil">
                {{ __('potential-clients.edit') }}
            </flux:button>
            <flux:button variant="danger" wire:click="confirmDelete" icon="trash">
                {{ __('potential-clients.delete') }}
            </flux:button>
        </div>
    </div>

    <div class="mb-6">
        <flux:heading size="xl">{{ __('potential-clients.potential_client_details') }}</flux:heading>
        <flux:text class="mt-1 text-zinc-500">{{ $potentialClient->name ?? __('potential-clients.not_provided') }}</flux:text>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        {{-- Main Information --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Type --}}
            <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">{{ __('potential-clients.fields.type') }}</flux:heading>
                </div>
                <div class="p-6">
                    @switch($potentialClient->type)
                        @case(PotentialClientType::Individual)
                            <flux:badge color="blue" size="lg">{{ $potentialClient->type->label() }}</flux:badge>
                            @break
                        @case(PotentialClientType::Company)
                            <flux:badge color="purple" size="lg">{{ $potentialClient->type->label() }}</flux:badge>
                            @break
                        @case(PotentialClientType::Agency)
                            <flux:badge color="amber" size="lg">{{ $potentialClient->type->label() }}</flux:badge>
                            @break
                    @endswitch
                </div>
            </div>

            {{-- Contact Information --}}
            <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">{{ __('potential-clients.contact_information') }}</flux:heading>
                </div>
                <div class="p-6">
                    <div class="grid gap-6 sm:grid-cols-2">
                        <div>
                            <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.fields.name') }}</flux:text>
                            <flux:text class="mt-1 text-zinc-900">{{ $potentialClient->name ?? __('potential-clients.not_provided') }}</flux:text>
                        </div>
                        <div>
                            <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.fields.phone') }}</flux:text>
                            <flux:text class="mt-1 text-zinc-900">
                                @if ($potentialClient->phone)
                                    <a href="tel:{{ $potentialClient->phone }}" class="text-amber-600 hover:text-amber-700">
                                        {{ $potentialClient->phone }}
                                    </a>
                                @else
                                    {{ __('potential-clients.not_provided') }}
                                @endif
                            </flux:text>
                        </div>
                        <div>
                            <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.fields.email') }}</flux:text>
                            <flux:text class="mt-1 text-zinc-900">
                                @if ($potentialClient->email)
                                    <a href="mailto:{{ $potentialClient->email }}" class="text-amber-600 hover:text-amber-700">
                                        {{ $potentialClient->email }}
                                    </a>
                                @else
                                    {{ __('potential-clients.not_provided') }}
                                @endif
                            </flux:text>
                        </div>
                        <div>
                            <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.fields.website') }}</flux:text>
                            <flux:text class="mt-1 text-zinc-900">
                                @if ($potentialClient->website)
                                    <a href="{{ $potentialClient->website }}" target="_blank" rel="noopener noreferrer" class="text-amber-600 hover:text-amber-700">
                                        {{ $potentialClient->website }}
                                    </a>
                                @else
                                    {{ __('potential-clients.not_provided') }}
                                @endif
                            </flux:text>
                        </div>
                        <div class="sm:col-span-2">
                            <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.fields.address') }}</flux:text>
                            <flux:text class="mt-1 text-zinc-900">{{ $potentialClient->address ?? __('potential-clients.not_provided') }}</flux:text>
                        </div>
                        <div class="sm:col-span-2">
                            <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.fields.social_media') }}</flux:text>
                            <flux:text class="mt-1 text-zinc-900">{{ $potentialClient->social_media ?? __('potential-clients.not_provided') }}</flux:text>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Notes --}}
            @if ($potentialClient->notes)
                <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">{{ __('potential-clients.fields.notes') }}</flux:heading>
                    </div>
                    <div class="p-6">
                        <flux:text class="whitespace-pre-wrap text-zinc-700">{{ $potentialClient->notes }}</flux:text>
                    </div>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            {{-- Record Information --}}
            <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">{{ __('potential-clients.record_information') }}</flux:heading>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.created_at') }}</flux:text>
                        <flux:text class="mt-1 text-zinc-900">{{ $potentialClient->created_at->format('Y-m-d H:i') }}</flux:text>
                    </div>
                    <div>
                        <flux:text class="text-sm font-medium text-zinc-500">{{ __('potential-clients.updated_at') }}</flux:text>
                        <flux:text class="mt-1 text-zinc-900">{{ $potentialClient->updated_at->format('Y-m-d H:i') }}</flux:text>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <flux:modal wire:model="showDeleteModal" class="min-w-[22rem]">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">{{ __('potential-clients.delete_confirm_title') }}</flux:heading>
                <flux:text class="mt-2">{{ __('potential-clients.delete_confirm_message') }}</flux:text>
                <flux:text class="mt-2 font-medium">{{ $potentialClient->name ?? __('potential-clients.not_provided') }}</flux:text>
            </div>
            <div class="flex gap-2">
                <flux:spacer />
                <flux:button variant="outline" wire:click="cancelDelete">
                    {{ __('potential-clients.cancel') }}
                </flux:button>
                <flux:button variant="danger" wire:click="delete">
                    {{ __('potential-clients.delete') }}
                </flux:button>
            </div>
        </div>
    </flux:modal>
</div>
