@extends('layouts.admin')

@section('title', 'Billing Rule Settings')

@section('content')
<div class="max-w-6xl">
    <div class="card p-5 mb-8 flex items-start justify-between gap-6">
        <div class="flex items-start gap-3.5">
            <div class="icon-badge bg-accent-muted">
                <svg class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
            </div>
            <div>
                <h2 class="text-sm font-semibold text-accent">Every rule set below is placeholder data</h2>
                <p class="text-sm text-ink-muted mt-1 max-w-xl">
                    Pending compliance and coding review. Changing a threshold or band width never edits an
                    effective row — it always creates a new dated version, leaving history untouched.
                </p>
            </div>
        </div>
        <a href="{{ route('admin.billing-rules.create') }}" class="shrink-0 btn-primary">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
            New version
        </a>
    </div>

    @php
        $payerStyles = [
            'medicare' => ['icon' => 'bg-accent-muted', 'iconText' => 'text-accent', 'bar' => 'bg-accent', 'pill' => 'bg-accent-muted text-accent border-accent/20'],
            'medicaid' => ['icon' => 'bg-status-good/10', 'iconText' => 'text-status-good', 'bar' => 'bg-status-good', 'pill' => 'bg-status-good/10 text-status-good border-status-good/20'],
            'fqhc' => ['icon' => 'bg-brand-orange-muted', 'iconText' => 'text-brand-orange', 'bar' => 'bg-brand-orange', 'pill' => 'bg-brand-orange-muted text-brand-orange border-brand-orange/20'],
            'commercial' => ['icon' => 'bg-status-serious/10', 'iconText' => 'text-status-serious', 'bar' => 'bg-status-serious', 'pill' => 'bg-status-serious/10 text-status-serious border-status-serious/20'],
        ];
        $fallbackStyle = ['icon' => 'bg-surface-3', 'iconText' => 'text-ink-secondary', 'bar' => 'bg-ink-muted', 'pill' => 'status-pill-neutral'];
    @endphp

    @forelse ($ruleSets as $payerType => $versions)
        @php
            $activeVersion = $versions->first(fn ($rs) => $rs->effective_end === null && $rs->is_active);
            $style = $payerStyles[$payerType] ?? $fallbackStyle;
        @endphp
        <div class="mb-6">
            <div class="flex items-center justify-between mb-2.5">
                <div class="flex items-center gap-2.5">
                    <div class="icon-badge w-7 h-7 {{ $style['icon'] }}">
                        <svg class="w-3.5 h-3.5 {{ $style['iconText'] }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" /></svg>
                    </div>
                    <h3 class="text-sm font-semibold uppercase tracking-wide text-ink-secondary">{{ $payerType }}</h3>
                    @if ($activeVersion)
                        <span class="status-pill-good">Active</span>
                    @endif
                </div>
                @if ($activeVersion)
                    <p class="text-xs text-ink-muted">
                        Active since <span class="font-medium text-ink-secondary">{{ $activeVersion->effective_start->format('M j, Y') }}</span>
                        &middot; amber band <span class="font-medium text-ink-secondary">{{ $activeVersion->approaching_threshold_minutes }} min</span>
                    </p>
                @endif
            </div>

            <div class="card overflow-hidden relative">
                <div class="absolute left-0 top-0 bottom-0 w-1 {{ $style['bar'] }}"></div>
                <table class="table-shell">
                    <thead>
                        <tr>
                            <th class="text-left px-4 py-2.5 pl-5 font-medium w-2/5">Name</th>
                            <th class="text-left px-4 py-2.5 font-medium whitespace-nowrap">Effective</th>
                            <th class="text-left px-4 py-2.5 font-medium whitespace-nowrap">Amber band</th>
                            <th class="text-left px-4 py-2.5 font-medium">Codes</th>
                            <th class="text-left px-4 py-2.5 font-medium whitespace-nowrap">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($versions as $ruleSet)
                            @php $isActive = $ruleSet->effective_end === null && $ruleSet->is_active; @endphp
                            <tr class="{{ $isActive ? '' : 'opacity-70' }}">
                                <td class="px-4 py-2.5 pl-5 font-medium text-accent">{{ $ruleSet->name }}</td>
                                <td class="px-4 py-2.5 text-ink-secondary tabular-nums whitespace-nowrap">
                                    {{ $ruleSet->effective_start->format('M j, Y') }} &rarr; {{ $ruleSet->effective_end?->format('M j, Y') ?? 'current' }}
                                </td>
                                <td class="px-4 py-2.5 text-ink-secondary tabular-nums whitespace-nowrap">{{ $ruleSet->approaching_threshold_minutes }} min</td>
                                <td class="px-4 py-2.5">
                                    <div class="flex flex-wrap gap-1">
                                        @foreach ($ruleSet->codes as $code)
                                            <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium border {{ $isActive ? $style['pill'] : 'status-pill-neutral' }}">{{ $code->code }}</span>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="px-4 py-2.5">
                                    @if ($isActive)
                                        <span class="status-pill-good">Active</span>
                                    @else
                                        <span class="status-pill-neutral">Historical</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @empty
        <div class="card p-10 text-center">
            <div class="icon-badge bg-surface-2 mx-auto mb-3">
                <svg class="w-5 h-5 text-ink-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
            </div>
            <p class="text-sm font-medium text-ink-secondary">No billing rule sets yet</p>
            <p class="text-xs text-ink-muted mt-1">Create the first versioned rule set to start computing billing periods.</p>
            <a href="{{ route('admin.billing-rules.create') }}" class="btn-primary mt-4 inline-flex">New version</a>
        </div>
    @endforelse
</div>
@endsection