@extends('layouts.app')
@section('title', $conversation->contact_name ?: $conversation->contact_identifier)
@section('page-title')
    <div class="flex items-center gap-3">
        <a href="{{ route('dashboard') }}" class="text-slate-400 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        </a>
        {{ $conversation->contact_name ?: $conversation->contact_identifier }}
    </div>
@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Messages --}}
    <div class="lg:col-span-2">
        <div class="bg-slate-900 border border-white/5 rounded-2xl overflow-hidden">
            <div class="p-5 border-b border-white/5 flex items-center justify-between">
                <div>
                    <p class="font-semibold text-white">{{ $conversation->subject ?: 'Conversation' }}</p>
                    <p class="text-xs text-slate-500 mt-0.5">{{ $conversation->message_count }} messages · {{ $conversation->source }}</p>
                </div>
                <form method="POST" action="{{ route('conversation.important', $conversation->id) }}">
                    @csrf
                    <button type="submit" class="p-2 rounded-lg hover:bg-white/5 transition {{ $conversation->is_important ? 'text-amber-400' : 'text-slate-600' }}">
                        <svg class="w-5 h-5" fill="{{ $conversation->is_important ? 'currentColor' : 'none' }}" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
                    </button>
                </form>
            </div>

            <div class="divide-y divide-white/5 max-h-[600px] overflow-y-auto">
                @foreach($conversation->messages as $message)
                <div class="p-5 {{ $message->is_outbound ? 'bg-brand-500/5' : '' }}">
                    <div class="flex items-start justify-between gap-4 mb-3">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full {{ $message->is_outbound ? 'bg-brand-500/30 text-brand-300' : 'bg-slate-700 text-slate-300' }} flex items-center justify-center text-xs font-bold shrink-0">
                                {{ strtoupper(substr($message->from_name ?: $message->from_identifier, 0, 1)) }}
                            </div>
                            <div>
                                <p class="text-sm font-medium text-white">{{ $message->from_name ?: $message->from_identifier }}</p>
                                <p class="text-xs text-slate-500">{{ $message->sent_at?->format('M d, Y H:i') }}</p>
                            </div>
                        </div>
                        @if($message->extractedData)
                        <div class="flex items-center gap-2 shrink-0">
                            @if($message->extractedData->reply_required)
                                <span class="text-xs px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 border border-red-500/20">Reply needed</span>
                            @endif
                            @php
                                $sentColors = ['positive'=>'text-emerald-400','neutral'=>'text-slate-400','negative'=>'text-red-400'];
                            @endphp
                            <span class="text-xs {{ $sentColors[$message->extractedData->sentiment] ?? 'text-slate-400' }}">
                                {{ ucfirst($message->extractedData->sentiment) }}
                            </span>
                        </div>
                        @endif
                    </div>

                    <div class="text-sm text-slate-300 leading-relaxed ml-11">
                        {{ Str::limit($message->body_plain ?: strip_tags($message->body_raw), 500) }}
                    </div>

                    {{-- AI Insights --}}
                    @if($message->extractedData && $message->extractedData->summary)
                    <div class="mt-4 ml-11 p-3 bg-brand-500/5 border border-brand-500/20 rounded-xl">
                        <p class="text-xs font-semibold text-brand-400 mb-1">✨ AI Summary</p>
                        <p class="text-xs text-slate-300">{{ $message->extractedData->summary }}</p>
                        @if($message->extractedData->suggested_reply)
                        <div class="mt-2 pt-2 border-t border-brand-500/20">
                            <p class="text-xs font-semibold text-brand-400 mb-1">💬 Suggested Reply</p>
                            <p class="text-xs text-slate-400 italic">{{ $message->extractedData->suggested_reply }}</p>
                        </div>
                        @endif
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="space-y-4">

        {{-- Commitments --}}
        @if($conversation->commitments->isNotEmpty())
        <div class="bg-slate-900 border border-white/5 rounded-2xl p-5">
            <h4 class="font-semibold text-white mb-3 text-sm">Commitments</h4>
            <div class="space-y-3">
                @foreach($conversation->commitments as $c)
                <div class="flex items-start gap-3">
                    <form method="POST" action="{{ route('commitment.done', $c->id) }}">
                        @csrf
                        <button type="submit" class="mt-0.5 w-5 h-5 rounded-full border-2 {{ $c->status === 'done' ? 'border-emerald-500 bg-emerald-500' : 'border-white/20 hover:border-emerald-500' }} transition flex items-center justify-center shrink-0">
                            @if($c->status === 'done')
                                <svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            @endif
                        </button>
                    </form>
                    <div>
                        <p class="text-sm text-{{ $c->status === 'done' ? 'slate-500 line-through' : 'white' }}">{{ $c->description }}</p>
                        <p class="text-xs text-slate-600 mt-0.5">{{ $c->made_by === 'me' ? 'You promised' : 'They promised' }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Tasks --}}
        @if($conversation->tasks->isNotEmpty())
        <div class="bg-slate-900 border border-white/5 rounded-2xl p-5">
            <h4 class="font-semibold text-white mb-3 text-sm">Tasks</h4>
            <div class="space-y-3">
                @foreach($conversation->tasks as $task)
                <div class="flex items-start gap-3">
                    <form method="POST" action="{{ route('task.done', $task->id) }}">
                        @csrf
                        <button type="submit" class="mt-0.5 w-5 h-5 rounded-full border-2 {{ $task->status === 'done' ? 'border-emerald-500 bg-emerald-500' : 'border-white/20 hover:border-emerald-500' }} transition flex items-center justify-center shrink-0">
                            @if($task->status === 'done')
                                <svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            @endif
                        </button>
                    </form>
                    <div>
                        <p class="text-sm text-{{ $task->status === 'done' ? 'slate-500 line-through' : 'white' }}">{{ $task->title }}</p>
                        @if($task->due_date)<p class="text-xs text-slate-600 mt-0.5">Due {{ $task->due_date->format('M d') }}</p>@endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Contact Info --}}
        <div class="bg-slate-900 border border-white/5 rounded-2xl p-5">
            <h4 class="font-semibold text-white mb-3 text-sm">Contact</h4>
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-full {{ $conversation->source === 'gmail' ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400' }} flex items-center justify-center font-bold">
                    {{ strtoupper(substr($conversation->contact_name ?: '?', 0, 1)) }}
                </div>
                <div>
                    <p class="font-medium text-white">{{ $conversation->contact_name ?: 'Unknown' }}</p>
                    <p class="text-sm text-slate-500">{{ $conversation->contact_identifier }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection