@extends('layouts.app')
@section('title', $segment->exists ? 'Edit segment' : 'New segment')

@section('content')
<form method="POST"
      action="{{ $segment->exists ? route('segments.update', $segment) : route('segments.store') }}"
      class="mx-auto max-w-3xl space-y-6"
      x-data='segmentBuilder(@json(old('conditions', $segment->conditions ?? [["field" => "country", "operator" => "equals", "value" => ""]])))'>
    @csrf
    @if ($segment->exists) @method('PUT') @endif

    <div class="card-pad space-y-4">
        <div>
            <label class="label" for="name">Segment name *</label>
            <input id="name" name="name" required class="input" value="{{ old('name', $segment->name) }}">
            <x-field-error field="name"/>
        </div>
        <div>
            <label class="label" for="description">Description</label>
            <textarea id="description" name="description" rows="2" class="input">{{ old('description', $segment->description) }}</textarea>
        </div>
        <div>
            <span class="label">Contacts must match</span>
            <div class="flex gap-4 text-sm">
                <label class="flex items-center gap-2"><input type="radio" name="match_type" value="all" class="text-brand-600" @checked(old('match_type', $segment->match_type ?? 'all') === 'all')> All rules (AND)</label>
                <label class="flex items-center gap-2"><input type="radio" name="match_type" value="any" class="text-brand-600" @checked(old('match_type', $segment->match_type) === 'any')> Any rule (OR)</label>
            </div>
        </div>
    </div>

    <div class="card-pad space-y-3">
        <div class="flex items-center justify-between">
            <h3 class="text-sm font-semibold text-slate-900 dark:text-white">Rules</h3>
            <button type="button" class="btn-secondary" @click="add()">Add rule</button>
        </div>
        <x-field-error field="conditions"/>

        <template x-for="(condition, index) in conditions" :key="index">
            <div class="flex flex-wrap items-center gap-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-800/60">
                <select class="input w-44" :name="'conditions[' + index + '][field]'" x-model="condition.field">
                    @foreach (\App\Models\Segment::FIELDS as $field)
                        <option value="{{ $field }}">{{ ucwords(str_replace('_', ' ', $field)) }}</option>
                    @endforeach
                </select>
                <select class="input w-44" :name="'conditions[' + index + '][operator]'" x-model="condition.operator">
                    @foreach (\App\Models\Segment::OPERATORS as $operator)
                        <option value="{{ $operator }}">{{ ucwords(str_replace('_', ' ', $operator)) }}</option>
                    @endforeach
                </select>
                <input class="input min-w-40 flex-1" :name="'conditions[' + index + '][value]'" x-model="condition.value"
                       :placeholder="placeholder(condition)"
                       x-show="!['is_empty', 'is_not_empty'].includes(condition.operator)">
                <button type="button" class="btn-ghost text-rose-600" @click="remove(index)" aria-label="Remove rule">✕</button>
            </div>
        </template>

        <p class="help">
            Tips: for <strong>Campaign activity</strong> use values like <code>opened</code>, <code>clicked</code>, <code>sent</code> or <code>opened:30</code> (last 30 days).
            For <strong>Created at</strong> with before/after use dates like <code>2026-01-31</code>, or a number of days with “In last days”.
        </p>

        <div class="flex items-center gap-3 border-t border-slate-200 pt-4 dark:border-slate-800">
            <button type="button" class="btn-secondary" @click="preview()">Preview matching contacts</button>
            <span class="text-sm text-slate-500" x-show="count !== null" x-cloak>
                <strong x-text="count"></strong> contacts currently match.
            </span>
        </div>
    </div>

    <div class="flex justify-end gap-2">
        <a href="{{ route('segments.index') }}" class="btn-secondary">Cancel</a>
        <button class="btn-primary">{{ $segment->exists ? 'Save segment' : 'Create segment' }}</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('segmentBuilder', (initial) => ({
            conditions: initial.length ? initial : [{ field: 'country', operator: 'equals', value: '' }],
            count: null,
            add() { this.conditions.push({ field: 'country', operator: 'equals', value: '' }); },
            remove(index) { this.conditions.splice(index, 1); },
            placeholder(condition) {
                if (condition.field === 'campaign_activity') return 'opened / clicked / sent (optionally :days)';
                if (condition.field === 'created_at') return 'YYYY-MM-DD or number of days';
                return 'Value';
            },
            async preview() {
                const response = await fetch(@js(route('segments.preview-count')), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        name: document.getElementById('name').value || 'preview',
                        match_type: document.querySelector('input[name=match_type]:checked').value,
                        conditions: this.conditions,
                    }),
                });
                if (response.ok) {
                    this.count = (await response.json()).count;
                } else {
                    window.dispatchEvent(new CustomEvent('toast', { detail: { message: 'Fix the rule values before previewing.', type: 'error' } }));
                }
            },
        }));
    });
</script>
@endpush