@extends('layouts.admin')

@section('title', 'Admin Mail Centre & Broadcast Queue')
@section('page-title', 'Mail Centre & Communication Operations')

@section('content')
<!-- KPI Metric Cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(0, 102, 255, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-bullhorn"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Total Campaigns</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: var(--accent);">{{ $totalCampaigns }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.15); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-check-double"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Delivered Emails</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: var(--success);">{{ number_format($totalDelivered) }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.15); color: #ef4444; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-exclamation-triangle"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Failed Deliveries</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: #ef4444;">{{ number_format($totalFailed) }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(124, 58, 237, 0.15); color: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-file-invoice"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Saved Templates</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: #7c3aed;">{{ $templatesCount }}</strong>
    </div>
  </div>

</div>

<!-- Top Action Header -->
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;">
  <div>
    <h3 style="font-size: 1.25rem; font-family: var(--font-heading); color: var(--text-heading); margin: 0;">
      Broadcast Dispatch Registry
    </h3>
    <span style="font-size: 0.85rem; color: var(--text-light);">
      Asynchronous queue tracking and campaign delivery audits.
    </span>
  </div>

  <div style="display: flex; gap: 0.5rem;">
    <button type="button" onclick="document.getElementById('templateModal').style.display='flex'" class="btn btn-outline btn-sm" style="display: inline-flex; align-items: center; gap: 0.4rem;">
      <i class="fas fa-plus"></i> New Template
    </button>
    <a href="{{ route('admin.mail-centre.create') }}" class="btn btn-primary btn-sm" style="display: inline-flex; align-items: center; gap: 0.4rem;">
      <i class="fas fa-paper-plane"></i> Compose Broadcast
    </a>
  </div>
</div>

<!-- Campaigns Table Card -->
<div class="admin-card" style="margin-bottom: 2rem;">

  <!-- Search & Status Filter -->
  <form method="GET" action="{{ route('admin.mail-centre.index') }}" style="margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
    <div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
      @php
        $statuses = [
          'all' => 'All Broadcasts',
          'completed' => 'Completed',
          'processing' => 'Processing',
          'queued' => 'Queued',
          'failed' => 'Failed',
        ];
      @endphp
      @foreach($statuses as $stKey => $stLabel)
        <a href="{{ route('admin.mail-centre.index', array_merge(request()->query(), ['status' => $stKey, 'page' => 1])) }}"
           class="btn {{ $currentStatus === $stKey ? 'btn-primary' : 'btn-outline' }} btn-sm">
          {{ $stLabel }}
        </a>
      @endforeach
    </div>

    <div style="display: flex; gap: 0.5rem; width: 100%; max-width: 320px;">
      <input type="text" name="search" value="{{ $search }}" placeholder="Search subject..." class="filter-select" style="flex: 1; height: 38px;">
      <button type="submit" class="btn btn-primary btn-sm" style="height: 38px;">Search</button>
    </div>
  </form>

  <div style="overflow-x: auto;">
    <table class="table" style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr style="border-bottom: 2px solid var(--border-light); text-align: left;">
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Campaign Subject</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Target Audience</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Delivery Progress</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Dispatched By</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Status</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Queued At</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light); text-align: right;">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($campaigns as $camp)
          <tr style="border-bottom: 1px solid var(--border-light); font-size: 0.9rem;">
            <!-- Subject -->
            <td style="padding: 0.85rem 0.75rem;">
              <a href="{{ route('admin.mail-centre.show', $camp->id) }}" style="font-weight: 600; color: var(--text-heading); text-decoration: none;">
                {{ $camp->subject }}
              </a>
              @if($camp->attachment_path)
                <span style="font-size: 0.75rem; color: var(--text-light); margin-left: 0.4rem;">
                  <i class="fas fa-paperclip"></i>
                </span>
              @endif
            </td>

            <!-- Target Audience -->
            <td style="padding: 0.85rem 0.75rem; color: var(--text-body); font-size: 0.85rem;">
              {{ $camp->target_type_label }}
            </td>

            <!-- Delivery Progress -->
            <td style="padding: 0.85rem 0.75rem;">
              <div style="font-size: 0.85rem;">
                <span style="color: var(--success); font-weight: 600;">{{ $camp->sent_count }} sent</span>
                @if($camp->failed_count > 0)
                  • <span style="color: #ef4444; font-weight: 600;">{{ $camp->failed_count }} failed</span>
                @endif
                <span style="color: var(--text-light);">/ {{ $camp->recipient_count }} total</span>
              </div>
            </td>

            <!-- Dispatched By -->
            <td style="padding: 0.85rem 0.75rem; color: var(--text-light); font-size: 0.85rem;">
              {{ $camp->sender ? $camp->sender->name : 'System' }}
            </td>

            <!-- Status -->
            <td style="padding: 0.85rem 0.75rem;">
              @php
                $campStatusBadge = match($camp->status) {
                  'completed' => ['bg' => 'rgba(16, 185, 129, 0.15)', 'color' => 'var(--success)', 'label' => 'Completed'],
                  'processing' => ['bg' => 'rgba(245, 158, 11, 0.15)', 'color' => '#d97706', 'label' => 'Processing'],
                  'queued' => ['bg' => 'rgba(14, 165, 233, 0.15)', 'color' => '#0284c7', 'label' => 'Queued'],
                  'failed' => ['bg' => 'rgba(239, 68, 68, 0.15)', 'color' => '#ef4444', 'label' => 'Failed'],
                  default => ['bg' => 'var(--bg-surface)', 'color' => 'var(--text-light)', 'label' => ucfirst($camp->status)],
                };
              @endphp
              <span class="badge" style="background: {{ $campStatusBadge['bg'] }}; color: {{ $campStatusBadge['color'] }}; font-weight: 600; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);">
                {{ $campStatusBadge['label'] }}
              </span>
            </td>

            <!-- Queued At -->
            <td style="padding: 0.85rem 0.75rem; color: var(--text-light); font-size: 0.85rem;">
              {{ $camp->queued_at ? $camp->queued_at->format('d M Y, h:i A') : $camp->created_at->format('d M Y') }}
            </td>

            <!-- Action -->
            <td style="padding: 0.85rem 0.75rem; text-align: right;">
              <a href="{{ route('admin.mail-centre.show', $camp->id) }}" class="btn btn-outline btn-sm" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">
                <i class="fas fa-eye"></i> Details
              </a>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" style="padding: 3rem; text-align: center; color: var(--text-light);">
              <i class="fas fa-inbox" style="font-size: 2.5rem; margin-bottom: 0.75rem; display: block; opacity: 0.5;"></i>
              No broadcast campaigns found in the registry.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  @if($campaigns->hasPages())
    <div style="margin-top: 1.5rem; display: flex; justify-content: center;">
      {{ $campaigns->links() }}
    </div>
  @endif

</div>

<!-- Reusable Email Templates Section -->
<div class="admin-card">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
    <div>
      <h3 style="font-size: 1.15rem; font-family: var(--font-heading); color: var(--text-heading); margin: 0;">
        <i class="fas fa-layer-group" style="color: var(--accent); margin-right: 0.4rem;"></i> Reusable Email Templates
      </h3>
      <span style="font-size: 0.82rem; color: var(--text-light);">
        Pre-approved templates for notifications, statutory advisories, and career drives.
      </span>
    </div>
  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">
    @forelse($templates as $tpl)
      <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between;">
        <div>
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
            <span class="badge" style="background: rgba(0, 102, 255, 0.12); color: var(--accent); font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);">
              {{ $tpl->category }}
            </span>
            <form method="POST" action="{{ route('admin.mail-centre.templates.destroy', $tpl->id) }}" data-ajax="true" onsubmit="return confirm('Delete template \'{{ $tpl->title }}\'?');">
              @csrf
              @method('DELETE')
              <button type="submit" style="background: none; border: none; color: #ef4444; font-size: 0.8rem; cursor: pointer;" title="Delete Template">
                <i class="fas fa-trash"></i>
              </button>
            </form>
          </div>
          <h4 style="font-size: 1rem; margin: 0 0 0.4rem 0; color: var(--text-heading);">{{ $tpl->title }}</h4>
          <p style="font-size: 0.82rem; color: var(--text-light); margin: 0 0 0.75rem 0; font-weight: 500;">
            <strong>Subject:</strong> {{ $tpl->subject }}
          </p>
          <div style="font-size: 0.8rem; color: var(--text-body); max-height: 80px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">
            {{ $tpl->body }}
          </div>
        </div>

        <div style="margin-top: 1rem; border-top: 1px solid var(--border-light); padding-top: 0.75rem; text-align: right;">
          <a href="{{ route('admin.mail-centre.create', ['template_id' => $tpl->id]) }}" class="btn btn-primary btn-sm" style="font-size: 0.8rem;">
            <i class="fas fa-pencil-alt"></i> Use in Broadcast
          </a>
        </div>
      </div>
    @empty
      <div style="grid-column: 1 / -1; padding: 2rem; text-align: center; color: var(--text-light);">
        No saved templates yet. Click "New Template" above to save your first reusable layout.
      </div>
    @endforelse
  </div>
</div>

<!-- Modal: New Template -->
<div id="templateModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; align-items: center; justify-content: center; padding: 1rem;">
  <div style="background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); width: 100%; max-width: 560px; padding: 2rem; box-shadow: var(--shadow-xl);">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
      <h3 style="font-size: 1.25rem; font-family: var(--font-heading); margin: 0; color: var(--text-heading);">
        Create Reusable Email Template
      </h3>
      <button type="button" onclick="document.getElementById('templateModal').style.display='none'" style="background: none; border: none; font-size: 1.25rem; color: var(--text-light); cursor: pointer;">
        &times;
      </button>
    </div>

    <form method="POST" action="{{ route('admin.mail-centre.templates.store') }}" data-ajax="true">
      @csrf

      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-heading);">Template Title <span style="color: #ef4444;">*</span></label>
        <input type="text" name="title" required placeholder="e.g. Aadhaar e-KYC Pending Advisory" class="filter-select" style="width: 100%; height: 40px;">
      </div>

      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-heading);">Category <span style="color: #ef4444;">*</span></label>
        <select name="category" required class="filter-select" style="width: 100%; height: 40px;">
          <option value="Compliance">Statutory & Compliance</option>
          <option value="Job Fair">Job Fair / Placement Drive</option>
          <option value="Internship">Internship & Skill Program</option>
          <option value="Account">Account Security & Verification</option>
          <option value="General">General Announcement</option>
        </select>
      </div>

      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-heading);">Default Email Subject <span style="color: #ef4444;">*</span></label>
        <input type="text" name="subject" required placeholder="Subject line with optional {name} tokens" class="filter-select" style="width: 100%; height: 40px;">
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-heading);">Default Body Content <span style="color: #ef4444;">*</span></label>
        <textarea name="body" rows="6" required placeholder="Write email template text. Use {name}, {registration_id}, {dashboard_url}" class="filter-select" style="width: 100%; height: auto; padding: 0.75rem; font-family: inherit; font-size: 0.9rem;"></textarea>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
        <button type="button" onclick="document.getElementById('templateModal').style.display='none'" class="btn btn-outline btn-sm">Cancel</button>
        <button type="submit" class="btn btn-primary btn-sm">Save Template</button>
      </div>
    </form>
  </div>
</div>
@endsection