@extends('layouts.app')

@section('title', 'Social replies')

@section('content')
<h1>Social replies</h1>
<p style="margin-bottom:16px;">Incoming messages and AI-generated replies. Send messages to your webhook <code>POST {{ url('/api/webhook/social-reply') }}</code> with <code>tenant_id</code>, <code>platform</code>, <code>sender_id</code>, <code>message</code>.</p>
<p style="margin-bottom:12px;">
    <a href="{{ route('social-replies.export', request()->only('status', 'sort')) }}" style="padding:8px 16px; background:var(--m3-surface-variant); color:var(--m3-on-surface); border-radius:8px; text-decoration:none;">Export CSV</a>
    <span style="margin-left:12px;">Filter: <a href="{{ route('social-replies.index') }}" style="padding:4px 10px; border-radius:20px; background:{{ request('status') === null ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === null ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">All</a>
    <a href="{{ route('social-replies.index', ['status' => 'received']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'received' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'received' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Received</a>
    <a href="{{ route('social-replies.index', ['status' => 'replied']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'replied' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'replied' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Replied</a>
    <a href="{{ route('social-replies.index', ['status' => 'failed']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'failed' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'failed' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Failed</a></span>
    <span style="margin-left:8px;">Sort: <a href="{{ route('social-replies.index', array_merge(request()->only('status'), ['sort' => 'created_desc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort', 'created_desc') === 'created_desc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Newest</a> <a href="{{ route('social-replies.index', array_merge(request()->only('status'), ['sort' => 'created_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'created_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Oldest</a> <a href="{{ route('social-replies.index', array_merge(request()->only('status'), ['sort' => 'platform_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'platform_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Platform</a> <a href="{{ route('social-replies.index', array_merge(request()->only('status'), ['sort' => 'status_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'status_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Status</a></span>
</p>
<div class="card">
    <h2>Message history</h2>
    <div class="table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Platform</th>
                    <th>Sender</th>
                    <th>Message</th>
                    <th>AI response</th>
                    <th>Status</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @forelse($replies as $r)
                    <tr>
                        <td data-label="Platform">{{ ucfirst($r->platform) }}</td>
                        <td data-label="Sender">{{ $r->sender_id ?? '—' }}</td>
                        <td data-label="Message">{{ Str::limit($r->message ?? '', 80) }}</td>
                        <td data-label="AI response">{{ Str::limit($r->ai_response ?? '', 80) }}</td>
                        <td data-label="Status">{{ $r->status }}</td>
                        <td data-label="Date">{{ $r->created_at->format('M j, Y H:i') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="empty-state">No messages yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($replies->hasPages())
        <div class="pagination">{{ $replies->links() }}</div>
    @endif
</div>
@endsection