@extends('layouts.admin')
@section('title', 'Edit Automation — '.$automation->name)

@section('admin')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="automationEditor()" x-init="init()">
    @include('admin._nav')

    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-2xl font-bold text-white">{{ $automation->name }}</h1>
            <p class="text-sm text-gray-400">Trigger: <span class="text-gray-200">{{ $automation->trigger_type }}</span> &middot; Status: <span class="px-2 py-0.5 bg-gray-800 rounded">{{ $automation->status }}</span></p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('admin.automations.show', $automation) }}" class="px-3 py-2 bg-gray-800 hover:bg-gray-700 text-white text-sm rounded">Stats</a>
            @if($automation->status !== \App\Models\Automation::STATUS_ACTIVE)
                <form method="POST" action="{{ route('admin.automations.activate', $automation) }}">@csrf
                    <button class="px-3 py-2 bg-green-700 hover:bg-green-600 text-white text-sm rounded">Activate</button>
                </form>
            @else
                <form method="POST" action="{{ route('admin.automations.pause', $automation) }}">@csrf
                    <button class="px-3 py-2 bg-yellow-700 hover:bg-yellow-600 text-white text-sm rounded">Pause</button>
                </form>
            @endif
        </div>
    </div>

    @if(session('success'))<div class="mb-4 p-3 rounded bg-green-900/50 border border-green-700 text-green-200">{{ session('success') }}</div>@endif
    @if(session('error'))<div class="mb-4 p-3 rounded bg-red-900/50 border border-red-700 text-red-200">{{ session('error') }}</div>@endif

    <form id="auto-form" method="POST" action="{{ route('admin.automations.update', $automation) }}" class="space-y-6">
        @csrf @method('PUT')
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm text-gray-300 mb-1">Name</label>
                <input name="name" value="{{ old('name', $automation->name) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" required>
            </div>
            <div class="md:col-span-2" x-data="{ tt: @js(old('trigger_type', $automation->trigger_type)) }">
                <label class="block text-sm text-gray-300 mb-1">Trigger</label>
                <select name="trigger_type" x-model="tt" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                    @foreach(['on_subscribe'=>'On subscribe (DOI confirmed)','on_tag_added'=>'On tag added','date_based'=>'Date-based (N days after anchor)','on_devotional_published'=>'On devotional published'] as $v=>$l)
                        <option value="{{ $v }}" @selected(old('trigger_type', $automation->trigger_type)===$v)>{{ $l }}</option>
                    @endforeach
                </select>
                <p class="text-xs text-gray-500 mt-1" x-show="tt==='on_subscribe'">Fires once per subscriber when they DOI-confirm. No config needed.</p>
                <p class="text-xs text-gray-500 mt-1" x-show="tt==='on_tag_added'">Fires when the configured tag is applied. Config: <code class="text-gray-400">{"tag_slug":"daily-devotional"}</code></p>
                <p class="text-xs text-gray-500 mt-1" x-show="tt==='date_based'">Fires when anchor date + offset_days has passed. Config: <code class="text-gray-400">{"anchor":"confirmed_at","offset_days":7}</code> (anchor = created_at | confirmed_at | last_emailed_at)</p>
                <p class="text-xs text-gray-500 mt-1" x-show="tt==='on_devotional_published'">Fires for every active subscriber holding the configured tag whenever a new devotional Video is created. Config: <code class="text-gray-400">{"tag_slug":"daily-devotional"}</code></p>
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm text-gray-300 mb-1">Description</label>
                <input name="description" value="{{ old('description', $automation->description) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm text-gray-300 mb-1">Trigger config (JSON)</label>
                <input name="trigger_config" value="{{ json_encode($automation->trigger_config ?? new stdClass) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white font-mono text-sm">
            </div>
        </div>

        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg text-white font-semibold">Steps</h2>
                <button type="button" @click="addStep()" class="px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-white text-sm rounded">+ Add step</button>
            </div>
            <template x-for="(s, i) in steps" :key="i">
                <div class="border border-gray-800 rounded-lg p-4 mb-3 bg-gray-950/40">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-400 text-xs">Step #<span x-text="i+1"></span> <span x-show="s.id" class="ml-2 text-gray-600">(saved)</span></span>
                        <div class="flex items-center gap-2">
                            <button type="button" x-show="s.id"
                                @click="testEmail = prompt('Send test of this step to which email(s)? (comma-separated)', testEmail || ''); if (testEmail) sendStepTest(s.id, testEmail)"
                                class="text-blue-400 hover:text-blue-300 text-xs">send test</button>
                            <button type="button" @click="steps.splice(i,1)" class="text-red-400 hover:text-red-300 text-xs">remove</button>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                        <div>
                            <label class="block text-xs text-gray-400">Delay (minutes after previous)</label>
                            <input type="number" min="0" x-model.number="s.delay_minutes" :name="`steps[${i}][delay_minutes]`" class="w-full px-2 py-1 bg-gray-950 border border-gray-700 rounded text-white text-sm">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-xs text-gray-400">Subject</label>
                            <input x-model="s.subject" :name="`steps[${i}][subject]`" class="w-full px-2 py-1 bg-gray-950 border border-gray-700 rounded text-white text-sm" required>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-400">Subject B (A/B variant)</label>
                            <input x-model="s.subject_b" :name="`steps[${i}][subject_b]`" class="w-full px-2 py-1 bg-gray-950 border border-gray-700 rounded text-white text-sm">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-400">A/B split %</label>
                            <input type="number" min="0" max="50" x-model.number="s.ab_split_percent" :name="`steps[${i}][ab_split_percent]`" class="w-full px-2 py-1 bg-gray-950 border border-gray-700 rounded text-white text-sm">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-400">Preheader</label>
                            <input x-model="s.preheader" :name="`steps[${i}][preheader]`" class="w-full px-2 py-1 bg-gray-950 border border-gray-700 rounded text-white text-sm">
                        </div>
                        <div class="md:col-span-3">
                            <label class="block text-xs text-gray-400">Body HTML / MJML</label>
                            <textarea rows="6" x-model="s.compiled_html" :name="`steps[${i}][compiled_html]`" class="w-full px-2 py-1 bg-gray-950 border border-gray-700 rounded text-white text-sm font-mono"></textarea>
                            <input type="hidden" :name="`steps[${i}][mjml_source]`" :value="s.mjml_source ?? ''">
                            <input type="hidden" :name="`steps[${i}][position]`" :value="i+1">
                            <input type="hidden" :name="`steps[${i}][id]`" :value="s.id ?? ''">
                        </div>
                    </div>
                </div>
            </template>
            <p x-show="steps.length===0" class="text-gray-500 text-sm">No steps yet — add one to begin.</p>
        </div>

        <div class="flex justify-end">
            <button class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded font-medium">💾 Save</button>
        </div>
    </form>
</div>

<script>
@php
    $stepsJson = $automation->steps->map(fn($s) => [
        'id' => $s->id,
        'delay_minutes' => $s->delay_minutes,
        'subject' => $s->subject,
        'subject_b' => $s->subject_b,
        'ab_split_percent' => $s->ab_split_percent,
        'preheader' => $s->preheader,
        'compiled_html' => $s->compiled_html,
        'mjml_source' => $s->mjml_source,
    ])->values();
@endphp
function automationEditor() {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content
        || document.querySelector('input[name="_token"]')?.value || '';
    return {
        testEmail: '',
        testStatus: '',
        steps: @json($stepsJson),
        init() {},
        addStep() {
            this.steps.push({
                id: null,
                delay_minutes: this.steps.length === 0 ? 0 : 1440,
                subject: '',
                subject_b: '',
                ab_split_percent: 0,
                preheader: '',
                compiled_html: '<p>Hello @{{first_name}},</p>\n<p>...</p>\n<p><a href="@{{unsubscribe_url}}">Unsubscribe</a></p>',
                mjml_source: '',
            });
        },
        async sendStepTest(stepId, emails) {
            const url = `{{ url('admin/automations/'.$automation->id.'/steps') }}/${stepId}/send-test`;
            try {
                const fd = new FormData();
                fd.append('emails', emails);
                fd.append('_token', csrf);
                const r = await fetch(url, { method: 'POST', body: fd, headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
                if (r.ok) { alert('Test sent to ' + emails); }
                else { alert('Send failed (' + r.status + ')'); }
            } catch (e) { alert('Send failed: ' + e.message); }
        },
    };
}
</script>
@endsection