@extends('layouts.app')

@section('title', 'Campaigns')
@section('page', 'marketing')

@php
  $statusVariant = fn ($s) => match ($s) {
    'Sent' => 'success',
    'Scheduled' => 'info',
    'Draft' => 'warning',
    default => 'danger',
  };
@endphp

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  @if (($canManage ?? false) && ! ($smsReady ?? false))
    <x-alert class="mb-3" variant="warning" icon="bi-exclamation-triangle">
      SMS gateway is not configured.
      <a href="{{ route('settings.sms-gateway') }}">Open SMS Gateway settings</a>
      to enable campaign sending.
    </x-alert>
  @endif

  <x-data-table
    id="campaigns-table"
    class="catalog-table"
    title="Campaigns"
    subtitle="Plan SMS campaigns and send via SMSlenz.lk gateway."
    search-placeholder="Search campaigns..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      @if ($canManage ?? false)
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#campaignModal" data-campaign-add @disabled($templates->isEmpty())>
          <i class="bi bi-plus-lg"></i> Add Campaign
        </button>
      @endif
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Draft</option>
        <option>Scheduled</option>
        <option>Sent</option>
        <option>Cancelled</option>
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="audience" aria-label="Audience">
        <option value="">All Audiences</option>
        <option>All customers</option>
        <option>Active customers</option>
        @foreach ($customerGroups as $group)
          <option>Group: {{ $group->name }}</option>
        @endforeach
      </select>
    </x-slot:filters>
    <x-slot:head>
      <x-data-table-th label="Name" col="name" />
      <x-data-table-th label="Template" col="template" />
      <x-data-table-th label="Audience" col="audience" />
      <x-data-table-th label="Scheduled" col="scheduled" />
      <x-data-table-th label="Recipients" col="recipients" sort-type="number" />
      <x-data-table-th label="Sent" col="sent" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($campaigns as $row)
        <tr data-id="{{ $row->id }}">
          <td data-col="name" class="cell-primary">{{ $row->name }}</td>
          <td data-col="template">{{ $row->smsTemplate?->name ?? 'Custom' }}</td>
          <td data-col="audience">{{ $row->audienceLabel() }}</td>
          <td data-col="scheduled">{{ $row->scheduled_at?->format('Y-m-d H:i') ?? '—' }}</td>
          <td data-col="recipients">{{ $row->recipients_count }}</td>
          <td data-col="sent">{{ $row->sent_count }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge></td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              @if ($row->status === 'Sent')
              <a
                href="{{ route('marketing.campaigns.show', $row) }}"
                class="btn btn-sm btn-icon product-action product-action--transfer"
                title="Performance"
                aria-label="Campaign performance"
              >
                <i class="bi bi-bar-chart" aria-hidden="true"></i>
              </a>
              @elseif ($canManage ?? false)
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--pay"
                title="{{ ($smsReady ?? false) ? 'Send SMS' : 'Configure SMS Gateway first' }}"
                aria-label="Send SMS"
                data-campaign-send
                data-send-url="{{ route('marketing.campaigns.send', $row) }}"
                data-send-label="{{ $row->name }}"
                data-send-audience="{{ $row->audienceLabel() }}"
                data-send-recipients="{{ $row->recipients_count }}"
                @disabled(! ($smsReady ?? false) || $row->status === 'Cancelled')
              >
                <i class="bi bi-send" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--edit"
                title="Edit"
                aria-label="Edit"
                data-campaign-edit
                data-name="{{ $row->name }}"
                data-template-id="{{ $row->sms_template_id }}"
                data-message="{{ e($row->message) }}"
                data-audience="{{ $row->audience }}"
                data-scheduled-at="{{ $row->scheduled_at?->format('Y-m-d\TH:i') }}"
                data-status="{{ $row->status }}"
                data-notes="{{ $row->notes }}"
                data-update-url="{{ route('marketing.campaigns.update', $row) }}"
              >
                <i class="bi bi-pencil" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--delete"
                title="Delete"
                aria-label="Delete"
                data-delete-open
                data-delete-type="campaign"
                data-delete-label="{{ $row->name }}"
                data-delete-url="{{ route('marketing.campaigns.destroy', $row) }}"
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
              @endif
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="8" class="text-center text-muted py-4">No campaigns yet.@if ($templates->isEmpty()) Create an SMS template first.@else Add your first campaign.@endif</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @if ($canManage ?? false)
  <div class="modal fade" id="campaignModal" tabindex="-1" aria-labelledby="campaignModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content edt-modal">
        <form id="campaign-form" method="post" action="{{ route('marketing.campaigns.store') }}" data-store-url="{{ route('marketing.campaigns.store') }}">
          @csrf
          <input type="hidden" name="_method" id="campaign_form_method" value="POST">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="campaignModalLabel">Add campaign</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="sms-template-editor">
              <div class="sms-template-editor__fields">
                <div class="mb-3">
                  <label class="form-label" for="campaign_name">Campaign name</label>
                  <input type="text" class="form-control" id="campaign_name" name="name" required>
                </div>
                <div class="mb-3">
                  <label class="form-label" for="campaign_template_id">SMS template</label>
                  <select class="form-select" id="campaign_template_id" name="sms_template_id">
                    <option value="">Custom message</option>
                    @foreach ($templates as $template)
                      <option value="{{ $template->id }}" data-body="{{ $template->body }}">{{ $template->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label" for="campaign_message">Message</label>
                  <textarea class="form-control" id="campaign_message" name="message" rows="5" required></textarea>
                  <p class="form-text mb-0">Placeholders: {customer_name}, {company_name}, {offer}</p>
                </div>
                <div class="mb-3">
                  <label class="form-label" for="campaign_audience">Audience</label>
                  <select class="form-select" id="campaign_audience" name="audience" required>
                    <option value="all_customers">All customers</option>
                    <option value="active_customers">Active customers</option>
                    @if ($customerGroups->isNotEmpty())
                      <optgroup label="Customer Groups">
                        @foreach ($customerGroups as $group)
                          <option value="group:{{ $group->id }}">{{ $group->name }}</option>
                        @endforeach
                      </optgroup>
                    @endif
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label" for="campaign_scheduled_at">Schedule</label>
                  <input type="datetime-local" class="form-control" id="campaign_scheduled_at" name="scheduled_at">
                </div>
                <div class="mb-3">
                  <label class="form-label" for="campaign_status">Status</label>
                  <select class="form-select" id="campaign_status" name="status">
                    <option value="Draft">Draft</option>
                    <option value="Scheduled">Scheduled</option>
                    <option value="Cancelled">Cancelled</option>
                  </select>
                </div>
                <div class="mb-0">
                  <label class="form-label" for="campaign_notes">Notes</label>
                  <input type="text" class="form-control" id="campaign_notes" name="notes">
                </div>
              </div>

              <div class="sms-template-editor__preview" id="campaign-preview" aria-live="polite">
                <div class="sms-phone">
                  <div class="sms-phone__bezel">
                    <div class="sms-phone__notch" aria-hidden="true"></div>
                    <div class="sms-phone__screen">
                      <div class="sms-phone__status">
                        <span>9:41</span>
                        <span class="sms-phone__status-icons" aria-hidden="true">
                          <i class="bi bi-reception-4"></i>
                          <i class="bi bi-wifi"></i>
                          <i class="bi bi-battery-full"></i>
                        </span>
                      </div>
                      <div class="sms-phone__app-bar">
                        <div class="sms-phone__app-title">Messages</div>
                        <div class="sms-phone__app-meta" id="campaign-preview-chars">0 chars · 1 SMS</div>
                      </div>
                      <div class="sms-phone__chat">
                        <div class="sms-phone__bubble is-empty" id="campaign-preview-text">Message preview will appear here…</div>
                      </div>
                    </div>
                    <div class="sms-phone__home" aria-hidden="true"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="sendCampaignModal" tabindex="-1" aria-labelledby="sendCampaignModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="send-campaign-form" method="post" action="#">
          @csrf
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="sendCampaignModalLabel">Send campaign SMS</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-2">Send SMS for <strong id="send-campaign-name">this campaign</strong>?</p>
            <ul class="mb-0 text-muted small">
              <li>Audience: <span id="send-campaign-audience">—</span></li>
              <li>Estimated recipients: <span id="send-campaign-recipients">0</span></li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary"><i class="bi bi-send"></i> Send now</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="delete-confirm-form" method="post" action="#">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete campaign</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this campaign</strong>?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  @endif
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <style>
    .sms-template-editor {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1.5rem;
      align-items: start;
    }
    .sms-template-editor__preview {
      display: flex;
      justify-content: center;
      padding-top: 0.25rem;
    }
    .sms-phone {
      width: 260px;
    }
    .sms-phone__bezel {
      background: #1a1d23;
      border-radius: 28px;
      padding: 10px 10px 14px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    }
    .sms-phone__notch {
      width: 88px;
      height: 8px;
      margin: 2px auto 8px;
      border-radius: 999px;
      background: #0b0d10;
    }
    .sms-phone__screen {
      background: #eef1f5;
      border-radius: 18px;
      overflow: hidden;
      min-height: 420px;
      display: flex;
      flex-direction: column;
    }
    .sms-phone__status {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.45rem 0.7rem 0.2rem;
      font-size: 0.68rem;
      font-weight: 600;
      color: #111827;
    }
    .sms-phone__status-icons {
      display: inline-flex;
      gap: 0.25rem;
      font-size: 0.72rem;
    }
    .sms-phone__app-bar {
      padding: 0.35rem 0.75rem 0.65rem;
      border-bottom: 1px solid #dde3ea;
      background: #f7f9fb;
    }
    .sms-phone__app-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: #111827;
    }
    .sms-phone__app-meta {
      margin-top: 0.1rem;
      font-size: 0.68rem;
      color: #6b7280;
    }
    .sms-phone__chat {
      flex: 1;
      padding: 0.85rem 0.7rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .sms-phone__bubble {
      align-self: flex-start;
      max-width: 92%;
      background: #fff;
      border: 1px solid #dbe2ea;
      border-radius: 16px 16px 16px 4px;
      padding: 0.7rem 0.8rem;
      font-size: 0.82rem;
      line-height: 1.45;
      color: #111827;
      white-space: pre-wrap;
      word-break: break-word;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }
    .sms-phone__bubble.is-empty {
      color: #9ca3af;
      font-style: italic;
    }
    .sms-phone__home {
      width: 86px;
      height: 4px;
      margin: 10px auto 0;
      border-radius: 999px;
      background: #4b5563;
    }
    @media (max-width: 991.98px) {
      .sms-template-editor {
        grid-template-columns: 1fr;
      }
      .sms-template-editor__preview {
        order: -1;
      }
    }
  </style>
@endpush

@push('scripts')
  <script>
    window.CAMPAIGN_SMS_PREVIEW = {
      customer_name: 'Kamal Perera',
      company_name: @json(\App\Models\Setting::companyName()),
      offer: '10% OFF today',
    };
  </script>
  <script src="{{ asset('assets/js/pages/campaigns.js') }}"></script>
@endpush