@extends('layouts.app')
@section('title', $segment->name)

@section('content')
<div class="space-y-6">
    <div class="card-pad">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h2 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $segment->name }}</h2>
                @if ($segment->description)<p class="mt-1 text-sm text-slate-500">{{ $segment->description }}</p>@endif
                <p class="mt-3 text-sm">
                    <span class="badge-blue">{{ number_format($matchCount) }} matching contacts</span>
                    <span class="ml-2 text-xs uppercase text-slate-500">match {{ $segment->match_type === 'any' ? 'ANY rule' : 'ALL rules' }}</span>
                </p>
            </div>
            @can('manage segments')
                <a href="{{ route('segments.edit', $segment) }}" class="btn-secondary">Edit rules</a>
            @endcan
        </div>

        <div class="mt-4 space-y-2">
            @foreach ($segment->conditions ?? [] as $condition)
                <div class="inline-flex items-center gap-2 rounded-lg bg-slate-100 px-3 py-1.5 text-sm dark:bg-slate-800">
                    <span class="font-medium">{{ ucwords(str_replace('_', ' ', $condition['field'] ?? '')) }}</span>
                    <span class="text-slate-500">{{ str_replace('_', ' ', $condition['operator'] ?? '') }}</span>
                    <span class="font-medium">{{ $condition['value'] ?? '' }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <div class="card">
        <h3 class="border-b border-slate-200 px-5 py-4 text-base font-semibold text-slate-900 dark:border-slate-800 dark:text-white">Sample of matching contacts</h3>
        <table class="table">
            <thead><tr><th>Email</th><th>Name</th><th>Company</th><th>Country</th><th>Status</th></tr></thead>
            <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
            @forelse ($preview as $contact)
                <tr>
                    <td><a href="{{ route('contacts.show', $contact) }}" class="font-medium text-brand-600 hover:underline dark:text-brand-400">{{ $contact->email }}</a></td>
                    <td>{{ $contact->displayName() }}</td>
                    <td class="max-w-40 truncate">{{ $contact->company }}</td>
                    <td>{{ $contact->country }}</td>
                    <td><x-status-badge :status="$contact->status"/></td>
                </tr>
            @empty
                <tr><td colspan="5" class="py-10 text-center text-sm text-slate-500">No contacts currently match this segment.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection