@props(['form', 'tone' => 'dark', 'defaults' => [], 'product' => null, 'ctaLabel' => null, 'action' => null, 'showHeader' => true])
@php
  $layout = app(\App\Support\Storefront\FormLayout::class);
  $defaults = collect($defaults);
  if ($product) {
      $defaults->put('product', $defaults->get('product') ?: $product->title);
      if (blank($defaults->get('details'))) {
          $defaults->put('details', 'Interested in custom branding for '.$product->title.'.');
      }
      if (blank($defaults->get('grade')) && $product->grade) {
          $defaults->put('grade', $product->grade);
      }
  }

  if ($form) {
      $isNewsletter = $form->title === 'Newsletter' || $form->handle === 'newsletter';
      $isQuote = $product || in_array($form->handle, ['rfq', 'inline-quote'], true);
      $isContact = $form->handle === 'contact';
      $steps = $layout->steps($form->fields, (bool) $form->multi_step);
      $stepCount = count($steps);
      $prefix = 'tf-'.$form->handle;
      $eyebrow = match (true) {
          $isNewsletter => 'Stay close',
          $isQuote => 'Custom branded quote',
          $isContact => 'Get in touch',
          default => config('app.name'),
      };
      $badgeIcon = match (true) {
          $isNewsletter => 'mail-plus',
          $isQuote => 'pen-tool',
          $isContact => 'messages-square',
          default => 'clipboard-list',
      };
      $subtitle = $form->description ?: match (true) {
          $isNewsletter => 'New canvas drops, event offers and care tips. No spam, unsubscribe anytime.',
          $isQuote => 'Tell us about your ring and your brand. We reply with pricing, lead time and a mockup plan.',
          $isContact => 'Sizing, freight or an order question — we usually reply the same business day.',
          default => null,
      };
      $submitLabel = $isNewsletter ? 'Subscribe' : ($ctaLabel ?: 'Submit request');
      $valueFor = fn ($field) => old($field->name, $defaults->get($field->name));
  }
@endphp
@if($form)
<form
  id="quote-{{ $form->handle }}"
  method="post"
  action="{{ $action ?? route('forms.submit', $form->handle) }}"
  class="tra-form store-animate-in"
  data-tra-form
  data-step-count="{{ $stepCount }}"
  novalidate
>
  <span class="tra-form-glow" aria-hidden="true"></span>
  @csrf
  <input type="text" name="website_url" class="hidden" tabindex="-1" autocomplete="off" aria-hidden="true">
  <input type="hidden" name="_idempotency" value="{{ \Illuminate\Support\Str::uuid() }}">
  @if($product)
    <input type="hidden" name="product_id" value="{{ $product->id }}">
    <input type="hidden" name="product_handle" value="{{ $product->handle }}">
    <input type="hidden" name="product_title" value="{{ $product->title }}">
  @endif
  @foreach($form->fields->where('type', 'hidden') as $field)
    <input type="hidden" name="{{ $field->name }}" value="{{ old($field->name, data_get($field->hidden_default, 'value')) }}">
  @endforeach

  @if($showHeader)
    <header class="tra-form-head">
      <span class="tra-form-badge" aria-hidden="true"><i data-lucide="{{ $badgeIcon }}"></i></span>
      <div>
        <p class="tra-form-eyebrow">{{ $eyebrow }}</p>
        <h2 class="tra-form-title">{{ $ctaLabel ?: ($isContact ? 'Send us a message' : ($form->title ?? 'Request')) }}</h2>
        @if($subtitle)
          <p class="tra-form-sub">{{ $subtitle }}</p>
        @endif
      </div>
    </header>
  @endif

  @if($errors->any())
    <div class="tra-form-alert" role="alert">
      <i data-lucide="circle-alert"></i>
      <div><strong>Please check the highlighted fields.</strong> {{ $errors->first() }}</div>
    </div>
  @endif

  @if($stepCount > 1)
    <div class="tra-stepper-wrap">
      <ol class="tra-stepper" style="--steps: {{ $stepCount }}">
        @foreach($steps as $index => $step)
          <li class="tra-stepper-item {{ $index === 0 ? 'is-active' : '' }}" data-step-dot="{{ $index }}">
            <button type="button" class="tra-stepper-btn" tabindex="-1" @if($index === 0) aria-current="step" @endif>
              <span class="tra-stepper-dot">
                <i data-lucide="{{ $step['icon'] }}" class="tra-stepper-icon"></i>
                <i data-lucide="check" class="tra-stepper-done"></i>
              </span>
              <span class="tra-stepper-text"><small>Step {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</small> {{ $step['title'] }}</span>
            </button>
          </li>
        @endforeach
      </ol>
      <div class="tra-stepper-bar" aria-hidden="true"><span data-tra-progress style="width: {{ round(100 / $stepCount, 2) }}%"></span></div>
      <p class="sr-only" aria-live="polite" data-tra-step-status>Step 1 of {{ $stepCount }}: {{ $steps[0]['title'] }}</p>
    </div>
  @endif

  <div class="tra-form-steps">
    @foreach($steps as $index => $step)
      <fieldset class="tra-form-step {{ $index === 0 ? 'is-active' : '' }}" data-tra-step="{{ $index }}" data-step-title="{{ $step['title'] }}">
        <legend class="sr-only">{{ $step['title'] }}</legend>
        <div class="tra-form-grid">
          @foreach($step['fields'] as $field)
            @php
              $id = $prefix.'-'.$field->name;
              $error = $errors->first($field->name);
              $value = $valueFor($field);
              $describedBy = trim(($field->help_text ? $id.'-help ' : '').$id.'-error');
            @endphp

            @if($field->type === 'consent')
              <div class="tra-form-cell is-full {{ $error ? 'is-invalid' : '' }}" data-tra-field data-label="{{ $field->label }}">
                <label class="tra-check">
                  <input type="checkbox" name="{{ $field->name }}" value="1" @required($field->required) @checked(old($field->name)) aria-describedby="{{ $describedBy }}">
                  <span class="tra-check-box" aria-hidden="true"><i data-lucide="check"></i></span>
                  <span>{{ $field->label }}@if($field->required) <em class="tra-req">*</em>@endif</span>
                </label>
                <p class="tra-field-error" id="{{ $id }}-error" data-tra-error>{{ $error }}</p>
              </div>

            @elseif($layout->presentsAsChoices($field))
              @php
                $multiple = $field->type === 'multi_select';
                $selected = collect($multiple ? (array) ($value ?? []) : [$value])->map(fn ($v) => (string) $v);
              @endphp
              <div class="tra-form-cell is-full {{ $error ? 'is-invalid' : '' }}" data-tra-field data-label="{{ $field->label }}" @if($field->required) data-required-group @endif role="{{ $multiple ? 'group' : 'radiogroup' }}" aria-labelledby="{{ $id }}-legend" aria-describedby="{{ $describedBy }}">
                <p class="tra-choice-legend" id="{{ $id }}-legend"><i data-lucide="{{ $layout->icon($field) }}"></i>{{ $field->label }}@if($field->required) <em class="tra-req">*</em>@endif @if($multiple)<span>Choose any</span>@endif</p>
                @if($field->help_text)
                  <p class="tra-field-help" id="{{ $id }}-help">{{ $field->help_text }}</p>
                @endif
                <div class="tra-choices">
                  @foreach(($field->options ?? []) as $option)
                    <label class="tra-choice">
                      <input type="{{ $multiple ? 'checkbox' : 'radio' }}" name="{{ $field->name }}{{ $multiple ? '[]' : '' }}" value="{{ $option }}" @checked($selected->contains((string) $option)) @if(! $multiple) @required($field->required) @endif>
                      <span><i data-lucide="check" aria-hidden="true"></i>{{ $option }}</span>
                    </label>
                  @endforeach
                </div>
                <p class="tra-field-error" id="{{ $id }}-error" data-tra-error>{{ $error }}</p>
              </div>

            @else
              <div class="tra-form-cell {{ $layout->isHalfWidth($field) ? 'is-half' : 'is-full' }} {{ $error ? 'is-invalid' : '' }}" data-tra-field data-label="{{ $field->label }}">
                <div class="tra-float {{ $field->type === 'textarea' ? 'is-area' : '' }} {{ in_array($field->type, ['select', 'multi_select', 'date'], true) ? 'is-static' : '' }}">
                  <i data-lucide="{{ $layout->icon($field) }}" class="tra-float-icon" aria-hidden="true"></i>
                  @if($field->type === 'textarea')
                    <textarea id="{{ $id }}" name="{{ $field->name }}" rows="4" placeholder="{{ $field->placeholder ?: 'Sizes, colours, artwork, event date…' }}" @required($field->required) aria-describedby="{{ $describedBy }}" @if($error) aria-invalid="true" @endif class="tra-float-control" data-tra-autosize>{{ $value }}</textarea>
                  @elseif($field->type === 'select' || $field->type === 'multi_select')
                    <select id="{{ $id }}" name="{{ $field->name }}{{ $field->type === 'multi_select' ? '[]' : '' }}" @if($field->type === 'multi_select') multiple @endif @required($field->required) aria-describedby="{{ $describedBy }}" @if($error) aria-invalid="true" @endif class="tra-float-control">
                      @if($field->type === 'select')<option value="">Select…</option>@endif
                      @foreach(($field->options ?? []) as $option)
                        <option value="{{ $option }}" @selected(in_array((string) $option, array_map('strval', (array) $value), true))>{{ $option }}</option>
                      @endforeach
                    </select>
                    @if($field->type === 'select')<i data-lucide="chevron-down" class="tra-float-chevron" aria-hidden="true"></i>@endif
                  @else
                    <input id="{{ $id }}" type="{{ $layout->inputType($field) }}" name="{{ $field->name }}" value="{{ $value }}" placeholder="{{ $field->placeholder ?: ' ' }}" @required($field->required) @if($layout->autocomplete($field)) autocomplete="{{ $layout->autocomplete($field) }}" @endif @if($field->type === 'tel') inputmode="tel" @endif aria-describedby="{{ $describedBy }}" @if($error) aria-invalid="true" @endif class="tra-float-control">
                  @endif
                  <label for="{{ $id }}">{{ $field->label }}@if($field->required) <em class="tra-req">*</em>@endif</label>
                  <span class="tra-float-state" aria-hidden="true"><i data-lucide="circle-check" class="is-ok"></i><i data-lucide="circle-alert" class="is-bad"></i></span>
                  @if($field->type === 'textarea')
                    <span class="tra-float-count" data-tra-count aria-hidden="true"></span>
                  @endif
                </div>
                @if($field->help_text)
                  <p class="tra-field-help" id="{{ $id }}-help">{{ $field->help_text }}</p>
                @endif
                <p class="tra-field-error" id="{{ $id }}-error" data-tra-error>{{ $error }}</p>
              </div>
            @endif
          @endforeach

          @if($loop->last)
            <div class="tra-form-cell is-full">
              <label class="tra-check is-quiet">
                <input type="checkbox" name="consent_marketing" value="1" @checked(old('consent_marketing'))>
                <span class="tra-check-box" aria-hidden="true"><i data-lucide="check"></i></span>
                <span>Keep me updated with product news</span>
              </label>
            </div>
          @endif
        </div>
      </fieldset>
    @endforeach
  </div>

  <div class="tra-form-actions">
    @if($stepCount > 1)
      <button type="button" class="tra-form-back" data-tra-back hidden><i data-lucide="arrow-left"></i><span>Back</span></button>
      <button type="button" class="tra-form-next" data-tra-next><span>Continue</span><i data-lucide="arrow-right"></i></button>
    @endif
    <button type="submit" class="tra-form-submit" data-tra-submit>
      <span class="tra-form-submit-label">{{ $submitLabel }}</span>
      <i data-lucide="{{ $isNewsletter ? 'mail-check' : 'send' }}" class="tra-form-submit-icon"></i>
      <span class="tra-form-spinner" aria-hidden="true"></span>
    </button>
  </div>

  <ul class="tra-form-trust">
    <li><i data-lucide="lock-keyhole"></i> Private &amp; secure</li>
    <li><i data-lucide="clock-3"></i> Reply within 1 business day</li>
    <li><i data-lucide="badge-check"></i> No obligation</li>
  </ul>
</form>
@endif