@php
    $lines = preg_split('/\r\n|\r|\n/', $contents);
    $downloadUrl = route('helpdesk.attachments.download', $attachment->id);
@endphp

@extends('helpdesk::layouts.master')

@section('content')
    <div class="min-h-screen bg-zinc-950 px-4 py-6 text-zinc-100 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-7xl space-y-4">
            <header class="rounded-2xl border border-zinc-700 bg-zinc-900 p-5 shadow-sm">
                <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div class="min-w-0">
                        <p class="text-xs font-black uppercase tracking-[0.18em] text-blue-300">Read-only source viewer</p>
                        <h1 class="mt-1 truncate text-2xl font-black text-white">{{ $attachment->original_name ?? 'Attachment' }}</h1>
                        <p class="mt-2 text-sm text-zinc-400">
                            Language: <span class="font-semibold text-zinc-200">{{ strtoupper($language) }}</span>
                            <span class="mx-2 text-zinc-600">•</span>
                            Size: <span class="font-semibold text-zinc-200">{{ Number::fileSize($attachment->size) }}</span>
                        </p>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <a href="{{ $downloadUrl }}"
                           class="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700">
                            <i class="fa-solid fa-download" aria-hidden="true"></i>
                            Download
                        </a>
                        <button type="button" data-helpdesk-copy-source
                                class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-4 py-2 text-sm font-bold text-white hover:bg-green-700">
                            <i class="fa-regular fa-copy" aria-hidden="true"></i>
                            Copy code
                        </button>
                    </div>
                </div>
            </header>

            <section class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-950 shadow-sm">
                <div class="overflow-auto">
                    <table class="min-w-full border-collapse font-mono text-xs leading-6">
                        <tbody>
                        @foreach ($lines as $index => $line)
                            <tr class="group hover:bg-zinc-900/80">
                                <td class="select-none border-r border-zinc-800 bg-zinc-900 px-4 text-right text-zinc-500">{{ $index + 1 }}</td>
                                <td class="whitespace-pre px-4 text-zinc-100"><code>{{ $line }}</code></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>

    <script>
        document.querySelector('[data-helpdesk-copy-source]')?.addEventListener('click', async () => {
            await navigator.clipboard.writeText(@js($contents));
        });
    </script>
@endsection