@extends('layouts.app')
@section('title', 'Campaign: '.$campaign->name)

@section('content')
<form method="POST" action="{{ route('campaigns.update', $campaign) }}" class="space-y-6"
      x-data="{ step: {{ (int) request('step', 1) }}, audience: '{{ $campaign->segment_id ? 'segment' : 'list' }}', count: null,
                async refreshCount() {
                    const response = await fetch(@js(route('campaigns.recipient-count', $campaign)), { headers: { Accept: 'application/json' } });
                    if (response.ok) this.count = (await response.json()).count;
                } }">
    @csrf @method('PUT')

    {{-- Wizard steps --}}
    <nav class="card flex flex-wrap items-center gap-1 p-2" aria-label="Campaign wizard steps">
        @foreach (['Details', 'Audience', 'Content', 'Sender', 'Sending speed', 'Exclusions'] as $index => $label)
            <button type="button" class="rounded-lg px-3 py-2 text-sm font-medium transition"
                    :class="step === {{ $index + 1 }} ? 'bg-brand-600 text-white' : 'text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800'"
                    @click="step = {{ $index + 1 }}">
                {{ $index + 1 }}. {{ $label }}
            </button>
        @endforeach
        <span class="ml-auto flex items-center gap-2 pr-2">
            <x-status-badge :status="$campaign->status"/>
            <a href="{{ route('campaigns.review', $campaign) }}" class="btn-primary">Review &amp; send →</a>
        </span>
    </nav>

    {{-- Step 1: details --}}
    <div x-show="step === 1" class="card-pad space-y-4">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Campaign details</h2>
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="label" for="name">Name *</label>
                <input id="name" name="name" required class="input" value="{{ old('name', $campaign->name) }}">
                <x-field-error field="name"/>
            </div>
            <div>
                <label class="label" for="description">Description</label>
                <input id="description" name="description" class="input" value="{{ old('description', $campaign->description) }}">
            </div>
        </div>
    </div>

    {{-- Step 2: audience --}}
    <div x-show="step === 2" x-cloak class="card-pad space-y-4">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Who receives this campaign?</h2>
        <div class="flex gap-4 text-sm">
            <label class="flex items-center gap-2"><input type="radio" value="list" x-model="audience" class="text-brand-600"> A contact list</label>
            <label class="flex items-center gap-2"><input type="radio" value="segment" x-model="audience" class="text-brand-600"> A dynamic segment</label>
        </div>
        <div x-show="audience === 'list'">
            <label class="label" for="contact_list_id">Contact list</label>
            <select id="contact_list_id" name="contact_list_id" class="input max-w-md" @change="refreshCount()">
                <option value="">— Choose a list —</option>
                @foreach ($lists as $list)
                    <option value="{{ $list->id }}" @selected($campaign->contact_list_id == $list->id)>{{ $list->name }} ({{ number_format($list->contacts_count) }} contacts)</option>
                @endforeach
            </select>
        </div>
        <div x-show="audience === 'segment'" x-cloak>
            <label class="label" for="segment_id">Segment</label>
            <select id="segment_id" name="segment_id" class="input max-w-md" @change="refreshCount()">
                <option value="">— Choose a segment —</option>
                @foreach ($segments as $segment)
                    <option value="{{ $segment->id }}" @selected($campaign->segment_id == $segment->id)>{{ $segment->name }}</option>
                @endforeach
            </select>
        </div>
        <p class="text-sm text-slate-600 dark:text-slate-300">
            <button type="button" class="btn-secondary" @click="refreshCount()">Estimate recipients</button>
            <span class="ml-2" x-show="count !== null" x-cloak>≈ <strong x-text="count"></strong> eligible recipients (after removing suppressed, unsubscribed, bounced and invalid contacts). Save first if you just changed the audience.</span>
        </p>
    </div>

    {{-- Step 3: content --}}
    <div x-show="step === 3" x-cloak class="card-pad space-y-4">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Email content</h2>
        <div>
            <label class="label" for="email_template_id">Start from template</label>
            <select id="email_template_id" name="email_template_id" class="input max-w-md">
                <option value="">— Keep current content —</option>
                @foreach ($templates as $template)
                    <option value="{{ $template->id }}" @selected($campaign->email_template_id == $template->id)>{{ $template->name }} (v{{ $template->current_version }})</option>
                @endforeach
            </select>
            <p class="help">Choosing a template copies a snapshot into this campaign — later template edits will not change it. <a href="{{ route('templates.index') }}" class="text-brand-600 hover:underline">Manage templates →</a></p>
        </div>
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="label" for="subject">Subject *</label>
                <input id="subject" name="subject" class="input" value="{{ old('subject', $campaign->subject) }}">
            </div>
            <div>
                <label class="label" for="preview_text">Preview text</label>
                <input id="preview_text" name="preview_text" class="input" value="{{ old('preview_text', $campaign->preview_text) }}">
            </div>
        </div>
        <div>
            <label class="label" for="html_body">HTML content</label>
            <textarea id="html_body" name="html_body" rows="14" spellcheck="false" class="input font-mono text-xs">{{ old('html_body', $campaign->html_body) }}</textarea>
            <p class="help">Personalization variables like @{{first_name|there}} and @{{unsubscribe_url}} are supported. A compliant unsubscribe footer is appended automatically if missing.</p>
        </div>
        <div>
            <label class="label" for="text_body">Plain-text version</label>
            <textarea id="text_body" name="text_body" rows="5" class="input font-mono text-xs">{{ old('text_body', $campaign->text_body) }}</textarea>
        </div>
    </div>

    {{-- Step 4: sender --}}
    <div x-show="step === 4" x-cloak class="card-pad space-y-4">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Sender identity</h2>
        <div class="grid gap-4 sm:grid-cols-3">
            <div>
                <label class="label" for="sender_name">Sender name *</label>
                <input id="sender_name" name="sender_name" class="input" value="{{ old('sender_name', $campaign->sender_name) }}">
            </div>
            <div>
                <label class="label" for="sender_email">Sender email *</label>
                <input id="sender_email" name="sender_email" type="email" class="input" value="{{ old('sender_email', $campaign->sender_email) }}">
                <p class="help">Must be a verified address/domain at your email provider.</p>
            </div>
            <div>
                <label class="label" for="reply_to">Reply-to</label>
                <input id="reply_to" name="reply_to" type="email" class="input" value="{{ old('reply_to', $campaign->reply_to) }}">
            </div>
        </div>
    </div>

    {{-- Step 5: sending speed --}}
    <div x-show="step === 5" x-cloak class="card-pad space-y-4">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Sending speed &amp; retries</h2>
        <p class="text-sm text-slate-500">Leave blank to use the global defaults from Settings. Sending happens in small batches every cron run — conservative speeds protect your sender reputation.</p>
        <div class="grid gap-4 sm:grid-cols-4">
            <div>
                <label class="label" for="send_limit_per_run">Emails per cron run</label>
                <input id="send_limit_per_run" name="send_limit_per_run" type="number" min="1" max="500" class="input"
                       value="{{ old('send_limit_per_run', $campaign->send_limit_per_run) }}" placeholder="{{ $defaults['per_run'] }}">
            </div>
            <div>
                <label class="label" for="send_limit_per_hour">Per hour</label>
                <input id="send_limit_per_hour" name="send_limit_per_hour" type="number" min="1" class="input"
                       value="{{ old('send_limit_per_hour', $campaign->send_limit_per_hour) }}" placeholder="{{ $defaults['per_hour'] }}">
            </div>
            <div>
                <label class="label" for="send_limit_per_day">Per day</label>
                <input id="send_limit_per_day" name="send_limit_per_day" type="number" min="1" class="input"
                       value="{{ old('send_limit_per_day', $campaign->send_limit_per_day) }}" placeholder="{{ $defaults['per_day'] }}">
            </div>
            <div>
                <label class="label" for="retry_limit">Max retries</label>
                <input id="retry_limit" name="retry_limit" type="number" min="0" max="10" class="input"
                       value="{{ old('retry_limit', $campaign->retry_limit) }}" placeholder="3">
            </div>
        </div>
    </div>

    {{-- Step 6: exclusions --}}
    <div x-show="step === 6" x-cloak class="card-pad space-y-4">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Exclusions &amp; duplicate protection</h2>
        <div>
            <label class="label" for="duplicate_protection_days">Skip contacts emailed by any campaign in the last … days</label>
            <input id="duplicate_protection_days" name="duplicate_protection_days" type="number" min="0" max="365" class="input max-w-40"
                   value="{{ old('duplicate_protection_days', $campaign->duplicate_protection_days) }}">
            <p class="help">0 disables cross-campaign protection. Duplicate sends inside this campaign are always prevented.</p>
        </div>
        <div>
            <label class="label" for="excluded_contact_ids">Exclude specific contact IDs</label>
            <input id="excluded_contact_ids" name="excluded_contact_ids" class="input"
                   value="{{ old('excluded_contact_ids', implode(',', $campaign->excluded_contact_ids ?? [])) }}"
                   placeholder="e.g. 15, 230, 1044">
            <p class="help">Comma-separated contact IDs (find them on each contact page).</p>
        </div>
    </div>

    <div class="flex items-center justify-between">
        <div class="flex gap-2">
            <button type="button" class="btn-secondary" x-show="step > 1" @click="step--">← Previous</button>
            <button type="button" class="btn-secondary" x-show="step < 6" @click="step++">Next →</button>
        </div>
        <div class="flex gap-2">
            <button class="btn-primary">Save campaign</button>
        </div>
    </div>
</form>
@endsection