@extends('layouts.app')

@section('title', 'Email History')

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Email History</h1>
                <p class="text-xs text-muted-foreground">Every email sent from the communication module</p>
            </div>
            <a href="{{ route('communication.email.history.csv', request()->query()) }}"
               class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Export CSV</a>
        </div>

        <form method="get" class="flex flex-wrap items-end gap-2">
            <label class="flex flex-1 flex-col gap-1 text-xs">
                <span class="text-muted-foreground">Search recipient, address or subject</span>
                <input type="search" name="q" value="{{ $q }}" placeholder="Search…"
                       class="h-9 rounded-lg border border-input bg-background px-2 text-sm">
            </label>
            <button class="h-9 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground">Search</button>
            @if ($q !== '')
                <a href="{{ route('communication.email.history') }}"
                   class="h-9 rounded-lg border border-border px-4 py-2 text-sm hover:bg-accent">Reset</a>
            @endif
        </form>

        <div class="grid gap-3 lg:grid-cols-2">
            @forelse ($logs as $l)
                <article class="flex flex-col gap-2 rounded-xl border border-border bg-card p-4">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h2 class="truncate text-sm font-semibold">{{ $l->subject }}</h2>
                            <p class="truncate text-xs text-muted-foreground">
                                {{ $l->recipient }} &lt;{{ $l->email }}&gt;
                            </p>
                        </div>
                        <span class="shrink-0 rounded-full bg-sky-500/15 px-2 py-0.5 text-[10px] font-medium text-sky-700">
                            {{ $l->audience }}
                        </span>
                    </div>

                    <p class="line-clamp-3 text-xs text-muted-foreground">{{ $l->previewText() }}</p>

                    <div class="flex items-center justify-between gap-2 border-t border-border pt-2 text-[11px] text-muted-foreground">
                        <span>From {{ $l->sender }}</span>
                        <span>{{ $l->sent_at->format('d M Y H:i') }}</span>
                    </div>
                </article>
            @empty
                <div class="rounded-xl border border-border bg-card px-3 py-8 text-center text-sm text-muted-foreground lg:col-span-2">
                    No emails match that search.
                </div>
            @endforelse
        </div>

        <div>{{ $logs->links() }}</div>
    </div>
@endsection