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

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

    {{-- Back link --}}
    <a href="{{ route('my-notes.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to My Notes
    </a>

    {{-- Header --}}
    <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>
                <div class="flex items-center gap-2 flex-wrap mb-2">
                    <span class="text-xs px-2.5 py-1 rounded-full font-semibold {{ $note->urgency_badge }}">
                        {{ $note->urgency_label }}
                    </span>
                    @if($note->scheduled_for)
                        <span class="text-xs px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 font-medium">
                            For: {{ $note->scheduled_for->format('l, d M Y') }}
                        </span>
                    @endif
                </div>
                <h1 class="text-xl font-bold text-gray-900">{{ $note->title }}</h1>
                <p class="text-xs text-gray-400 mt-1">
                    Issued by NPP Communications Directorate
                    · {{ $ack->delivered_at?->format('d M Y, g:ia') }}
                </p>

                @if($note->topic_tags)
                <div class="flex flex-wrap gap-1.5 mt-3">
                    @foreach($note->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>

            {{-- Acknowledge button --}}
            @if(!$ack->acknowledged_at)
            <form method="POST" action="{{ route('my-notes.acknowledge', $note->id) }}">
                @csrf
                <button type="submit"
                        class="px-5 py-2.5 bg-npp-red text-white text-sm font-semibold rounded-lg hover:bg-red-700 transition-colors shadow-sm">
                    Acknowledge Note
                </button>
            </form>
            @else
            <div class="flex items-center gap-2 px-4 py-2 bg-green-50 text-green-700 rounded-lg border border-green-200">
                <svg class="w-4 h-4" 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>
                <span class="text-sm font-medium">Acknowledged</span>
                <span class="text-xs text-green-600 ml-1">{{ $ack->acknowledged_at->format('d M, g:ia') }}</span>
            </div>
            @endif
        </div>
    </div>

    {{-- Headline message --}}
    <div class="bg-white rounded-xl border-l-4 border-l-npp-red border border-gray-200 shadow-sm p-6">
        <h2 class="text-xs font-bold text-red-700 uppercase tracking-widest mb-3">Today's Headline Message</h2>
        <p class="text-gray-800 text-base leading-relaxed font-medium">{{ $note->headline_message }}</p>
    </div>

    {{-- Talking points --}}
    @if($note->talking_points)
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <h2 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4">Talking Points / Speaking Notes</h2>
        <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">{{ $note->talking_points }}</div>
    </div>
    @endif

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

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

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

    {{-- Attachments --}}
    @if($note->attachments && $note->attachments->isNotEmpty())
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <h2 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4">
            Attachments ({{ $note->attachments->count() }})
        </h2>
        <div class="space-y-2">
            @foreach($note->attachments as $attachment)
            @php
                $iconMeta = match($attachment->file_type) {
                    'pdf'   => ['bg' => 'bg-red-100',    'text' => 'text-red-600',    'label' => 'PDF'],
                    'word'  => ['bg' => 'bg-blue-100',   'text' => 'text-blue-600',   'label' => 'DOC'],
                    'excel' => ['bg' => 'bg-green-100',  'text' => 'text-green-600',  'label' => 'XLS'],
                    'image' => ['bg' => 'bg-purple-100', 'text' => 'text-purple-600', 'label' => 'IMG'],
                    default => ['bg' => 'bg-gray-100',   'text' => 'text-gray-500',   'label' => strtoupper($attachment->extension)],
                };
            @endphp
            <div class="flex items-center gap-3 p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors">
                <div class="w-10 h-10 shrink-0 rounded-lg {{ $iconMeta['bg'] }} flex items-center justify-center">
                    <span class="text-[10px] font-bold {{ $iconMeta['text'] }}">{{ $iconMeta['label'] }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800 truncate">{{ $attachment->original_filename }}</p>
                    <p class="text-xs text-gray-400">{{ $attachment->formatted_size }}</p>
                </div>
                <a href="{{ route('my-notes.attachments.download', [$note->id, $attachment]) }}"
                   class="shrink-0 px-3 py-1.5 text-xs text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
                    <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    Download
                </a>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Bottom acknowledge CTA if not yet done --}}
    @if(!$ack->acknowledged_at)
    <div class="bg-npp-blue rounded-xl p-5 text-center">
        <p class="text-white text-sm mb-3">Please confirm you have read and understood this speaking note.</p>
        <form method="POST" action="{{ route('my-notes.acknowledge', $note->id) }}">
            @csrf
            <button type="submit"
                    class="px-8 py-2.5 bg-white text-npp-blue text-sm font-bold rounded-lg hover:bg-gray-50 transition-colors">
                I Have Read & Understood — Acknowledge
            </button>
        </form>
    </div>
    @endif
</div>
@endsection