@extends('layouts.app')

@section('mobile-title', 'Compliance')
@section('mobile-subtitle', 'Document governance')
@section('mobile-back', route('documents.index'))
@section('mobile-action-url', route('documents.compliance.retention-rules.index'))
@section('mobile-action-icon', 'rule')
@section('mobile-action-label', 'Retention rules')

@section('content')
    @php
        $statusBadge = function ($document) {
            if ($document->legal_hold_at) {
                return ['Legal Hold', 'bg-violet-50 text-violet-700'];
            }

            if ($document->isExpired()) {
                return ['Expired', 'bg-red-50 text-red-700'];
            }

            if ($document->expiresSoon()) {
                return ['Expiring', 'bg-amber-50 text-amber-700'];
            }

            return match ($document->status) {
                \App\Models\Document::STATUS_APPROVED => ['Approved', 'bg-emerald-50 text-emerald-700'],
                \App\Models\Document::STATUS_REJECTED => ['Rejected', 'bg-red-50 text-red-700'],
                default => ['Pending', 'bg-blue-50 text-blue-700'],
            };
        };
    @endphp

    <div class="mb-6 border-b border-[var(--construct-border)] pb-5">
        <div class="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
            <div>
                <div class="mb-2 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>
                    <span>Compliance</span>
                </div>
                <h1 class="text-3xl font-bold">Document Compliance</h1>
                <p class="mt-2 text-sm text-[var(--construct-muted)]">Overview of compliance status across company records, expiry controls, legal holds, and retention rules.</p>
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="{{ route('exports.document-audit') }}" class="inline-flex items-center gap-2 rounded border border-[var(--construct-border)] bg-white px-4 py-2.5 text-sm font-bold text-[var(--construct-text)]">
                    <span class="material-symbols-outlined text-[18px]">download</span>
                    Export Audit
                </a>
                <form method="POST" action="{{ route('documents.compliance.run-retention') }}" class="flex flex-wrap gap-2">
                    @csrf
                    <button name="mode" value="dry_run" class="rounded border border-[var(--construct-border)] bg-white px-4 py-2.5 text-sm font-bold text-[var(--construct-text)]">Dry Run</button>
                    <button name="mode" value="apply" class="rounded bg-[var(--construct-primary)] px-4 py-2.5 text-sm font-bold text-white">Apply Retention</button>
                </form>
            </div>
        </div>
    </div>

    <div class="mb-6 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        <section class="rounded border border-[var(--construct-border)] bg-white p-4 xl:col-span-2">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <div class="text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Overall Compliance</div>
                    <div class="mt-3 flex items-end gap-3">
                        <span class="text-4xl font-extrabold text-[var(--construct-primary-dark)]">{{ $complianceMetrics['overall'] }}%</span>
                        <span class="mb-1 rounded bg-emerald-700 px-2 py-1 text-xs font-bold text-white">{{ $complianceMetrics['legal_holds'] }} holds</span>
                    </div>
                </div>
                <div class="relative h-20 w-20">
                    <svg class="h-20 w-20 -rotate-90" viewBox="0 0 36 36" aria-hidden="true">
                        <path class="stroke-[var(--construct-surface-container)]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3"></path>
                        <path class="stroke-[var(--construct-primary)]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-dasharray="{{ $complianceMetrics['overall'] }}, 100" stroke-linecap="round" stroke-width="3"></path>
                    </svg>
                </div>
            </div>
        </section>

        <section class="rounded border border-[var(--construct-border)] bg-white p-4">
            <div class="flex items-start justify-between">
                <div class="text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Expiring Soon (30d)</div>
                <span class="material-symbols-outlined text-[var(--construct-muted)]">schedule</span>
            </div>
            <div class="mt-5 flex items-end justify-between">
                <span class="text-4xl font-extrabold">{{ $complianceMetrics['expiring_soon'] }}</span>
                <div class="flex h-10 items-end gap-1">
                    <span class="block h-4 w-4 rounded-t bg-[var(--construct-border)]"></span>
                    <span class="block h-7 w-4 rounded-t bg-[var(--construct-border)]"></span>
                    <span class="block h-10 w-4 rounded-t bg-amber-500"></span>
                </div>
            </div>
        </section>

        <section class="rounded border border-[var(--construct-border)] bg-white p-4">
            <div class="flex items-start justify-between">
                <div class="text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Expired Documents</div>
                <span class="material-symbols-outlined text-red-700">warning</span>
            </div>
            <div class="mt-5 flex items-end justify-between">
                <span class="text-4xl font-extrabold text-red-700">{{ $complianceMetrics['expired'] }}</span>
                <a href="#urgent-actions" class="text-sm font-bold text-[var(--construct-secondary)]">View All</a>
            </div>
        </section>

        <section class="rounded border border-[var(--construct-border)] bg-white p-4">
            <div class="flex items-start justify-between">
                <div class="text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">Pending Verification</div>
                <span class="material-symbols-outlined text-[var(--construct-secondary)]">assignment_late</span>
            </div>
            <div class="mt-5 flex items-end justify-between">
                <span class="text-4xl font-extrabold">{{ $complianceMetrics['pending_verification'] }}</span>
                <span class="rounded bg-[#cfe6ff] px-2 py-1 text-xs font-bold text-[#004f7b]">In Queue</span>
            </div>
        </section>
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,2fr)_minmax(360px,1fr)]">
        <div class="space-y-5">
            <section id="urgent-actions" class="overflow-hidden rounded border border-[var(--construct-border)] bg-white">
                <div class="flex items-center justify-between border-b border-[var(--construct-border-soft)] bg-[var(--construct-surface-low)] px-5 py-4">
                    <h2 class="text-xl font-bold">Urgent Actions</h2>
                    <a href="{{ route('documents.index', ['status' => 'draft']) }}" class="text-sm font-bold text-[var(--construct-secondary)]">See All</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-left text-sm">
                        <thead class="bg-[var(--construct-bg)] text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">
                            <tr>
                                <th class="px-5 py-3">Document / Project</th>
                                <th class="px-5 py-3">Type</th>
                                <th class="px-5 py-3">Status</th>
                                <th class="px-5 py-3 text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[var(--construct-border-soft)]">
                            @forelse ($urgentActions as $document)
                                @php($badge = $statusBadge($document))
                                <tr>
                                    <td class="px-5 py-4">
                                        <div class="font-bold">{{ $document->title }}</div>
                                        <div class="mt-1 text-xs text-[var(--construct-muted)]">{{ $document->project?->name ?? 'Company Records' }}</div>
                                    </td>
                                    <td class="px-5 py-4">{{ $document->folder->categoryLabel() }}</td>
                                    <td class="px-5 py-4">
                                        <span class="rounded px-2 py-1 text-xs font-bold {{ $badge[1] }}">{{ $badge[0] }}</span>
                                    </td>
                                    <td class="px-5 py-4 text-right">
                                        <a href="{{ route('documents.show', $document) }}" class="inline-flex rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm font-bold text-[var(--construct-text)]">Open</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-5 py-8 text-sm text-[var(--construct-muted)]">No urgent compliance actions right now.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>

            <div class="grid gap-5 lg:grid-cols-2">
                <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                    <h2 class="mb-5 text-xl font-bold">Compliance by Category</h2>
                    <div class="space-y-4">
                        @forelse ($categoryCompliance as $row)
                            <div>
                                <div class="mb-2 flex items-center justify-between gap-3 text-sm">
                                    <span class="font-semibold">{{ $categories[$row->category] ?? ucfirst($row->category) }}</span>
                                    <span class="font-bold">{{ $row->score }}%</span>
                                </div>
                                <div class="h-2 overflow-hidden rounded-full bg-[var(--construct-surface-container)]">
                                    <div class="h-full rounded-full {{ $row->score >= 90 ? 'bg-[var(--construct-primary)]' : ($row->score >= 70 ? 'bg-amber-500' : 'bg-red-600') }}" style="width: {{ max(4, $row->score) }}%"></div>
                                </div>
                            </div>
                        @empty
                            <div class="text-sm text-[var(--construct-muted)]">No category data yet.</div>
                        @endforelse
                    </div>
                </section>

                <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                    <h2 class="mb-5 text-xl font-bold">Upcoming Expirations</h2>
                    <div class="relative space-y-5 pl-8 before:absolute before:bottom-3 before:left-2 before:top-1 before:w-px before:bg-[var(--construct-border-soft)]">
                        @foreach ([['This Week', $expirationBuckets['this_week']], ['Next 30 Days', $expirationBuckets['next_30_days']], ['Next 90 Days', $expirationBuckets['next_90_days']]] as [$label, $count])
                            <div class="relative">
                                <span class="absolute -left-[1.875rem] top-1 h-3 w-3 rounded-full {{ $loop->first ? 'bg-amber-500' : 'bg-[var(--construct-border-soft)]' }}"></span>
                                <div class="mb-2 text-sm font-semibold">{{ $label }}</div>
                                <a href="{{ route('documents.index', ['expiry' => 'soon']) }}" class="flex items-center justify-between rounded border border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-3 py-3 text-sm font-bold">
                                    <span>{{ $count }} Documents</span>
                                    <span class="material-symbols-outlined text-[18px]">chevron_right</span>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </section>
            </div>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="text-xl font-bold">Retention Rules</h2>
                        <p class="mt-1 text-sm text-[var(--construct-muted)]">Set the archive window for each company document category.</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="rounded bg-[var(--construct-surface-low)] px-3 py-1 text-xs font-bold text-[var(--construct-muted)]">{{ $rules->where('is_enabled', true)->count() }} active</span>
                        <a href="{{ route('documents.compliance.retention-rules.index') }}" class="inline-flex items-center gap-1 rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm font-bold text-[var(--construct-text)]">
                            <span class="material-symbols-outlined text-[16px]">tune</span>
                            Open Settings
                        </a>
                    </div>
                </div>
                <form method="POST" action="{{ route('documents.compliance.retention-rules') }}">
                    @csrf
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-left text-sm">
                            <thead class="bg-[var(--construct-bg)] text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">
                                <tr>
                                    <th class="px-3 py-3">Category</th>
                                    <th class="px-3 py-3">Retain Months</th>
                                    <th class="px-3 py-3">Enabled</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-[var(--construct-border-soft)]">
                                @foreach ($categories as $category => $label)
                                    @php($rule = $rules->get($category))
                                    <tr>
                                        <td class="px-3 py-3 font-bold">{{ $label }}</td>
                                        <td class="px-3 py-3">
                                            <input name="rules[{{ $category }}][retain_months]" type="number" min="1" max="1200" value="{{ old("rules.$category.retain_months", $rule?->retain_months ?? 84) }}" class="w-28 rounded border border-[var(--construct-border)] px-3 py-2 text-sm">
                                        </td>
                                        <td class="px-3 py-3">
                                            <label class="inline-flex items-center gap-2 font-semibold">
                                                <input type="checkbox" name="rules[{{ $category }}][is_enabled]" value="1" @checked(old("rules.$category.is_enabled", $rule?->is_enabled)) class="rounded border-[var(--construct-border)] text-[var(--construct-primary)]">
                                                Enabled
                                            </label>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <button class="mt-4 rounded bg-[var(--construct-primary)] px-4 py-2.5 text-sm font-bold text-white">Save Retention Rules</button>
                </form>
            </section>
        </div>

        <div class="space-y-5">
            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <div class="mb-5 flex items-center justify-between">
                    <h2 class="text-xl font-bold">Recent Verifications</h2>
                    <span class="material-symbols-outlined text-[var(--construct-muted)]">refresh</span>
                </div>
                <div class="space-y-4">
                    @forelse ($recentVerifications as $document)
                        @php($approved = $document->status === \App\Models\Document::STATUS_APPROVED)
                        <a href="{{ route('documents.show', $document) }}" class="flex gap-3 border-b border-[var(--construct-border-soft)] pb-4 last:border-0 last:pb-0">
                            <span class="mt-1 inline-flex h-9 w-9 items-center justify-center rounded-full {{ $approved ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700' }}">
                                <span class="material-symbols-outlined text-[18px]">{{ $approved ? 'check_circle' : 'cancel' }}</span>
                            </span>
                            <span>
                                <span class="block font-bold">{{ $document->title }}</span>
                                <span class="mt-1 block text-sm text-[var(--construct-muted)]">{{ $document->folder->categoryLabel() }} · {{ $approved ? 'Approved' : 'Rejected' }} by {{ $document->reviewer?->name ?? 'System' }}</span>
                                <span class="mt-1 block text-xs text-[var(--construct-muted)]">{{ $document->reviewed_at->diffForHumans() }}</span>
                            </span>
                        </a>
                    @empty
                        <div class="text-sm text-[var(--construct-muted)]">No verification activity yet.</div>
                    @endforelse
                </div>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="mb-5 text-xl font-bold">Site Status</h2>
                <div class="space-y-4">
                    @forelse ($siteStatus as $site)
                        <div class="flex items-center justify-between gap-4 text-sm">
                            <span class="flex min-w-0 items-center gap-2">
                                <span class="h-2.5 w-2.5 rounded-full {{ $site->score >= 90 ? 'bg-emerald-500' : ($site->score >= 70 ? 'bg-amber-500' : 'bg-red-600') }}"></span>
                                <span class="truncate font-semibold">{{ $site->project_name }}</span>
                            </span>
                            <span class="font-bold">{{ $site->score }}%</span>
                        </div>
                    @empty
                        <div class="text-sm text-[var(--construct-muted)]">No site data yet.</div>
                    @endforelse
                </div>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="mb-5 text-xl font-bold">Retention Candidates</h2>
                <div class="space-y-3">
                    @forelse ($retentionCandidates as $document)
                        <a href="{{ route('documents.show', $document) }}" class="block rounded border border-[var(--construct-border)] px-3 py-3 text-sm hover:bg-[var(--construct-surface-low)]">
                            <span class="block font-bold">{{ $document->title }}</span>
                            <span class="mt-1 block text-xs text-[var(--construct-muted)]">{{ $document->folder->categoryLabel() }} · {{ $document->created_at->format('M j, Y') }}</span>
                        </a>
                    @empty
                        <div class="text-sm text-[var(--construct-muted)]">No documents currently match enabled retention rules.</div>
                    @endforelse
                </div>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="mb-5 text-xl font-bold">Legal Holds</h2>
                <div class="space-y-3">
                    @forelse ($legalHoldDocuments as $document)
                        <a href="{{ route('documents.show', $document) }}" class="block rounded border border-violet-200 bg-violet-50 px-3 py-3 text-sm text-violet-950">
                            <span class="block font-bold">{{ $document->title }}</span>
                            <span class="mt-1 block text-xs">Held {{ $document->legal_hold_at->format('M j, Y') }} · {{ $document->legalHoldUser?->name ?: 'Admin' }}</span>
                        </a>
                    @empty
                        <div class="text-sm text-[var(--construct-muted)]">No active legal holds.</div>
                    @endforelse
                </div>
            </section>
        </div>
    </div>

    <div class="mt-5 grid gap-5 lg:grid-cols-2">
        <section class="rounded border border-[var(--construct-border)] bg-white p-5">
            <h2 class="mb-4 text-xl font-bold">Storage by Category</h2>
            <div class="space-y-3">
                @forelse ($storageByCategory as $row)
                    <div class="flex items-center justify-between gap-4 rounded border border-[var(--construct-border-soft)] px-3 py-2 text-sm">
                        <span class="font-semibold">{{ $categories[$row->category] ?? ucfirst($row->category) }}</span>
                        <span class="text-[var(--construct-muted)]">{{ $row->documents_count }} docs · {{ number_format(($row->bytes ?? 0) / 1048576, 2) }} MB</span>
                    </div>
                @empty
                    <div class="text-sm text-[var(--construct-muted)]">No documents yet.</div>
                @endforelse
            </div>
        </section>

        <section class="rounded border border-[var(--construct-border)] bg-white p-5">
            <h2 class="mb-4 text-xl font-bold">Storage by Owner</h2>
            <div class="space-y-3">
                @forelse ($storageByOwner as $row)
                    <div class="flex items-center justify-between gap-4 rounded border border-[var(--construct-border-soft)] px-3 py-2 text-sm">
                        <span class="font-semibold">{{ $row->name ?: 'No owner' }}</span>
                        <span class="text-[var(--construct-muted)]">{{ $row->documents_count }} docs · {{ number_format(($row->bytes ?? 0) / 1048576, 2) }} MB</span>
                    </div>
                @empty
                    <div class="text-sm text-[var(--construct-muted)]">No owner data yet.</div>
                @endforelse
            </div>
        </section>
    </div>
@endsection