@php
    $dealColor = match($record->deal_status ?? 'Pending') {
        'Won'  => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
        'Lost' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
        default => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
    };

    $lastInteraction = $record->last_interaction
        ? \Carbon\Carbon::parse($record->last_interaction)->diffForHumans()
        : null;

    $isOld = $record->last_interaction
        && \Carbon\Carbon::parse($record->last_interaction)->diffInDays(now()) > 7;

    $actions = is_array($record->action) ? $record->action : (json_decode($record->action ?? '[]', true) ?: []);
    $lastAction = !empty($actions) ? last($actions) : null;

    $actionColor = match($lastAction) {
        'Offer'              => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
        'Sending Portfolio'  => 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
        'Active Chating'     => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
        'Meeting'            => 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
        'Waiting Response'   => 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
        'Follow Up'          => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
        default              => 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
    };
@endphp

<div
    id="{{ $record->getKey() }}"
    class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-3 cursor-grab active:cursor-grabbing select-none group"
    wire:click="recordClicked({{ $record->getKey() }}, [])"
>
    <div class="flex items-start justify-between gap-2 mb-2">
        <div class="font-medium text-sm text-gray-900 dark:text-white leading-tight truncate flex-1">
            {{ $record->client_name ?: '—' }}
        </div>
        <span class="shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium {{ $dealColor }}">
            {{ $record->deal_status ?? 'Pending' }}
        </span>
    </div>

    @if ($record->platform)
    <div class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate">
        {{ $record->platform->name }}
    </div>
    @endif

    @if ($record->price)
    <div class="text-xs font-mono font-semibold text-gray-700 dark:text-gray-300 mb-2">
        ${{ number_format($record->price, 2) }}
    </div>
    @endif

    @if ($lastAction)
    <div class="mb-2">
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium {{ $actionColor }}">
            <x-heroicon-m-bolt class="w-3 h-3 shrink-0" />
            {{ $lastAction }}
        </span>
        @if (count($actions) > 1)
        <span class="ml-1 text-xs text-gray-400 dark:text-gray-500">+{{ count($actions) - 1 }}</span>
        @endif
    </div>
    @endif

    @if ($record->next_action_plan)
    <div class="mb-2 flex items-start gap-1.5 rounded-lg bg-primary-50 dark:bg-primary-900/20 border border-primary-100 dark:border-primary-800/40 px-2.5 py-1.5">
        <x-heroicon-m-arrow-right-circle class="w-3.5 h-3.5 shrink-0 mt-0.5 text-primary-500" />
        <span class="text-xs text-primary-700 dark:text-primary-300 leading-snug">{{ $record->next_action_plan }}</span>
    </div>
    @endif

    @if ($lastInteraction)
    <div class="flex items-center gap-1 text-xs {{ $isOld ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500' }}">
        <x-heroicon-m-clock class="w-3 h-3 shrink-0" />
        {{ $lastInteraction }}
        @if ($isOld)
        <span class="font-semibold">· Follow up!</span>
        @endif
    </div>
    @else
    <div class="flex items-center gap-1 text-xs text-gray-300 dark:text-gray-600">
        <x-heroicon-m-clock class="w-3 h-3 shrink-0" />
        Belum ada interaksi
    </div>
    @endif
</div>