@php
  $canManage = $wsMember->canManageTeam();
  $roleInfo = [
      'owner' => ['crown', 'Full control: team, terms, ordering and approvals.'],
      'approver' => ['shield-check', 'Orders without limits and approves buyer requests.'],
      'buyer' => ['shopping-cart', 'Places orders; above their limit they go for approval.'],
      'viewer' => ['eye', 'Sees pricing, orders and statements. Cannot order.'],
  ];
@endphp
<x-layouts.wholesale :seo="$seo" title="Team" subtitle="Give your staff the right level of access — with spending controls">
<section class="grid grid-cols-2 gap-3 lg:grid-cols-4">
  @foreach($roleInfo as $role => [$icon, $text])
    <div class="wd-card wd-reveal p-4" style="--i:{{ $loop->index }}">
      <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-[var(--color-gold)]/15 text-[var(--color-gold-dark)]"><i data-lucide="{{ $icon }}" class="h-4 w-4"></i></span>
      <p class="mt-3 text-sm font-semibold">{{ $roles[$role] }}</p>
      <p class="mt-1 text-xs text-black/50">{{ $text }}</p>
    </div>
  @endforeach
</section>

<div class="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1fr)_380px]">
  <section class="wd-card wd-reveal overflow-hidden" style="--i:4">
    <div class="flex items-center justify-between px-6 pt-6">
      <h2 class="text-lg font-semibold">{{ $members->count() }} {{ str('member')->plural($members->count()) }}</h2>
    </div>
    <ul class="mt-3 divide-y divide-black/5">
      @foreach($members as $member)
        @php $isSelf = $member->is($wsMember); @endphp
        <li class="px-6 py-4">
          <div class="flex flex-wrap items-center gap-4">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-black text-sm font-semibold text-[var(--color-gold)]">{{ strtoupper(substr($member->customer->name ?: $member->customer->email, 0, 1)) }}</span>
            <div class="min-w-0 flex-1">
              <p class="truncate font-medium">{{ $member->customer->name ?: $member->customer->email }} @if($isSelf)<span class="text-xs font-normal text-black/40">(you)</span>@endif</p>
              <p class="truncate text-xs text-black/45">{{ $member->customer->email }} · {{ $member->last_active_at ? 'active '.$member->last_active_at->diffForHumans() : 'invited, not signed in yet' }}</p>
            </div>
            <div class="flex items-center gap-2">
              <span class="wd-pill {{ $member->role === 'owner' ? 'wd-pill-gold' : '' }}"><i data-lucide="{{ $roleInfo[$member->role][0] ?? 'user' }}" class="h-3 w-3"></i>{{ $member->roleLabel() }}</span>
              @if($member->role === 'buyer')
                <span class="wd-pill">{{ $member->order_limit_cents !== null ? 'Limit AUD '.number_format($member->order_limit_cents / 100) : 'No limit' }}</span>
              @endif
            </div>
          </div>
          @if($canManage)
            <details class="mt-3 pl-14">
              <summary class="cursor-pointer list-none text-xs font-medium text-[var(--color-gold-dark)] hover:underline">Edit access</summary>
              <div class="mt-3 flex flex-wrap items-end gap-2">
                <form method="post" action="{{ route('wholesale.team.update', $member) }}" class="flex flex-wrap items-end gap-2">@csrf @method('PUT')
                  <label class="block">
                    <span class="wd-label">Role</span>
                    <select name="role" class="wd-input py-2 text-sm">
                      @foreach($roles as $value => $label)
                        <option value="{{ $value }}" @selected($member->role === $value)>{{ $label }}</option>
                      @endforeach
                    </select>
                  </label>
                  <label class="block">
                    <span class="wd-label">Buyer limit (AUD)</span>
                    <input name="order_limit" type="number" min="0" step="1" value="{{ $member->order_limit_cents !== null ? $member->order_limit_cents / 100 : '' }}" class="wd-input w-36 py-2 text-sm" placeholder="No limit">
                  </label>
                  <button class="wd-btn py-2">Save</button>
                </form>
                @unless($isSelf)
                  <form method="post" action="{{ route('wholesale.team.destroy', $member) }}" data-wd-confirm="Remove {{ $member->customer->name ?: $member->customer->email }} from your team?">@csrf @method('DELETE')
                    <button class="wd-btn py-2 text-red-700"><i data-lucide="user-minus" class="h-4 w-4"></i> Remove</button>
                  </form>
                @endunless
              </div>
            </details>
          @endif
        </li>
      @endforeach
    </ul>
  </section>

  <aside class="lg:sticky lg:top-24 lg:self-start">
    @if($canManage)
      <form method="post" action="{{ route('wholesale.team.store') }}" class="wd-card wd-reveal space-y-4 p-6" style="--i:5">@csrf
        <div>
          <p class="wd-eyebrow">Invite</p>
          <h2 class="mt-1 text-lg font-semibold">Add a team member</h2>
          <p class="mt-1 text-sm text-black/50">They sign in with a one-time code sent to their email — no passwords to share.</p>
        </div>
        <label class="block"><span class="wd-label">Name</span><input name="name" required maxlength="120" value="{{ old('name') }}" class="wd-input"></label>
        <label class="block"><span class="wd-label">Work email</span><input name="email" type="email" required maxlength="190" value="{{ old('email') }}" class="wd-input"></label>
        <div class="grid grid-cols-2 gap-3">
          <label class="block">
            <span class="wd-label">Role</span>
            <select name="role" class="wd-input">
              @foreach(['buyer', 'approver', 'viewer'] as $role)
                <option value="{{ $role }}" @selected(old('role', 'buyer') === $role)>{{ $roles[$role] }}</option>
              @endforeach
            </select>
          </label>
          <label class="block">
            <span class="wd-label">Limit (AUD)</span>
            <input name="order_limit" type="number" min="0" step="1" value="{{ old('order_limit') }}" class="wd-input" placeholder="None">
          </label>
        </div>
        <p class="text-xs text-black/45">Limits apply to buyers only. Orders above the limit are routed to your approvers.</p>
        <button class="wd-btn wd-btn-gold w-full justify-center py-3"><i data-lucide="user-plus" class="h-4 w-4"></i> Send invite</button>
      </form>
    @else
      <div class="wd-card p-6 text-sm text-black/55">Only account owners can invite or change team members.</div>
    @endif
  </aside>
</div>
</x-layouts.wholesale>