@php($assist = App\Services\Logic\Assist::class)
@php($isShow = ($mode ?? 'create') === 'show')
@php($hasAllocations = !empty($this->allocations))
@php($difference = $this->getDifference())
@php($isBalanced = $this->isBalanced())

<div class="mb-4">
    {{-- セクションヘッダー --}}
    <div class="flex items-center justify-between mb-2">
        <h3 class="text-lg font-semibold text-gray-700">
            <i class="fa-solid fa-shuffle mr-2" aria-hidden="true"></i>振分情報
            @if($hasAllocations)
            <span class="text-sm font-normal text-gray-500 ml-2">
                ({{ count($this->allocations) }}件の請求得意先)
            </span>
            @endif
        </h3>
        @if(!$isShow && $hasAllocations)
        <div class="flex gap-2">
            <button type="button"
                wire:click="suggestAllocations"
                class="px-3 py-1 text-sm rounded bg-primary-100 text-primary-700 hover:bg-primary-200 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500"
                title="入金合計を自動振分">
                <i class="fa-solid fa-wand-magic-sparkles mr-1" aria-hidden="true"></i>自動振分
            </button>
            <button type="button"
                wire:click="clearAllocations"
                class="px-3 py-1 text-sm rounded bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500"
                title="振分をクリア">
                <i class="fa-solid fa-eraser mr-1" aria-hidden="true"></i>クリア
            </button>
        </div>
        @endif
    </div>

    @if(!$hasAllocations)
    {{-- 得意先未選択時のメッセージ --}}
    <div class="p-4 bg-gray-50 rounded-lg text-center text-gray-500">
        <i class="fa-solid fa-circle-info mr-2" aria-hidden="true"></i>
        入金得意先を選択すると、振分候補が表示されます
    </div>
    @else
    {{-- 振分テーブル --}}
    <table class="entry-slip-detail-table-row w-full">
        <colgroup>
            <col class="w-8">       {{-- No --}}
            <col class="w-20">      {{-- コード --}}
            <col>                   {{-- 得意先名（残りスペース使用） --}}
            <col class="w-24">      {{-- 売掛残高 --}}
            <col class="w-28">      {{-- 振分金額 --}}
            @if(false) {{-- 消込機能一時非表示 --}}
            <col class="w-32">      {{-- 消込 --}}
            @endif
        </colgroup>
        <thead>
            <tr>
                <th class="whitespace-nowrap">No</th>
                <th class="whitespace-nowrap">コード</th>
                <th class="whitespace-nowrap">得意先名</th>
                <th class="whitespace-nowrap">売掛残高</th>
                <th class="required whitespace-nowrap">振分金額</th>
                @if(false) {{-- 消込機能一時非表示 --}}
                <th class="whitespace-nowrap">消込</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @foreach($this->allocations as $index => $row)
                @php($matchingStatus = $this->getAllocationMatchingStatus($index))
                @php($rowKey = 'alloc-' . $index . '-' . ($row['customer_id'] ?? '0'))
                @php($totalRemaining = $row['total_remaining'] ?? 0)

                <tr wire:key="{{ $rowKey }}">
                    {{-- No --}}
                    <td class="text-center">{{ $index + 1 }}</td>

                    {{-- 得意先コード --}}
                    <td class="text-center">
                        <span class="text-sm">{{ $row['customer_code'] ?? '' }}</span>
                    </td>

                    {{-- 得意先名 --}}
                    <td>
                        <span class="text-sm truncate block max-w-full" title="{{ $row['customer_name'] ?? '' }}">
                            {{ $row['customer_name'] ?? '' }}
                        </span>
                        <input type="hidden" name="allocations[{{ $index }}][customer_id]" value="{{ $row['customer_id'] ?? '' }}" />
                    </td>

                    {{-- 売掛残高 --}}
                    <td class="text-right pr-2">
                        @if($totalRemaining > 0)
                        <span class="text-blue-600" title="未消込の請求残高">
                            {{ num_format($totalRemaining) }}
                        </span>
                        @else
                        <span class="text-gray-400">-</span>
                        @endif
                    </td>

                    {{-- 振分金額 --}}
                    <td>
                        @if($isShow)
                        <x-input.row-item class="text-right" value="{{ num_format($row['amount'] ?? 0) }}" />
                        @else
                        <x-input.number
                            wire:model.blur="allocations.{{ $index }}.amount"
                            wire:change="onAllocationAmountChange({{ $index }})"
                            class="w-full text-right"
                            value="{{ num_format($row['amount'] ?? 0) }}" />
                        @endif
                    </td>

                    @if(false) {{-- 消込機能一時非表示 --}}
                    {{-- 消込ステータス --}}
                    <td>
                        <div class="flex items-center gap-2" role="group" aria-label="消込ステータス">
                            {{-- ステータスアイコン --}}
                            <span class="{{ $matchingStatus['class'] ?? 'text-gray-400' }}"
                                title="{{ $matchingStatus['label'] ?? '' }}"
                                role="status"
                                aria-label="{{ $matchingStatus['label'] ?? '消込ステータス不明' }}">
                                {{ $matchingStatus['icon'] ?? '⚪' }}
                            </span>

                            {{-- 消込ボタン（編集モードのみ & 金額が入力されている場合） --}}
                            @if(!$isShow && ($row['amount'] ?? 0) > 0)
                            <button type="button"
                                wire:click="selectAllocationForMatching({{ $index }})"
                                class="px-2 py-1 text-xs rounded bg-gray-200 text-gray-700 hover:bg-primary-100 hover:text-primary-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
                                title="消込詳細を開く"
                                aria-label="振分{{ $index + 1 }}の消込詳細を開く">
                                <i class="fa-solid fa-link mr-1" aria-hidden="true"></i>消込
                            </button>
                            @endif

                            {{-- 消込済み金額サマリー --}}
                            @if(($matchingStatus['matchedTotal'] ?? 0) > 0)
                            <span class="text-xs text-gray-500">
                                ({{ num_format($matchingStatus['matchedTotal']) }})
                            </span>
                            @endif
                        </div>

                        {{-- hidden field for matchings --}}
                        <input type="hidden" name="allocations[{{ $index }}][matchings]"
                            value="{{ json_encode($row['matchings'] ?? []) }}" />
                    </td>
                    @endif
                </tr>
            @endforeach
        </tbody>
        <tfoot>
            <tr class="bg-gray-50 font-semibold">
                <td colspan="4" class="text-right pr-2">振分合計</td>
                <td class="text-right pr-2">
                    {{ num_format($this->allocationTotal) }}
                </td>
                @if(false) {{-- 消込機能一時非表示 --}}
                <td></td>
                @endif
            </tr>
            <tr class="{{ $isBalanced ? 'bg-green-50 text-green-700' : 'bg-yellow-50 text-yellow-700' }} font-semibold">
                <td colspan="4" class="text-right pr-2">
                    差額 (入金合計 - 振分合計)
                </td>
                <td class="text-right pr-2">
                    @if($isBalanced)
                    <span title="一致しています">
                        <i class="fa-solid fa-check-circle mr-1" aria-hidden="true"></i>
                        0
                    </span>
                    @else
                    <span title="差額があります">
                        <i class="fa-solid fa-exclamation-triangle mr-1" aria-hidden="true"></i>
                        {{ num_format($difference) }}
                    </span>
                    @endif
                </td>
                @if(false) {{-- 消込機能一時非表示 --}}
                <td class="text-xs">
                    @if(!$isBalanced && !$isShow)
                    <span class="text-yellow-600">
                        差額が0になるよう振分金額を調整してください
                    </span>
                    @endif
                </td>
                @endif
            </tr>
        </tfoot>
    </table>
    @endif
</div>