@props([
    'actions' => null,
    'stats' => null,
    'tasks' => null,
])

@php
    $actions = $actions ?? collect([
        ['label' => 'Nuova nota CRM', 'icon' => 'fa-note-sticky', 'color' => 'primary'],
        ['label' => 'Invia email', 'icon' => 'fa-envelope', 'color' => 'success'],
        ['label' => 'Invia SMS', 'icon' => 'fa-sms', 'color' => 'warning'],
        ['label' => 'Allega documento', 'icon' => 'fa-paperclip', 'color' => 'dark'],
        ['label' => 'Crea accesso web', 'icon' => 'fa-globe', 'color' => 'info'],
    ]);

    $stats = $stats ?? collect([
        ['label' => 'Rate scadute', 'value' => '€ 1.240', 'hint' => '2 posizioni aperte', 'tone' => 'danger'],
        ['label' => 'Documenti mancanti', 'value' => '3', 'hint' => 'CF, IBAN, Documento identità', 'tone' => 'warning'],
        ['label' => 'Ticket aperti', 'value' => '1', 'hint' => 'Richiesta manutenzione caldaia', 'tone' => 'info'],
    ]);

    $tasks = $tasks ?? collect([
        ['title' => 'Verificare codice fiscale importato', 'due' => 'Oggi', 'priority' => 'high'],
        ['title' => 'Aggiornare IBAN per addebito SDD', 'due' => 'Domani', 'priority' => 'medium'],
        ['title' => 'Confermare accesso al portale', 'due' => 'In settimana', 'priority' => 'low'],
    ]);
@endphp

<div class="action-rail netgescon-card space-y-6">
    <div>
        <p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Azioni rapide</p>
        <div class="flex flex-col gap-2">
            @foreach($actions as $action)
                <button type="button" class="action-rail-btn">
                    <span class="flex items-center gap-3">
                        <span class="action-rail-icon">
                            <i class="fas {{ $action['icon'] }}"></i>
                        </span>
                        {{ $action['label'] }}
                    </span>
                    <i class="fas fa-chevron-right text-slate-400"></i>
                </button>
            @endforeach
        </div>
    </div>

    <div class="border-t border-slate-100 pt-4">
        <p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Indicatori</p>
        <div class="flex flex-col gap-3">
            @foreach($stats as $stat)
                <div class="stat-pill stat-pill-{{ $stat['tone'] }}">
                    <div>
                        <p class="text-xs text-slate-500 mb-1">{{ $stat['label'] }}</p>
                        <p class="text-xl font-semibold text-slate-900 mb-1">{{ $stat['value'] }}</p>
                        <small class="text-slate-500">{{ $stat['hint'] }}</small>
                    </div>
                    <i class="fas fa-chevron-right text-slate-400"></i>
                </div>
            @endforeach
        </div>
    </div>

    <div class="border-t border-slate-100 pt-4">
        <div class="flex items-center justify-between mb-3">
            <p class="text-xs uppercase tracking-wide text-slate-500 mb-0">Attività da chiudere</p>
            <button class="text-xs font-semibold text-blue-600 hover:text-blue-700">Vedi tutte</button>
        </div>
        <ul class="flex flex-col gap-3">
            @foreach($tasks as $task)
                <li class="task-item">
                    <div class="flex items-start gap-3">
                        <span class="priority-dot priority-{{ $task['priority'] }} mt-1"></span>
                        <div>
                            <p class="font-semibold text-slate-900 mb-1">{{ $task['title'] }}</p>
                            <small class="text-slate-500"><i class="far fa-clock mr-2"></i>{{ $task['due'] }}</small>
                        </div>
                    </div>
                    <button class="netgescon-btn netgescon-btn-outline-primary netgescon-btn-sm">
                        <i class="fas fa-check"></i>
                    </button>
                </li>
            @endforeach
        </ul>
    </div>
</div>

@once
@push('styles')
<style>
    .action-rail {
        border-radius: 28px;
    }

    .action-rail-btn {
        border-radius: 18px;
        border: 1px solid #e2e8f0;
        padding: 0.65rem 0.85rem;
        font-weight: 500;
        color: #1f2937;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s ease;
    }

    .action-rail-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        background: rgba(37, 99, 235, 0.12);
        color: #2563eb;
    }

    .action-rail-btn:hover {
        border-color: rgba(37, 99, 235, 0.25);
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    }

    .stat-pill {
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 0.85rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .stat-pill-danger {
        border-color: rgba(220, 38, 38, 0.3);
        background: rgba(220, 38, 38, 0.05);
    }

    .stat-pill-warning {
        border-color: rgba(234, 179, 8, 0.4);
        background: rgba(250, 204, 21, 0.08);
    }

    .stat-pill-info {
        border-color: rgba(14, 165, 233, 0.4);
        background: rgba(14, 165, 233, 0.08);
    }

    .task-item {
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 0.85rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .priority-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: 0.45rem;
    }

    .priority-high { background: #dc2626; }
    .priority-medium { background: #f59e0b; }
    .priority-low { background: #10b981; }
</style>
@endpush
@endonce