@php
    /**
     * One unit of work on the products board: a product, a compiled unit, or one
     * piece of a product that has been split.
     *
     * Rendered in two settings, because a piece IS a unit of work and reading
     * differently would suggest otherwise:
     *
     *   $compact = false  a product standing on its own, in its own card on the
     *                     page.
     *   $compact = true   a piece, in its own card on its parent product's
     *                     surface. Tighter, with a status bar across the top and
     *                     its secondary actions reduced to icons — a piece is
     *                     read three or four at a time, so the same seven text
     *                     links that are fine once become noise.
     */
    $meta = $statusMeta[$unit['status']] ?? $statusMeta['pending'];
    $overdue = $unit['due_date'] && $unit['status'] !== 'done' && $unit['due_date']->isPast();
    $marginTone = $unit['revenue'] <= 0
        ? 'slate'
        : ($unit['margin'] >= 30 ? 'emerald' : ($unit['margin'] >= 10 ? 'amber' : 'rose'));
    $marginPill = [
        'emerald' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
        'amber'   => 'bg-amber-50 text-amber-700 ring-amber-200',
        'rose'    => 'bg-rose-50 text-rose-700 ring-rose-200',
        'slate'   => 'bg-slate-100 text-slate-500 ring-slate-200',
    ][$marginTone];

    $noteCount = $unit['part_id'] ? ($partNoteCounts[$unit['part_id']] ?? 0) : 0;
    $fileCount = $unit['part_id'] ? ($partFileCounts[$unit['part_id']] ?? 0) : 0;
    $canTick = $canUpdate && count($units) > 1 && ! $unit['is_group'] && ! $unit['is_part'];

    $pad = $compact ? 'px-3.5' : 'px-4 sm:px-5';
@endphp

<div class="flex h-full flex-col">
    @if ($compact)
        {{-- Where this piece has got to, readable before anything is read. --}}
        <span class="block h-1 w-full shrink-0 {{ $meta['bar'] }}"></span>
    @endif

    {{-- Head --}}
    <div class="flex items-start gap-3 {{ $pad }} {{ $compact ? 'pt-3' : 'border-b border-slate-100 py-4 sm:py-5' }}">
        @if ($canTick)
            <input type="checkbox" wire:model.live="selected" value="{{ $unit['line_ids'][0] }}"
                   class="mt-1 h-4 w-4 shrink-0 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                   title="{{ __('Select to compile with another product') }}" />
        @endif

        <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
                @if ($compact)
                    <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-slate-100 text-[10px] font-bold text-slate-500">{{ $unit['part_index'] }}</span>
                @endif

                <h3 class="truncate {{ $compact ? 'text-sm' : 'text-sm' }} font-semibold text-slate-900">{{ $unit['label'] }}</h3>

                @if ($unit['is_group'])
                    <x-badge color="violet" title="{{ __('These products are made together and move as one') }}">
                        <x-icon name="squares-2x2" class="h-3 w-3" />
                        {{ trans_choice('[2,*] :count products', count($unit['line_ids']), ['count' => count($unit['line_ids'])]) }}
                    </x-badge>
                @endif

                <x-badge :color="$meta['color']">
                    <x-icon :name="$meta['icon']" class="h-3 w-3" />{{ $meta['label'] }}
                </x-badge>

                {{-- On a hybrid job every product says where it is made; on any
                     other job the job itself already answers for all of them. --}}
                @if ($isHybrid)
                    @if ($unit['is_outsourced'])
                        <x-badge color="rose" title="{{ __('This product is made by an outsourcing partner') }}">
                            <x-icon name="truck" class="h-3 w-3" />
                            {{ $unit['partner']?->name ?: __('Outsourced') }}
                        </x-badge>
                    @else
                        <x-badge color="slate" title="{{ __('This product is made in-house') }}">
                            <x-icon name="home" class="h-3 w-3" />{{ __('In-house') }}
                        </x-badge>
                    @endif
                @endif
            </div>

            <div class="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-slate-500">
                <span class="tabular-nums">{{ rtrim(rtrim(number_format($unit['qty'], 2), '0'), '.') }} {{ __('units') }}</span>

                @if ($unit['due_date'])
                    <span class="inline-flex items-center gap-1 {{ $overdue ? 'font-semibold text-rose-600' : '' }}">
                        <x-icon name="calendar" class="h-3.5 w-3.5" />
                        {{ $unit['due_date']->format('j M Y') }}{{ $overdue ? ' · '.__('overdue') : '' }}
                    </span>
                @endif

                @if ($unit['assignee'])
                    <span class="inline-flex items-center gap-1.5">
                        <span class="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-100 text-[9px] font-bold text-indigo-700">{{ $initials($unit['assignee']->name) }}</span>
                        {{ $unit['assignee']->name }}
                    </span>
                @endif

                @if ($unit['hours'] > 0)
                    <span class="inline-flex items-center gap-1" title="{{ __('Time logged against this') }}">
                        <x-icon name="clock" class="h-3.5 w-3.5" />{{ number_format($unit['hours'], 2) }} h
                    </span>
                @endif

                @if ($unit['cost_rows'] > 0)
                    <span class="inline-flex items-center gap-1">
                        <x-icon name="banknotes" class="h-3.5 w-3.5" />
                        {{ trans_choice('{1} :count cost|[2,*] :count costs', $unit['cost_rows'], ['count' => $unit['cost_rows']]) }}
                    </span>
                @endif
            </div>
        </div>
    </div>

    {{-- Body --}}
    <div class="flex-1 space-y-3 {{ $pad }} {{ $compact ? 'py-3' : 'py-4 sm:py-5' }}">
        {{-- Progress --}}
        <div>
            <div class="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-slate-400">
                <span>{{ __('Progress') }}</span>
                <span class="tabular-nums text-slate-600">{{ $unit['progress'] }}%</span>
            </div>
            <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
                <div class="h-full rounded-full {{ $meta['bar'] }} transition-all" style="width: {{ max(2, (int) $unit['progress']) }}%"></div>
            </div>
        </div>

        {{-- Members of a compiled unit --}}
        @if ($unit['is_group'])
            <div class="flex flex-wrap gap-1.5">
                @foreach ($unit['lines'] as $member)
                    <span class="inline-flex items-center gap-1 rounded-lg bg-slate-50 px-2 py-1 text-[11px] text-slate-600 ring-1 ring-slate-200">
                        <x-icon name="cube" class="h-3 w-3 text-slate-400" />{{ $member['line']->name }}
                    </span>
                @endforeach
            </div>
        @endif

        {{-- Money --}}
        @if ($canSeeMoney)
            <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-slate-50 px-2.5 py-2">
                <div class="flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-slate-500">
                    <span>{{ __('Rev') }} <span class="font-semibold tabular-nums text-slate-700">{{ number_format($unit['revenue'], 2) }}</span></span>
                    <span>{{ __('Cost') }}
                        <span class="font-semibold tabular-nums {{ $unit['has_cost'] ? 'text-slate-700' : 'text-amber-600' }}">
                            {{ $unit['has_cost'] ? number_format($unit['cost'], 2) : __('none') }}
                        </span>
                    </span>
                    <span>{{ __('GP') }} <span class="font-semibold tabular-nums {{ $unit['profit'] >= 0 ? 'text-slate-900' : 'text-rose-600' }}">{{ number_format($unit['profit'], 2) }}</span></span>
                </div>
                <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1 tabular-nums {{ $marginPill }}">
                    {{ $unit['revenue'] > 0 ? number_format($unit['margin'], 1).'%' : '—' }}
                    @if ($unit['is_estimated'])
                        <x-icon name="exclamation-triangle" class="h-3 w-3 opacity-70" title="{{ __('Includes a share of costs logged against the whole job or the whole product.') }}" />
                    @endif
                </span>
            </div>
        @endif

        {{-- Notes --}}
        @if ($unit['notes'])
            <p class="rounded-lg border border-amber-100 bg-amber-50/60 px-2.5 py-2 text-[11px] leading-relaxed text-amber-800">{{ $unit['notes'] }}</p>
        @endif
    </div>

    {{-- Actions --}}
    @if ($canUpdate)
        @php
            // Everything that is not "move this along" is an icon on a piece and
            // a word on a product. Same actions, same order, either way.
            $tools = [];

            if (! $unit['is_group']) {
                $tools[] = ['icon' => 'paper-clip', 'label' => __('Files'), 'count' => $fileCount,
                            'wire' => "openFiles('".$unit['key']."')", 'tone' => $fileCount ? 'text-indigo-600' : 'text-slate-400'];
                $tools[] = ['icon' => 'sticky-note', 'label' => __('Notes'), 'count' => $noteCount,
                            'wire' => "openNotes('".$unit['key']."')", 'tone' => $noteCount ? 'text-amber-500' : 'text-slate-400'];
            }

            if ($canAddCost) {
                $tools[] = ['icon' => 'banknotes', 'label' => __('Add cost'), 'count' => 0, 'tone' => 'text-slate-400',
                            'click' => "tab = 'financials'; \$dispatch('add-cost-for-product', { lineItem: ".$unit['line_ids'][0].", part: ".($unit['part_id'] ?? 'null')." })"];
            }

            if (! $unit['is_group']) {
                $tools[] = ['icon' => 'clock', 'label' => __('Track time'), 'count' => 0, 'tone' => 'text-slate-400',
                            'click' => "tab = 'time'; \$dispatch('track-time-for-product', { lineItem: ".$unit['line_ids'][0].", part: ".($unit['part_id'] ?? 'null')." })"];
            }

            $tools[] = ['icon' => 'pencil-square', 'label' => __('Edit'), 'count' => 0, 'tone' => 'text-slate-400',
                        'wire' => "edit('".$unit['key']."')"];
        @endphp

        <div class="mt-auto flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 {{ $compact ? 'bg-slate-50/60 px-3 py-2' : 'bg-slate-50/60 px-4 py-3 sm:px-5' }}">
            <div class="flex flex-wrap items-center gap-1.5">
                @if ($unit['status'] !== 'in_production' && $unit['status'] !== 'done')
                    <button type="button" wire:click="setStatus('{{ $unit['key'] }}', 'in_production')"
                            class="inline-flex items-center gap-1 rounded-lg border border-sky-200 bg-white px-2.5 py-1.5 text-[11px] font-semibold text-sky-700 transition hover:bg-sky-50">
                        <x-icon name="play" class="h-3.5 w-3.5" />{{ __('Start') }}
                    </button>
                @endif
                @if ($unit['status'] !== 'done')
                    <button type="button" wire:click="setStatus('{{ $unit['key'] }}', 'done')"
                            class="inline-flex items-center gap-1 rounded-lg border border-emerald-200 bg-white px-2.5 py-1.5 text-[11px] font-semibold text-emerald-700 transition hover:bg-emerald-50">
                        <x-icon name="check" class="h-3.5 w-3.5" />{{ __('Mark done') }}
                    </button>
                @else
                    <button type="button" wire:click="setStatus('{{ $unit['key'] }}', 'in_production')"
                            class="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-[11px] font-medium text-slate-600 transition hover:bg-slate-50">
                        <x-icon name="arrow-uturn-left" class="h-3.5 w-3.5" />{{ __('Reopen') }}
                    </button>
                @endif
            </div>

            <div class="flex flex-wrap items-center {{ $compact ? 'gap-0.5' : 'gap-3 text-xs font-medium' }}">
                @foreach ($tools as $tool)
                    @if ($compact)
                        <button type="button"
                                @if (isset($tool['wire'])) wire:click="{{ $tool['wire'] }}" @else @click="{{ $tool['click'] }}" @endif
                                title="{{ $tool['label'] }}{{ $tool['count'] ? ' ('.$tool['count'].')' : '' }}"
                                class="relative inline-flex h-7 w-7 items-center justify-center rounded-lg transition hover:bg-white hover:text-indigo-600 {{ $tool['tone'] }}">
                            <x-icon :name="$tool['icon']" class="h-3.5 w-3.5" />
                            @if ($tool['count'])
                                <span class="absolute -right-0.5 -top-0.5 inline-flex h-3.5 min-w-[0.875rem] items-center justify-center rounded-full bg-slate-900 px-1 text-[9px] font-bold leading-none text-white">{{ $tool['count'] }}</span>
                            @endif
                            <span class="sr-only">{{ $tool['label'] }}</span>
                        </button>
                    @else
                        <button type="button"
                                @if (isset($tool['wire'])) wire:click="{{ $tool['wire'] }}" @else @click="{{ $tool['click'] }}" @endif
                                class="inline-flex items-center gap-1 transition hover:text-indigo-700 {{ $tool['count'] ? 'text-indigo-600' : 'text-slate-500' }}">
                            <x-icon :name="$tool['icon']" class="h-3.5 w-3.5" />{{ $tool['label'] }}@if ($tool['count']) <span class="font-semibold">({{ $tool['count'] }})</span>@endif
                        </button>
                    @endif
                @endforeach

                @if ($unit['is_group'])
                    <button type="button" wire:click="breakApart('{{ $unit['group_key'] }}')"
                            wire:confirm="{{ __('Break this unit apart? Each product goes back to being managed on its own.') }}"
                            class="text-rose-600 transition hover:text-rose-700">{{ __('Break apart') }}</button>
                @elseif (! $unit['is_part'])
                    <button type="button" wire:click="openSplit('{{ $unit['key'] }}')" class="text-slate-500 transition hover:text-indigo-600">
                        {{ __('Split into pieces') }}
                    </button>
                @endif
            </div>
        </div>
    @endif
</div>