@extends('layouts.app')
@section('title', 'Notification & Escalation Engine')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .notif-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 24px;
        margin-bottom: 24px;
    }
    @media (max-width: 1024px) {
        .notif-grid { grid-template-columns: 1fr; }
    }
    .template-card {
        padding: 20px;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .template-card:hover {
        transform: translateY(-2px);
        background: rgba(255,255,255,0.04);
        border-color: var(--accent-soft);
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    .log-item {
        padding: 12px;
        border-bottom: 1px solid var(--border-color);
        font-size: 12px;
        color: var(--text-secondary);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .log-item:last-child { border-bottom: none; }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '
        <div style="display: flex; gap: 12px;">
            <button class="final-btn final-btn-secondary" style="font-size: 11px;"><i class="bi bi-plus-lg"></i> Create Notification</button>
            <button class="final-btn final-btn-secondary" style="font-size: 11px; color: var(--warning-color); border-color: rgba(245, 158, 11, 0.2);"><i class="bi bi-send-check"></i> Test Delivery</button>
            <button class="final-btn final-btn-secondary" style="font-size: 11px; color: var(--info-color); border-color: rgba(14, 165, 233, 0.2);"><i class="bi bi-list-columns"></i> View Logs</button>
        </div>
    ';
@endphp

@include('components.page-header', [
    'title' => 'Intelligence Alert Engine',
    'description' => 'Manage intelligent alerts, escalation workflows, reminders, and multi-channel communication templates.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Notifications' => '#'],
    'actions' => $actionsHtml
])

<div class="notif-grid">
    <!-- Create Template -->
    <div class="final-card">
        <h3 class="final-card-title"><i class="bi bi-pencil-square" style="color: var(--accent-color)"></i> Architect Alert Template</h3>
        <p class="final-secondary-text" style="margin-top: -12px; margin-bottom: 24px;">Design dynamic multi-channel notification blueprints with enterprise-grade placeholders.</p>
        
        <form method="POST" action="{{ route('notification-engine.templates.store') }}">
            @csrf
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                <div>
                    <label class="final-stat-label" style="font-size: 10px;">Template Label</label>
                    <input class="final-input" name="name" placeholder="e.g. Critical Bug Alert" required>
                </div>
                <div>
                    <label class="final-stat-label" style="font-size: 10px;">Unique Identifier (Slug)</label>
                    <input class="final-input" name="slug" placeholder="critical_bug_notification" required>
                </div>
            </div>

            <div style="margin-bottom: 16px;">
                <label class="final-stat-label" style="font-size: 10px;">Delivery Channel</label>
                <select class="final-select" name="channel">
                    <option value="in_app">In-App Dashboard</option>
                    <option value="email">SMTP Email Service</option>
                    <option value="whatsapp">Meta WhatsApp API</option>
                    <option value="sms">Global SMS Gateway</option>
                </select>
            </div>

            <div style="margin-bottom: 16px;">
                <label class="final-stat-label" style="font-size: 10px;">Notification Subject</label>
                <input class="final-input" name="subject" placeholder="System Alert: {issue_type} detected">
            </div>

            <div style="margin-bottom: 20px;">
                <label class="final-stat-label" style="font-size: 10px;">Payload Body</label>
                <textarea class="final-textarea" name="body" placeholder="Design your message here. Use {user}, {date}, {task_id}, {module} as dynamic variables." required></textarea>
                <p style="font-size: 10px; color: var(--text-secondary); margin-top: 8px; font-weight: 600;">PRO TIP: Placeholders are auto-injected during the escalation trigger process.</p>
            </div>

            <button class="final-btn final-btn-primary" style="width: 100%; justify-content: center;">
                <i class="bi bi-save"></i> Synchronize Template
            </button>
        </form>
    </div>

    <!-- Send Test & Logs -->
    <div style="display: flex; flex-direction: column; gap: 24px;">
        <div class="final-card" style="border-left: 4px solid var(--warning-color);">
            <h3 class="final-card-title" style="font-size: 14px;"><i class="bi bi-lightning-charge" style="color: var(--warning-color)"></i> Instant Test Sequence</h3>
            <form method="POST" action="{{ route('notification-engine.test.send') }}" style="display: flex; flex-direction: column; gap: 12px;">
                @csrf
                <select class="final-select" name="template_slug">
                    @foreach($templates as $tpl)
                    <option value="{{ $tpl->slug }}">{{ $tpl->name }} [{{ strtoupper($tpl->channel) }}]</option>
                    @endforeach
                </select>
                <button class="final-btn final-btn-secondary" style="justify-content: center; width: 100%; background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.1); color: var(--warning-color);">
                    <i class="bi bi-broadcast"></i> Execute Test Delivery
                </button>
            </form>
        </div>

        <div class="final-card">
            <h3 class="final-card-title" style="font-size: 14px;"><i class="bi bi-clock-history"></i> Recent Transmissions</h3>
            <div style="max-height: 380px; overflow-y: auto;">
                @foreach($reminders->take(6) as $r)
                <div class="log-item">
                    <span>{{ strtoupper($r->module) }}#{{ $r->module_id }}</span>
                    <span class="final-badge {{ $r->status == 'sent' ? 'badge-whatsapp' : 'badge-low' }}" style="font-size: 9px; padding: 2px 6px;">{{ $r->status }}</span>
                    <span style="opacity: 0.5;">{{ $r->created_at->diffForHumans() }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Escalation Rules -->
<div class="final-card" style="margin-bottom: 24px; border-top: 4px solid var(--info-color);">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <div>
            <h3 class="final-card-title" style="margin-bottom: 4px;"><i class="bi bi-diagram-3" style="color: var(--info-color)"></i> Escalation Workflow Architect</h3>
            <p class="final-secondary-text">Configure automatic escalation pathways for unresolved critical events.</p>
        </div>
    </div>
    
    <form method="POST" action="{{ route('notification-engine.rules.store') }}" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: flex-end;">
        @csrf
        <div>
            <label class="final-stat-label" style="font-size: 10px;">Rule Definition</label>
            <input class="final-input" name="name" placeholder="e.g. L2 Technical Support" required>
        </div>
        <div>
            <label class="final-stat-label" style="font-size: 10px;">Trigger Delay (Minutes)</label>
            <input class="final-input" type="number" name="delay_minutes" value="60" min="1" required>
        </div>
        <div>
            <label class="final-stat-label" style="font-size: 10px;">Escalation Channel</label>
            <select class="final-select" name="channel">
                <option value="email">Email Notification</option>
                <option value="whatsapp">WhatsApp Direct</option>
                <option value="in_app">Internal Dashboard</option>
            </select>
        </div>
        <div>
            <label class="final-stat-label" style="font-size: 10px;">Escalation Target (Role)</label>
            <select class="final-select" name="notify_role_id">
                <option value="">Super Admin Fallback</option>
                @foreach($roles as $role)
                <option value="{{ $role->id }}">{{ $role->name }}</option>
                @endforeach
            </select>
            <input type="hidden" name="module" value="task">
        </div>
        <button class="final-btn final-btn-primary" style="height: 42px; background: var(--info-color); color: #fff;">
            <i class="bi bi-shield-plus"></i> Activate Rule
        </button>
    </form>
</div>

<!-- Templates List -->
<div class="final-card">
    <h3 class="final-card-title"><i class="bi bi-collection"></i> Active Alert Repositories</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 24px;">
        @foreach($templates as $t)
        @php
            $badgeClass = match($t->channel) {
                'in_app' => 'badge-inapp',
                'email' => 'badge-email',
                'whatsapp' => 'badge-whatsapp',
                'sms' => 'badge-sms',
                default => 'badge-low'
            };
        @endphp
        <div class="template-card">
            <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                <span class="final-badge {{ $badgeClass }}">{{ str_replace('_', ' ', strtoupper($t->channel)) }}</span>
                <div style="display: flex; gap: 8px;">
                    <button class="final-secondary-text hover:text-white transition-colors" title="Edit"><i class="bi bi-pencil-square"></i></button>
                    <button class="final-secondary-text hover:text-red-400 transition-colors" title="Delete"><i class="bi bi-trash3"></i></button>
                </div>
            </div>
            <div>
                <h4 style="margin: 0 0 4px 0; font-size: 15px; font-weight: 800;">{{ $t->name }}</h4>
                <code style="font-size: 10px; color: var(--accent-color); background: rgba(181, 255, 59, 0.05); padding: 2px 6px; border-radius: 4px;">{{ $t->slug }}</code>
            </div>
            <p style="font-size: 12px; color: var(--text-secondary); line-clamp: 2; margin: 4px 0 12px 0;">{{ $t->body }}</p>
            <div style="margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 10px; font-weight: 700; color: var(--text-secondary);">Last updated 2 days ago</span>
                <button class="final-btn final-btn-secondary" style="padding: 4px 10px; font-size: 10px; border-radius: 6px;">Preview</button>
            </div>
        </div>
        @endforeach
    </div>
</div>

@endsection