@extends('layouts.admin')
@section('title', $segment->name)
@section('content')
@php
  $status = $segment->status ?? 'active';
  $tone = $status === 'archived' ? 'muted' : ($segment->isStale() ? 'warning' : 'success');
@endphp

<x-admin.page
    :title="$segment->name"
    :subtitle="$segment->description ?: 'Audience detail — rules, live estimate, materialized members, and exports.'"
>
    <x-slot:actions>
        <a href="{{ route('admin.segments.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i>
            Segments
        </a>
        <a href="{{ route('admin.segments.export-members', $segment) }}" class="admin-btn">
            <i data-lucide="download" class="h-3.5 w-3.5"></i>
            Export members
        </a>
        <form method="post" action="{{ route('admin.segments.duplicate', $segment) }}" class="inline">@csrf
            <button class="admin-btn"><i data-lucide="copy" class="h-3.5 w-3.5"></i> Duplicate</button>
        </form>
        <a href="{{ route('admin.segments.edit', $segment) }}" class="admin-btn">
            <i data-lucide="pencil" class="h-3.5 w-3.5"></i>
            Edit
        </a>
        <form method="post" action="{{ route('admin.segments.refresh', $segment) }}" class="inline">@csrf
            <button class="admin-btn admin-btn-primary">
                <i data-lucide="refresh-cw" class="h-3.5 w-3.5"></i>
                Materialize
            </button>
        </form>
    </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">
        <div class="order-ops-stat is-active">
            <span class="order-ops-stat-label">Estimated</span>
            <span class="order-ops-stat-value">{{ number_format($segment->estimated_count ?? 0) }}</span>
            <span class="order-ops-stat-meta">{{ $segment->estimated_at?->diffForHumans() ?? 'Never estimated' }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Materialized</span>
            <span class="order-ops-stat-value">{{ number_format($segment->memberships_count) }}</span>
            <span class="order-ops-stat-meta">{{ $segment->materialized_at?->diffForHumans() ?? 'Not materialized' }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Status</span>
            <span class="order-ops-stat-value text-base">
                <x-admin.badge :tone="$tone">{{ $segment->isStale() && $status === 'active' ? 'Stale' : ucfirst($status) }}</x-admin.badge>
            </span>
            <span class="order-ops-stat-meta">Created {{ $segment->created_at?->format('M j, Y') }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Owner</span>
            <span class="order-ops-stat-value text-base">{{ $segment->createdBy?->name ?? '—' }}</span>
            <span class="order-ops-stat-meta">{{ $segment->notes ? \Illuminate\Support\Str::limit($segment->notes, 40) : 'No notes' }}</span>
        </div>
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <div class="space-y-5">
            <x-admin.section title="Rule summary">
                <div class="flex flex-wrap gap-2">
                    @foreach($ruleChips as $i => $chip)
                        <span class="segment-rule-chip {{ $i === 0 ? 'is-logic' : '' }}">{{ $chip }}</span>
                    @endforeach
                </div>
                <details class="mt-4">
                    <summary class="cursor-pointer text-xs font-medium text-[#6d7175]">View raw query definition</summary>
                    <pre class="mt-2 overflow-x-auto rounded-lg border border-[var(--color-admin-border)] bg-[#fafbfb] p-3 font-mono text-[11px]">{{ json_encode($segment->query_def ?? [], JSON_PRETTY_PRINT) }}</pre>
                </details>
            </x-admin.section>

            <x-admin.section title="Members" hint="Materialized customers. Click Materialize to rebuild from current rules.">
                <form method="get" action="{{ route('admin.segments.show', $segment) }}" class="mb-4 flex flex-wrap gap-2">
                    <input type="search" name="q" value="{{ request('q') }}" class="admin-input max-w-sm" placeholder="Search members…">
                    <button class="admin-btn">Search</button>
                    @if(request('q'))
                        <a href="{{ route('admin.segments.show', $segment) }}" class="admin-btn">Clear</a>
                    @endif
                </form>

                <div class="overflow-x-auto rounded-xl border border-[var(--color-admin-border)]">
                    <table class="w-full min-w-[640px] text-sm">
                        <thead class="bg-[#f6f6f7] text-left text-xs uppercase tracking-wide text-[#6d7175]">
                            <tr>
                                <th class="p-3">Customer</th>
                                <th>Email</th>
                                <th>Orders</th>
                                <th>Joined</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($members as $membership)
                                @php $customer = $membership->customer; @endphp
                                <tr class="border-t border-[var(--color-admin-border)]">
                                    <td class="p-3 font-medium">{{ $customer?->name ?: '—' }}</td>
                                    <td class="text-[#6d7175]">{{ $customer?->email }}</td>
                                    <td class="tabular-nums">{{ $customer?->orders_count ?? 0 }}</td>
                                    <td class="text-xs text-[#6d7175]">{{ $customer?->created_at?->format('M j, Y') }}</td>
                                    <td class="p-3 text-right">
                                        @if($customer)
                                            <a href="{{ route('admin.customers.show', $customer) }}" class="text-sm font-medium text-[#2c6ecb] hover:underline">Open</a>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="p-10 text-center text-[#6d7175]">
                                        No materialized members yet.
                                        <form method="post" action="{{ route('admin.segments.refresh', $segment) }}" class="mt-3 inline">@csrf
                                            <button class="admin-btn admin-btn-primary">Materialize now</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-4">{{ $members->links() }}</div>
            </x-admin.section>
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <x-admin.section title="Quick actions">
                <div class="space-y-2">
                    <form method="post" action="{{ route('admin.segments.refresh', $segment) }}">@csrf
                        <button class="admin-btn w-full justify-center"><i data-lucide="refresh-cw" class="h-3.5 w-3.5"></i> Refresh memberships</button>
                    </form>
                    <a href="{{ route('admin.segments.edit', $segment) }}" class="admin-btn w-full justify-center"><i data-lucide="pencil" class="h-3.5 w-3.5"></i> Edit rules</a>
                    <a href="{{ route('admin.segments.export-members', $segment) }}" class="admin-btn w-full justify-center"><i data-lucide="download" class="h-3.5 w-3.5"></i> Export CSV</a>
                    @if($status !== 'archived')
                        <form method="post" action="{{ route('admin.segments.archive', $segment) }}">@csrf
                            <button class="admin-btn w-full justify-center">Archive</button>
                        </form>
                    @endif
                    <form method="post" action="{{ route('admin.segments.destroy', $segment) }}" onsubmit="return confirm('Delete this segment permanently?')">
                        @csrf @method('DELETE')
                        <button class="admin-btn w-full justify-center text-red-700">Delete segment</button>
                    </form>
                </div>
            </x-admin.section>

            <x-admin.section title="How it works">
                <ol class="space-y-2 text-xs text-[#6d7175]">
                    <li>1. Rules define who matches right now.</li>
                    <li>2. Estimate counts matches without writing memberships.</li>
                    <li>3. Materialize snapshots members into this segment.</li>
                    <li>4. Export or use the list in CRM workflows.</li>
                </ol>
            </x-admin.section>
        </div>
    </div>
</x-admin.page>
@endsection