@php
    $profile = $data['profile'] ?? [];
    $metrics = $data['metrics'] ?? [];
    $lifetime = $data['lifetime'] ?? [];
    $customerId = $customer->id ?? null;
    $phone = $profile['phone'] ?? ($customer->phone ?? '');
    $initials = strtoupper(substr($profile['name'] ?? 'C', 0, 2));
    $waUrl = $phone && ($customer ?? null) ? \App\Services\WhatsAppService::buildCustomerLink($customer, 'offer_promo') : null;
    $createOrderUrl = route('admin.orders.create', array_filter(['phone' => $phone, 'name' => $profile['name'] ?? '']));
@endphp

@if(!empty($data['tier']))
<div class="ci-tier-bar mb-3 d-flex align-items-center flex-wrap gap-2">
    <span class="ci-tier-badge ci-tier-badge-lg {{ $data['tier']['css_class'] ?? 'ci-tier-regular' }}">
        <i class="fas {{ $data['tier']['icon'] ?? 'fa-user' }} me-1"></i>{{ $data['tier']['name'] ?? 'Regular' }}
        @if(!empty($data['tier']['manual']))
        <small class="ms-1">(Manual)</small>
        @endif
    </span>
    @can('customers.update')
    @if($customerId)
    <form method="POST" action="{{ route('admin.customers.tier', $customerId) }}" class="d-flex align-items-center gap-2">
        @csrf @method('PATCH')
        <select name="tier_override" class="form-select form-select-sm" style="width:auto;min-width:140px;" onchange="this.form.submit()">
            <option value="auto" {{ blank($customer->tier_override ?? null) ? 'selected' : '' }}>Auto tier</option>
            @foreach($data['tier_options'] ?? [] as $opt)
            <option value="{{ $opt['key'] }}" {{ ($customer->tier_override ?? '') === $opt['key'] ? 'selected' : '' }}>{{ $opt['name'] }}</option>
            @endforeach
        </select>
    </form>
    @endif
    @endcan
</div>
@endif

@if(!empty($data['tags']))
<div class="ci-tag-bar mb-3">
    @foreach($data['tags'] as $tag)
    <span class="ci-tag {{ $tag['class'] }}"><i class="fas {{ $tag['icon'] }} me-1"></i>{{ $tag['label'] }}</span>
    @endforeach
</div>
@endif

<div class="row g-3">
    <div class="col-xl-4">
        <div class="ci-card ci-profile-card h-100">
            <div class="ci-card-head"><i class="fas fa-user me-2"></i>Customer Profile</div>
            <div class="ci-card-body text-center">
                <div class="ci-avatar mx-auto mb-3">{{ $initials }}</div>
                <h5 class="fw-bold mb-1">{{ $profile['name'] ?? '—' }}</h5>
                <div class="text-muted small mb-3">
                    @if($customerId)
                    Customer #{{ $customerId }}
                    @else
                    Guest (orders only)
                    @endif
                    @if(!empty($profile['joined_at']))
                    · Since {{ \Carbon\Carbon::parse($profile['joined_at'])->format('M Y') }}
                    @endif
                </div>
                <div class="ci-profile-list text-start">
                    <div class="ci-profile-row"><span>ফোন</span><strong>{{ $phone ?: '—' }}</strong></div>
                    <div class="ci-profile-row"><span>ইমেইল</span><strong>{{ $profile['email'] ?: '—' }}</strong></div>
                    <div class="ci-profile-row"><span>এলাকা</span><strong>{{ trim(($profile['upazila'] ?? '') . ', ' . ($profile['district'] ?? ''), ', ') ?: '—' }}</strong></div>
                    <div class="ci-profile-row"><span>চ্যানেল</span><strong>{{ $profile['channels'] ?? '—' }}</strong></div>
                    <div class="ci-profile-row"><span>জন্মদিন</span><strong>
                        @if(!empty($profile['birthday']))
                        @if(!empty($profile['birthday_today']))
                        <span class="text-success"><i class="fas fa-birthday-cake me-1"></i>{{ $profile['birthday'] }} (Today!)</span>
                        @else
                        {{ $profile['birthday'] }}
                        @if(!empty($profile['days_to_birthday']) && $profile['days_to_birthday'] <= 14)
                        <small class="text-warning">({{ $profile['days_to_birthday'] }}d left)</small>
                        @endif
                        @endif
                        @elseif($customerId)
                        <span class="text-muted">Not set — <a href="{{ route('admin.customers.edit', $customerId) }}">Add</a></span>
                        @else
                        —
                        @endif
                    </strong></div>
                    <div class="ci-profile-row"><span>শেষ অ্যাক্টিভ</span><strong>{{ !empty($profile['last_active']) ? \Carbon\Carbon::parse($profile['last_active'])->diffForHumans() : '—' }}</strong></div>
                    <div class="ci-profile-row"><span>রেটিং</span><strong>
                        @if(!empty($profile['rating']))
                        {{ $profile['rating'] }} <small class="text-muted">({{ $profile['review_count'] }} reviews)</small>
                        @else
                        —
                        @endif
                    </strong></div>
                </div>
                <div class="d-grid gap-2 mt-3">
                    @if($waUrl)
                    <a href="{{ $waUrl }}" target="_blank" class="btn btn-success btn-sm"><i class="fab fa-whatsapp me-1"></i> Message পাঠান</a>
                    @endif
                    @if($customerId)
                    <a href="{{ route('admin.customers.edit', $customerId) }}" class="btn btn-outline-primary btn-sm"><i class="fas fa-edit me-1"></i> Edit</a>
                    @endif
                    @can('customers.block')
                    @if($activeBlock ?? null)
                    <form action="{{ route('admin.customers.unblock', $activeBlock->id) }}" method="POST" onsubmit="return confirm('Unblock?');">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-success btn-sm w-100"><i class="fas fa-unlock me-1"></i> Unblock</button>
                    </form>
                    @elseif($customer ?? null)
                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#blockCustomerModal"><i class="fas fa-ban me-1"></i> Block</button>
                    @elseif($phone)
                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#blockGuestModal"><i class="fas fa-ban me-1"></i> Block</button>
                    @endif
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-8">
        <div class="ci-card mb-3">
            <div class="ci-card-head"><i class="fas fa-wallet me-2"></i>Spending Overview</div>
            <div class="ci-card-body">
                <div class="row g-2 ci-metrics">
                    <div class="col-md-4 col-6">
                        <div class="ci-metric"><div class="ci-metric-label">মোট খরচ</div><div class="ci-metric-value">৳{{ number_format($metrics['total_spend'] ?? 0) }}</div></div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="ci-metric"><div class="ci-metric-label">মোট অর্ডার</div><div class="ci-metric-value">{{ $metrics['total_orders'] ?? 0 }}</div></div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="ci-metric"><div class="ci-metric-label">গড় অর্ডার মূল্য</div><div class="ci-metric-value">৳{{ number_format($metrics['avg_order_value'] ?? 0) }}</div></div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="ci-metric"><div class="ci-metric-label">Purchase Rate</div><div class="ci-metric-value">{{ $metrics['purchase_rate'] ?? 0 }}/mo</div></div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="ci-metric"><div class="ci-metric-label">শেষ অর্ডার</div><div class="ci-metric-value">৳{{ number_format($metrics['last_order_amount'] ?? 0) }}</div>
                        <div class="ci-metric-sub">{{ !empty($metrics['last_order_at']) ? \Carbon\Carbon::parse($metrics['last_order_at'])->diffForHumans() : '—' }}</div></div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="ci-metric"><div class="ci-metric-label">Return Rate</div><div class="ci-metric-value">{{ $metrics['return_rate'] ?? 0 }}%</div></div>
                    </div>
                </div>
                <div class="ci-ltv mt-3">
                    <div class="d-flex justify-content-between small mb-1">
                        <span>{{ $lifetime['label'] ?? 'Tier Progress' }}</span>
                        @if(($lifetime['mode'] ?? 'spend') === 'orders')
                        <span>{{ number_format($lifetime['spent'] ?? 0) }} / {{ number_format($lifetime['goal'] ?? 0) }} orders</span>
                        @else
                        <span>৳{{ number_format($lifetime['spent'] ?? 0) }} / ৳{{ number_format($lifetime['goal'] ?? 0) }}</span>
                        @endif
                    </div>
                    <div class="progress" style="height:10px;border-radius:999px;">
                        <div class="progress-bar bg-success" style="width:{{ $lifetime['progress'] ?? 0 }}%"></div>
                    </div>
                    <div class="small text-muted mt-1">
                        @if(($lifetime['mode'] ?? 'spend') === 'orders')
                        {{ $lifetime['label'] ?? 'Next tier' }} — {{ number_format($lifetime['remaining'] ?? 0) }} orders বাকি
                        @else
                        {{ $lifetime['label'] ?? 'Next tier' }} — ৳{{ number_format($lifetime['remaining'] ?? 0) }} বাকি
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="ci-insight mb-3">
            <i class="fas fa-lightbulb me-2"></i>
            <strong>Insight:</strong> {{ $data['insight'] ?? '' }}
        </div>
        @if(!empty($data['ai_insight']))
        <div class="ci-insight ci-insight-ai mb-3">
            <i class="fas fa-robot me-2"></i>
            <strong>AI Insight:</strong> {{ $data['ai_insight'] }}
        </div>
        @elseif(!empty($data['ai_enabled']) && empty($data['ai_configured']))
        <div class="ci-insight ci-insight-muted mb-3">
            <i class="fas fa-robot me-2"></i>
            <strong>AI Insight:</strong> Global AI configure করুন (Social Automation → Global AI) অথবা Insights Settings থেকে off রাখুন।
        </div>
        @endif
    </div>
</div>

<div class="row g-3 mt-1">
    <div class="col-lg-8">
        <div class="ci-card mb-3">
            <div class="ci-card-head"><i class="fas fa-chart-bar me-2"></i>Purchase Trend — শেষ ৬ মাস</div>
            <div class="ci-card-body"><canvas id="ciTrendChart" height="120"></canvas></div>
        </div>

        <div class="ci-card">
            <div class="ci-card-head d-flex justify-content-between align-items-center">
                <span><i class="fas fa-receipt me-2"></i>Order History</span>
                @if(($data['orders_total'] ?? 0) > 8)
                <a href="{{ route('admin.orders.index', ['search' => $phone]) }}" class="small">সব অর্ডার দেখুন ↗</a>
                @endif
            </div>
            <div class="ci-card-body p-0">
                @forelse($data['orders'] ?? [] as $order)
                @php
                    $badge = \App\Services\CustomerInsightsService::statusBadge((int) $order->order_status);
                    $itemNames = $order->items->pluck('product_name')->take(3)->implode(', ');
                @endphp
                <div class="ci-order-row">
                    <div>
                        <a href="{{ route('admin.orders.show', $order->id) }}" class="fw-bold text-decoration-none">#{{ $order->invoice_id ?? $order->id }}</a>
                        <span class="text-muted small ms-2">{{ $order->created_at?->format('d M') }}</span>
                        <div class="small text-muted">{{ Str::limit($itemNames, 50) ?: '—' }}</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold">৳{{ number_format($order->amount) }}</div>
                        <span class="ci-status {{ $badge['class'] }}">{{ $badge['label'] }}</span>
                    </div>
                </div>
                @empty
                <div class="p-4 text-center text-muted">No orders yet.</div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="ci-card mb-3">
            <div class="ci-card-head"><i class="fas fa-redo me-2"></i>Quick Reorder</div>
            <div class="ci-card-body">
                @forelse($data['top_products'] ?? [] as $product)
                <div class="ci-reorder-item">
                    <div class="d-flex align-items-center gap-2 flex-grow-1">
                        @if($product['thumbnail'])
                        <img src="{{ $product['thumbnail'] }}" alt="" class="ci-reorder-thumb">
                        @else
                        <div class="ci-reorder-thumb ci-reorder-thumb-empty"><i class="fas fa-box"></i></div>
                        @endif
                        <div>
                            <div class="fw-semibold small">{{ Str::limit($product['name'], 28) }}</div>
                            <div class="text-muted" style="font-size:11px">{{ $product['total_qty'] }} বার কিনেছেন</div>
                        </div>
                    </div>
                    <a href="{{ $createOrderUrl }}" class="btn btn-sm btn-outline-success"><i class="fas fa-cart-plus"></i></a>
                </div>
                @empty
                <div class="text-muted small">No products yet.</div>
                @endforelse
            </div>
        </div>

        <div class="ci-card mb-3">
            <div class="ci-card-head"><i class="fas fa-bell me-2"></i>Reminders</div>
            <div class="ci-card-body">
                @forelse($data['reminders'] ?? [] as $reminder)
                <div class="ci-reminder ci-reminder-{{ $reminder['level'] }}">
                    <div class="fw-semibold small"><i class="fas {{ $reminder['icon'] }} me-1"></i>{{ $reminder['title'] }}</div>
                    <div class="small">{{ $reminder['body'] }}</div>
                    <div class="ci-reminder-foot"><i class="far fa-clock me-1"></i>{{ $reminder['footer'] }}</div>
                </div>
                @empty
                <div class="text-muted small">No reminders right now.</div>
                @endforelse
            </div>
        </div>

        <div class="ci-card">
            <div class="ci-card-head"><i class="fas fa-tags me-2"></i>Customer Tags</div>
            <div class="ci-card-body">
                <div class="small text-muted mb-2">Active Tags</div>
                <div class="d-flex flex-wrap gap-2 mb-3">
                    @forelse($data['tags'] ?? [] as $tag)
                    <span class="ci-tag {{ $tag['class'] }}">
                        <i class="fas {{ $tag['icon'] }} me-1"></i>{{ $tag['label'] }}
                        @if(!empty($tag['manual']) && !empty($tag['assignment_id']))
                        @can('customers.update')
                        <form action="{{ route('admin.customer-tags.unassign', $tag['assignment_id']) }}" method="POST" class="d-inline ms-1" onsubmit="return confirm('Remove tag?');">
                            @csrf @method('DELETE')
                            <button type="submit" class="ci-tag-remove" title="Remove">&times;</button>
                        </form>
                        @endcan
                        @endif
                    </span>
                    @empty
                    <span class="text-muted small">Auto/manual tags will appear from order data.</span>
                    @endforelse
                </div>
                @can('customers.update')
                @if(!empty($data['available_tags']))
                <div class="small text-muted mb-2">Add manual tag</div>
                <div class="d-flex flex-wrap gap-2 mb-3">
                    @foreach($data['available_tags'] as $tag)
                    <form action="{{ route('admin.customer-tags.assign') }}" method="POST" class="d-inline">
                        @csrf
                        <input type="hidden" name="tag_id" value="{{ $tag->id }}">
                        @if($customerId)<input type="hidden" name="customer_id" value="{{ $customerId }}">@endif
                        @if($phone)<input type="hidden" name="phone" value="{{ $phone }}">@endif
                        <button type="submit" class="ci-tag ci-tag-add"><i class="fas {{ $tag->icon }} me-1"></i>+ {{ $tag->name }}</button>
                    </form>
                    @endforeach
                </div>
                @endif
                <a href="{{ route('admin.customer-tags.index') }}" class="small">Manage tags ↗</a>
                @endcan
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    const el = document.getElementById('ciTrendChart');
    if (!el || !window.Chart) return;
    const trend = @json($data['trend'] ?? ['labels'=>[], 'spend'=>[], 'counts'=>[]]);
    new Chart(el, {
        data: {
            labels: trend.labels,
            datasets: [
                {
                    type: 'bar',
                    label: 'Spend (৳)',
                    data: trend.spend,
                    backgroundColor: 'rgba(139, 92, 246, 0.55)',
                    borderRadius: 6,
                    yAxisID: 'y',
                },
                {
                    type: 'line',
                    label: 'Orders',
                    data: trend.counts,
                    borderColor: '#16a34a',
                    backgroundColor: 'transparent',
                    borderDash: [5, 5],
                    tension: 0.35,
                    yAxisID: 'y1',
                }
            ]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'bottom' } },
            scales: {
                y: { beginAtZero: true, position: 'left' },
                y1: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false } }
            }
        }
    });
})();
</script>
@endpush