@php
    // ---- Durum tespiti -------------------------------------------------------
    // Renk, etiket ve bilgilendirme tek bir durumdan türetilir. Eşik, uyarı
    // e-postası gönderim koşuluyla aynı kaynaktan (ALERT_THRESHOLD) gelir.
    $threshold = $alertThreshold ?? 100;

    if ($isLoading) {
        $state = 'loading';
    } elseif ($error) {
        $state = 'error';
    } elseif (!$hasCreditData) {
        $state = 'nodata';
    } elseif ($balance < 0) {
        $state = 'overdrawn';
    } elseif ($balance <= 0) {
        $state = 'depleted';
    } elseif ($balance <= $threshold) {
        $state = 'low';
    } else {
        $state = 'ok';
    }

    // ---- Tema ----------------------------------------------------------------
    // Tailwind sınıfları TAM METİN yazılır: "text-{{ $c }}-600" gibi parçalı
    // üretim JIT tarayıcısı tarafından bulunamaz ve sınıf hiç üretilmez.
    $themes = [
        'loading' => [
            'wrap' => 'from-slate-300/40 to-slate-100/30', 'text' => 'text-slate-500',
            'icon' => 'text-slate-400', 'badge' => 'bg-slate-200/70 text-slate-700',
            'label' => 'KONTROL EDİLİYOR', 'symbol' => 'toll',
        ],
        'error' => [
            'wrap' => 'from-slate-300/40 to-slate-100/30', 'text' => 'text-slate-600',
            'icon' => 'text-slate-400', 'badge' => 'bg-slate-200/70 text-slate-700',
            'label' => 'BAKİYE BİLİNMİYOR', 'symbol' => 'error',
        ],
        'nodata' => [
            'wrap' => 'from-slate-300/40 to-slate-100/30', 'text' => 'text-slate-600',
            'icon' => 'text-slate-400', 'badge' => 'bg-slate-200/70 text-slate-700',
            'label' => 'KREDİ KAYDI YOK', 'symbol' => 'help',
        ],
        'overdrawn' => [
            'wrap' => 'from-rose-300/40 to-rose-100/30', 'text' => 'text-rose-600',
            'icon' => 'text-rose-600', 'badge' => 'bg-rose-200/70 text-rose-800',
            'label' => 'BAKİYE AŞILDI', 'symbol' => 'report',
        ],
        'depleted' => [
            'wrap' => 'from-rose-300/40 to-rose-100/30', 'text' => 'text-rose-600',
            'icon' => 'text-rose-600', 'badge' => 'bg-rose-200/70 text-rose-800',
            'label' => 'BAKİYE TÜKENDİ', 'symbol' => 'block',
        ],
        'low' => [
            'wrap' => 'from-amber-300/40 to-amber-100/30', 'text' => 'text-amber-600',
            'icon' => 'text-amber-600', 'badge' => 'bg-amber-200/70 text-amber-800',
            'label' => 'BAKİYE DÜŞÜK', 'symbol' => 'toll',
        ],
        'ok' => [
            'wrap' => 'from-emerald-300/40 to-emerald-100/30', 'text' => 'text-emerald-600',
            'icon' => 'text-emerald-600', 'badge' => 'bg-emerald-200/70 text-emerald-800',
            'label' => 'BAKİYE YETERLİ', 'symbol' => 'toll',
        ],
    ];

    $theme = $themes[$state];

    // ---- Bilgilendirme satırı ------------------------------------------------
    // Gönderimi etkileyen sonuç + uyarı e-postasının durumu. Günlük cache engeli
    // nedeniyle ikinci e-posta gitmez; bu ayrım ekranda görünmelidir.
    $mailNote = ($alertSentToday ?? false)
        ? 'uyarı e-postası bugün gönderildi'
        : 'uyarı e-postası gönderilecek';

    // $hint ekrana sığdırılmış metin, $hintFull tooltip'te gösterilecek tam metin.
    $hintFull = null;

    switch ($state) {
        case 'error':
            // Tam hata metni tooltip'e taşınır ($hintFull), ekranda kısaltılır
            $hint = Str::limit($error, 34);
            $hintFull = $error;
            break;
        case 'nodata':
            $hint = 'API kredi kaydı döndürmedi';
            break;
        case 'overdrawn':
            $hint = 'Gönderim durduruldu · ' . $mailNote;
            break;
        case 'depleted':
            $hint = 'Gönderim durduruldu · ' . $mailNote;
            break;
        case 'low':
            $hint = 'Eşiğe ' . max(0, $threshold - (int) ceil($balance)) . ' kontör · ' . $mailNote;
            break;
        case 'ok':
            // Yeterli bakiyede ürün tipi bilgisi en değerli satır
            $hint = $detail ?: ('Eşiğin ' . ((int) ceil($balance) - $threshold) . ' kontör üzerinde');
            break;
        default:
            $hint = null;
    }

    // Sayı yalnızca gerçek bir kredi kaydı çözüldüğünde gösterilir; aksi halde
    // "0 KONTÖR" yanıltıcı olur (daha önce error dalında sabit 0 basılıyordu).
    $showNumber = !in_array($state, ['loading', 'error', 'nodata'], true);

    $tooltip = trim(
        'Son güncelleme: ' . ($refreshedAt ?? now()->format('H:i')) . ' · 60 sn\'de bir yenilenir'
        . ($threshold ? ' | Uyarı eşiği: ' . number_format($threshold, 0, ',', '.') . ' kontör' : '')
        . ($detail ? ' | Ürün: ' . $detail : '')
    );
@endphp

<div class="bg-white rounded-r-lg" wire:poll.60s="refresh">
    <div class="grid items-center h-full px-3 py-3 bg-gradient-to-b {{ $theme['wrap'] }} lg:rounded-r-lg"
        title="{{ $tooltip }}">
        <div class="flex items-center text-right">
            <div class="flex-1 w-0 mr-3">
                <dl class="{{ $theme['text'] }}">
                    @if($state === 'loading')
                    <dd class="text-base font-bold animate-pulse">
                        Yükleniyor...
                    </dd>
                    <dt class="text-xs font-light truncate">MEVCUT BAKİYE</dt>
                    <dt class="text-xs font-light truncate">---</dt>
                    @else
                    <dd class="text-base font-bold">
                        @if($showNumber)
                        {{ number_format($balance, 0, ',', '.') }} KONTÖR
                        @else
                        — KONTÖR
                        @endif
                    </dd>
                    <dt class="text-xs font-light truncate">
                        MEVCUT BAKİYE
                        <span
                            class="px-1.5 py-px ml-1 text-[10px] font-bold leading-tight tracking-wide whitespace-nowrap rounded {{ $theme['badge'] }}">
                            {{ $theme['label'] }}
                        </span>
                    </dt>
                    @if($hint)
                    <dt class="text-xs font-light truncate" title="{{ $hintFull ?: $hint }}">
                        {{ $hint }}
                    </dt>
                    @endif
                    @endif
                </dl>
            </div>
            <div class="flex-shrink-0">
                <span class="text-3xl material-symbols-rounded {{ $theme['icon'] }}">
                    {{ $theme['symbol'] }}
                </span>
            </div>
        </div>
    </div>
</div>