@props([
    'rule',
    'ruleLabel',
    'ruleIcon' => 'activity',
    'ruleColor' => 'primary',
    'automations',
    'modelId' => null,
    'modelType' => null,
    'variant' => 'default',
    'showEdit' => true,
    'showContent' => true,
    'showProgress' => true,
    'showToggle' => true,
    'collapsible' => true,
    'modal' => null,
])

@php
    // Enhanced color mapping with gradient definitions
    $colorConfig = [
        'purple' => ['class' => 'rule-purple', 'badge' => 'purple'],
        'warning' => ['class' => 'rule-warning', 'badge' => 'warning'],
        'blue' => ['class' => 'rule-blue', 'badge' => 'info'],
        'success' => ['class' => 'rule-success', 'badge' => 'success'],
        'indigo' => ['class' => 'rule-indigo', 'badge' => 'primary'],
        'emerald' => ['class' => 'rule-emerald', 'badge' => 'success'],
        'primary' => ['class' => 'rule-primary', 'badge' => 'primary'],
    ];
    
    $config = $colorConfig[$ruleColor] ?? $colorConfig['primary'];
@endphp

<div class="automation-rule-group {{ $config['class'] }}" x-data="{ expanded: true }">
    {{-- Modern Header with Glassmorphism --}}
    <div class="rule-header-modern" 
         x-on:click="expanded = !expanded" 
         role="button"
         tabindex="0"
         x-bind:class="{ 'rule-header-collapsed': !expanded }">
        
        {{-- Animated Background Glow --}}
        <div class="rule-glow-effect"></div>
        
        <div class="rule-header-grid">
            {{-- Left: Icon + Info --}}
            <div class="rule-main-info">
                {{-- Sleek Floating Icon --}}
                <div class="rule-icon-modern">
                    <div class="icon-wrapper">
                        <x-ui.nicon :name="$ruleIcon" class="icon-symbol"/>
                        <div class="icon-pulse"></div>
                    </div>
                </div>
                
                {{-- Text Content --}}
                <div class="rule-text-content">
                    <h6 class="rule-title-modern">{{ $ruleLabel }}</h6>
                    <div class="rule-meta">
                        <span class="meta-item">
                            <x-ui.nicon name="layers" class="meta-icon"/>
                            <span class="meta-text">{{ $automations->count() }}</span>
                        </span>
                        <span class="meta-divider">•</span>
                        <span class="meta-item">
                            <x-ui.nicon name="zap" class="meta-icon"/>
                            <span class="meta-text">
                                {{ $automations->where('is_active', true)->count() }} {{ __('active') }}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            
            {{-- Right: Status + Toggle --}}
            <div class="rule-actions-modern">
                {{-- Minimal Count Badge --}}
                <div class="count-badge">
                    <span class="count-value">{{ $automations->count() }}</span>
                </div>
                
                {{-- Expand/Collapse Button --}}
                <button type="button" class="toggle-btn-modern">
                    <x-ui.nicon name="chevron-down" 
                                x-bind:class="{ 'icon-rotated': !expanded }" 
                                class="toggle-icon"/>
                </button>
            </div>
        </div>
    </div>

    {{-- Content with Smooth Animation --}}
    <div x-show="expanded" 
         x-collapse.duration.300ms
         class="rule-content-modern">
        <div class="content-inner">
            <x-automation-cards-stack :variant="$variant === 'global' || $variant === 'history' ? 'compact' : 'default'">
                @foreach($automations as $automation)
                    <x-automation-glass-card 
                        :automation="$automation"
                        :model-id="$modelId"
                        :model-type="$modelType"
                        :variant="$variant"
                        :show-edit="$showEdit"
                        :show-content="$showContent"
                        :show-progress="$showProgress"
                        :show-toggle="$showToggle && ! $automation->is_global"
                        :collapsible="$collapsible"
                        :modal="$modal"
                    />
                @endforeach
            </x-automation-cards-stack>
        </div>
    </div>
</div>