@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Person $mePerson */
    /** @var \Illuminate\Support\Collection<int, \App\Models\Person> $people */
    $emojiPresets = ['🛒','📋','🧹','🍽️','🏠','✈️'];
  @endphp

  <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-7">
      <x-sheet-handle />

      <x-page-header title="{{ __('New shared list') }}" back>
        <x-slot:right>
          <x-sheet-save-button form="create-shared-list-form" disabled />
        </x-slot:right>
      </x-page-header>

      <x-error-alert />

      <form id="create-shared-list-form" method="POST" action="{{ route('app.shared-lists.store') }}" class="space-y-7">
        @csrf

        <div class="text-center py-2">
          <div id="listEmojiPreview" class="w-20 h-20 rounded-[22px] bg-primary-muted flex items-center justify-center text-[40px] mx-auto mb-4">
            🛒
          </div>
          <input
            type="text"
            name="name"
            placeholder="{{ __('List name') }}"
            class="text-[24px] font-bold text-foreground bg-transparent outline-none text-center w-full placeholder:text-muted-foreground/25 tracking-tight"
            required
            autofocus
            data-name
          />
        </div>

        <input type="hidden" name="emoji" id="listEmoji" value="🛒" />

        <div>
          <p class="section-header mb-3 px-1">{{ __('Emoji') }}</p>
          <div class="flex flex-wrap gap-2 justify-center">
            @foreach ($emojiPresets as $e)
              <button
                type="button"
                class="w-12 h-12 rounded-2xl text-2xl flex items-center justify-center transition-all apple-card"
                data-emoji="{{ $e }}"
                onclick="window.__pickListEmoji?.(this.dataset.emoji)"
              >
                {{ $e }}
              </button>
            @endforeach
          </div>
        </div>

        <x-member-selector
          :me-person="$mePerson"
          :people="$people"
          title="{{ __('Members') }}"
          description="{{ __('Select who’s in this list.') }}"
        />

        <x-invite-email-panel />

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

  <script>
    window.__pickListEmoji = (e) => {
      const v = e || '🛒';
      const input = document.getElementById('listEmoji');
      const preview = document.getElementById('listEmojiPreview');
      if (input) input.value = v;
      if (preview) preview.textContent = v;
    };

    (function () {
      const saveBtn = document.querySelector('[data-save-btn]');
      const nameInput = document.querySelector('[data-name]');
      function syncSaveEnabled() {
        if (!saveBtn || !nameInput) return;
        saveBtn.disabled = String(nameInput.value || '').trim() === '';
      }
      nameInput?.addEventListener('input', syncSaveEnabled);

      window.WeShareMembers?.initRows?.(document);
      syncSaveEnabled();
    })();
  </script>
@endsection