{{-- Notification Item - Professional Card Design --}}
{{-- Handles both SentNotification ($notification) and SentEmail ($email) models --}}
@php
    // Normalize data for both SentNotification and SentEmail models
    $isSentEmail = isset($email);
    $item = $isSentEmail ? $email : ($notification ?? null);
    
    if (!$item) return;
    
    $isEmail = $isSentEmail || ($item->notification_type ?? null) === 'email';
    $color = $isEmail ? 'info' : 'success';
    $iconName = $isEmail ? 'mail' : 'chat';
    
    // Determine if sent (SentEmail is always sent, SentNotification checks sent_at)
    $isSent = $isSentEmail || (bool) ($item->sent_at ?? false);
    
    // Get title/subject
    $title = $isSentEmail ? $item->subject : ($item->title ?? null);
    $content = $isSentEmail ? $item->body : ($item->content ?? '');
    
    // Get recipient info
    if ($isSentEmail) {
        $recipientName = $item->receiver?->name ?? $item->receiver?->fullname ?? $item->to ?? __('Unknown');
        $recipientEmail = $item->to;
        $recipientPhone = null;
    } else {
        $recipientName = $item->receiver?->name ?? $item->receiver?->fullname ?? __('Unknown');
        $recipientEmail = $item->receiver?->email ?? null;
        $recipientPhone = $item->receiver?->phone_mobile ?? null;
    }
    
    // Get sender info
    $sender = $isSentEmail ? $item->user : ($item->user ?? null);
    
    // Get date
    $date = $isSentEmail ? $item->created_at : ($item->sent_at ?? $item->created_at);
    
    // Has automation
    $hasAutomation = !$isSentEmail && ($item->notificationAutomation ?? null);
    
    // Unique key
    $itemKey = $isSentEmail ? "sent-email-{$item->id}" : "notification-{$item->id}";
@endphp

<div class="activity-card notification-card border-{{ $color }}" wire:key="{{ $itemKey }}" x-data="{ expanded: false }">
    {{-- Header --}}
    <div class="card-header">
        <div class="card-icon">
            <span class="icon-circle bg-{{ $color }}-dim">
                <x-ui.nicon :name="$iconName" class="text-{{ $color }}"/>
            </span>
        </div>

        <div class="card-content">
            <div class="card-badges">
                <span class="activity-badge bg-{{ $color }}-dim text-{{ $color }}">
                    {{ $isEmail ? __('Email') : __('SMS') }}
                </span>
                @if($hasAutomation)
                    <span class="activity-badge bg-warning-dim text-warning">
                        <x-ui.nicon name="repeat" class="me-1"/>
                        {{ __('Automation') }}
                    </span>
                @endif
                @if(!$isSent)
                    <span class="activity-badge bg-warning-dim text-warning">
                        <x-ui.nicon name="clock" class="me-1"/>
                        {{ __('Scheduled') }}
                    </span>
                @endif
            </div>

            <div class="card-title">
                @if($title)
                    {{ Str::limit($title, 80) }}
                @else
                    {{ Str::limit(strip_tags($content), 80) }}
                @endif
            </div>

            <div class="card-meta">
                <span class="meta-item">
                    <x-ui.nicon name="arrow-right"/>
                    <span>{{ __('To') }}:</span>
                    <strong>{{ $recipientName }}</strong>
                </span>
                @if($isEmail && $recipientEmail)
                    <span class="meta-item">
                        <x-ui.nicon name="mail"/>
                        <span>{{ Str::limit($recipientEmail, 40) }}</span>
                    </span>
                @elseif(!$isEmail && $recipientPhone)
                    <span class="meta-item">
                        <x-ui.nicon name="call"/>
                        <span>{{ $recipientPhone }}</span>
                    </span>
                @endif
                @if($sender)
                    <span class="meta-item">
                        <x-ui.nicon name="user-check"/>
                        <span>{{ __('By') }}:</span>
                        <strong>{{ $sender->fullname ?? $sender->name ?? __('Unknown') }}</strong>
                    </span>
                @endif
            </div>
        </div>

        <div class="card-time">
            @if(auth()->user()->is_admin_manager && ($ip = $item->ip ?? data_get($item, 'properties.ip')))
                <span class="time-ip text-muted" x-data="tooltip" title="{{ __('IP Address') }}">
                    <a href="https://www.iplocation.net/ip-lookup/{{ $ip }}" target="_blank" class="text-muted">
                        <x-ui.nicon name="globe" class="me-1"/>{{ $ip }}
                    </a>
                </span>
            @endif
            <span class="time-date">{{ $date->format('d/m/y') }}</span>
            <span class="time-hour">{{ $date->format('H:i') }}</span>
        </div>
    </div>

    <div class="card-actions">
        <x-ui.button
            color="outline-light"
            size="xs"
            icon="eye"
            x-on:click="expanded = !expanded"
        >
           <span>{{ __('Show preview') }}</span>
        </x-ui.button>
        @if($isSentEmail)
            <x-ui.button
                wire:click="$emit('showModal', 'modals.notifications.show-sent-email-modal', {{ $item->id }})"
                color="{{ $color }}"
                size="xs"
                icon="external"
                :label="__('View full')"
            />
        @else
            <x-ui.button
                wire:click="$emit('showModal', 'modals.notifications.show-sent-notification-modal', {{ $item->id }})"
                color="{{ $color }}"
                size="xs"
                icon="external"
                :label="__('View full')"
            />
        @endif
    </div>

    <div x-show="expanded" x-collapse>
        <div class="card-preview {{ $isEmail ? 'preview-email' : 'preview-sms' }}">
            @if($isEmail)
                {!! Str::limit(strip_tags($content), 500) !!}
            @else
                {{ Str::limit($content, 500) }}
            @endif
        </div>
    </div>
</div>