@extends('layouts.admin')
@section('title', $segment->id ? 'Edit segment' : 'New segment')
@section('admin')
@php $isNew = ! $segment->id; @endphp
<div class="max-w-4xl">
    <div class="mb-4"><a href="{{ route('admin.segments.index') }}" class="text-sm text-gray-400 hover:text-white"><i class="fa-solid fa-arrow-left mr-1"></i>Back</a></div>

    <h1 class="text-2xl font-bold text-white mb-6">{{ $isNew ? 'New segment' : 'Edit segment' }}</h1>

    <form method="POST" action="{{ $isNew ? route('admin.segments.store') : route('admin.segments.update', $segment) }}"
          x-data="segmentBuilder({{ json_encode($segment->rules ?? ['match' => 'all', 'conditions' => []]) }})"
          class="space-y-5">
        @csrf @if(! $isNew)@method('PUT')@endif

        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5 space-y-4">
            <label class="block text-sm">
                <span class="text-gray-400">Segment name</span>
                <input name="name" value="{{ old('name', $segment->name) }}" required
                       class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
            </label>
            <label class="block text-sm">
                <span class="text-gray-400">Description</span>
                <input name="description" value="{{ old('description', $segment->description) }}"
                       class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
            </label>
        </div>

        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5 space-y-3">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-white">Rules</h2>
                <div class="text-xs text-gray-400">
                    Match
                    <select x-model="rules.match" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-xs">
                        <option value="all">all</option>
                        <option value="any">any</option>
                    </select>
                    of these conditions:
                </div>
            </div>

            <template x-for="(c, i) in rules.conditions" :key="i">
                <div class="flex flex-wrap items-center gap-2 bg-gray-950/60 border border-gray-800 rounded p-2">
                    <select x-model="c.field" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-sm">
                        <option value="status">Status</option>
                        <option value="tag">Has tag</option>
                        <option value="not_tag">Does not have tag</option>
                        <option value="created_at">Subscribed</option>
                        <option value="last_opened_at">Last opened</option>
                        <option value="last_clicked_at">Last clicked</option>
                        <option value="engagement">Engagement (last N days)</option>
                    </select>

                    <template x-if="['status'].includes(c.field)">
                        <select x-model="c.value" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-sm">
                            <option value="active">active</option>
                            <option value="pending">pending</option>
                            <option value="unsubscribed">unsubscribed</option>
                            <option value="bounced">bounced</option>
                        </select>
                    </template>

                    <template x-if="['tag', 'not_tag'].includes(c.field)">
                        <select x-model="c.value" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-sm">
                            @foreach($tags as $t)<option value="{{ $t->slug }}">{{ $t->name }}</option>@endforeach
                        </select>
                    </template>

                    <template x-if="['created_at', 'last_opened_at', 'last_clicked_at'].includes(c.field)">
                        <div class="flex items-center gap-1">
                            <select x-model="c.op" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-sm">
                                <option value="before">before</option>
                                <option value="after">after</option>
                                <option value="never">never (only for opens/clicks)</option>
                            </select>
                            <input type="date" x-model="c.value" x-show="c.op !== 'never'" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-sm">
                        </div>
                    </template>

                    <template x-if="c.field === 'engagement'">
                        <div class="flex items-center gap-1 text-sm text-gray-300">
                            <select x-model="c.op" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-sm">
                                <option value="opened">opened</option>
                                <option value="clicked">clicked</option>
                                <option value="not_opened">did NOT open</option>
                                <option value="not_clicked">did NOT click</option>
                            </select>
                            in last
                            <input type="number" min="1" max="365" x-model.number="c.value" class="w-20 bg-gray-950 border border-gray-700 rounded px-2 py-1 text-white text-sm">
                            days
                        </div>
                    </template>

                    <button type="button" @click="rules.conditions.splice(i, 1)" class="ml-auto text-gray-500 hover:text-red-400 text-sm"><i class="fa-solid fa-xmark"></i></button>
                </div>
            </template>

            <button type="button" @click="rules.conditions.push({field:'status', op:'eq', value:'active'})" class="text-sm text-red-400 hover:text-red-300">
                <i class="fa-solid fa-plus"></i> Add condition
            </button>

            <input type="hidden" name="rules" :value="JSON.stringify(rules)">

            <div class="flex items-center justify-between border-t border-gray-800 pt-3 mt-3">
                <button type="button" @click="preview()" class="text-sm px-3 py-1.5 border border-gray-700 hover:border-red-600 rounded text-gray-200">
                    <i class="fa-solid fa-flask mr-1"></i>Preview count
                </button>
                <div class="text-sm text-gray-300" x-text="previewLabel"></div>
            </div>
        </div>

        <div class="flex justify-end gap-2">
            <a href="{{ route('admin.segments.index') }}" class="px-3 py-2 text-gray-400 text-sm">Cancel</a>
            <button type="submit" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">Save segment</button>
        </div>
    </form>
</div>

<script>
function segmentBuilder(initial) {
    return {
        rules: initial && initial.match ? initial : { match:'all', conditions: [] },
        previewLabel: '',
        async preview() {
            this.previewLabel = 'Counting…';
            const fd = new FormData();
            fd.append('rules', JSON.stringify(this.rules));
            fd.append('_token', '{{ csrf_token() }}');
            try {
                const res = await fetch('{{ route('admin.segments.preview') }}', { method:'POST', body: fd, headers: { 'Accept': 'application/json' } });
                const data = await res.json();
                this.previewLabel = data.count.toLocaleString() + ' subscribers match';
            } catch (e) { this.previewLabel = 'Preview failed'; }
        }
    };
}
</script>
@endsection