@extends('layouts.admin')
@section('title','Segments')
@section('content')
@php
  $columns = [
    'select' => '',
    'name' => 'Segment',
    'rules' => 'Rules',
    'size' => 'Estimated',
    'members' => 'Materialized',
    'status' => 'Status',
    'updated' => 'Last estimated',
    'actions' => 'Actions',
  ];
  $label = fn (string $v) => ucwords(str_replace(['_', '-'], ' ', $v));
  $activeChips = collect([
      'status' => request('status'),
      'size' => request('size'),
      'sort' => request('sort') && request('sort') !== 'newest' ? request('sort') : null,
  ])->filter();
  $evaluator = app(\App\Domain\Customers\Services\SegmentEvaluator::class);
@endphp

<x-admin.page
    title="Segments"
    subtitle="CRM audience command center — visual rule builder, live estimates, materialize memberships, and export targeted lists."
>
    <x-slot:actions>
        <a href="{{ route('admin.customers.index') }}" class="admin-btn">
            <i data-lucide="users" class="h-3.5 w-3.5"></i>
            Customers
        </a>
        <a href="{{ route('admin.segments.export', request()->query()) }}" class="admin-btn">
            <i data-lucide="download" class="h-3.5 w-3.5"></i>
            Export CSV
        </a>
        <a href="{{ route('admin.segments.create') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plus" class="h-3.5 w-3.5"></i>
            New segment
        </a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif

    <div class="order-ops-stat-rail mb-5">
        <a href="{{ route('admin.segments.index') }}" class="order-ops-stat {{ ! request('status') ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Segments</span>
            <span class="order-ops-stat-value">{{ number_format($stats['total']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['active']) }} active</span>
        </a>
        <a href="{{ route('admin.segments.index', ['status' => 'active']) }}" class="order-ops-stat {{ request('status') === 'active' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Active</span>
            <span class="order-ops-stat-value">{{ number_format($stats['active']) }}</span>
            <span class="order-ops-stat-meta">In CRM workflows</span>
        </a>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Members</span>
            <span class="order-ops-stat-value">{{ number_format($stats['members']) }}</span>
            <span class="order-ops-stat-meta">Materialized rows</span>
        </div>
        <a href="{{ route('admin.segments.index', ['status' => 'stale']) }}" class="order-ops-stat {{ request('status') === 'stale' ? 'is-active tone-warning' : 'tone-warning' }}">
            <span class="order-ops-stat-label">Stale</span>
            <span class="order-ops-stat-value">{{ number_format($stats['stale']) }}</span>
            <span class="order-ops-stat-meta">Not estimated in 7d</span>
        </a>
        <a href="{{ route('admin.segments.index', ['status' => 'empty']) }}" class="order-ops-stat {{ request('status') === 'empty' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Empty</span>
            <span class="order-ops-stat-value">{{ number_format($stats['empty']) }}</span>
            <span class="order-ops-stat-meta">Zero matches</span>
        </a>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Largest</span>
            <span class="order-ops-stat-value">{{ number_format($stats['largest']) }}</span>
            <span class="order-ops-stat-meta">Peak estimated size</span>
        </div>
    </div>

    <div class="order-ops-quick-filters mb-4">
        @foreach([
            ['label' => 'All', 'params' => []],
            ['label' => 'Active', 'params' => ['status' => 'active']],
            ['label' => 'Archived', 'params' => ['status' => 'archived']],
            ['label' => 'Stale', 'params' => ['status' => 'stale']],
            ['label' => 'Empty', 'params' => ['status' => 'empty']],
            ['label' => 'Large (50+)', 'params' => ['size' => 'large']],
        ] as $chip)
            @php
              $isActive = empty($chip['params'])
                  ? (! request('status') && ! request('size'))
                  : collect($chip['params'])->every(fn ($v, $k) => request($k) === $v);
            @endphp
            <a href="{{ route('admin.segments.index', $chip['params']) }}" class="order-ops-chip {{ $isActive ? 'is-active' : '' }}">{{ $chip['label'] }}</a>
        @endforeach
    </div>

    @if($activeChips->isNotEmpty())
        <div class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Active</span>
            @foreach($activeChips as $key => $value)
                <span class="order-ops-chip is-active">{{ $label($key) }}: {{ $label((string) $value) }}</span>
            @endforeach
            <a href="{{ route('admin.segments.index') }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear all</a>
        </div>
    @endif

    <form id="segments-bulk" method="post" action="{{ route('admin.segments.bulk') }}">
        @csrf
        <input type="hidden" name="action" value="refresh" id="segments-bulk-action">

        <x-admin.advanced-table
            id="segments"
            :search-url="route('admin.segments.index')"
            search-placeholder="Search segments by name or notes…"
            :columns="$columns"
            :filters-open="$activeChips->isNotEmpty()"
        >
            <x-slot:filters>
                <div class="admin-select-field">
                    <label class="admin-label" for="filter-status">Status</label>
                    <div class="admin-select-wrap">
                        <select id="filter-status" name="status" form="segments-filter" class="admin-select" onchange="document.getElementById('segments-filter').submit()">
                            <option value="">Any</option>
                            @foreach(['active','archived','stale','empty'] as $status)
                                <option value="{{ $status }}" @selected(request('status') === $status)>{{ $label($status) }}</option>
                            @endforeach
                        </select>
                        <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                    </div>
                </div>
                <div class="admin-select-field">
                    <label class="admin-label" for="filter-sort">Sort</label>
                    <div class="admin-select-wrap">
                        <select id="filter-sort" name="sort" form="segments-filter" class="admin-select" onchange="document.getElementById('segments-filter').submit()">
                            @foreach(['newest' => 'Newest', 'oldest' => 'Oldest', 'name' => 'Name', 'size_desc' => 'Largest', 'size_asc' => 'Smallest', 'stale' => 'Stalest first'] as $val => $txt)
                                <option value="{{ $val }}" @selected(request('sort', 'newest') === $val)>{{ $txt }}</option>
                            @endforeach
                        </select>
                        <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                    </div>
                </div>
                <div class="flex items-end gap-2">
                    <button type="submit" form="segments-bulk" class="admin-btn" onclick="document.getElementById('segments-bulk-action').value='refresh'">
                        <i data-lucide="refresh-cw" class="h-3.5 w-3.5"></i> Refresh selected
                    </button>
                    <a href="{{ route('admin.segments.index') }}" class="admin-btn">Clear</a>
                </div>
            </x-slot:filters>

            <thead>
                <tr>
                    <th data-col="select" class="w-10"><input type="checkbox" data-check-all aria-label="Select all"></th>
                    <th data-col="name">Segment</th>
                    <th data-col="rules">Rules</th>
                    <th data-col="size">Estimated</th>
                    <th data-col="members">Materialized</th>
                    <th data-col="status">Status</th>
                    <th data-col="updated">Last estimated</th>
                    <th data-col="actions"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($segments as $segment)
                    @php
                      $chips = $evaluator->describeRules($segment->query_def ?? [])->skip(1)->take(3);
                      $status = $segment->status ?? 'active';
                      $tone = $status === 'archived' ? 'muted' : ($segment->isStale() ? 'warning' : 'success');
                    @endphp
                    <tr>
                        <td data-col="select"><input type="checkbox" name="ids[]" form="segments-bulk" value="{{ $segment->id }}"></td>
                        <td data-col="name">
                            <a href="{{ route('admin.segments.show', $segment) }}" class="font-medium text-[#202223] hover:underline">{{ $segment->name }}</a>
                            @if($segment->description)
                                <div class="mt-0.5 text-xs text-[#6d7175]">{{ \Illuminate\Support\Str::limit($segment->description, 72) }}</div>
                            @endif
                        </td>
                        <td data-col="rules">
                            <div class="flex flex-wrap gap-1">
                                @foreach($chips as $chip)
                                    <span class="segment-rule-chip">{{ $chip }}</span>
                                @endforeach
                            </div>
                        </td>
                        <td data-col="size" class="tabular-nums font-medium">{{ number_format($segment->estimated_count ?? 0) }}</td>
                        <td data-col="members" class="tabular-nums text-[#6d7175]">{{ number_format($segment->memberships_count) }}</td>
                        <td data-col="status">
                            <x-admin.badge :tone="$tone">{{ $segment->isStale() && $status === 'active' ? 'Stale' : $label($status) }}</x-admin.badge>
                        </td>
                        <td data-col="updated" class="text-xs text-[#6d7175]">
                            {{ $segment->estimated_at?->diffForHumans() ?? 'Never' }}
                        </td>
                        <td data-col="actions" class="text-right">
                            <div class="inline-flex flex-wrap justify-end gap-1">
                                <a href="{{ route('admin.segments.show', $segment) }}" class="admin-btn !px-2 !py-1 text-xs">Open</a>
                                <a href="{{ route('admin.segments.edit', $segment) }}" class="admin-btn !px-2 !py-1 text-xs">Edit</a>
                                <button type="submit" form="refresh-{{ $segment->id }}" class="admin-btn !px-2 !py-1 text-xs">Refresh</button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="p-12 text-center text-[#6d7175]">
                            No segments yet.
                            <a href="{{ route('admin.segments.create') }}" class="ml-1 font-medium text-[#2c6ecb] hover:underline">Create your first audience</a>
                        </td>
                    </tr>
                @endforelse
            </tbody>

            <x-slot:footer>{{ $segments->links() }}</x-slot:footer>
        </x-admin.advanced-table>
    </form>

    @foreach($segments as $segment)
        <form id="refresh-{{ $segment->id }}" method="post" action="{{ route('admin.segments.refresh', $segment) }}" class="hidden">@csrf</form>
    @endforeach

    <form id="segments-filter" method="get" action="{{ route('admin.segments.index') }}" class="hidden">
        <input type="hidden" name="q" value="{{ request('q') }}">
        <input type="hidden" name="size" value="{{ request('size') }}">
    </form>
</x-admin.page>

<script>
(() => {
  const master = document.querySelector('[data-check-all]');
  if (!master) return;
  master.addEventListener('change', () => {
    document.querySelectorAll('#segments-bulk input[name="ids[]"]').forEach((el) => { el.checked = master.checked; });
  });
})();
</script>
@endsection