@php($isShow = ($mode ?? 'create') === 'show')
@php($statusInfo = $this->getMatchingStatusInfo())
@php($isNoMatching = $this->isNoMatchingType())
@php($matchedTotal = $this->getMatchedTotal())
@php($difference = $this->getDifference())

<div wire:key="matching-panel-{{ $breakdownIndex }}" class="matching-panel-container">
    {{-- ステータスアイコンと消込ボタン --}}
    <div class="flex items-center gap-2">
        {{-- 消込ステータスアイコン --}}
        <span class="{{ $statusInfo['class'] }}" title="{{ $statusInfo['label'] }}">
            {{ $statusInfo['icon'] }}
        </span>

        {{-- 消込ボタン（消込不要でない場合のみ表示） --}}
        @if(!$isNoMatching && !$isShow)
        <button type="button"
            wire:click="{{ $isExpanded ? 'collapse' : 'expand' }}"
            class="px-2 py-1 text-xs rounded {{ $isExpanded ? 'bg-primary-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300' }}">
            <i class="fa-solid fa-{{ $isExpanded ? 'chevron-up' : 'chevron-down' }} mr-1"></i>
            消込
        </button>
        @endif

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

    {{-- 消込詳細パネル（展開時のみ表示） --}}
    @if($isExpanded && !$isNoMatching)
    <div class="mt-3 p-3 bg-gray-50 border border-gray-200 rounded-lg">
        {{-- パネルヘッダー --}}
        <div class="flex justify-between items-center mb-3 pb-2 border-b border-gray-200">
            <h4 class="text-sm font-semibold text-gray-700">
                <i class="fa-solid fa-link mr-1"></i>消込詳細
            </h4>
            <button type="button" wire:click="collapse"
                class="text-gray-400 hover:text-gray-600">
                <i class="fa-solid fa-times"></i>
            </button>
        </div>

        {{-- 金額サマリー --}}
        <div class="flex gap-4 mb-3 text-sm">
            <div>
                <span class="text-gray-500">入金額:</span>
                <span class="font-semibold">{{ num_format($breakdownAmount) }}円</span>
            </div>
            <div>
                <span class="text-gray-500">消込合計:</span>
                <span class="font-semibold {{ $matchedTotal > 0 ? 'text-green-600' : '' }}">{{ num_format($matchedTotal) }}円</span>
            </div>
            <div>
                <span class="text-gray-500">差額:</span>
                <span class="font-semibold {{ $difference < 0 ? 'text-red-600' : ($difference > 0 ? 'text-yellow-600' : 'text-green-600') }}">
                    {{ num_format($difference) }}円
                    @if($difference < 0)
                    <span class="text-xs">(過入金)</span>
                    @elseif($difference > 0)
                    <span class="text-xs">(未消込残)</span>
                    @endif
                </span>
            </div>
        </div>

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

        {{-- 操作ボタン --}}
        <div class="flex gap-2 mb-3">
            <button type="button" wire:click="autoMatch"
                class="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
                title="FIFO方式で自動消込を実行">
                <i class="fa-solid fa-magic mr-1"></i>
                自動消込
            </button>
            @if(count($matchings) > 0)
            <button type="button" wire:click="clearMatchings"
                class="px-3 py-1 text-xs bg-gray-400 text-white rounded 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="overflow-x-auto">
            <table class="w-full text-sm border-collapse">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-2 py-1 text-left border">請求番号</th>
                        <th class="px-2 py-1 text-left border">請求日</th>
                        <th class="px-2 py-1 text-left border">得意先</th>
                        <th class="px-2 py-1 text-right border">請求金額</th>
                        <th class="px-2 py-1 text-right border">未消込残高</th>
                        <th class="px-2 py-1 text-right border w-32">消込金額</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($billingCandidates as $candidate)
                    @php($existingMatching = collect($matchings)->firstWhere('billing_id', $candidate['billing_id']))
                    @php($matchedAmount = $existingMatching ? (float)$existingMatching['matched_amount'] : 0)
                    @php($remainingAmount = (float)($candidate['remaining_amount'] ?? 0))
                    <tr class="hover:bg-gray-50">
                        <td class="px-2 py-1 border">{{ $candidate['billing_number'] ?? '-' }}</td>
                        <td class="px-2 py-1 border">{{ $candidate['billing_date'] ?? '-' }}</td>
                        <td class="px-2 py-1 border">{{ $candidate['customer_name'] ?? '-' }}</td>
                        <td class="px-2 py-1 border text-right">{{ num_format($candidate['billing_amount_total'] ?? 0) }}</td>
                        <td class="px-2 py-1 border text-right">{{ num_format($remainingAmount) }}</td>
                        <td class="px-2 py-1 border"
                            x-data="{ amount: {{ $matchedAmount }}, max: {{ $remainingAmount }} }">
                            <input type="number"
                                x-model.number="amount"
                                @change="if(amount > max) amount = max; if(amount < 0) amount = 0; $wire.updateMatchingAmount({{ $candidate['billing_id'] }}, amount)"
                                @blur="$wire.updateMatchingAmount({{ $candidate['billing_id'] }}, amount)"
                                :class="{'border-red-500': amount > max}"
                                min="0"
                                :max="max"
                                class="w-full px-2 py-1 text-right border border-gray-300 rounded text-sm focus:ring-primary-500 focus:border-primary-500"
                                placeholder="0" />
                            <template x-if="amount > max">
                                <span class="text-xs text-red-500">上限超過</span>
                            </template>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
        @if(count($billingCandidates) === 0)
        <div class="text-center text-gray-500 py-4">
            <i class="fa-solid fa-info-circle mr-1"></i>
            消込可能な請求がありません
        </div>
        @endif

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