@extends('app.shell')

@section('body')
  @php
    /** @var \Illuminate\Support\Collection<int, \App\Models\Group> $groups */
    /** @var \App\Models\Person|null $mePerson */
    $prefill = $group ?? null;
    $defaultGroupId = $prefill && $groups->firstWhere('id', $prefill) ? $prefill : ($groups->first()?->id ?? '');
    $catKeys = ['groceries','food','transport','utilities','stay','fun','shopping','other'];
    $catEmoji = ['groceries'=>'🛒','food'=>'🍽️','transport'=>'🚕','utilities'=>'⚡','stay'=>'🏨','fun'=>'🎉','shopping'=>'🛍️','other'=>'📦'];
  @endphp

  @if ($groups->count() === 0)
    <div class="min-h-screen safe-bottom flex items-center justify-center p-8 text-muted-foreground">
      {{ __('Create a group first.') }}
    </div>
  @else
    <div class="min-h-screen safe-bottom bg-background animate-sheet-up">
      <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-10 md:pb-10 space-y-6">
        <x-sheet-handle />

        <x-page-header title="{{ __('Add expense') }}" back>
          <x-slot:right>
            <x-sheet-save-button form="add-expense-form" disabled />
          </x-slot:right>
        </x-page-header>

        <form id="add-expense-form" method="POST" action="{{ route('app.add-expense.store') }}" class="space-y-6">
          @csrf

          <x-error-alert />

          <div class="text-center py-6">
            <p class="text-[13px] text-muted-foreground mb-3">{{ __('Amount') }}</p>
            <div class="flex items-baseline justify-center gap-0.5">
              <span class="text-[28px] font-light text-muted-foreground/60 tabular-nums">$</span>
              <input
                name="amount"
                type="number"
                inputmode="decimal"
                placeholder="{{ __('0.00') }}"
                class="text-[52px] font-bold text-foreground bg-transparent outline-none text-center w-52 placeholder:text-muted-foreground/20 tracking-tight leading-none"
                required
                autofocus
                data-amount
              />
            </div>
          </div>

          <input
            type="text"
            name="description"
            placeholder="{{ __('What was it?') }}"
            class="w-full apple-card-inset px-4 py-3.5 text-[15px] text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl transition-shadow"
            required
            data-description
          />

          <div>
            <p class="section-header mb-2.5 px-1">{{ __('Date') }}</p>
            <input
              type="date"
              name="expense_date"
              value="{{ now()->toDateString() }}"
              class="w-full apple-card-inset px-4 py-3.5 text-[15px] text-foreground outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
              required
            />
          </div>

          <div>
            <p class="section-header mb-2.5 px-1">{{ __('Group') }}</p>
            <div class="flex gap-2 overflow-x-auto pb-1">
              @foreach ($groups as $g)
                <label class="pill shrink-0 flex items-center gap-1.5 cursor-pointer {{ $g->id === $defaultGroupId ? 'pill-active' : 'pill-inactive' }}">
                  <input
                    type="radio"
                    name="group_id"
                    value="{{ $g->id }}"
                    class="hidden"
                    {{ $g->id === $defaultGroupId ? 'checked' : '' }}
                    data-members='@json($g->members->map(fn($m) => ["id"=>$m->id,"name"=>$m->name,"avatar"=>$m->avatar])->values())'
                  />
                  <span>{{ $g->emoji }}</span>
                  {{ $g->name }}
                </label>
              @endforeach
            </div>
          </div>

          <div>
            <p class="section-header mb-2.5 px-1">{{ __('Who paid') }}</p>
            <div id="payerPills" class="flex gap-2 overflow-x-auto pb-1"></div>
          </div>

          <div>
            <p class="section-header mb-2.5 px-1">{{ __('Category') }}</p>
            <div class="grid grid-cols-4 gap-2">
              @foreach ($catKeys as $cat)
                <label class="flex flex-col items-center gap-1 py-3 rounded-2xl text-[12px] font-medium transition-all duration-200 cursor-pointer apple-card-inset">
                  <input type="radio" name="category" value="{{ $cat }}" class="hidden" {{ $cat === 'other' ? 'checked' : '' }} data-emoji="{{ $catEmoji[$cat] }}" />
                  <span class="text-xl">{{ $catEmoji[$cat] }}</span>
                  {{ ucfirst($cat) }}
                </label>
              @endforeach
            </div>
            <div class="text-[12px] text-muted-foreground mt-2 px-1">
              {{ __('Split type defaults to Equal (more split modes coming next).') }}
            </div>
          </div>

          <input type="hidden" name="emoji" id="categoryEmoji" value="{{ $catEmoji['other'] }}" />

          <button
            type="submit"
            class="w-full py-4 rounded-2xl bg-primary text-primary-foreground text-[17px] font-semibold disabled:opacity-30 transition-opacity duration-200 active:scale-[0.98]"
          >
            {{ __('Add expense') }}
          </button>
        </form>
      </div>
    </div>

    <script>
      (function () {
        const pills = document.getElementById('payerPills');
        const emojiInput = document.getElementById('categoryEmoji');
        if (!pills || !emojiInput) return;

        const meId = @json($mePerson?->id);

        function setActiveLabel(labelEl, active) {
          labelEl.classList.remove('pill-active', 'pill-inactive');
          labelEl.classList.add(active ? 'pill-active' : 'pill-inactive');
        }

        function renderPayers(members, defaultId) {
          pills.innerHTML = '';
          members.forEach((m) => {
            const label = document.createElement('label');
            label.className = 'pill shrink-0 flex items-center gap-1.5 cursor-pointer';
            setActiveLabel(label, m.id === defaultId);

            const input = document.createElement('input');
            input.type = 'radio';
            input.name = 'paid_by_person_id';
            input.value = m.id;
            input.className = 'hidden';
            if (m.id === defaultId) input.checked = true;
            input.addEventListener('change', () => {
              const labels = pills.querySelectorAll('label');
              labels.forEach((l) => setActiveLabel(l, false));
              setActiveLabel(label, true);
            });

            const avatar = document.createElement('span');
            avatar.textContent = m.avatar || '🙂';
            const name = document.createTextNode(' ' + (m.name || ''));

            label.appendChild(input);
            label.appendChild(avatar);
            label.appendChild(name);
            pills.appendChild(label);
          });
        }

        function currentGroupRadio() {
          return document.querySelector('input[name="group_id"]:checked');
        }

        function updatePayersFromGroup() {
          const r = currentGroupRadio();
          const members = r?.dataset?.members ? JSON.parse(r.dataset.members) : [];
          const ids = members.map((m) => m.id);
          const defaultId = (meId && ids.includes(meId)) ? meId : (members[0]?.id || '');
          renderPayers(members, defaultId);
        }

        function syncGroupPillsActive() {
          document.querySelectorAll('label.pill input[name="group_id"]').forEach((input) => {
            const label = input.closest('label');
            if (!label) return;
            setActiveLabel(label, input.checked);
          });
        }

        document.querySelectorAll('input[name="group_id"]').forEach((r) => {
          r.addEventListener('change', () => {
            syncGroupPillsActive();
            updatePayersFromGroup();
          });
        });

        document.querySelectorAll('input[name="category"]').forEach((r) => {
          r.addEventListener('change', () => {
            // Toggle visual active state like React grid.
            document.querySelectorAll('input[name="category"]').forEach((x) => {
              const label = x.closest('label');
              if (!label) return;
              label.classList.remove('bg-primary', 'text-primary-foreground', 'shadow-sm');
              label.classList.add('apple-card-inset', 'text-foreground');
            });
            const label = r.closest('label');
            if (label) {
              label.classList.remove('apple-card-inset', 'text-foreground');
              label.classList.add('bg-primary', 'text-primary-foreground', 'shadow-sm');
            }
            emojiInput.value = r.dataset.emoji || '📦';
          });
        });

        const saveBtn = document.querySelector('[data-save-btn]');
        const amountInput = document.querySelector('[data-amount]');
        const descInput = document.querySelector('[data-description]');

        function syncSaveEnabled() {
          if (!saveBtn || !amountInput || !descInput) return;
          const ok = String(amountInput.value || '').trim() !== '' && String(descInput.value || '').trim() !== '';
          saveBtn.disabled = !ok;
        }

        amountInput?.addEventListener('input', syncSaveEnabled);
        descInput?.addEventListener('input', syncSaveEnabled);

        // Initial paint
        syncGroupPillsActive();
        updatePayersFromGroup();
        syncSaveEnabled();
        // Set initial active category styling
        const catChecked = document.querySelector('input[name="category"]:checked');
        if (catChecked) {
          catChecked.dispatchEvent(new Event('change'));
        }
      })();
    </script>
  @endif
@endsection