@extends('layouts.app')
@section('title', 'Lead Detail')

@section('content')
    @php
        $routePrefix = strtolower(auth()->user()->role->name);
        $canEditLeads = auth()->user()->hasPermissionName('leads.edit');
        $canInteract = auth()->user()->hasPermissionName('leads.interact');
        $statusColors = [
            'New' => 'primary',
            'Contacted' => 'info',
            'Qualified' => 'success',
            'Proposal Sent' => 'warning',
            'Negotiation' => 'secondary',
            'Won' => 'success',
            'Lost' => 'danger',
        ];
        $stages = \App\Models\Lead::STATUSES;
        $currentStage = array_search($lead->status, $stages, true);
    @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <h3 class="mb-0">{{ $lead->name }}</h3>
                <span class="badge bg-{{ $statusColors[$lead->status] ?? 'secondary' }}">{{ $lead->status }}</span>
            </div>
            <span class="text-secondary fs-13">Lead detail, progress tracking, and interaction history.</span>
        </div>

        <div class="d-flex align-items-center gap-2">
            <a href="{{ route($routePrefix . '.leads.index') }}" class="btn btn-outline-secondary py-1 px-2 px-sm-4 fs-14 fw-medium rounded-3">
                <span class="py-sm-1 d-block">
                    <i class="ri-arrow-left-line d-none d-sm-inline-block"></i>
                    <span>Back</span>
                </span>
            </a>
            @if($canEditLeads)
                <a href="{{ route($routePrefix . '.leads.edit', $lead) }}" class="btn btn-outline-primary py-1 px-2 px-sm-4 fs-14 fw-medium rounded-3">
                    <span class="py-sm-1 d-block">
                        <i class="ri-edit-line d-none d-sm-inline-block"></i>
                        <span>Edit Lead</span>
                    </span>
                </a>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-xxl-8">
            <div class="card bg-white border-0 rounded-3 mb-4">
                <div class="card-body p-4">
                    <div class="border-bottom pb-3 mb-4">
                        <h5 class="mb-1">Lead Overview</h5>
                        <span class="text-secondary fs-13">Core account, source, and qualification information.</span>
                    </div>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Phone</span>
                            <strong>{{ $lead->phone }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Email</span>
                            <strong>{{ $lead->email ?: '-' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Company</span>
                            <strong>{{ $lead->company_name ?: '-' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">State / Region</span>
                            <strong>{{ $lead->state ?: '-' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Company Size</span>
                            <strong>{{ $lead->company_size ?: '-' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Lead Source</span>
                            <span class="badge bg-secondary">{{ $lead->source->name }}</span>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Product Interest</span>
                            <strong>{{ $lead->product_interest ?: '-' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Assigned To</span>
                            <strong>{{ $lead->assignedTo->name ?? '-' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Created On</span>
                            <strong>{{ $lead->created_at?->format('d M Y, h:i A') }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-secondary fs-13 d-block">Lead Score</span>
                            <div class="d-flex align-items-center gap-2">
                                <div class="progress flex-grow-1" style="height: 8px;">
                                    <div class="progress-bar bg-primary" style="width: {{ $lead->lead_score }}%"></div>
                                </div>
                                <strong>{{ $lead->lead_score }}/100</strong>
                            </div>
                        </div>

                        @if($lead->lost_reason)
                            <div class="col-md-6">
                                <span class="text-secondary fs-13 d-block">Lost Reason</span>
                                <span class="badge bg-danger">{{ $lead->lost_reason }}</span>
                            </div>
                        @endif

                        @if($lead->notes)
                            <div class="col-12">
                                <span class="text-secondary fs-13 d-block">Notes</span>
                                <p class="mb-0">{{ $lead->notes }}</p>
                            </div>
                        @endif

                        @if($lead->duplicate_of)
                            <div class="col-12">
                                <div class="alert alert-warning mb-0">
                                    This lead may be a duplicate of lead #{{ $lead->duplicate_of }}.
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card bg-white border-0 rounded-3 mb-4">
                <div class="card-body p-4">
                    <div class="border-bottom pb-3 mb-4">
                        <h5 class="mb-1">Interaction Timeline</h5>
                        <span class="text-secondary fs-13">Complete activity log for this lead.</span>
                    </div>

                    @forelse($lead->interactions as $interaction)
                        @php
                            $icons = [
                                'call' => ['icon' => 'call', 'color' => 'success'],
                                'message' => ['icon' => 'chat', 'color' => 'primary'],
                                'note' => ['icon' => 'sticky_note_2', 'color' => 'secondary'],
                                'status_change' => ['icon' => 'change_circle', 'color' => 'warning'],
                                'reassignment' => ['icon' => 'swap_horiz', 'color' => 'info'],
                                'document' => ['icon' => 'description', 'color' => 'dark'],
                            ];
                            $meta = $icons[$interaction->type] ?? ['icon' => 'info', 'color' => 'secondary'];
                        @endphp

                        <div class="d-flex gap-3 {{ $loop->last ? '' : 'mb-4 pb-4 border-bottom' }}">
                            <div class="flex-shrink-0">
                                <div class="bg-{{ $meta['color'] }} bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 42px; height: 42px;">
                                    <span class="material-symbols-outlined text-{{ $meta['color'] }} fs-18">{{ $meta['icon'] }}</span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                                    <strong class="fs-14">{{ $interaction->user->name ?? 'System' }}</strong>
                                    <span class="text-secondary fs-12">{{ $interaction->created_at->format('d M Y, h:i A') }}</span>
                                </div>
                                <p class="mb-0 mt-2 text-secondary">{{ $interaction->note }}</p>
                            </div>
                        </div>
                    @empty
                        <p class="text-secondary mb-0">No interactions logged yet.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-xxl-4">
            @if($canInteract)
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <div class="border-bottom pb-3 mb-4">
                            <h5 class="mb-1">Log Interaction</h5>
                            <span class="text-secondary fs-13">Add a quick update for the lead activity trail.</span>
                        </div>

                        <form method="POST" action="{{ route($routePrefix . '.leads.interactions.store', $lead) }}">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Type</label>
                                <select name="type" class="form-select">
                                    <option value="note">Note</option>
                                    <option value="call">Call</option>
                                    <option value="message">Message</option>
                                    <option value="document">Document</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Details <span class="text-danger">*</span></label>
                                <textarea name="note" class="form-control" rows="4" placeholder="What happened?" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary w-100 py-2">Log Interaction</button>
                        </form>
                    </div>
                </div>
            @endif

            <div class="card bg-white border-0 rounded-3">
                <div class="card-body p-4">
                    <div class="border-bottom pb-3 mb-4">
                        <h5 class="mb-1">Stage Progress</h5>
                        <span class="text-secondary fs-13">Current position in the sales pipeline.</span>
                    </div>

                    @foreach($stages as $index => $stage)
                        <div class="d-flex align-items-center gap-2 {{ $loop->last ? '' : 'mb-3' }}">
                            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 {{ $index < $currentStage ? 'bg-success' : ($index === $currentStage ? 'bg-primary' : 'bg-light border') }}" style="width: 30px; height: 30px;">
                                @if($index < $currentStage)
                                    <span class="material-symbols-outlined text-white fs-14">check</span>
                                @elseif($index === $currentStage)
                                    <span class="material-symbols-outlined text-white fs-14">radio_button_checked</span>
                                @else
                                    <span class="text-muted fs-12">{{ $index + 1 }}</span>
                                @endif
                            </div>
                            <span class="fs-14 {{ $index === $currentStage ? 'fw-semibold text-dark' : 'text-secondary' }}">{{ $stage }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection