@extends('layouts.admin')
@section('title', $segment->exists ? 'Edit '.$segment->name : 'New segment')
@section('content')
@php
  $isEdit = $segment->exists;
  $formQuery = old('logic')
      ? ['logic' => old('logic'), 'rules' => old('rules', [['field' => 'has_orders', 'value' => '1']])]
      : $formQuery;
@endphp

<form
    id="segment-form"
    method="post"
    action="{{ $isEdit ? route('admin.segments.update', $segment) : route('admin.segments.store') }}"
    data-segment-builder
    data-estimate-url="{{ route('admin.segments.estimate') }}"
>
@csrf
@if($isEdit) @method('PUT') @endif

<x-admin.page
    :title="$isEdit ? 'Edit segment' : 'New segment'"
    subtitle="Visual audience builder — compose rules, preview live match counts, then materialize memberships."
>
    <x-slot:actions>
        <a href="{{ route('admin.segments.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i>
            Segments
        </a>
        <button type="button" class="admin-btn" data-estimate-btn>
            <i data-lucide="calculator" class="h-3.5 w-3.5"></i>
            Estimate
        </button>
        <button type="submit" class="admin-btn admin-btn-primary">
            <i data-lucide="save" class="h-3.5 w-3.5"></i>
            {{ $isEdit ? 'Save segment' : 'Create segment' }}
        </button>
    </x-slot:actions>

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            <ul class="list-disc pl-4">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_18rem]">
        <div class="space-y-5">
            <x-admin.section title="Basics" hint="Name and positioning for CRM operators.">
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-admin.field label="Name" name="name" required class="sm:col-span-2">
                        <input name="name" value="{{ old('name', $segment->name) }}" required class="admin-input text-base font-medium" placeholder="High-value gym buyers" data-segment-name>
                    </x-admin.field>
                    <x-admin.field label="Description" name="description" class="sm:col-span-2">
                        <input name="description" value="{{ old('description', $segment->description) }}" maxlength="500" class="admin-input" placeholder="Who this audience is for…">
                    </x-admin.field>
                    <x-admin.field label="Status" name="status">
                        <select name="status" class="admin-input">
                            @foreach(['active' => 'Active', 'archived' => 'Archived'] as $val => $label)
                                <option value="{{ $val }}" @selected(old('status', $segment->status ?? 'active') === $val)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </x-admin.field>
                    <x-admin.field label="Internal notes" name="notes">
                        <input name="notes" value="{{ old('notes', $segment->notes) }}" class="admin-input" placeholder="Campaign, owner, cadence…">
                    </x-admin.field>
                </div>
            </x-admin.section>

            <x-admin.section title="Audience rules" hint="Combine conditions with AND (all must match) or OR (any match). Estimates update as you edit.">
                <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
                    <div class="segment-logic-toggle" role="group" aria-label="Match logic">
                        <label class="segment-logic-option">
                            <input type="radio" name="logic" value="AND" @checked(($formQuery['logic'] ?? 'AND') === 'AND') data-logic>
                            <span>Match all (AND)</span>
                        </label>
                        <label class="segment-logic-option">
                            <input type="radio" name="logic" value="OR" @checked(($formQuery['logic'] ?? '') === 'OR') data-logic>
                            <span>Match any (OR)</span>
                        </label>
                    </div>
                    <div class="rounded-lg border border-[var(--color-admin-border)] bg-[#111] px-4 py-2 text-white">
                        <span class="text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--color-gold)]">Live estimate</span>
                        <div class="text-lg font-semibold tabular-nums" data-estimate-label>~0 customers</div>
                    </div>
                </div>

                <div class="space-y-3" data-rule-rows>
                    @foreach($formQuery['rules'] as $i => $rule)
                        <div class="segment-rule-row" data-rule-row>
                            <div class="admin-select-field">
                                <label class="admin-label">Condition</label>
                                <div class="admin-select-wrap">
                                    <select name="rules[{{ $i }}][field]" class="admin-select" data-rule-field>
                                        @foreach($fields as $field)
                                            <option
                                                value="{{ $field['field'] }}"
                                                data-type="{{ $field['type'] }}"
                                                data-placeholder="{{ $field['placeholder'] ?? '' }}"
                                                @selected(($rule['field'] ?? '') === $field['field'])
                                            >{{ $field['label'] }}</option>
                                        @endforeach
                                    </select>
                                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                                </div>
                            </div>
                            <div data-rule-value-wrap>
                                <label class="admin-label">Value</label>
                                <input name="rules[{{ $i }}][value]" value="{{ $rule['value'] ?? '' }}" class="admin-input" data-rule-value>
                            </div>
                            <div class="flex items-end">
                                <button type="button" class="admin-btn" data-remove-rule {{ $i === 0 ? 'disabled' : '' }}>Remove</button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-3 flex flex-wrap gap-2">
                    <button type="button" class="admin-btn" data-add-rule>
                        <i data-lucide="plus" class="h-3.5 w-3.5"></i> Add condition
                    </button>
                </div>
            </x-admin.section>
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <x-admin.section title="Start from preset">
                <div class="space-y-2">
                    @foreach($presets as $preset)
                        <button
                            type="button"
                            class="segment-preset"
                            data-preset='@json($preset)'
                        >
                            <strong>{{ $preset['name'] }}</strong>
                            <span>{{ $preset['description'] }}</span>
                        </button>
                    @endforeach
                </div>
            </x-admin.section>

            <x-admin.section title="Checklist">
                <ul class="space-y-2 text-sm text-[#6d7175]">
                    <li class="flex gap-2"><i data-lucide="check" class="mt-0.5 h-3.5 w-3.5 text-[var(--color-success)]"></i> Visual rules — no JSON required</li>
                    <li class="flex gap-2"><i data-lucide="check" class="mt-0.5 h-3.5 w-3.5 text-[var(--color-success)]"></i> Live estimate before save</li>
                    <li class="flex gap-2"><i data-lucide="check" class="mt-0.5 h-3.5 w-3.5 text-[var(--color-success)]"></i> Materialize to lock memberships</li>
                    <li class="flex gap-2"><i data-lucide="check" class="mt-0.5 h-3.5 w-3.5 text-[var(--color-success)]"></i> Export members as CSV</li>
                </ul>
            </x-admin.section>
        </div>
    </div>

    <x-admin.sticky-save form="segment-form" hint="Saving re-estimates the audience. Use Refresh on the segment page to materialize memberships." />
</x-admin.page>
</form>

<template id="segment-rule-template">
    <div class="segment-rule-row" data-rule-row>
        <div class="admin-select-field">
            <label class="admin-label">Condition</label>
            <div class="admin-select-wrap">
                <select name="rules[__i__][field]" class="admin-select" data-rule-field>
                    @foreach($fields as $field)
                        <option value="{{ $field['field'] }}" data-type="{{ $field['type'] }}" data-placeholder="{{ $field['placeholder'] ?? '' }}">{{ $field['label'] }}</option>
                    @endforeach
                </select>
                <i data-lucide="chevron-down" class="admin-select-chevron"></i>
            </div>
        </div>
        <div data-rule-value-wrap>
            <label class="admin-label">Value</label>
            <input name="rules[__i__][value]" class="admin-input" data-rule-value>
        </div>
        <div class="flex items-end">
            <button type="button" class="admin-btn" data-remove-rule>Remove</button>
        </div>
    </div>
</template>

<script>
(() => {
  const form = document.querySelector('[data-segment-builder]');
  if (!form) return;

  const rows = form.querySelector('[data-rule-rows]');
  const template = document.getElementById('segment-rule-template');
  const estimateUrl = form.dataset.estimateUrl;
  const estimateLabel = form.querySelector('[data-estimate-label]');
  const csrf = form.querySelector('input[name="_token"]')?.value;
  let timer = null;

  const fieldType = (select) => select?.selectedOptions?.[0]?.dataset?.type || 'text';
  const fieldPlaceholder = (select) => select?.selectedOptions?.[0]?.dataset?.placeholder || '';

  const renderValueInput = (row) => {
    const select = row.querySelector('[data-rule-field]');
    const wrap = row.querySelector('[data-rule-value-wrap]');
    if (!select || !wrap) return;
    const type = fieldType(select);
    const name = select.name.replace('[field]', '[value]');
    const prev = row.querySelector('[data-rule-value]')?.value ?? '';
    const ph = fieldPlaceholder(select);
    let html = `<label class="admin-label">Value</label>`;
    if (type === 'boolean') {
      html += `<select name="${name}" class="admin-input" data-rule-value>
        <option value="1" ${prev === '0' ? '' : 'selected'}>Yes</option>
        <option value="0" ${prev === '0' ? 'selected' : ''}>No</option>
      </select>`;
    } else {
      const inputType = type === 'number' || type === 'money' ? 'number' : 'text';
      const step = type === 'money' ? '0.01' : (type === 'number' ? '1' : undefined);
      html += `<input name="${name}" value="${prev.replace(/"/g, '&quot;')}" class="admin-input" data-rule-value type="${inputType}" ${step ? `step="${step}"` : ''} min="0" placeholder="${ph}">`;
    }
    wrap.innerHTML = html;
  };

  const reindex = () => {
    [...rows.querySelectorAll('[data-rule-row]')].forEach((row, i) => {
      row.querySelectorAll('[name]').forEach((el) => {
        el.name = el.name.replace(/rules\[\d+\]/, `rules[${i}]`).replace(/rules\[__i__\]/, `rules[${i}]`);
      });
      const remove = row.querySelector('[data-remove-rule]');
      if (remove) remove.disabled = i === 0 && rows.children.length === 1;
    });
  };

  const payload = () => {
    const logic = form.querySelector('[data-logic]:checked')?.value || 'AND';
    const rules = [...rows.querySelectorAll('[data-rule-row]')].map((row) => ({
      field: row.querySelector('[data-rule-field]')?.value,
      value: row.querySelector('[data-rule-value]')?.value,
    }));
    return { logic, rules };
  };

  const estimate = async () => {
    if (!estimateUrl) return;
    try {
      const res = await fetch(estimateUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrf,
        },
        body: JSON.stringify(payload()),
      });
      const data = await res.json();
      if (estimateLabel) estimateLabel.textContent = '~' + (data.label || '0 customers');
    } catch {
      if (estimateLabel) estimateLabel.textContent = 'Estimate unavailable';
    }
  };

  const scheduleEstimate = () => {
    clearTimeout(timer);
    timer = setTimeout(estimate, 280);
  };

  rows.addEventListener('change', (e) => {
    const row = e.target.closest('[data-rule-row]');
    if (e.target.matches('[data-rule-field]') && row) renderValueInput(row);
    scheduleEstimate();
  });
  rows.addEventListener('input', scheduleEstimate);
  form.querySelectorAll('[data-logic]').forEach((el) => el.addEventListener('change', scheduleEstimate));

  rows.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-remove-rule]');
    if (!btn || btn.disabled) return;
    btn.closest('[data-rule-row]')?.remove();
    reindex();
    scheduleEstimate();
  });

  form.querySelector('[data-add-rule]')?.addEventListener('click', () => {
    if (!template) return;
    const html = template.innerHTML.replaceAll('__i__', String(rows.children.length));
    const wrap = document.createElement('div');
    wrap.innerHTML = html.trim();
    const row = wrap.firstElementChild;
    rows.appendChild(row);
    renderValueInput(row);
    reindex();
    if (window.lucide?.createIcons) window.lucide.createIcons();
    scheduleEstimate();
  });

  form.querySelector('[data-estimate-btn]')?.addEventListener('click', estimate);

  form.querySelectorAll('[data-preset]').forEach((btn) => {
    btn.addEventListener('click', () => {
      let preset;
      try { preset = JSON.parse(btn.dataset.preset); } catch { return; }
      const nameInput = form.querySelector('[data-segment-name]');
      if (nameInput && !nameInput.value.trim()) nameInput.value = preset.name;
      const desc = form.querySelector('input[name="description"]');
      if (desc && !desc.value.trim()) desc.value = preset.description || '';
      form.querySelectorAll('[data-logic]').forEach((el) => { el.checked = el.value === (preset.logic || 'AND'); });
      rows.innerHTML = '';
      (preset.rules || []).forEach((rule, i) => {
        const html = template.innerHTML.replaceAll('__i__', String(i));
        const wrap = document.createElement('div');
        wrap.innerHTML = html.trim();
        const row = wrap.firstElementChild;
        rows.appendChild(row);
        const select = row.querySelector('[data-rule-field]');
        if (select) select.value = rule.field;
        renderValueInput(row);
        const valueEl = row.querySelector('[data-rule-value]');
        if (valueEl) valueEl.value = rule.value ?? '';
      });
      reindex();
      if (window.lucide?.createIcons) window.lucide.createIcons();
      scheduleEstimate();
    });
  });

  [...rows.querySelectorAll('[data-rule-row]')].forEach(renderValueInput);
  reindex();
  estimate();
})();
</script>
@endsection