@extends('layouts.app')
@section('title', $speakingNote->title)
@section('page-title', 'Speaking Note')

@section('content')
<div class="mt-4 space-y-5">

    {{-- Header card --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <div class="flex items-start justify-between gap-4 flex-wrap">
            <div class="min-w-0">
                <div class="flex items-center gap-2 flex-wrap mb-1">
                    <span class="text-xs px-2 py-0.5 rounded-full font-medium {{ $speakingNote->urgency_badge }}">
                        {{ $speakingNote->urgency_label }}
                    </span>
                    <span class="text-xs px-2 py-0.5 rounded-full font-medium {{ $speakingNote->status_badge }}">
                        {{ $speakingNote->status_label }}
                    </span>
                    <span class="text-xs text-gray-400">v{{ $speakingNote->version }}</span>
                </div>
                <h1 class="text-xl font-bold text-gray-900">{{ $speakingNote->title }}</h1>
                <div class="flex items-center gap-3 mt-1 text-xs text-gray-400">
                    <span>By {{ $speakingNote->author?->name }}</span>
                    <span>·</span>
                    <span>{{ $speakingNote->created_at->format('d M Y') }}</span>
                    @if($speakingNote->scheduled_for)
                        <span>·</span>
                        <span class="text-blue-600 font-medium">Scheduled: {{ $speakingNote->scheduled_for->format('d M Y') }}</span>
                    @endif
                </div>
                @if($speakingNote->topic_tags)
                <div class="flex flex-wrap gap-1.5 mt-2">
                    @foreach($speakingNote->topic_tags as $tag)
                        <span class="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full">#{{ $tag }}</span>
                    @endforeach
                </div>
                @endif
            </div>

            {{-- Action buttons --}}
            <div class="flex gap-2 flex-wrap shrink-0">
                @if(in_array($speakingNote->status, ['draft','in_review']))
                    <a href="{{ route('speaking-notes.edit', $speakingNote) }}"
                       class="px-3 py-1.5 text-xs text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">Edit</a>
                @endif

                @if($speakingNote->status === 'draft')
                    <form method="POST" action="{{ route('speaking-notes.submit-review', $speakingNote) }}" class="inline">
                        @csrf
                        <button type="submit" class="px-3 py-1.5 text-xs bg-yellow-50 text-yellow-700 border border-yellow-200 rounded-lg hover:bg-yellow-100">
                            Submit for Review
                        </button>
                    </form>
                @endif

                @if(in_array($speakingNote->status, ['draft','in_review']))
                    <form method="POST" action="{{ route('speaking-notes.approve', $speakingNote) }}" class="inline">
                        @csrf
                        <button type="submit" class="px-3 py-1.5 text-xs bg-green-50 text-green-700 border border-green-200 rounded-lg hover:bg-green-100">
                            Approve
                        </button>
                    </form>
                @endif

                @if($speakingNote->status !== 'archived')
                    <form method="POST" action="{{ route('speaking-notes.archive', $speakingNote) }}" class="inline"
                          onsubmit="return confirm('Archive this note?')">
                        @csrf
                        <button type="submit" class="px-3 py-1.5 text-xs text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50">
                            Archive
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-5">

        {{-- Left: Note content (2/3) --}}
        <div class="xl:col-span-2 space-y-5">

            {{-- Headline --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Headline Message</h3>
                <p class="text-gray-800 text-sm leading-relaxed">{{ $speakingNote->headline_message }}</p>
            </div>

            {{-- Talking points --}}
            @if($speakingNote->talking_points)
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Talking Points / Speaking Notes</h3>
                <div class="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap font-mono bg-gray-50 rounded-lg p-4 border border-gray-100">{{ $speakingNote->talking_points }}</div>
            </div>
            @endif

            {{-- Supporting facts --}}
            @if($speakingNote->supporting_facts)
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Supporting Facts & Data</h3>
                <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">{{ $speakingNote->supporting_facts }}</div>
            </div>
            @endif

            {{-- Attacks & Rebuttals --}}
            @if($speakingNote->attacks_rebuttals)
            <div class="bg-white rounded-xl border border-orange-100 shadow-sm p-6"
                 style="background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);">
                <h3 class="text-xs font-semibold text-orange-600 uppercase tracking-wider mb-3">Attacks & Rebuttals</h3>
                <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">{{ $speakingNote->attacks_rebuttals }}</div>
            </div>
            @endif

            {{-- Lines to avoid --}}
            @if($speakingNote->lines_to_avoid)
            <div class="bg-white rounded-xl border border-red-100 shadow-sm p-6"
                 style="background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%);">
                <h3 class="text-xs font-semibold text-red-600 uppercase tracking-wider mb-3">Lines to Avoid</h3>
                <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">{{ $speakingNote->lines_to_avoid }}</div>
            </div>
            @endif

            {{-- Attachments --}}
            @if($speakingNote->attachments->isNotEmpty())
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">
                    Attachments ({{ $speakingNote->attachments->count() }})
                </h3>
                <div class="space-y-2">
                    @foreach($speakingNote->attachments as $attachment)
                        @include('speaking-notes.partials.attachment-row', [
                            'attachment'     => $attachment,
                            'downloadRoute'  => 'speaking-notes.attachments.download',
                            'downloadParams' => [$speakingNote, $attachment],
                            'canDelete'      => true,
                            'deleteRoute'    => 'speaking-notes.attachments.destroy',
                            'deleteParams'   => [$speakingNote, $attachment],
                        ])
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Comments --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Internal Comments</h3>

                @forelse($speakingNote->comments as $comment)
                <div class="flex gap-3 mb-4">
                    <div class="w-7 h-7 shrink-0 rounded-full bg-blue-600 text-white text-xs font-bold flex items-center justify-center">
                        {{ strtoupper(substr($comment->user?->name ?? '?', 0, 2)) }}
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-0.5">
                            <span class="text-xs font-semibold text-gray-700">{{ $comment->user?->name }}</span>
                            <span class="text-xs text-gray-400">{{ $comment->created_at->diffForHumans() }}</span>
                        </div>
                        <p class="text-sm text-gray-600">{{ $comment->body }}</p>
                    </div>
                </div>
                @empty
                <p class="text-sm text-gray-400 mb-4">No comments yet.</p>
                @endforelse

                <form method="POST" action="{{ route('speaking-notes.comment', $speakingNote) }}" class="mt-3 border-t border-gray-100 pt-4">
                    @csrf
                    <textarea name="body" rows="2" placeholder="Add a comment…" required
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('body') border-red-400 @enderror"></textarea>
                    @error('body') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    <button type="submit" class="mt-2 px-4 py-1.5 bg-gray-800 text-white text-xs font-medium rounded-lg hover:bg-gray-700">
                        Post Comment
                    </button>
                </form>
            </div>
        </div>

        {{-- Right: Distribution + Acknowledgements (1/3) --}}
        <div class="space-y-5">

            {{-- Distribute panel --}}
            @if($speakingNote->status === 'approved')
            <div class="bg-white rounded-xl border border-green-200 shadow-sm p-5"
                 x-data="{ targetType: 'all' }">
                <h3 class="text-xs font-semibold text-green-700 uppercase tracking-wider mb-4">Distribute Note</h3>
                <form method="POST" action="{{ route('speaking-notes.distribute', $speakingNote) }}" class="space-y-3">
                    @csrf
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Target Audience</label>
                        <select name="target_type" x-model="targetType" required
                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                            <option value="all">All Active Communicators</option>
                            <option value="tier">By Tier</option>
                            <option value="region">By Region</option>
                            <option value="individual">Individual</option>
                        </select>
                    </div>

                    <div x-show="targetType === 'tier'" x-cloak>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Select Tier</label>
                        <select name="target_value" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                            @foreach($tiers as $tier)
                                <option value="{{ $tier->id }}">{{ $tier->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div x-show="targetType === 'region'" x-cloak>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Select Region</label>
                        <select name="target_value" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                            @foreach($regions as $region)
                                <option value="{{ $region->id }}">{{ $region->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div x-show="targetType === 'individual'" x-cloak>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Select Communicator</label>
                        <select name="target_value" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                            @foreach($communicators as $c)
                                <option value="{{ $c->id }}">{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit"
                            class="w-full py-2 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700">
                        Distribute Now
                    </button>
                </form>
            </div>
            @endif

            {{-- Distribution history --}}
            @if($speakingNote->distributions->isNotEmpty())
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Distribution Log</h3>
                <div class="space-y-2">
                    @foreach($speakingNote->distributions as $dist)
                    <div class="text-xs text-gray-600 flex items-start gap-2">
                        <svg class="w-3.5 h-3.5 mt-0.5 shrink-0 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <div>
                            <span class="font-medium">{{ $dist->target_summary }}</span>
                            <br><span class="text-gray-400">by {{ $dist->distributedBy?->name }} · {{ $dist->created_at->format('d M, g:ia') }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Upload more files --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5"
                 x-data="{ files: [], dragover: false,
                     onFiles(e) {
                         const incoming = Array.from(e.target.files || e.dataTransfer.files);
                         incoming.forEach(f => { if (!this.files.find(x=>x.name===f.name&&x.size===f.size)) this.files.push(f); });
                     },
                     remove(i) { this.files.splice(i,1); }
                 }">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Attach Files</h3>
                <form method="POST"
                      action="{{ route('speaking-notes.attachments.store', $speakingNote) }}"
                      enctype="multipart/form-data">
                    @csrf
                    <label class="block cursor-pointer"
                           @dragover.prevent="dragover=true"
                           @dragleave.prevent="dragover=false"
                           @drop.prevent="dragover=false; onFiles($event)">
                        <div class="border-2 border-dashed rounded-lg p-4 text-center transition-colors"
                             :class="dragover ? 'border-blue-400 bg-blue-50' : 'border-gray-200 hover:border-gray-300'">
                            <svg class="w-7 h-7 mx-auto text-gray-300 mb-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                            </svg>
                            <p class="text-xs text-gray-500">Drop files or <span class="text-blue-600">browse</span></p>
                            <p class="text-[10px] text-gray-400 mt-0.5">PDF · Word · Excel · Images · max 20 MB</p>
                            <input type="file" name="attachments[]" multiple class="hidden"
                                   accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.jpg,.jpeg,.png,.gif,.webp,.bmp"
                                   @change="onFiles($event)">
                        </div>
                    </label>

                    <template x-if="files.length">
                        <div class="mt-2 space-y-1.5">
                            <template x-for="(f,i) in files" :key="i">
                                <div class="flex items-center gap-2 text-xs text-gray-600 bg-gray-50 rounded p-2">
                                    <span class="flex-1 truncate" x-text="f.name"></span>
                                    <span class="text-gray-400 shrink-0" x-text="(f.size/1024).toFixed(0)+'KB'"></span>
                                    <button type="button" @click="remove(i)" class="text-gray-300 hover:text-red-500">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                        </svg>
                                    </button>
                                </div>
                            </template>
                            <button type="submit" class="w-full py-1.5 bg-gray-800 text-white text-xs font-medium rounded-lg hover:bg-gray-700 mt-1">
                                Upload <span x-text="files.length"></span> file<span x-show="files.length>1">s</span>
                            </button>
                        </div>
                    </template>
                </form>
            </div>

            {{-- Acknowledgement stats --}}
            @if($ackStats['total'] > 0)
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Acknowledgement Tracker</h3>

                @php
                    $ackPct  = $ackStats['total'] > 0 ? round($ackStats['acknowledged'] / $ackStats['total'] * 100) : 0;
                    $readPct = $ackStats['total'] > 0 ? round($ackStats['read'] / $ackStats['total'] * 100) : 0;
                @endphp

                <div class="space-y-3 mb-4">
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-gray-500">Acknowledged</span>
                            <span class="font-semibold text-gray-700">{{ $ackStats['acknowledged'] }}/{{ $ackStats['total'] }} ({{ $ackPct }}%)</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5">
                            <div class="bg-green-500 h-1.5 rounded-full transition-all" style="width: {{ $ackPct }}%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-gray-500">Read</span>
                            <span class="font-semibold text-gray-700">{{ $ackStats['read'] }}/{{ $ackStats['total'] }} ({{ $readPct }}%)</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5">
                            <div class="bg-blue-400 h-1.5 rounded-full transition-all" style="width: {{ $readPct }}%"></div>
                        </div>
                    </div>
                </div>

                {{-- Per-communicator list --}}
                <div class="max-h-48 overflow-y-auto space-y-1.5">
                    @foreach($speakingNote->acknowledgements->sortByDesc('acknowledged_at') as $ack)
                    <div class="flex items-center gap-2 text-xs">
                        <div class="w-5 h-5 shrink-0 rounded-full {{ $ack->is_acknowledged ? 'bg-green-100 text-green-700' : ($ack->is_read ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-400') }} font-bold flex items-center justify-center text-[9px]">
                            {{ strtoupper(substr($ack->communicator?->name ?? '?', 0, 2)) }}
                        </div>
                        <span class="flex-1 text-gray-700 truncate">{{ $ack->communicator?->name }}</span>
                        @if($ack->is_acknowledged)
                            <span class="text-green-600">✓</span>
                        @elseif($ack->is_read)
                            <span class="text-blue-500">R</span>
                        @else
                            <span class="text-gray-300">—</span>
                        @endif
                    </div>
                    @endforeach
                </div>
                <p class="mt-2 text-[10px] text-gray-400">✓ Acknowledged · R Read · — Unread</p>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection