@props(['metrics' => [], 'title' => 'Conversion Metrics'])

@php
    $approvalRate = $metrics['application_approval_rate'] ?? null;
    $approved = (int) ($metrics['approved_applications'] ?? 0);
    $declined = (int) ($metrics['declined_applications'] ?? 0);
    $approvedToDelivered = $metrics['approved_to_delivered_rate'] ?? null;
    $deliveredFromApproved = (int) ($metrics['delivered_from_approved'] ?? 0);
    $leadToDelivered = $metrics['lead_to_delivered_rate'] ?? null;
    $delivered = (int) ($metrics['delivered_count'] ?? 0);
    $newLeads = (int) ($metrics['new_leads_created'] ?? 0);
    $notTakenUp = (int) ($metrics['approved_not_taken_up_count'] ?? 0);

    $formatRate = fn (?float $rate): string => $rate !== null ? number_format((int) round($rate), 0).'%' : '—';

    $rateStatus = fn (?float $rate): string => match (true) {
        $rate === null => 'neutral',
        $rate >= 70 => 'green',
        $rate >= 40 => 'yellow',
        default => 'red',
    };

    $notTakenUpPercent = $approved > 0
        ? min(100, (int) round(($notTakenUp / $approved) * 100))
        : 0;
    $notTakenUpStatus = $notTakenUp > 0 ? 'amber' : 'green';
@endphp

<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5 space-y-4">
    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">{{ $title }}</h3>
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
        <x-dashboard.circular-metric
            title="App Approval Rate"
            :center-value="$formatRate($approvalRate)"
            :percentage="$approvalRate ?? 0"
            :status="$rateStatus($approvalRate)"
            size="compact"
        >
            <x-slot name="footer">
                <p class="text-xs font-semibold text-gray-700">Approved {{ $approved }} / Declined {{ $declined }}</p>
            </x-slot>
        </x-dashboard.circular-metric>

        <x-dashboard.circular-metric
            title="Approved to Delivered"
            :center-value="$formatRate($approvedToDelivered)"
            :percentage="$approvedToDelivered ?? 0"
            :status="$rateStatus($approvedToDelivered)"
            size="compact"
        >
            <x-slot name="footer">
                <p class="text-xs font-semibold text-gray-700">Delivered {{ $deliveredFromApproved }} / Approved {{ $approved }}</p>
            </x-slot>
        </x-dashboard.circular-metric>

        <x-dashboard.circular-metric
            title="Lead to Delivered"
            :center-value="$formatRate($leadToDelivered)"
            :percentage="$leadToDelivered ?? 0"
            :status="$rateStatus($leadToDelivered)"
            size="compact"
        >
            <x-slot name="footer">
                <p class="text-xs font-semibold text-gray-700">Delivered {{ $delivered }} / New Leads {{ $newLeads }}</p>
            </x-slot>
        </x-dashboard.circular-metric>

        <x-dashboard.circular-metric
            title="Approved Not Taken Up"
            :center-value="(string) $notTakenUp"
            :percentage="$notTakenUpPercent"
            :status="$notTakenUpStatus"
            size="compact"
        >
            <x-slot name="footer">
                <p class="text-xs font-semibold text-gray-700">Approved deals not delivered</p>
            </x-slot>
        </x-dashboard.circular-metric>
    </div>
</div>