@php
    $lines = preg_split('/\r\n|\r|\n/', $contents);
    $attachmentId = data_get($attachment, 'id');
    $attachmentName = (string) data_get($attachment, 'original_name', 'Attachment');
    $attachmentSize = (int) data_get($attachment, 'size', 0);
    $ticketId = data_get($attachment, 'ticket_id');
    $downloadUrl = route('helpdesk.attachments.download', $attachmentId);
    $backUrl = is_numeric($ticketId) ? route('helpdesk.tickets.show', ['ticket' => $ticketId]) : route('helpdesk.index');
@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">{{ $attachmentName }}</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($attachmentSize) }}</span>
                        </p>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <a href="{{ $backUrl }}"
                           class="inline-flex items-center gap-2 rounded-xl bg-zinc-700 px-4 py-2 text-sm font-bold text-white hover:bg-zinc-600">
                            <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
                            Back to ticket
                        </a>
                        <a href="{{ route('helpdesk.index') }}"
                           class="inline-flex items-center gap-2 rounded-xl bg-blue-700 px-4 py-2 text-sm font-bold text-white hover:bg-blue-800">
                            <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
                            Dashboard
                        </a>
                        <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">
                        <caption class="sr-only">Source code for {{ $attachmentName }}</caption>
                        <thead class="sr-only">
                            <tr><th scope="col">Line</th><th scope="col">Source</th></tr>
                        </thead>
                        <tbody>
                        @foreach ($lines as $index => $line)
                            <tr class="group hover:bg-zinc-900/80">
                                <th scope="row" class="select-none border-r border-zinc-800 bg-zinc-900 px-4 text-right font-normal text-zinc-500">{{ $index + 1 }}</th>
                                <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