@extends('layouts.user_type.guest')
@section('header_title', __('Instagram conversations'))

@push('extra_css')
<style>
    .ig-page { padding: 92px 0 56px; color: var(--text); }
    .ig-panel, .ig-row { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: var(--bg2); padding: 18px; }
    .ig-title { color:#fff; font-size:24px; font-weight:900; margin:0 0 8px; }
    .ig-muted { color:#9fb0cc; line-height:1.8; }
    .ig-list { display:grid; gap:12px; margin-top:16px; }
    .ig-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
    .ig-row strong { color:#fff; }
    @media(max-width:576px){ .ig-row{align-items:flex-start; flex-direction:column;} }
</style>
@endpush

@section('content')
<main class="ig-page">
    <div class="container">
        @include('user.user_menu')
        @if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
        @if(session('error'))<div class="alert alert-danger">{{ session('error') }}</div>@endif
        <section class="ig-panel">
            <h1 class="ig-title">{{ __('Instagram conversations') }}</h1>
            <div class="ig-muted">{{ __('Inbound Instagram webhook messages are stored here. AI drafts are generated from your product knowledge.') }}</div>
        </section>

        <section class="ig-list">
            @forelse($conversations as $conversation)
                @php($lastMessage = $conversation->latestMessage)
                <article class="ig-row">
                    <div>
                        <strong>{{ $conversation->customer?->display_name ?: $conversation->customer?->external_id ?: __('Unknown customer') }}</strong>
                        <div class="ig-muted">{{ $conversation->instagramAccount?->handle }} | {{ $conversation->status }} | {{ $conversation->ai_mode }}</div>
                        <div class="ig-muted">{{ $lastMessage?->body ?: __('No text message') }}</div>
                    </div>
                    <a class="btn btn-primary" href="{{ localized_route('user.instagram-conversations.show', $conversation) }}">{{ __('Open') }}</a>
                </article>
            @empty
                <article class="ig-panel"><div class="ig-muted">{{ __('No conversations yet.') }}</div></article>
            @endforelse
        </section>
        {{ $conversations->links() }}
    </div>
</main>
@endsection