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

@push('extra_css')
<style>
    .ig-page { padding: 92px 0 56px; color: var(--text); }
    .ig-panel, .ig-message, .ig-draft { 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-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:14px; margin-top:14px; }
    .ig-messages, .ig-drafts { display:grid; gap:10px; }
    .ig-message.outbound { border-color:rgba(16,185,129,.25); }
    .ig-message.inbound { border-color:rgba(73,88,165,.4); }
    .ig-message strong, .ig-draft strong { color:#fff; }
    .ig-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
    @media(max-width:991px){ .ig-layout{grid-template-columns:1fr;} }
</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">{{ __('Conversation') }}</h1>
            <div class="ig-muted">{{ $conversation->instagramAccount?->handle }} | {{ $conversation->customer?->display_name ?: $conversation->customer?->external_id }} | {{ $conversation->status }}</div>
            <form class="ig-actions" method="POST" action="{{ localized_route('user.instagram-conversations.draft', $conversation) }}">@csrf<button class="btn btn-primary" type="submit">{{ __('Generate AI draft') }}</button><a class="btn btn-outline-primary" href="{{ localized_route('user.instagram-conversations.index') }}">{{ __('Back') }}</a></form>
        </section>

        <div class="ig-layout">
            <section class="ig-messages">
                @foreach($conversation->messages as $message)
                    <article class="ig-message {{ $message->direction }}">
                        <strong>{{ $message->direction }} / {{ $message->sender_type }}</strong>
                        <div class="ig-muted">{{ optional($message->sent_at ?: $message->created_at)->format('Y-m-d H:i') }}</div>
                        <p>{{ $message->body ?: __('Attachment message') }}</p>
                    </article>
                @endforeach
            </section>

            <aside class="ig-drafts">
                @forelse($conversation->drafts as $draft)
                    <article class="ig-draft">
                        <strong>{{ __('AI draft') }} #{{ $draft->id }}</strong>
                        <div class="ig-muted">{{ $draft->status }} | {{ __('Confidence') }}: {{ $draft->confidence ?: '-' }}</div>
                        <p>{{ $draft->response_body }}</p>
                        @if($draft->knowledge_item_ids)<div class="ig-muted">{{ __('Knowledge items') }}: {{ implode(', ', $draft->knowledge_item_ids) }}</div>@endif
                        <div class="ig-actions">
                            @if($draft->status === 'draft')<form method="POST" action="{{ localized_route('user.instagram-drafts.approve', $draft) }}">@csrf<button class="btn btn-sm btn-outline-primary" type="submit">{{ __('Approve') }}</button></form>@endif
                            @if(in_array($draft->status, ['draft', 'approved'], true))<form method="POST" action="{{ localized_route('user.instagram-drafts.send', $draft) }}">@csrf<button class="btn btn-sm btn-primary" type="submit">{{ __('Send') }}</button></form>@endif
                        </div>
                    </article>
                @empty
                    <article class="ig-panel"><div class="ig-muted">{{ __('No AI drafts yet.') }}</div></article>
                @endforelse
            </aside>
        </div>
    </div>
</main>
@endsection