{{-- resources/views/admin/system/announcements/index.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'System Announcements')
@section('page_title', 'System Announcements')
@section('breadcrumb', 'Manage platform-wide announcements and notifications')

@section('content')

{{-- Header with CTA --}}
<div class="card mb-4">
    <div class="card-body" style="display:flex;align-items:center;justify-content:space-between;">
        <div>
            <h5 style="margin:0;font-size:1rem;font-weight:600;">
                <i class="bi bi-megaphone" style="color:var(--clay);margin-right:8px;"></i>
                Announcements
            </h5>
            <p style="margin:0;font-size:.8rem;color:var(--muted);margin-top:4px;">
                Send notifications and announcements to all or specific properties
            </p>
        </div>
        <a href="{{ route('admin.system.announcements.create') }}"
           class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>
            New Announcement
        </a>
    </div>
</div>

{{-- Announcements Table --}}
<div class="card">
    <div class="card-header">
        <span class="card-title">
            Active & Scheduled Announcements
            <span style="font-size:.75rem;font-weight:400;color:var(--muted);margin-left:6px;">
                {{ $announcements->total() }} total
            </span>
        </span>
    </div>

    @if($announcements->isEmpty())
        <div class="card-body text-center py-5">
            <i class="bi bi-megaphone" style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No announcements</p>
            <p class="text-muted" style="font-size:.82rem;">
                Create an announcement to notify properties
            </p>
            <a href="{{ route('admin.system.announcements.create') }}"
               class="btn btn-sm btn-primary mt-2">
                Create Announcement
            </a>
        </div>
    @else
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Type</th>
                        <th>Active</th>
                        <th>Dismissible</th>
                        <th>Targets</th>
                        <th>Schedule</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($announcements as $announcement)
                        @php
                            // Determine if announcement is currently active
                            $now = now();
                            $isActive = (!$announcement->starts_at || $announcement->starts_at <= $now) &&
                                       (!$announcement->ends_at || $announcement->ends_at >= $now);
                        @endphp
                        <tr>
                            <td>
                                <div class="fw-semibold" style="font-size:.82rem;">
                                    {{ $announcement->title }}
                                </div>
                                <div style="font-size:.7rem;color:var(--muted);
                                           white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                                           max-width:300px;">
                                    {{ Str::limit($announcement->body, 60, '…') }}
                                </div>
                            </td>
                            <td>
                                @php
                                    $typeConfig = [
                                        'info'        => ['icon' => 'ℹ️', 'bg' => '#dbeafe', 'text' => '#1e40af'],
                                        'warning'     => ['icon' => '⚠️', 'bg' => '#fef3c7', 'text' => '#92400e'],
                                        'success'     => ['icon' => '✓', 'bg' => '#d1fae5', 'text' => '#065f46'],
                                        'maintenance' => ['icon' => '🔧', 'bg' => '#f3e8ff', 'text' => '#6b21a8'],
                                    ];
                                    $config = $typeConfig[$announcement->type] ?? $typeConfig['info'];
                                @endphp
                                <span style="font-size:.7rem;font-weight:600;
                                           background:{{ $config['bg'] }};color:{{ $config['text'] }};
                                           padding:3px 10px;border-radius:4px;">
                                    {{ $config['icon'] }} {{ ucfirst($announcement->type) }}
                                </span>
                            </td>
                            <td>
                                @if($isActive)
                                    <span style="color:var(--success);font-weight:600;font-size:.75rem;">
                                        <i class="bi bi-check-circle-fill"></i> Active
                                    </span>
                                @else
                                    <span style="color:var(--muted);font-size:.75rem;">
                                        <i class="bi bi-circle"></i> Inactive
                                    </span>
                                @endif
                            </td>
                            <td style="text-align:center;">
                                @if($announcement->is_dismissible)
                                    <span title="Users can dismiss this" style="color:var(--success);font-size:.9rem;">
                                        <i class="bi bi-check-circle"></i>
                                    </span>
                                @else
                                    <span title="Users cannot dismiss" style="color:var(--danger);font-size:.9rem;">
                                        <i class="bi bi-lock-fill"></i>
                                    </span>
                                @endif
                            </td>
                            <td style="font-size:.75rem;color:var(--muted);">
                                @php
                                    $targets = [];
                                    if ($announcement->target_plan_slugs) {
                                        $targets[] = count((array)$announcement->target_plan_slugs) . ' plans';
                                    }
                                    if ($announcement->target_countries) {
                                        $targets[] = count((array)$announcement->target_countries) . ' countries';
                                    }
                                @endphp
                                @if(!empty($targets))
                                    {{ implode(', ', $targets) }}
                                @else
                                    <span style="color:var(--muted);">All</span>
                                @endif
                            </td>
                            <td style="font-size:.75rem;color:var(--muted);">
                                @if($announcement->starts_at || $announcement->ends_at)
                                    @if($announcement->starts_at)
                                        {{ $announcement->starts_at->format('d M Y') }}
                                    @else
                                        Now
                                    @endif
                                    @if($announcement->ends_at)
                                        → {{ $announcement->ends_at->format('d M Y') }}
                                    @else
                                        → ∞
                                    @endif
                                @else
                                    <span style="color:var(--muted);">—</span>
                                @endif
                            </td>
                            <td>
                                <div style="display:flex;gap:4px;align-items:center;">
                                    <a href="{{ route('admin.system.announcements.edit', $announcement) }}"
                                       class="btn btn-xs btn-outline-secondary"
                                       title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST"
                                          action="{{ route('admin.system.announcements.destroy', $announcement) }}"
                                          style="display:inline;"
                                          onsubmit="return confirm('Delete this announcement?')">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                                class="btn btn-xs btn-outline-danger"
                                                title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($announcements->hasPages())
            <div class="card-body" style="border-top:1px solid var(--border);padding:12px 18px;">
                {{ $announcements->links() }}
            </div>
        @endif
    @endif
</div>

{{-- Announcement Types Legend --}}
<div class="row g-3 mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-palette me-2" style="color:var(--clay)"></i>
                    Announcement Types
                </span>
            </div>
            <div class="card-body">
                <div style="display:grid;gap:10px;font-size:.82rem;">
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#dbeafe;color:#1e40af;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            ℹ️ Info
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            General informational messages (features, updates, tips)
                        </span>
                    </div>
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#fef3c7;color:#92400e;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            ⚠️ Warning
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            Important notices and alerts (deprecations, issues)
                        </span>
                    </div>
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#d1fae5;color:#065f46;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            ✓ Success
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            Positive updates and celebrations (milestones, upgrades)
                        </span>
                    </div>
                    <div style="display:flex;gap:10px;align-items:start;">
                        <span style="background:#f3e8ff;color:#6b21a8;padding:3px 10px;
                                    border-radius:4px;font-weight:600;white-space:nowrap;">
                            🔧 Maintenance
                        </span>
                        <span style="color:var(--muted);line-height:1.4;">
                            Service updates, downtime notices, scheduled maintenance
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-info-circle me-2" style="color:var(--clay)"></i>
                    Targeting
                </span>
            </div>
            <div class="card-body">
                <p style="font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:10px;">
                    You can target announcements to specific groups:
                </p>
                <div style="display:grid;gap:8px;font-size:.82rem;color:var(--muted);">
                    <div>
                        <strong>Plans:</strong> Show only to properties with specific plan (e.g., Pro, Premium)
                    </div>
                    <div>
                        <strong>Countries:</strong> Show only to properties in specific regions (e.g., ZW, ZA)
                    </div>
                    <div>
                        <strong>All:</strong> If no targets selected, shown to all properties
                    </div>
                </div>
                <p style="font-size:.78rem;color:var(--muted);margin-top:10px;margin-bottom:0;">
                    <i class="bi bi-lightbulb"></i> Tip: Leave targets empty to reach everyone
                </p>
            </div>
        </div>
    </div>
</div>

@endsection