Transactions

@props([
    'title' => null,
    'transactions' => null,
    'actionLabel' => null,
    'actionHref' => null,
    'limit' => null,
])

{{--
    Transactions List — the compact "Transactions" dashboard panel: a tray
    frame (swap icon, title, "View all" action) around a divided list of
    merchant rows. This is the at-a-glance companion to the full
    data-tables-transactions table, not a replacement for it.

    Rows are composed directly (avatar + two-line text + two-line trailing
    stack) rather than nesting <x-ui.list-panel> inside the tray's well:
    list-panel wraps its rows in its own <x-ui.card>, and the tray well is
    already a bg-card/border/shadow surface, so the two would stack into a
    visible double frame (border-on-border, shadow-on-shadow). Composing the
    <ul>/<li> here — the same shape tray's own default preview uses for this
    exact panel — keeps a single frame, matching the reference layout.

    'amount' is an unsigned number; 'direction' ('in'|'out') supplies the
    sign, so every row formats identically ("-$220.36", "+$3,500.00") no
    matter what the caller passes — money-value doesn't have a "force a
    leading +" mode, so the sign is composed here instead. The sign always
    stays in the text; colour is never the only signal.
--}}

@php
    $title ??= __('Transactions');
    $actionLabel ??= __('View all');
    $actionHref ??= '#';

    // Fictional merchants only — no real brand names or logo marks in sample
    // data. Initials-fallback avatars are used here; the `logo` row key still
    // accepts a consumer-supplied image URL (see the loop below).
    $transactions ??= [
        ['name' => 'Northwind',      'type' => __('Subscription'), 'amount' => 220.36,  'direction' => 'out', 'time' => now()->subMinutes(2)->toIso8601String()],
        ['name' => 'Acme Cloud',     'type' => __('Subscription'), 'amount' => 110.00,  'direction' => 'out', 'time' => now()->subMinutes(10)->toIso8601String()],
        ['name' => 'Lumen Studio',   'type' => __('Subscription'), 'amount' => 49.00,   'direction' => 'out', 'time' => now()->subHours(2)->toIso8601String()],
        ['name' => 'Alex Dorsey',    'type' => __('Payment'),      'amount' => 220.36,  'direction' => 'out', 'time' => now()->subDay()->toIso8601String()],
        ['name' => 'Harbor Payroll', 'type' => __('Payment'),      'amount' => 3500.00, 'direction' => 'in',  'time' => now()->subMonths(2)->toIso8601String()],
    ];

    $rows = array_values((array) $transactions);
    if (is_numeric($limit)) {
        $rows = array_slice($rows, 0, max(0, (int) $limit));
    }
@endphp

<div data-slot="transactions-list" {{ $attributes->merge(['class' => 'min-w-0']) }}>
    <x-ui.tray :title="$title" :action-label="$actionLabel" action-href="{{ $actionHref }}" padding="none">
        <x-slot:icon>
            {{-- Swap / arrows — the same icon tray's own "Transactions" preview uses. --}}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 3 4 4-4 4" /><path d="M21 7H9" /><path d="m7 21-4-4 4-4" /><path d="M3 17h12" /></svg>
        </x-slot:icon>

        @if (count($rows) > 0)
            <ul role="list" class="divide-y divide-border">
                @foreach ($rows as $tx)
                    @php
                        $name = (string) ($tx['name'] ?? '');
                        $type = (string) ($tx['type'] ?? '');
                        $direction = ($tx['direction'] ?? 'out') === 'in' ? 'in' : 'out';
                        $amount = is_numeric($tx['amount'] ?? null) ? (float) $tx['amount'] : 0.0;
                        $amountText = ($direction === 'in' ? '+' : '-').'$'.number_format($amount, 2);
                        $time = $tx['time'] ?? null;
                        $logo = $tx['logo'] ?? null;
                        $href = $tx['href'] ?? null;
                        $tag = $href ? 'a' : 'div';

                        // Rows under a day old read as a relative label ("2 min ago");
                        // older rows read as an absolute date — the same split the
                        // reference panel uses between recent and historical rows.
                        $timeMode = 'relative';
                        if ($time) {
                            try {
                                $timeMode = \Illuminate\Support\Carbon::parse($time)->diffInHours(now()) < 24 ? 'relative' : 'date';
                            } catch (\Throwable) {
                                $timeMode = 'relative';
                            }
                        }
                    @endphp
                    <li data-slot="transactions-list-item" class="border-b border-border last:border-b-0">
                        <{{ $tag }}
                            @if ($href) href="{{ $href }}" @endif
                            @class([
                                'flex items-center gap-4 px-4 py-2',
                                'transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none' => $href,
                            ])
                        >
                            @if ($logo)
                                <x-ui.avatar size="sm" :src="$logo" :alt="$name" class="shrink-0" />
                            @else
                                <x-ui.avatar size="sm" :alt="$name" :fallback="mb_strtoupper(mb_substr($name, 0, 1))" class="shrink-0" />
                            @endif

                            <span class="min-w-0 flex-1">
                                <span class="block truncate text-sm font-medium text-foreground">{{ $name }}</span>
                                @if ($type !== '')
                                    <span class="block truncate text-xs text-muted-foreground">{{ $type }}</span>
                                @endif
                            </span>

                            <span class="ms-auto flex shrink-0 flex-col items-end gap-0.5">
                                <span class="whitespace-nowrap text-sm font-medium tabular-nums text-foreground">{{ $amountText }}</span>
                                @if ($time)
                                    <x-ui.relative-time :datetime="$time" :mode="$timeMode" class="whitespace-nowrap text-2xs text-muted-foreground" />
                                @endif
                            </span>
                        </{{ $tag }}>
                    </li>
                @endforeach
            </ul>
        @else
            <div class="p-6">
                <x-ui.empty variant="plain" size="sm">
                    <x-ui.empty.media variant="icon" size="sm">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 3 4 4-4 4" /><path d="M21 7H9" /><path d="m7 21-4-4 4-4" /><path d="M3 17h12" /></svg>
                    </x-ui.empty.media>
                    <x-ui.empty.title as="p">{{ __('No transactions yet') }}</x-ui.empty.title>
                    <x-ui.empty.description>{{ __('Transactions will show up here once they happen.') }}</x-ui.empty.description>
                </x-ui.empty>
            </div>
        @endif
    </x-ui.tray>
</div>