@extends('layouts.app')

@section('title', 'Dispute Queue')

@section('content')

<div class="nx-wrap" style="padding-top:24px; padding-bottom:48px;">

    {{-- Header --}}
    <div style="display:flex; justify-content:space-between; align-items:center;
                flex-wrap:wrap; gap:12px; margin-bottom:24px;">
        <div>
            <h2 style="margin:0 0 6px;">Dispute Queue</h2>
            <p class="nx-muted" style="margin:0;">
                Review and resolve all platform disputes.
                Resolutions update owner trust scores automatically.
            </p>
        </div>
        <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <a class="nx-btn" href="{{ route('admin.dashboard') }}">
                ← Admin console
            </a>
        </div>
    </div>

    {{-- Status filter --}}
    <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;">
        @foreach([
            [null,         'All'],
            ['unresolved', 'Open'],
            ['resolved',   'Resolved'],
        ] as [$value, $label])
        <a class="nx-btn nx-btn-sm {{ request('status') === $value
                || (!request('status') && $value === null) ? 'nx-btn-primary' : '' }}"
           href="{{ route('admin.disputes', $value ? ['status' => $value] : []) }}">
            {{ $label }}
        </a>
        @endforeach
    </div>

    {{-- Disputes list --}}
    @forelse($disputes as $dispute)
    <div class="nx-card" style="margin-bottom:12px;">
        <div style="display:flex; justify-content:space-between;
                    align-items:flex-start; flex-wrap:wrap; gap:14px;">

            {{-- Dispute info --}}
            <div style="flex:1; min-width:220px;">
                <div style="display:flex; align-items:center; gap:10px;
                            flex-wrap:wrap; margin-bottom:6px;">
                    <span style="font-weight:800;">{{ $dispute->reference }}</span>
                    <span class="nx-badge {{ $dispute->getStatusBadgeClass() }}">
                        {{ strtoupper(str_replace('_',' ',$dispute->status)) }}
                    </span>
                    @if($dispute->payout_held)
                        <span class="nx-badge nx-badge-warn">💰 Payout held</span>
                    @endif
                </div>

                <div style="font-weight:600; font-size:14px; margin-bottom:4px;">
                    {{ $dispute->bookingItem->placement->name ?? 'N/A' }}
                </div>

                <div class="nx-muted" style="font-size:13px; line-height:1.6;">
                    Reason: {{ $dispute->getReasonLabel() }} ·
                    Raised by: {{ $dispute->raisedBy->name }} ·
                    Owner: {{ $dispute->mediaOwner->business_name ?? 'N/A' }}
                    <br/>
                    Opened: {{ $dispute->created_at->format('d M Y H:i') }}
                    @if($dispute->assignedTo)
                        · Assigned: {{ $dispute->assignedTo->name }}
                    @else
                        · <span style="color:var(--nx-warn);">Unassigned</span>
                    @endif
                    @if($dispute->isResolved())
                        · Resolved: {{ $dispute->resolved_at?->format('d M Y') }}
                        · <strong>{{ $dispute->getOutcomeLabel() }}</strong>
                    @endif
                </div>
            </div>

            {{-- Actions --}}
            <div style="display:flex; gap:8px; flex-wrap:wrap;
                        align-items:flex-start;">
                <a class="nx-btn nx-btn-sm"
                   href="{{ route('disputes.show', $dispute) }}">
                    View thread →
                </a>
            </div>

        </div>

        {{-- Resolve form (unresolved only) --}}
        @if(!$dispute->isResolved())
        <div style="margin-top:14px; padding:14px; border-radius:var(--nx-radius);
             border:1px solid rgba(255,255,255,.08);
             background:rgba(0,0,0,.12);">
            <div style="font-size:11px; text-transform:uppercase;
                        letter-spacing:.08em; color:var(--nx-muted);
                        margin-bottom:12px;">
                Resolve dispute
            </div>

            <form method="POST"
                  action="{{ route('admin.disputes.resolve', $dispute) }}">
                @csrf

                <div style="display:grid;
                            grid-template-columns:1fr 1fr 1fr;
                            gap:10px; margin-bottom:10px;">

                    <div>
                        <label class="nx-label" style="margin-top:0;">
                            Status
                        </label>
                        <select class="nx-select" name="status" required>
                            <option value="resolved_advertiser">
                                Resolved — Advertiser wins
                            </option>
                            <option value="resolved_owner">
                                Resolved — Owner wins
                            </option>
                            <option value="resolved_split">
                                Resolved — Split
                            </option>
                            <option value="closed">Closed — No action</option>
                        </select>
                    </div>

                    <div>
                        <label class="nx-label" style="margin-top:0;">
                            Outcome
                        </label>
                        <select class="nx-select" name="resolution_outcome"
                                required>
                            <option value="full_refund">Full refund</option>
                            <option value="partial_refund">Partial refund</option>
                            <option value="payout_released">
                                Payout released
                            </option>
                            <option value="no_action">No action</option>
                            <option value="penalty_applied">
                                Penalty applied
                            </option>
                        </select>
                    </div>

                    <div>
                        <label class="nx-label" style="margin-top:0;">
                            Refund amount (KES)
                        </label>
                        <input class="nx-input" type="number"
                               name="refund_amount"
                               placeholder="0" min="0"/>
                    </div>

                </div>

                <label class="nx-label">Resolution notes (required)</label>
                <textarea class="nx-textarea" name="resolution_notes"
                          rows="2" required minlength="10"
                          placeholder="Explain the resolution decision...">
                </textarea>

                <div style="margin-top:10px;">
                    <button type="submit"
                            class="nx-btn nx-btn-sm nx-btn-primary"
                            data-nx-confirm="Resolve this dispute? This action cannot be undone.">
                        Submit resolution
                    </button>
                </div>

            </form>
        </div>
        @endif

    </div>
    @empty
    <div class="nx-card" style="text-align:center; padding:60px 24px;">
        <div style="font-size:40px; margin-bottom:16px;">✅</div>
        <h3 style="margin:0 0 10px;">Queue is clear</h3>
        <p class="nx-muted" style="margin:0;">
            No disputes matching this filter.
        </p>
    </div>
    @endforelse

    {{-- Pagination --}}
    @if($disputes->hasPages())
    <div style="margin-top:20px;">
        {{ $disputes->links() }}
    </div>
    @endif

</div>

@endsection