{{-- Dashboard overview (design: Screens · Dashboard). --}}
@extends('layouts.app')
@section('title', 'Overview — InLynq')
@section('heading', 'Overview')

@php
  $k = $report['kpis'];
  $note = 'vs previous '.$report['days'].' days';
  $hour = now()->timezone($user->timezone ?: config('app.timezone'))->hour;
  $greeting = $hour < 12 ? 'Good morning' : ($hour < 17 ? 'Good afternoon' : 'Good evening');
  $left = collect($completion['items'])->where('done', false)->count();
@endphp

@section('content')
<div class="iq-stack" style="gap:24px">
  <div class="iq-row" style="justify-content:space-between;gap:16px">
    <div>
      <h2 style="margin:0;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em">{{ $greeting }}, {{ $user->firstName() }}</h2>
      <p class="iq-muted" style="margin:4px 0 0">
        @if ($profile->isPublished())
          Your profile was viewed {{ number_format($k['views']['value']) }} {{ \Illuminate\Support\Str::plural('time', $k['views']['value']) }} in the last {{ $report['days'] }} days.
        @else
          Your profile isn't published yet.
        @endif
        @if ($left) {{ $left === 1 ? 'One step' : $left.' steps' }} left to complete it. @endif
      </p>
    </div>
    <form method="GET" action="{{ route('dashboard') }}" class="iq-seg" role="group" aria-label="Date range">
      @foreach (['7d' => '7 days', '30d' => '30 days', '90d' => '90 days'] as $key => $label)
        <button name="range" value="{{ $key }}" @class(['is-active' => $range === $key])>{{ $label }}</button>
      @endforeach
    </form>
  </div>

  @if ($rangeGated)
    <div class="iq-banner"><x-iq.icon name="lock" /><div><b>Longer ranges are on Pro.</b> Free keeps the last 7 days. <a class="iq-link" href="{{ route('checkout.show', 'pro-yearly') }}">Upgrade</a></div></div>
  @endif

  @if (! $profile->isPublished())
    <x-iq.empty icon="chart" title="No insights yet." action="Publish profile" :href="route('builder.show')" variant="secondary">Publish your profile to start collecting insights.</x-iq.empty>
  @else
  <div class="app-grid-4">
    <x-iq.kpi label="Profile views" :value="number_format($k['views']['value'])" :delta="$k['views']['delta']" :note="$note" />
    <x-iq.kpi label="Unique visitors" :value="number_format($k['uniques']['value'])" :delta="$k['uniques']['delta']" :note="$note" />
    <x-iq.kpi label="Link clicks" :value="number_format($k['clicks']['value'])" :delta="$k['clicks']['delta']" :note="$note" />
    <x-iq.kpi label="Click-through" :value="$k['ctr']['value'].'%'" :delta="$k['ctr']['delta']" suffix=" pt" :note="$note" />
  </div>
  @endif

  <div class="app-grid-main">
    <div class="iq-stack" style="gap:24px">
      @if ($profile->isPublished())
      <div class="iq-card" style="padding:24px">
        <div class="iq-row" style="justify-content:space-between;margin-bottom:16px"><span style="font-weight:600">Profile views</span><a class="iq-link" style="font-size:13px" href="{{ route('analytics.index', ['range' => $range]) }}">Open analytics</a></div>
        <x-iq.line-chart :series="$report['series']" label="Profile views, last {{ $report['days'] }} days" />
      </div>
      @endif

      <div class="app-grid-2">
        <div class="iq-card" style="padding:24px;display:flex;flex-direction:column;gap:14px">
          <div class="iq-row" style="justify-content:space-between"><span style="font-weight:600">Top-performing sections</span><span class="iq-muted" style="font-size:12px">by clicks</span></div>
          @php($sections = collect($report['targets'])->groupBy('section')->map(fn ($r) => $r->sum('clicks'))->sortDesc())
          @forelse ($sections as $label => $clicks)
            <x-iq.hbar :label="$label" :value="number_format($clicks)" :percent="$clicks / max(1, $sections->max()) * 88" />
          @empty
            <p class="iq-muted" style="margin:0;font-size:14px">Clicks on your links, companies and products will show here.</p>
          @endforelse
        </div>
        <div class="iq-card" style="padding:24px;display:flex;flex-direction:column;gap:12px">
          <span style="font-weight:600">Verification</span>
          @foreach ($verificationRows as $row)
            <div class="iq-row" style="justify-content:space-between;height:36px;font-size:14px;flex-wrap:nowrap">
              <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $row['label'] }}</span>
              @if ($row['state'] === 'none')
                <a class="iq-link" style="font-size:13px" href="{{ route('verification.index') }}">Verify</a>
              @else
                <x-iq.verify :state="$row['state']" :label="$row['state'] === 'verified' ? 'Verified' : 'In review'" />
              @endif
            </div>
          @endforeach
        </div>
      </div>

      <div class="iq-card" style="overflow:hidden">
        <div style="padding:20px 24px 8px;font-weight:600">Recent activity</div>
        @forelse ($activity as $n)
          <div class="iq-notif {{ $n->read_at ? '' : 'unread' }}">
            <span class="iq-avatar sm a3"><x-iq.icon :name="$n->data['icon'] ?? 'bell'" size="sm" /></span>
            <div style="flex:1"><div>{!! \App\Support\RichText::bold($n->data['text'] ?? '') !!}</div><div class="time">{{ $n->created_at->diffForHumans() }}</div></div>
          </div>
        @empty
          <div class="iq-notif"><span class="iq-muted" style="font-size:14px">Nothing yet. Payments, verification updates and testimonials will show here.</span></div>
        @endforelse
      </div>
    </div>

    <div class="iq-stack app-side-first" style="gap:24px">
      <div class="iq-card" style="padding:24px;display:flex;flex-direction:column;gap:16px">
        <div class="iq-row" style="justify-content:space-between"><span style="font-weight:600">Public profile</span><span class="iq-badge {{ $profile->status->badgeClass() }}"><span class="dot"></span>{{ $profile->status->label() }}</span></div>
        <div style="border:1px solid var(--border-subtle);border-radius:14px;padding:20px;background:var(--surface-0);display:flex;gap:14px;align-items:center">
          <x-iq.avatar :name="$user->name" :src="$user->avatar_url" size="lg" />
          <div style="min-width:0">
            <div class="iq-row" style="gap:6px;font-weight:600;font-size:17px">{{ $user->name }}@if($user->is_verified)<x-iq.seal />@endif</div>
            <div class="iq-sub" style="font-size:13px">{{ collect([$user->headline, $user->location ? \Illuminate\Support\Str::before($user->location, ',') : null])->filter()->implode(' · ') ?: 'Add a headline' }}</div>
            <div class="iq-row" style="gap:6px;margin-top:8px"><span class="iq-badge">{{ $counts['companies'] }} {{ \Illuminate\Support\Str::plural('company', $counts['companies']) }}</span><span class="iq-badge">{{ $counts['products'] }} {{ \Illuminate\Support\Str::plural('product', $counts['products']) }}</span></div>
          </div>
        </div>
        @if ($profile->hasUnpublishedChanges() && $profile->isPublished())
          <p class="iq-help" style="margin:0">{{ $profile->pending_changes }} unpublished {{ \Illuminate\Support\Str::plural('change', $profile->pending_changes) }}.</p>
        @endif
        <div class="iq-row"><a class="iq-btn iq-btn-primary iq-btn-sm" href="{{ route('builder.show') }}"><x-iq.icon name="edit" /> Edit profile</a><button type="button" class="iq-btn iq-btn-secondary iq-btn-sm" data-copy="{{ \App\Support\PublicUrl::profile($user->username) }}"><x-iq.icon name="copy" /> Copy link</button></div>
      </div>

      <div class="iq-card" style="padding:24px;display:flex;flex-direction:column;gap:16px">
        <div class="iq-row" style="justify-content:space-between"><span style="font-weight:600">Profile completion</span><span class="iq-num" style="font-weight:500">{{ $completion['percent'] }}%</span></div>
        <div class="iq-progress"><span style="width:{{ $completion['percent'] }}%"></span></div>
        <div>
          @foreach ($completion['items'] as $item)
            <a href="{{ route($item['route']) }}" class="iq-row app-link-reset" style="gap:10px;font-size:14px;height:32px;{{ $item['done'] ? 'color:var(--ink-3);text-decoration:line-through' : '' }}">
              @if ($item['done'])
                <span style="width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--brand-600);color:var(--on-brand)"><x-iq.icon name="check" size="sm" /></span>
              @else
                <span style="width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-control)"></span>
              @endif
              {{ $item['label'] }}
            </a>
          @endforeach
        </div>
        @if ($completion['next'])
          <a class="iq-btn iq-btn-secondary iq-btn-sm" style="align-self:flex-start" href="{{ route($completion['next']['route']) }}">{{ $completion['next']['label'] }} <x-iq.icon name="arrowRight" /></a>
        @endif
      </div>
    </div>
  </div>
</div>
@endsection