@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Person|null $mePerson */
    /** @var \Illuminate\Support\Collection<int, \App\Models\GroupInvitation> $invitations */
    /** @var \Illuminate\Support\Collection<int, \App\Models\Group> $groups */
    /** @var float $overallBalance */
    /** @var \App\Models\Profile|null $profile */

    $locale = app()->getLocale();
    $displayCurrency = request()->user()?->profile?->currency ?: 'USD';
    $money = function (float $n) use ($displayCurrency, $locale): string {
      return \App\Support\Money::format((float) $n, $displayCurrency, $locale);
    };
  @endphp

  <div class="min-h-screen safe-bottom animate-fade-in">
    <div class="app-page-wrap pt-14 md:pt-6 lg:pt-8 pb-6 md:pb-8 space-y-5">
      <h1 class="text-[28px] font-bold text-foreground tracking-tight">{{ __('Account') }}</h1>

      <div class="apple-card p-5 flex items-center gap-4">
        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center text-3xl ring-2 ring-primary/10">
          {{ $mePerson?->avatar ?? '🙂' }}
        </div>
        <div class="flex-1 min-w-0">
          <h2 class="text-[17px] font-semibold text-foreground truncate">{{ $profile?->display_name ?: (auth()->user()?->email ?? __('Account')) }}</h2>
          <p class="text-[13px] text-muted-foreground mt-0.5">
            @php
              $bal = (float) ($overallBalance ?? 0);
              $gc = (int) ($groups?->count() ?? 0);
            @endphp
            @if ($bal >= 0)
              {{ __('You’re owed across :count :groups · :amount', ['count' => $gc, 'groups' => $gc === 1 ? __('group') : __('groups'), 'amount' => $money(abs($bal))]) }}
            @else
              {{ __('You owe across :count :groups · :amount', ['count' => $gc, 'groups' => $gc === 1 ? __('group') : __('groups'), 'amount' => $money(abs($bal))]) }}
            @endif
          </p>
        </div>
        <a
          href="{{ route('app.account.profile.edit') }}"
          class="shrink-0 px-3 py-2 rounded-full bg-secondary text-[13px] font-semibold text-foreground active:scale-[0.98] transition-transform"
        >
          {{ __('Edit') }}
        </a>
      </div>

      {{-- Quick Settings (UI parity with React; wiring next) --}}
      <div class="space-y-2.5">
        {{-- Notifications --}}
        <div class="apple-card p-4 flex items-center justify-between gap-3">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-lg bg-sky-500/10 flex items-center justify-center">
              <x-lucide-bell class="w-[18px] h-[18px] text-sky-600" />
            </div>
            <div>
              <p class="text-[15px] font-medium text-foreground">{{ __('Notifications') }}</p>
              <p id="pushStatusText" class="text-[12px] text-muted-foreground mt-0.5">{{ __('Loading…') }}</p>
            </div>
          </div>
          <div class="flex gap-2">
            <button
              type="button"
              id="pushEnableBtn"
              class="px-3 py-2 rounded-full bg-primary text-primary-foreground text-[13px] font-semibold active:scale-[0.98] transition-transform"
              onclick="window.WeSharePush?.enable?.().then(()=>window.location.reload()).catch(()=>{})"
            >
              {{ __('Enable') }}
            </button>
            <button
              type="button"
              id="pushDisableBtn"
              class="px-3 py-2 rounded-full bg-secondary text-foreground text-[13px] font-semibold active:scale-[0.98] transition-transform"
              onclick="window.WeSharePush?.disable?.().then(()=>window.location.reload()).catch(()=>{})"
            >
              {{ __('Disable') }}
            </button>
          </div>
        </div>

        {{-- Language --}}
        <form method="POST" action="{{ route('app.account.preferences.update') }}" class="apple-card p-4 flex items-center justify-between gap-3">
          @csrf
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center">
              <x-lucide-globe class="w-[18px] h-[18px] text-purple-600" />
            </div>
            <p class="text-[15px] font-medium text-foreground">{{ __('Language') }}</p>
          </div>
          <div class="flex rounded-full bg-secondary/80 p-0.5">
            @php $loc = $profile?->locale ?: 'en'; @endphp
            <button name="locale" value="en" class="px-3 py-1.5 rounded-full text-[12px] font-semibold transition-colors {{ $loc === 'en' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground' }}">EN</button>
            <button name="locale" value="pt" class="px-3 py-1.5 rounded-full text-[12px] font-semibold transition-colors {{ $loc === 'pt' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground' }}">PT</button>
          </div>
        </form>

        {{-- Currency --}}
        <form method="POST" action="{{ route('app.account.preferences.update') }}" class="apple-card p-4 space-y-3">
          @csrf
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
              <x-lucide-wallet class="w-[18px] h-[18px] text-emerald-600" />
            </div>
            <p class="text-[15px] font-medium text-foreground">{{ __('Currency') }}</p>
          </div>
          <div class="flex gap-2">
            @php $cur = $profile?->currency ?: 'USD'; @endphp
            <button name="currency" value="EUR" class="flex-1 rounded-xl px-3 py-2.5 text-center text-[13px] font-medium transition-colors {{ $cur === 'EUR' ? 'bg-primary text-primary-foreground shadow-sm' : 'bg-secondary/60 text-foreground hover:bg-secondary' }}">EUR</button>
            <button name="currency" value="BRL" class="flex-1 rounded-xl px-3 py-2.5 text-center text-[13px] font-medium transition-colors {{ $cur === 'BRL' ? 'bg-primary text-primary-foreground shadow-sm' : 'bg-secondary/60 text-foreground hover:bg-secondary' }}">BRL</button>
            <button name="currency" value="USD" class="flex-1 rounded-xl px-3 py-2.5 text-center text-[13px] font-medium transition-colors {{ $cur === 'USD' ? 'bg-primary text-primary-foreground shadow-sm' : 'bg-secondary/60 text-foreground hover:bg-secondary' }}">USD</button>
          </div>
        </form>
      </div>

      {{-- Menu --}}
      <div class="apple-card overflow-hidden">
        <x-menu-row
          :href="route('app.insights')"
          icon="bar-chart-3"
          icon-wrap-class="w-8 h-8 rounded-lg flex items-center justify-center bg-blue-500/10 text-blue-600"
        >
          {{ __('Insights') }}
        </x-menu-row>
        <div class="subtle-divider ml-[60px]"></div>
        <x-menu-row
          disabled
          icon="shield"
          icon-wrap-class="w-8 h-8 rounded-lg flex items-center justify-center bg-green-500/10 text-green-600"
        >
          {{ __('Privacy') }}
        </x-menu-row>
        <div class="subtle-divider ml-[60px]"></div>
        <x-menu-row
          disabled
          icon="help-circle"
          icon-wrap-class="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-500/10 text-orange-600"
        >
          {{ __('Help') }}
        </x-menu-row>
        @if (request()->user()?->isSuperAdmin())
          <div class="subtle-divider ml-[60px]"></div>
          <x-menu-row
            :href="route('admin.dashboard')"
            icon="shield-check"
            icon-wrap-class="w-8 h-8 rounded-lg flex items-center justify-center bg-amber-500/10 text-amber-600"
          >
            {{ __('Admin panel') }}
          </x-menu-row>
        @endif
      </div>

      <div class="apple-card p-5 space-y-3">
        <h3 class="text-[15px] font-semibold text-foreground">{{ __('Invitations') }}</h3>
        @if ($invitations->count() === 0)
          <p class="text-[13px] text-muted-foreground">{{ __('No invitations yet.') }}</p>
        @else
          <div class="divide-y divide-border/40">
            @foreach ($invitations as $inv)
              <div class="py-3 flex items-center justify-between gap-3">
                <div class="min-w-0">
                  <p class="text-[14px] font-medium text-foreground truncate">{{ $inv->invited_email }}</p>
                  <p class="text-[12px] text-muted-foreground truncate">
                    {{ $inv->status }} · {{ optional($inv->created_at)->toDayDateTimeString() }}
                  </p>
                </div>
                @if ($inv->status === 'pending')
                  <form method="POST" action="{{ route('app.account.invitations.revoke', ['id' => $inv->id]) }}">
                    @csrf
                    <button
                      type="submit"
                      class="shrink-0 px-3 py-2 rounded-full bg-secondary text-[13px] font-semibold text-foreground"
                    >
                      {{ __('Revoke') }}
                    </button>
                  </form>
                @endif
              </div>
            @endforeach
          </div>
        @endif
        <p class="text-[12px] text-muted-foreground">
          {{ __('Send invites from any group’s Members screen.') }}
        </p>
      </div>

      <form method="POST" action="{{ route('logout') }}">
        @csrf
        <button
          type="submit"
          class="w-full apple-card px-4 py-3.5 flex items-center justify-center gap-2 text-[15px] font-medium text-owe active:bg-secondary/50 transition-colors"
        >
          <x-lucide-log-out class="w-4 h-4" />
          {{ __('Sign out') }}
        </button>
      </form>
    </div>
  </div>

  <script>
    (function () {
      const text = document.getElementById('pushStatusText');
      const onBtn = document.getElementById('pushEnableBtn');
      const offBtn = document.getElementById('pushDisableBtn');
      if (!text || !onBtn || !offBtn) return;

      function setVisible(el, v) { el.style.display = v ? '' : 'none'; }

      window.WeSharePush?.status?.().then((s) => {
        if (!s || s.supported === false) {
          text.textContent = '{{ __('Not supported on this device.') }}';
          setVisible(onBtn, false);
          setVisible(offBtn, false);
          return;
        }
        const perm = s.permission || 'default';
        const subscribed = !!s.subscribed;
        if (perm === 'denied') {
          text.textContent = '{{ __('Blocked in browser settings.') }}';
          setVisible(onBtn, false);
          setVisible(offBtn, subscribed);
          return;
        }
        if (subscribed) {
          text.textContent = '{{ __('Enabled') }}';
          setVisible(onBtn, false);
          setVisible(offBtn, true);
        } else {
          text.textContent = '{{ __('Disabled') }}';
          setVisible(onBtn, true);
          setVisible(offBtn, false);
        }
      }).catch(() => {
        text.textContent = '{{ __('Unable to check status.') }}';
      });
    })();
  </script>
@endsection