@php($statusInfo = $this->getMatchingStatusInfo())
@php($isNoMatching = $this->isNoMatchingType())
@php($matchedTotal = $this->getMatchedTotal())
@php($difference = $this->getDifference())

<div>
    {{-- ローディング表示 --}}
    @if($isLoading)
    <div class="flex items-center justify-center py-8">
        <i class="fa-solid fa-spinner fa-spin text-2xl text-gray-400"></i>
    </div>
    @else

    {{-- 選択されていない場合 --}}
    @if($selectedBreakdownIndex === null)
    <div class="flex flex-col items-center justify-center py-8 text-gray-400">
        <i class="fa-solid fa-hand-pointer text-4xl mb-3"></i>
        <p class="text-sm">{{ $isAllocation ? '振分行' : '内訳行' }}の消込ボタンをクリックしてください</p>
    </div>
    @else

    {{-- 消込不要区分の場合 --}}
    @if($isNoMatching)
    <div class="flex flex-col items-center justify-center py-8 text-gray-400">
        <span class="text-4xl mb-3">{{ $statusInfo['icon'] }}</span>
        <p class="text-sm">{{ $statusInfo['label'] }}</p>
        <p class="text-xs mt-2">この入金区分は消込不要です</p>
    </div>
    @else

    {{-- 金額サマリー --}}
    <div class="bg-gray-50 rounded-lg p-4 mb-4">
        <div class="grid grid-cols-3 gap-4 text-sm">
            <div>
                <div class="text-gray-500 text-xs">{{ $isAllocation ? '振分金額' : '入金額' }}</div>
                <div class="font-semibold text-lg">{{ num_format($breakdownAmount) }}</div>
            </div>
            <div>
                <div class="text-gray-500 text-xs">消込合計</div>
                <div class="font-semibold text-lg {{ $matchedTotal > 0 ? 'text-green-600' : '' }}">
                    {{ num_format($matchedTotal) }}
                </div>
            </div>
            <div>
                <div class="text-gray-500 text-xs">差額</div>
                <div class="font-semibold text-lg {{ $difference < 0 ? 'text-red-600' : ($difference > 0 ? 'text-yellow-600' : 'text-green-600') }}">
                    {{ num_format($difference) }}
                </div>
            </div>
        </div>

        {{-- ステータス表示 --}}
        <div class="mt-3 pt-3 border-t border-gray-200 flex items-center gap-2">
            <span class="{{ $statusInfo['class'] }}">{{ $statusInfo['icon'] }}</span>
            <span class="text-sm">{{ $statusInfo['label'] }}</span>
            @if($difference < 0)
            <span class="text-xs text-red-600">(過入金)</span>
            @elseif($difference > 0)
            <span class="text-xs text-yellow-600">(未消込残)</span>
            @endif
        </div>
    </div>

    {{-- 過入金メッセージ --}}
    @if($difference < 0)
    <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
        <i class="fa-solid fa-exclamation-triangle mr-1"></i>
        過入金です。差額 {{ num_format(abs($difference)) }}円 は前受金として処理してください。
    </div>
    @endif

    {{-- 操作ボタン --}}
    @php($canAutoMatch = $breakdownAmount > 0 && count($billingCandidates) > 0)
    <div class="flex gap-2 mb-4">
        <button type="button" wire:click="autoMatch"
            @disabled(!$canAutoMatch)
            class="flex-1 px-3 py-2 text-sm rounded-lg transition-colors {{ $canAutoMatch ? 'bg-blue-500 text-white hover:bg-blue-600' : 'bg-gray-300 text-gray-500 cursor-not-allowed' }}"
            title="{{ $canAutoMatch ? 'FIFO方式で自動消込を実行' : ($breakdownAmount <= 0 ? '入金額を入力してください' : '消込候補がありません') }}">
            <i class="fa-solid fa-magic mr-1"></i>
            自動消込
        </button>
        @if(count($matchings) > 0)
        <button type="button" wire:click="clearMatchings"
            class="px-3 py-2 text-sm bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition-colors"
            title="消込をクリア">
            <i class="fa-solid fa-eraser mr-1"></i>
            クリア
        </button>
        @endif
    </div>

    {{-- 消込候補一覧 --}}
    @if(count($billingCandidates) > 0)
    <div class="space-y-2">
        <h4 class="text-xs font-semibold text-gray-600 mb-2">消込候補</h4>
        @foreach($billingCandidates as $candidate)
        @php($billingId = $candidate['billing_id'])
        @php($remainingAmount = (float)($candidate['remaining_amount'] ?? 0))
        @php($currentAmount = (float)($matchingAmounts[$billingId] ?? 0))
        <div class="bg-white border border-gray-200 rounded-lg p-3 hover:border-primary-300 transition-colors">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <div class="text-sm font-medium">{{ $candidate['billing_number'] ?? '-' }}</div>
                    <div class="text-xs text-gray-500">{{ $candidate['billing_date'] ?? '-' }}</div>
                </div>
                <div class="text-right">
                    <div class="text-xs text-gray-500">未消込残高</div>
                    <div class="text-sm font-semibold">{{ num_format($remainingAmount) }}</div>
                </div>
            </div>
            @if(!empty($candidate['customer_name']))
            <div class="text-xs text-gray-500 mb-2">{{ $candidate['customer_name'] }}</div>
            @endif
            <div class="flex items-center gap-2">
                <label class="text-xs text-gray-500 whitespace-nowrap">消込金額:</label>
                <x-input.number
                    wire:model.blur="matchingAmounts.{{ $billingId }}"
                    wire:change="onMatchingAmountChange({{ $billingId }})"
                    class="flex-1 text-sm {{ $currentAmount > $remainingAmount ? 'border-red-500 ring-1 ring-red-500' : '' }}"
                    value="{{ num_format($currentAmount) }}" />
            </div>
            @if($currentAmount > $remainingAmount)
            <div class="text-xs text-red-500 mt-1">上限超過</div>
            @endif
        </div>
        @endforeach
    </div>
    @else
    <div class="text-center text-gray-500 py-6">
        <i class="fa-solid fa-info-circle text-2xl mb-2"></i>
        <p class="text-sm">消込可能な請求がありません</p>
    </div>
    @endif

    {{-- 既存消込情報（候補がない場合） --}}
    @if(count($matchings) > 0 && count($billingCandidates) === 0)
    <div class="mt-4">
        <h4 class="text-xs font-semibold text-gray-600 mb-2">登録済み消込</h4>
        <div class="space-y-2">
            @foreach($matchings as $matching)
            <div class="flex justify-between text-sm bg-gray-50 p-3 rounded-lg border">
                <span>請求ID: {{ $matching['billing_id'] ?? '-' }}</span>
                <span class="font-semibold">{{ num_format($matching['matched_amount'] ?? 0) }}円</span>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    @endif
    @endif
    @endif
</div>