@extends('layouts.app')

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

@php
    $tone = [
        'Delivered' => 'bg-emerald-500/15 text-emerald-700',
        'Sent' => 'bg-sky-500/15 text-sky-700',
        'Queued' => 'bg-amber-500/15 text-amber-700',
        'Failed' => 'bg-red-500/15 text-red-700',
    ];
@endphp

@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">SMS History</h1>
                <p class="text-xs text-muted-foreground">Every SMS and WhatsApp message sent from the communication module</p>
            </div>
            <a href="{{ route('communication.sms.history.csv', request()->query()) }}"
               class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Export CSV</a>
        </div>

        <div class="grid gap-3 sm:grid-cols-4">
            @foreach ([['', 'All channels', \App\Models\MessageLog::count()],
                      ['sms', 'SMS', $counts['sms'] ?? 0],
                      ['whatsapp', 'WhatsApp', $counts['whatsapp'] ?? 0]] as [$key, $label, $n])
                <a href="{{ route('communication.sms.history', array_filter(['channel' => $key, 'status' => $status, 'q' => $q])) }}"
                   class="rounded-xl border p-3 {{ $channel === $key ? 'border-primary bg-primary/5' : 'border-border bg-card hover:bg-accent' }}">
                    <span class="block text-[11px] text-muted-foreground">{{ $label }}</span>
                    <span class="text-lg font-semibold">{{ number_format($n) }}</span>
                </a>
            @endforeach
            <div class="rounded-xl border border-border bg-card p-3">
                <span class="block text-[11px] text-muted-foreground">Failed</span>
                <span class="text-lg font-semibold">
                    {{ number_format(\App\Models\MessageLog::where('status', 'Failed')->count()) }}
                </span>
            </div>
        </div>

        <form method="get" class="flex flex-wrap items-end gap-2">
            <input type="hidden" name="channel" value="{{ $channel }}">
            <label class="flex flex-col gap-1 text-xs">
                <span class="text-muted-foreground">Status</span>
                <select name="status" class="h-9 rounded-lg border border-input bg-background px-2 text-sm">
                    <option value="">All statuses</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}" @selected($status === $s)>{{ $s }}</option>
                    @endforeach
                </select>
            </label>
            <label class="flex flex-1 flex-col gap-1 text-xs">
                <span class="text-muted-foreground">Search recipient, phone or message</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">Filter</button>
            @if ($status !== '' || $q !== '')
                <a href="{{ route('communication.sms.history', ['channel' => $channel]) }}"
                   class="h-9 rounded-lg border border-border px-4 py-2 text-sm hover:bg-accent">Reset</a>
            @endif
        </form>

        <div class="overflow-x-auto rounded-xl border border-border bg-card">
            <table class="w-full text-sm">
                <thead class="border-b border-border text-left text-[11px] uppercase tracking-wide text-muted-foreground">
                    <tr>
                        <th class="px-3 py-2.5">Channel</th>
                        <th class="px-3 py-2.5">Recipient</th>
                        <th class="px-3 py-2.5">Message</th>
                        <th class="px-3 py-2.5 text-right">Chars</th>
                        <th class="px-3 py-2.5 text-right">Segments</th>
                        <th class="px-3 py-2.5">Sender</th>
                        <th class="px-3 py-2.5">Status</th>
                        <th class="px-3 py-2.5">Sent</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($logs as $l)
                        <tr class="border-b border-border/60 last:border-0">
                            <td class="px-3 py-2.5">
                                <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $l->isWhatsApp() ? 'bg-emerald-500/15 text-emerald-700' : 'bg-sky-500/15 text-sky-700' }}">
                                    {{ $l->isWhatsApp() ? 'WhatsApp' : 'SMS' }}
                                </span>
                            </td>
                            <td class="px-3 py-2.5">
                                <span class="block font-medium">{{ $l->recipient }}</span>
                                <span class="text-xs text-muted-foreground">{{ $l->phone }}</span>
                            </td>
                            <td class="max-w-md px-3 py-2.5">
                                <span class="line-clamp-2 text-xs text-muted-foreground">{{ $l->message }}</span>
                            </td>
                            <td class="px-3 py-2.5 text-right tabular-nums">{{ $l->chars }}</td>
                            <td class="px-3 py-2.5 text-right tabular-nums">{{ $l->segments }}</td>
                            <td class="px-3 py-2.5 text-xs">{{ $l->sender }}</td>
                            <td class="px-3 py-2.5">
                                <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $tone[$l->status] ?? 'bg-slate-500/15 text-slate-600' }}">
                                    {{ $l->status }}
                                </span>
                            </td>
                            <td class="whitespace-nowrap px-3 py-2.5 text-xs text-muted-foreground">
                                {{ $l->sent_at->format('d M Y H:i') }}
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="px-3 py-8 text-center text-sm text-muted-foreground">No messages match these filters.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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