@extends('admin.layouts.app')

@section('title', 'Regulation Conflicts')

@section('breadcrumb')
<a href="{{ route('admin.ai.index') }}">AI Intelligence</a>
<span class="separator">/</span>
<span>Conflicts</span>
@endsection

@section('content')
<div style="padding: 24px;" x-data="conflictsPage()">

    @include('admin.ai._tabs')

    {{-- Header --}}
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
        <div>
            <h1 style="font-size:20px; font-weight:600; color:var(--vsc-text-active); margin-bottom:4px;">Regulation Conflicts</h1>
            <p style="font-size:13px; color:var(--vsc-text-secondary);">AI-detected contradictions and overlaps in regulation rules</p>
        </div>
    </div>

    {{-- Filters --}}
    <div class="data-card" style="margin-bottom:16px;">
        <div class="data-card-body" style="padding:12px 16px;">
            <form method="GET" style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
                <select name="severity" class="form-control" style="width:140px;" onchange="this.form.submit()">
                    <option value="">All Severities</option>
                    <option value="high" {{ request('severity') === 'high' ? 'selected' : '' }}>High</option>
                    <option value="medium" {{ request('severity') === 'medium' ? 'selected' : '' }}>Medium</option>
                    <option value="low" {{ request('severity') === 'low' ? 'selected' : '' }}>Low</option>
                </select>
                <select name="status" class="form-control" style="width:140px;" onchange="this.form.submit()">
                    <option value="">All Statuses</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="resolved" {{ request('status') === 'resolved' ? 'selected' : '' }}>Resolved</option>
                    <option value="dismissed" {{ request('status') === 'dismissed' ? 'selected' : '' }}>Dismissed</option>
                </select>
                <select name="state_id" class="form-control" style="width:180px;" onchange="this.form.submit()">
                    <option value="">All States</option>
                    @foreach($states as $state)
                        <option value="{{ $state->id }}" {{ request('state_id') == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                    @endforeach
                </select>
                @if(request()->hasAny(['severity', 'status', 'state_id']))
                    <a href="{{ route('admin.ai.conflicts') }}" class="btn btn-sm btn-outline">Clear</a>
                @endif
            </form>
        </div>
    </div>

    {{-- Conflicts List --}}
    @forelse($conflicts as $conflict)
    <div class="data-card" style="margin-bottom:12px;">
        <div class="data-card-body" style="padding:16px;">
            <div style="display:flex; align-items:flex-start; gap:12px;">
                {{-- Severity indicator --}}
                <div style="width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0;
                     background:{{ $conflict->severity === 'high' ? '#f87171' : ($conflict->severity === 'medium' ? '#fbbf24' : '#4ade80') }};">
                </div>

                <div style="flex:1; min-width:0;">
                    {{-- Header --}}
                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;">
                        <span class="badge {{ $conflict->severity === 'high' ? 'badge-danger' : ($conflict->severity === 'medium' ? 'badge-warning' : 'badge-success') }}"
                              style="font-size:10px;">
                            {{ strtoupper($conflict->severity) }}
                        </span>
                        <span class="badge badge-info" style="font-size:10px;">
                            {{ str_replace('_', ' ', ucfirst($conflict->conflict_type)) }}
                        </span>
                        <span style="font-size:11px; color:var(--vsc-text-tertiary);">
                            {{ $conflict->state?->name }} {{ $conflict->city ? '/ ' . $conflict->city->name : '' }}
                        </span>
                        <span style="font-size:11px; color:var(--vsc-text-tertiary); margin-left:auto;">
                            {{ $conflict->created_at->diffForHumans() }}
                        </span>
                    </div>

                    {{-- Description --}}
                    <p style="font-size:13px; color:var(--vsc-text-active); margin-bottom:8px; line-height:1.6;">
                        {{ $conflict->description }}
                    </p>

                    {{-- Rules comparison --}}
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;">
                        @if($conflict->new_rule)
                        <div style="padding:8px 10px; background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); border-radius:6px;">
                            <div style="font-size:10px; text-transform:uppercase; color:var(--vsc-text-tertiary); margin-bottom:4px;">New Rule</div>
                            <div style="font-size:12px; color:var(--vsc-text-secondary);">
                                @if(is_array($conflict->new_rule))
                                    @foreach($conflict->new_rule as $key => $val)
                                        <div><strong>{{ $key }}:</strong> {{ is_array($val) ? json_encode($val) : $val }}</div>
                                    @endforeach
                                @else
                                    {{ $conflict->new_rule }}
                                @endif
                            </div>
                        </div>
                        @endif
                        @if($conflict->existing_rule)
                        <div style="padding:8px 10px; background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.15); border-radius:6px;">
                            <div style="font-size:10px; text-transform:uppercase; color:var(--vsc-text-tertiary); margin-bottom:4px;">Existing Rule</div>
                            <div style="font-size:12px; color:var(--vsc-text-secondary);">
                                @if(is_array($conflict->existing_rule))
                                    @foreach($conflict->existing_rule as $key => $val)
                                        <div><strong>{{ $key }}:</strong> {{ is_array($val) ? json_encode($val) : $val }}</div>
                                    @endforeach
                                @else
                                    {{ $conflict->existing_rule }}
                                @endif
                            </div>
                        </div>
                        @endif
                    </div>

                    {{-- AI Recommendation --}}
                    @if($conflict->ai_recommendation)
                    <div style="padding:8px 10px; background:rgba(234,179,8,.06); border:1px solid rgba(234,179,8,.15); border-radius:6px; margin-bottom:8px;">
                        <div style="font-size:10px; text-transform:uppercase; color:var(--vsc-text-tertiary); margin-bottom:4px;">AI Recommendation</div>
                        <div style="font-size:12px; color:var(--vsc-text-secondary);">{{ $conflict->ai_recommendation }}</div>
                    </div>
                    @endif

                    {{-- Actions --}}
                    @if($conflict->resolution_status === 'pending')
                    <div style="display:flex; gap:8px;">
                        <button class="btn btn-sm btn-success" @click="resolve({{ $conflict->id }}, 'resolved')">
                            <i data-lucide="check" style="width:12px;height:12px;"></i> Resolve
                        </button>
                        <button class="btn btn-sm btn-outline" @click="resolve({{ $conflict->id }}, 'dismissed')">
                            <i data-lucide="x" style="width:12px;height:12px;"></i> Dismiss
                        </button>
                    </div>
                    @else
                    <span class="badge {{ $conflict->resolution_status === 'resolved' ? 'badge-success' : 'badge-secondary' }}" style="font-size:10px;">
                        {{ ucfirst($conflict->resolution_status) }}
                        @if($conflict->resolved_at)
                            · {{ $conflict->resolved_at->diffForHumans() }}
                        @endif
                    </span>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="data-card">
        <div class="data-card-body" style="padding:48px; text-align:center;">
            <i data-lucide="check-circle" style="width:36px;height:36px;color:var(--vsc-text-tertiary);margin-bottom:12px;"></i>
            <h3 style="font-size:15px; color:var(--vsc-text-active); margin-bottom:4px;">No Conflicts Found</h3>
            <p style="font-size:13px; color:var(--vsc-text-secondary);">
                Conflicts are detected automatically when regulation documents are processed.
            </p>
        </div>
    </div>
    @endforelse

    {{-- Pagination --}}
    <div style="margin-top:16px;">
        {{ $conflicts->withQueryString()->links() }}
    </div>

</div>
@endsection

@push('scripts')
<script>
function conflictsPage() {
    return {
        async resolve(id, status) {
            const notes = status === 'dismissed' ? prompt('Reason for dismissal (optional):') : null;
            try {
                const res = await fetch(`/admin/ai/conflicts/${id}/resolve`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ status, notes })
                });
                if (res.ok) window.location.reload();
            } catch(e) {
                alert('Failed to update conflict: ' + e.message);
            }
        }
    }
}
</script>
@endpush