@extends('layouts.app')

@section('mobile-title', 'Share Links')
@section('mobile-subtitle', $document->title)
@section('mobile-back', route('documents.show', $document))

@section('content')
    @php
        $shared = $shares->whereNull('revoked_at')->isNotEmpty();
        $canCreateShare = auth()->user()->can('share', $document);
        $humanSize = $document->size >= 1048576 ? number_format($document->size / 1048576, 1).' MB' : number_format(max($document->size, 1) / 1024, 1).' KB';
        $fileIcon = str_contains($document->mime_type ?? '', 'pdf') ? 'picture_as_pdf' : 'description';
    @endphp

    <div class="mb-6 border-b border-[var(--construct-border)] pb-5">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <div class="mb-3 flex flex-wrap items-center gap-2 text-sm text-[var(--construct-muted)]">
                    <a href="{{ route('documents.index') }}" class="font-semibold text-[var(--construct-primary-dark)]">Document Centre</a>
                    <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                    <a href="{{ route('documents.folders.show', $folder) }}" class="font-semibold text-[var(--construct-primary-dark)]">{{ $folder->name }}</a>
                    <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                    <span>Sharing</span>
                </div>
                <div class="flex items-center gap-3">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded border border-[var(--construct-border)] bg-white text-red-700">
                        <span class="material-symbols-outlined text-[24px]">{{ $fileIcon }}</span>
                    </span>
                    <h1 class="text-3xl font-bold">{{ $document->original_name }}</h1>
                </div>
                <p class="mt-3 flex flex-wrap items-center gap-3 text-sm text-[var(--construct-muted)]">
                    <span class="rounded bg-emerald-50 px-2 py-1 font-semibold text-emerald-900">{{ $shared ? 'Shared Internally & Externally' : 'Internal Access Only' }}</span>
                    <span>Last updated {{ $document->updated_at->diffForHumans() }} by {{ $document->uploader->name }}</span>
                </p>
            </div>

            <div class="flex flex-wrap gap-2">
                @if ($document->canPreview())
                    <a href="{{ route('documents.preview', $document) }}" target="_blank" class="rounded border border-[var(--construct-border)] bg-white px-5 py-2.5 text-sm font-bold text-[var(--construct-text)]">Preview</a>
                @endif
                <a href="#generate-link" class="inline-flex items-center gap-2 rounded bg-[var(--construct-primary)] px-5 py-2.5 text-sm font-bold text-white">
                    <span class="material-symbols-outlined text-[18px]">add_link</span>
                    Generate New Link
                </a>
            </div>
        </div>
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(420px,1.4fr)]">
        <div class="space-y-5">
            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <div class="mb-4 flex items-center justify-between gap-3">
                    <h2 class="text-xl font-bold">Internal Access</h2>
                    <a href="{{ route('documents.folders.edit', $folder) }}" class="inline-flex items-center gap-1 text-sm font-bold text-[var(--construct-primary-dark)]">
                        <span class="material-symbols-outlined text-[18px]">person_add</span>
                        Add People
                    </a>
                </div>
                <div class="space-y-4">
                    <div class="flex items-center gap-3">
                        <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[#94ccff] text-xs font-bold text-[#001d32]">
                            {{ collect(explode(' ', $document->owner?->name ?? $document->uploader->name))->filter()->map(fn ($part) => substr($part, 0, 1))->take(2)->implode('') }}
                        </span>
                        <div class="min-w-0 flex-1">
                            <div class="font-bold">{{ $document->owner?->name ?? $document->uploader->name }} (Owner)</div>
                            <div class="text-sm text-[var(--construct-muted)]">{{ $document->owner?->email ?? $document->uploader->email }}</div>
                        </div>
                        <span class="rounded bg-[var(--construct-surface-container)] px-3 py-1 text-xs font-semibold">Owner</span>
                    </div>

                    @foreach ($folder->users->take(4) as $user)
                        <div class="flex items-center gap-3">
                            <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--construct-surface-container)] text-xs font-bold">
                                {{ collect(explode(' ', $user->name))->filter()->map(fn ($part) => substr($part, 0, 1))->take(2)->implode('') }}
                            </span>
                            <div class="min-w-0 flex-1">
                                <div class="font-bold">{{ $user->name }}</div>
                                <div class="text-sm text-[var(--construct-muted)]">{{ $user->email }}</div>
                            </div>
                            <span class="rounded border border-[var(--construct-border)] px-3 py-1 text-xs font-semibold">{{ ucfirst($user->pivot->permission) }}</span>
                        </div>
                    @endforeach
                </div>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="mb-5 text-xl font-bold">Recent Activity</h2>
                <div class="space-y-4">
                    @forelse ($shareAuditLogs->take(6) as $log)
                        <div class="border-l-2 border-[var(--construct-primary)] pl-4 text-sm">
                            <div class="font-semibold">{{ $log->description }}</div>
                            <div class="mt-1 text-[var(--construct-muted)]">{{ $log->created_at->format('M j, g:i A') }}</div>
                        </div>
                    @empty
                        <div class="text-sm text-[var(--construct-muted)]">Share activity will appear after a link is viewed or downloaded.</div>
                    @endforelse
                </div>
            </section>
        </div>

        <div class="space-y-5">
            <section id="generate-link" class="rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="mb-5 text-xl font-bold">Public & External Sharing</h2>
                @if ($canCreateShare)
                    <form method="POST" action="{{ route('documents.shares.store', $document) }}" class="rounded border border-[var(--construct-border)] bg-[var(--construct-surface-low)] p-4">
                        @csrf
                        <input type="hidden" name="return_to" value="shares">

                        <label class="grid gap-2 text-sm">
                            <span class="font-semibold">Link Name / Recipient</span>
                            <input name="recipient_email" type="email" placeholder="e.g., client@example.com" class="rounded border border-[var(--construct-border)] bg-white px-3 py-2.5 text-sm">
                        </label>

                        <div class="mt-4 grid gap-4 md:grid-cols-2">
                            <div class="space-y-3">
                                <label class="flex items-center justify-between gap-3 text-sm">
                                    <span class="font-semibold">Allow Downloads</span>
                                    <span>
                                        <input type="hidden" name="allow_downloads" value="0">
                                        <input type="checkbox" name="allow_downloads" value="1" checked class="h-5 w-5 rounded border-[var(--construct-border)] text-[var(--construct-primary)]">
                                    </span>
                                </label>
                                <label class="grid gap-2 text-sm">
                                    <span class="font-semibold">Password Protection</span>
                                    <input name="pin" placeholder="Optional PIN" class="rounded border border-[var(--construct-border)] bg-white px-3 py-2.5 text-sm">
                                </label>
                            </div>
                            <label class="grid gap-2 text-sm">
                                <span class="font-semibold">Expiration Date</span>
                                <input name="expires_at" type="date" class="rounded border border-[var(--construct-border)] bg-white px-3 py-2.5 text-sm">
                            </label>
                        </div>

                        <button class="mt-4 inline-flex items-center gap-2 rounded bg-[var(--construct-primary)] px-4 py-2.5 text-sm font-bold text-white">
                            <span class="material-symbols-outlined text-[18px]">add_link</span>
                            Generate Link
                        </button>
                    </form>
                @else
                    <div class="rounded border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950">
                        <div class="font-bold">External sharing is not available yet.</div>
                        <p class="mt-1">Approve the document and complete a clean document scan before generating a public link.</p>
                    </div>
                @endif
            </section>

            <section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
                <div class="border-b border-[var(--construct-border)] p-5">
                    <h2 class="text-xl font-bold">Active Shared Links</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-left text-sm">
                        <thead class="border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] text-xs font-bold uppercase text-[var(--construct-muted)]">
                            <tr>
                                <th class="px-4 py-3">Link Info</th>
                                <th class="px-4 py-3">Settings</th>
                                <th class="px-4 py-3">Views</th>
                                <th class="px-4 py-3">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[var(--construct-border-soft)]">
                            @forelse ($shares as $share)
                                <tr class="{{ $share->revoked_at ? 'opacity-60' : '' }}">
                                    <td class="min-w-[260px] px-4 py-4">
                                        <div class="font-bold">{{ $share->recipient_email ?: 'Manual link' }}</div>
                                        <a href="{{ route('document-shares.show', $share) }}" target="_blank" class="mt-1 inline-flex max-w-[230px] truncate text-xs font-semibold text-[var(--construct-primary-dark)]">{{ route('document-shares.show', $share) }}</a>
                                        @if ($share->expires_at && $share->expires_at->isFuture() && $share->expires_at->lte(now()->addDay()))
                                            <div class="mt-2 inline-flex rounded bg-red-50 px-2 py-1 text-xs font-bold text-red-700">Expires Tomorrow</div>
                                        @elseif ($share->expires_at)
                                            <div class="mt-2 text-xs text-[var(--construct-muted)]">Expires {{ $share->expires_at->format('M j, Y') }}</div>
                                        @endif
                                    </td>
                                    <td class="px-4 py-4">
                                        <div>{{ $share->allow_downloads ? 'Downloads ON' : 'Downloads OFF' }}</div>
                                        <div class="mt-2">{{ $share->requiresPin() ? 'Password ON' : 'No Password' }}</div>
                                    </td>
                                    <td class="px-4 py-4 font-bold">{{ $share->download_count }}</td>
                                    <td class="px-4 py-4">
                                        @if (! $share->revoked_at)
                                            <form method="POST" action="{{ route('documents.shares.revoke', $share) }}">
                                                @csrf
                                                @method('DELETE')
                                                <input type="hidden" name="return_to" value="shares">
                                                <button class="inline-flex h-9 w-9 items-center justify-center rounded border border-[var(--construct-border)] text-red-700" aria-label="Revoke link">
                                                    <span class="material-symbols-outlined text-[18px]">delete</span>
                                                </button>
                                            </form>
                                        @else
                                            <span class="text-xs font-bold text-[var(--construct-muted)]">Revoked</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-4 py-8 text-sm text-[var(--construct-muted)]">No shared links yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
@endsection