@php
    $toneClasses = [
        'emerald' => 'from-emerald-50 to-white text-emerald-700 ring-emerald-200',
        'teal' => 'from-teal-50 to-white text-teal-700 ring-teal-200',
        'sky' => 'from-sky-50 to-white text-sky-700 ring-sky-200',
        'amber' => 'from-amber-50 to-white text-amber-700 ring-amber-200',
    ];
@endphp

<x-filament-widgets::widget class="remote-admin-command-widget">
    <section class="remote-admin-command-center">
        <div class="remote-admin-command-header">
            <div>
                <p class="remote-admin-eyebrow">RemoteMatch operations</p>
                <h2>Admin command center</h2>
                <p>Monitor acquisition, paid access, resume intelligence, imported jobs, and application activity from one clean dashboard.</p>
            </div>

            <div class="remote-admin-live-pill">
                <span></span>
                Live analytics
            </div>
        </div>

        <div class="remote-admin-kpi-grid">
            @foreach ($metrics as $metric)
                <article class="remote-admin-kpi-card bg-gradient-to-br {{ $toneClasses[$metric['tone']] ?? $toneClasses['teal'] }}">
                    <div class="remote-admin-kpi-icon">
                        @if ($metric['icon'] === 'currency')
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3v18M17 7.5c-.7-1-2-1.7-4.1-1.7-2.4 0-4.1 1.1-4.1 2.8 0 1.8 1.8 2.4 4.3 3 2.5.6 4.2 1.3 4.2 3.2 0 1.8-1.8 3.1-4.6 3.1-2.1 0-3.8-.6-5-1.9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        @elseif ($metric['icon'] === 'check')
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m7.5 12.5 3 3L17 8.8M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        @elseif ($metric['icon'] === 'briefcase')
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 7V6a3 3 0 0 1 3-3v0a3 3 0 0 1 3 3v1M4.8 8h14.4A1.8 1.8 0 0 1 21 9.8v8.4a1.8 1.8 0 0 1-1.8 1.8H4.8A1.8 1.8 0 0 1 3 18.2V9.8A1.8 1.8 0 0 1 4.8 8Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        @else
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 4.5 19 12 5 19.5v-6L13 12 5 10.5v-6Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        @endif
                    </div>

                    <div>
                        <p>{{ $metric['label'] }}</p>
                        <strong>{{ $metric['prefix'] ?? '' }}{{ $metric['value'] }}</strong>
                        <span>{{ $metric['note'] }}</span>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="remote-admin-funnel">
            <div class="remote-admin-funnel-heading">
                <div>
                    <h3>Applicant conversion funnel</h3>
                    <p>Track where users are moving through the paid AI-matching workflow.</p>
                </div>
            </div>

            <div class="remote-admin-funnel-grid">
                @foreach ($funnel as $step)
                    <div class="remote-admin-funnel-step">
                        <div class="remote-admin-funnel-step-top">
                            <span>{{ $step['label'] }}</span>
                            <strong>{{ number_format($step['value']) }}</strong>
                        </div>
                        <div class="remote-admin-funnel-bar">
                            <span style="width: {{ $step['percent'] }}%"></span>
                        </div>
                        <small>{{ $step['percent'] }}%</small>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
</x-filament-widgets::widget>
