@extends('layouts.admin')
@section('title', $isCreate ? 'New discount' : 'Edit discount')
@section('content')
@php
  $type = old('type', $discount->type ?? 'percent');
  $kind = old('kind', $kind ?? 'code');
  $valuePercent = old('value_percent', $type === 'percent' ? rtrim(rtrim(number_format(($discount->value ?? 0) / 100, 2, '.', ''), '0'), '.') : '');
  $valueAmount = old('value_amount', $type === 'fixed' ? number_format(($discount->value ?? 0) / 100, 2, '.', '') : '');
  $minSubtotal = old('min_subtotal', $discount->min_subtotal_cents ? number_format($discount->min_subtotal_cents / 100, 2, '.', '') : '');
  $nav = [
      ['basics', 'Basics', 'badge-percent'],
      ['value', 'Value', 'coins'],
      ['limits', 'Limits & schedule', 'calendar-clock'],
      ['combine', 'Combinations', 'layers'],
  ];
@endphp

<form
    id="discount-form"
    method="post"
    action="{{ $isCreate ? route('admin.discounts.store') : route('admin.discounts.update', $discount) }}"
    data-discount-builder
    data-preview-url="{{ route('admin.discounts.preview') }}"
    data-is-create="{{ $isCreate ? '1' : '0' }}"
>
@csrf
@unless($isCreate) @method('PUT') @endunless

<x-admin.page
    :title="$isCreate ? 'Create discount' : ('Edit '.$discount->code)"
    :subtitle="$isCreate
        ? 'Advanced promotion builder — code or automatic, human-friendly values, live cart preview, schedule, and stacking rules.'
        : 'Update value, schedule, limits, and combination rules. Values are stored as percent×100 or cents.'"
>
    <x-slot:actions>
        <a href="{{ route('admin.discounts.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i> Discounts
        </a>
        <button type="button" class="admin-btn" data-preview-btn>
            <i data-lucide="calculator" class="h-3.5 w-3.5"></i> Preview
        </button>
        <button type="submit" class="admin-btn admin-btn-primary">
            <i data-lucide="save" class="h-3.5 w-3.5"></i>
            {{ $isCreate ? 'Create discount' : 'Save changes' }}
        </button>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @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="product-editor-nav mb-5" data-discount-nav>
        @foreach($nav as [$id, $label, $icon])
            <a href="#section-{{ $id }}" class="product-editor-nav-item{{ $loop->first ? ' is-active' : '' }}" data-nav-for="section-{{ $id }}">
                <i data-lucide="{{ $icon }}" class="h-3.5 w-3.5"></i>{{ $label }}
            </a>
        @endforeach
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <div class="space-y-5">
            <div id="section-basics" data-editor-section>
                <x-admin.section title="How customers get it" hint="Codes are entered at cart/checkout. Automatic discounts apply when rules match — no code required.">
                    @if($isCreate)
                        <div class="discount-kind-grid" role="radiogroup" aria-label="Discount kind">
                            <label class="discount-kind-card">
                                <input type="radio" name="kind" value="code" @checked($kind === 'code') data-kind>
                                <span class="discount-kind-card-body">
                                    <i data-lucide="ticket" class="h-5 w-5"></i>
                                    <strong>Discount code</strong>
                                    <span>Customer enters a code like TRA10</span>
                                </span>
                            </label>
                            <label class="discount-kind-card">
                                <input type="radio" name="kind" value="automatic" @checked($kind === 'automatic') data-kind>
                                <span class="discount-kind-card-body">
                                    <i data-lucide="sparkles" class="h-5 w-5"></i>
                                    <strong>Automatic</strong>
                                    <span>Applies when cart conditions match</span>
                                </span>
                            </label>
                        </div>
                    @else
                        <input type="hidden" name="kind" value="code">
                        <p class="text-sm text-[#6d7175]">Editing discount code <span class="font-mono font-semibold text-[#202223]">{{ $discount->code }}</span></p>
                    @endif

                    <div class="mt-4 grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="Title" name="title" class="sm:col-span-2">
                            <input name="title" value="{{ old('title', $discount->title) }}" class="admin-input text-base font-medium" placeholder="Summer training sale" data-title-input>
                        </x-admin.field>
                        <div data-code-fields class="sm:col-span-2 {{ $kind === 'automatic' && $isCreate ? 'hidden' : '' }}">
                            <x-admin.field label="Code" name="code" help="Letters & numbers. Stored uppercase.">
                                <div class="flex gap-2">
                                    <input name="code" value="{{ old('code', $discount->code) }}" class="admin-input font-mono uppercase" placeholder="SUMMER20" data-code-input {{ $isCreate ? '' : 'readonly' }} autocomplete="off">
                                    @if($isCreate)
                                        <button type="button" class="admin-btn shrink-0" data-generate-code>
                                            <i data-lucide="dices" class="h-3.5 w-3.5"></i> Generate
                                        </button>
                                    @endif
                                </div>
                            </x-admin.field>
                        </div>
                    </div>
                </x-admin.section>
            </div>

            <div id="section-value" data-editor-section>
                <x-admin.section title="Discount type & value" hint="Enter percentages as 10 for 10%. Fixed amounts in AUD dollars — we store cents / basis points for the engine.">
                    <div class="discount-type-grid" role="radiogroup" aria-label="Discount type">
                        @foreach([
                            'percent' => ['Percentage', 'percent', 'e.g. 10% off'],
                            'fixed' => ['Fixed amount', 'banknote', 'e.g. AUD 50 off'],
                            'free_shipping' => ['Free shipping', 'truck', 'Waives shipping'],
                            'bxgy' => ['Buy X get Y', 'gift', 'Stub ~10% today'],
                        ] as $val => [$label, $icon, $help])
                            <label class="discount-type-card">
                                <input type="radio" name="type" value="{{ $val }}" @checked($type === $val) data-type>
                                <span class="discount-type-card-body">
                                    <i data-lucide="{{ $icon }}" class="h-4 w-4"></i>
                                    <strong>{{ $label }}</strong>
                                    <span>{{ $help }}</span>
                                </span>
                            </label>
                        @endforeach
                    </div>

                    <div class="mt-4 grid gap-4 sm:grid-cols-2">
                        <div data-field-percent class="{{ $type === 'percent' ? '' : 'hidden' }}">
                            <x-admin.field label="Percentage off" name="value_percent" help="Stored as value × 100 (10% → 1000).">
                                <div class="relative">
                                    <input type="number" name="value_percent" step="0.01" min="0" max="100" value="{{ $valuePercent }}" class="admin-input pr-10" data-value-percent placeholder="10">
                                    <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-sm text-[#6d7175]">%</span>
                                </div>
                            </x-admin.field>
                        </div>
                        <div data-field-fixed class="{{ $type === 'fixed' ? '' : 'hidden' }}">
                            <x-admin.field label="Amount off" name="value_amount" help="AUD dollars; stored as cents.">
                                <div class="relative">
                                    <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-[#6d7175]">$</span>
                                    <input type="number" name="value_amount" step="0.01" min="0" value="{{ $valueAmount }}" class="admin-input pl-7" data-value-amount placeholder="50.00">
                                </div>
                            </x-admin.field>
                        </div>
                        <x-admin.field label="Minimum subtotal" name="min_subtotal" help="Optional cart minimum in AUD.">
                            <div class="relative">
                                <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-[#6d7175]">$</span>
                                <input type="number" name="min_subtotal" step="0.01" min="0" value="{{ $minSubtotal }}" class="admin-input pl-7" data-min-subtotal placeholder="0.00">
                            </div>
                        </x-admin.field>
                    </div>
                </x-admin.section>
            </div>

            <div id="section-limits" data-editor-section>
                <x-admin.section title="Limits & schedule">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="Total usage limit" name="usage_limit" help="Leave blank for unlimited." data-code-limits class="{{ $kind === 'automatic' && $isCreate ? 'hidden' : '' }}">
                            <input type="number" name="usage_limit" value="{{ old('usage_limit', $discount->usage_limit) }}" min="1" class="admin-input" placeholder="Unlimited">
                        </x-admin.field>
                        <x-admin.field label="Per-customer limit" name="per_customer_limit" data-code-limits class="{{ $kind === 'automatic' && $isCreate ? 'hidden' : '' }}">
                            <input type="number" name="per_customer_limit" value="{{ old('per_customer_limit', $discount->per_customer_limit) }}" min="1" class="admin-input" placeholder="Unlimited">
                        </x-admin.field>
                        <div data-auto-priority class="{{ $kind === 'code' || ! $isCreate ? 'hidden' : '' }}">
                            <x-admin.field label="Priority" name="priority" help="Lower numbers win first among automatics.">
                                <input type="number" name="priority" value="{{ old('priority', 100) }}" min="1" class="admin-input">
                            </x-admin.field>
                        </div>
                        <x-admin.field label="Timezone" name="timezone">
                            <select name="timezone" class="admin-input">
                                @foreach(['Australia/Sydney','Australia/Melbourne','Pacific/Auckland','UTC'] as $tz)
                                    <option value="{{ $tz }}" @selected(old('timezone', $discount->timezone ?? 'Australia/Sydney') === $tz)>{{ $tz }}</option>
                                @endforeach
                            </select>
                        </x-admin.field>
                        <x-admin.field label="Starts at" name="starts_at">
                            <input type="datetime-local" name="starts_at" value="{{ old('starts_at', optional($discount->starts_at)->format('Y-m-d\TH:i')) }}" class="admin-input" data-starts-at>
                        </x-admin.field>
                        <x-admin.field label="Ends at" name="ends_at">
                            <input type="datetime-local" name="ends_at" value="{{ old('ends_at', optional($discount->ends_at)->format('Y-m-d\TH:i')) }}" class="admin-input" data-ends-at>
                        </x-admin.field>
                    </div>
                </x-admin.section>
            </div>

            <div id="section-combine" data-editor-section>
                <x-admin.section title="Combinations" hint="Control whether this stacks with product, order, or shipping discounts.">
                    <div class="grid gap-3 sm:grid-cols-3">
                        <label class="discount-combine-card">
                            <input type="checkbox" name="combines_product" value="1" @checked(old('combines_product', $discount->combines_product ?? false))>
                            <span>
                                <strong>Product</strong>
                                <span>Stack with product-level offers</span>
                            </span>
                        </label>
                        <label class="discount-combine-card">
                            <input type="checkbox" name="combines_order" value="1" @checked(old('combines_order', $discount->combines_order ?? false))>
                            <span>
                                <strong>Order</strong>
                                <span>Stack with other order discounts</span>
                            </span>
                        </label>
                        <label class="discount-combine-card">
                            <input type="checkbox" name="combines_shipping" value="1" @checked(old('combines_shipping', $discount->combines_shipping ?? false))>
                            <span>
                                <strong>Shipping</strong>
                                <span>Stack with shipping offers</span>
                            </span>
                        </label>
                    </div>
                </x-admin.section>
            </div>
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <x-admin.section title="Status">
                <label class="flex items-center gap-2 text-sm">
                    <input type="checkbox" name="active" value="1" @checked(old('active', $discount->active ?? true))>
                    Active — available at checkout
                </label>
            </x-admin.section>

            <div class="rounded-xl border border-[var(--color-admin-border)] bg-gradient-to-br from-[#111] to-[#2a2a2a] p-5 text-white">
                <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-[var(--color-gold)]">Live summary</p>
                <h3 class="mt-2 text-lg font-semibold" data-summary-title>{{ old('title', $discount->title) ?: 'Untitled discount' }}</h3>
                <p class="mt-1 font-mono text-sm text-white/70" data-summary-code>{{ old('code', $discount->code) ?: 'AUTOMATIC' }}</p>
                <p class="mt-3 text-2xl font-semibold tabular-nums" data-summary-offer>—</p>
                <dl class="mt-4 space-y-2 border-t border-white/10 pt-4 text-sm text-white/70">
                    <div class="flex justify-between gap-3"><dt>Sample subtotal</dt><dd class="text-white" data-preview-subtotal-label>AUD 200.00</dd></div>
                    <div class="flex justify-between gap-3"><dt>Discount</dt><dd class="text-[var(--color-gold)]" data-preview-discount>AUD 0.00</dd></div>
                    <div class="flex justify-between gap-3"><dt>Shipping discount</dt><dd class="text-white" data-preview-ship>AUD 0.00</dd></div>
                    <div class="flex justify-between gap-3 font-medium text-white"><dt>Payable</dt><dd data-preview-payable>AUD 200.00</dd></div>
                </dl>
                <p class="mt-3 text-xs text-red-300 hidden" data-preview-rejection></p>
            </div>

            <x-admin.section title="Preview cart">
                <div class="grid gap-3">
                    <x-admin.field label="Subtotal (AUD)" name="preview_subtotal">
                        <input type="number" step="0.01" min="0" value="200" class="admin-input" data-preview-subtotal>
                    </x-admin.field>
                    <x-admin.field label="Shipping (AUD)" name="preview_shipping">
                        <input type="number" step="0.01" min="0" value="15" class="admin-input" data-preview-shipping>
                    </x-admin.field>
                </div>
            </x-admin.section>

            @if($isCreate)
                <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>
            @endif
        </div>
    </div>

    <x-admin.sticky-save form="discount-form" hint="Server-side evaluation only — never trust client totals. Percent stored as ×100; fixed as cents." />
</x-admin.page>
</form>

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

  const csrf = form.querySelector('input[name="_token"]')?.value;
  const previewUrl = form.dataset.previewUrl;
  let timer = null;

  const money = (cents) => {
    const n = Number(cents || 0) / 100;
    return 'AUD ' + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  };

  const kind = () => form.querySelector('[data-kind]:checked')?.value || form.querySelector('input[name="kind"]')?.value || 'code';
  const type = () => form.querySelector('[data-type]:checked')?.value || 'percent';

  const syncKind = () => {
    const isAuto = kind() === 'automatic';
    form.querySelectorAll('[data-code-fields]').forEach((el) => el.classList.toggle('hidden', isAuto && form.dataset.isCreate === '1'));
    form.querySelectorAll('[data-code-limits]').forEach((el) => el.classList.toggle('hidden', isAuto && form.dataset.isCreate === '1'));
    form.querySelectorAll('[data-auto-priority]').forEach((el) => el.classList.toggle('hidden', !isAuto || form.dataset.isCreate !== '1'));
    const codeEl = form.querySelector('[data-summary-code]');
    if (codeEl && isAuto) codeEl.textContent = 'AUTOMATIC';
  };

  const syncType = () => {
    const t = type();
    form.querySelector('[data-field-percent]')?.classList.toggle('hidden', t !== 'percent');
    form.querySelector('[data-field-fixed]')?.classList.toggle('hidden', t !== 'fixed');
  };

  const syncSummary = () => {
    const title = form.querySelector('[data-title-input]')?.value?.trim() || 'Untitled discount';
    const code = form.querySelector('[data-code-input]')?.value?.trim().toUpperCase() || (kind() === 'automatic' ? 'AUTOMATIC' : 'CODE');
    form.querySelector('[data-summary-title]').textContent = title;
    form.querySelector('[data-summary-code]').textContent = code;

    const t = type();
    let offer = '—';
    if (t === 'percent') {
      const p = form.querySelector('[data-value-percent]')?.value || '0';
      offer = `${p}% off`;
    } else if (t === 'fixed') {
      const a = form.querySelector('[data-value-amount]')?.value || '0';
      offer = `AUD ${Number(a).toFixed(2)} off`;
    } else if (t === 'free_shipping') {
      offer = 'Free shipping';
    } else if (t === 'bxgy') {
      offer = 'Buy X get Y';
    }
    form.querySelector('[data-summary-offer]').textContent = offer;
  };

  const preview = async () => {
    if (!previewUrl) return;
    const body = {
      draft: true,
      type: type(),
      code: form.querySelector('[data-code-input]')?.value || null,
      value_percent: form.querySelector('[data-value-percent]')?.value || null,
      value_amount: form.querySelector('[data-value-amount]')?.value || null,
      min_subtotal: form.querySelector('[data-min-subtotal]')?.value || null,
      starts_at: form.querySelector('[data-starts-at]')?.value || null,
      ends_at: form.querySelector('[data-ends-at]')?.value || null,
      subtotal: form.querySelector('[data-preview-subtotal]')?.value || 0,
      shipping: form.querySelector('[data-preview-shipping]')?.value || 0,
    };
    try {
      const res = await fetch(previewUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      form.querySelector('[data-preview-subtotal-label]').textContent = money(data.subtotal_cents);
      form.querySelector('[data-preview-discount]').textContent = money(data.discount_cents);
      form.querySelector('[data-preview-ship]').textContent = money(data.shipping_discount_cents);
      form.querySelector('[data-preview-payable]').textContent = money(data.payable_cents);
      const rej = form.querySelector('[data-preview-rejection]');
      if (data.rejection) {
        rej.textContent = data.rejection;
        rej.classList.remove('hidden');
      } else {
        rej.classList.add('hidden');
      }
      if (data.summary) form.querySelector('[data-summary-offer]').textContent = data.summary;
    } catch {
      /* ignore */
    }
  };

  const schedule = () => {
    syncSummary();
    clearTimeout(timer);
    timer = setTimeout(preview, 250);
  };

  form.querySelectorAll('[data-kind]').forEach((el) => el.addEventListener('change', () => { syncKind(); schedule(); }));
  form.querySelectorAll('[data-type]').forEach((el) => el.addEventListener('change', () => { syncType(); schedule(); }));
  form.addEventListener('input', schedule);
  form.querySelector('[data-preview-btn]')?.addEventListener('click', preview);

  form.querySelector('[data-generate-code]')?.addEventListener('click', () => {
    const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
    let code = 'TRA';
    for (let i = 0; i < 5; i++) code += alphabet[Math.floor(Math.random() * alphabet.length)];
    const input = form.querySelector('[data-code-input]');
    if (input) input.value = code;
    const title = form.querySelector('[data-title-input]');
    if (title && !title.value.trim()) title.value = code + ' offer';
    schedule();
  });

  form.querySelectorAll('[data-preset]').forEach((btn) => {
    btn.addEventListener('click', () => {
      let preset;
      try { preset = JSON.parse(btn.dataset.preset); } catch { return; }
      const kindInput = form.querySelector(`[data-kind][value="${preset.kind}"]`);
      if (kindInput) { kindInput.checked = true; }
      const typeInput = form.querySelector(`[data-type][value="${preset.type}"]`);
      if (typeInput) { typeInput.checked = true; }
      if (form.querySelector('[data-title-input]')) form.querySelector('[data-title-input]').value = preset.name;
      if (form.querySelector('[data-code-input]') && preset.code) form.querySelector('[data-code-input]').value = preset.code;
      if (form.querySelector('[data-value-percent]')) form.querySelector('[data-value-percent]').value = preset.value_percent ?? '';
      if (form.querySelector('[data-value-amount]')) form.querySelector('[data-value-amount]').value = preset.value_amount ?? '';
      if (form.querySelector('[data-min-subtotal]')) form.querySelector('[data-min-subtotal]').value = preset.min_subtotal ?? '';
      syncKind();
      syncType();
      schedule();
    });
  });

  // Section nav
  const navItems = [...form.querySelectorAll('[data-nav-for]')];
  const sections = [...form.querySelectorAll('[data-editor-section]')];
  navItems.forEach((a) => {
    a.addEventListener('click', (e) => {
      e.preventDefault();
      document.getElementById(a.dataset.navFor)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      navItems.forEach((n) => n.classList.toggle('is-active', n === a));
    });
  });
  if ('IntersectionObserver' in window) {
    const io = new IntersectionObserver((entries) => {
      const visible = entries.filter((en) => en.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
      if (visible?.target?.id) {
        navItems.forEach((n) => n.classList.toggle('is-active', n.dataset.navFor === visible.target.id));
      }
    }, { rootMargin: '-20% 0px -55% 0px', threshold: [0.15, 0.4] });
    sections.forEach((s) => io.observe(s));
  }

  syncKind();
  syncType();
  schedule();
})();
</script>
@endsection