@extends('layouts.app')

@section('mobile-title', 'Retention Rules')
@section('mobile-subtitle', 'Document compliance')
@section('mobile-back', route('documents.compliance'))

@section('content')
    @php
        $policyRows = collect($categories)->map(function ($label, $category) use ($rules) {
            $rule = $rules->get($category);

            return [
                'category' => $category,
                'label' => $label,
                'retain_months' => $rule?->retain_months ?? 84,
                'action' => $rule?->action ?? \App\Models\DocumentRetentionRule::ACTION_ARCHIVE,
                'enabled' => (bool) $rule?->is_enabled,
                'updated_at' => $rule?->updated_at,
            ];
        });
    @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>
                    <a href="{{ route('documents.compliance') }}" class="font-semibold text-[var(--construct-primary-dark)]">Compliance</a>
                    <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                    <span>Retention Rules</span>
                </div>
                <h1 class="text-3xl font-bold">Retention Rules & Settings</h1>
                <p class="mt-2 max-w-3xl text-sm text-[var(--construct-muted)]">Define and manage document lifecycle policies by category to support compliance, legal holds, and storage control.</p>
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="{{ route('documents.compliance') }}" 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]">dashboard</span>
                    Compliance Dashboard
                </a>
                <a href="#retention-policies" class="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</span>
                    Add New Policy
                </a>
            </div>
        </div>
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(320px,0.78fr)_minmax(0,1.6fr)]">
        <div class="space-y-5">
            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="mb-5 flex items-center gap-2 text-xl font-bold">
                    <span class="material-symbols-outlined text-[var(--construct-muted)]">settings</span>
                    Global Settings
                </h2>

                <div class="space-y-5">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <div class="text-sm font-bold">Automated Archiving</div>
                            <p class="mt-1 text-sm text-[var(--construct-muted)]">Enabled when at least one retention policy is active.</p>
                        </div>
                        <span class="relative mt-1 inline-flex h-5 w-9 shrink-0 rounded-full {{ $activePolicyCount > 0 ? 'bg-[var(--construct-primary)]' : 'bg-[var(--construct-surface-container)]' }}">
                            <span class="absolute top-0.5 h-4 w-4 rounded-full bg-white transition {{ $activePolicyCount > 0 ? 'left-[18px]' : 'left-0.5' }}"></span>
                        </span>
                    </div>

                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <div class="text-sm font-bold">Hard Delete</div>
                            <p class="mt-1 text-sm text-[var(--construct-muted)]">Not enabled. Current lifecycle action archives records for recovery.</p>
                        </div>
                        <span class="relative mt-1 inline-flex h-5 w-9 shrink-0 rounded-full bg-[var(--construct-surface-container)]">
                            <span class="absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white"></span>
                        </span>
                    </div>

                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <div class="text-sm font-bold">Legal Hold Notification</div>
                            <p class="mt-1 text-sm text-[var(--construct-muted)]">Legal-hold documents are excluded from retention automation.</p>
                        </div>
                        <span class="relative mt-1 inline-flex h-5 w-9 shrink-0 rounded-full bg-[var(--construct-primary)]">
                            <span class="absolute left-[18px] top-0.5 h-4 w-4 rounded-full bg-white"></span>
                        </span>
                    </div>
                </div>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <div class="mb-5 flex items-center justify-between gap-3">
                    <h2 class="flex items-center gap-2 text-xl font-bold">
                        <span class="material-symbols-outlined text-red-700">gavel</span>
                        Legal Holds
                    </h2>
                    <a href="{{ route('documents.compliance') }}#legal-holds" class="text-sm font-bold text-[var(--construct-primary-dark)]">View All</a>
                </div>

                <div class="space-y-3">
                    @forelse ($legalHoldDocuments as $document)
                        <a href="{{ route('documents.show', $document) }}" class="block rounded border border-[var(--construct-border)] bg-[var(--construct-bg)] p-3 text-sm">
                            <div class="flex items-start justify-between gap-3">
                                <span class="font-bold">{{ $document->title }}</span>
                                <span class="rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700">Active</span>
                            </div>
                            <div class="mt-3 grid grid-cols-2 gap-3 text-[var(--construct-muted)]">
                                <div>
                                    <span class="block text-[11px] font-bold uppercase tracking-wide text-[var(--construct-muted)]">Applied To</span>
                                    {{ $document->project?->name ?? $document->folder->categoryLabel() }}
                                </div>
                                <div>
                                    <span class="block text-[11px] font-bold uppercase tracking-wide text-[var(--construct-muted)]">Date</span>
                                    {{ $document->legal_hold_at->format('d M Y') }}
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="rounded border border-[var(--construct-border-soft)] bg-[var(--construct-bg)] p-3 text-sm text-[var(--construct-muted)]">No active legal holds.</div>
                    @endforelse
                </div>
            </section>

            <section class="rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="mb-4 text-xl font-bold">Retention Queue</h2>
                <div class="text-sm text-[var(--construct-muted)]">{{ $retentionCandidates->count() }} document(s) currently match active retention rules.</div>
                <form method="POST" action="{{ route('documents.compliance.run-retention') }}" class="mt-4 flex flex-wrap gap-2">
                    @csrf
                    <button name="mode" value="dry_run" class="rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm font-bold text-[var(--construct-text)]">Dry Run</button>
                    <button name="mode" value="apply" class="rounded bg-[var(--construct-primary)] px-3 py-2 text-sm font-bold text-white">Apply</button>
                </form>
            </section>
        </div>

        <section id="retention-policies" class="flex min-h-[620px] flex-col overflow-hidden rounded border border-[var(--construct-border)] bg-white">
            <form method="POST" action="{{ route('documents.compliance.retention-rules') }}" class="flex min-h-0 flex-1 flex-col">
                @csrf
                <input type="hidden" name="return_to" value="retention-rules">

                <div class="flex flex-col gap-3 border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] p-5 md:flex-row md:items-center md:justify-between">
                    <h2 class="flex items-center gap-2 text-xl font-bold">
                        <span class="material-symbols-outlined text-[var(--construct-muted)]">policy</span>
                        Retention Policies
                    </h2>
                    <button class="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]">save</span>
                        Save Policies
                    </button>
                </div>

                <div class="min-h-0 flex-1 overflow-x-auto p-3">
                    <table class="min-w-full border-collapse text-left text-sm">
                        <thead>
                            <tr class="border-b border-[var(--construct-border)] bg-[var(--construct-bg)] text-xs font-bold uppercase tracking-wide text-[var(--construct-muted)]">
                                <th class="px-3 py-3">Document Category</th>
                                <th class="px-3 py-3">Retention Period</th>
                                <th class="px-3 py-3">Action at Expiry</th>
                                <th class="px-3 py-3 text-center">Status</th>
                                <th class="px-3 py-3 text-right">Last Updated</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[var(--construct-border-soft)]">
                            @foreach ($policyRows as $row)
                                <tr class="group hover:bg-[var(--construct-surface-low)] {{ $row['enabled'] ? '' : 'text-[var(--construct-muted)] opacity-70' }}">
                                    <td class="px-3 py-4 font-bold">{{ $row['label'] }}</td>
                                    <td class="px-3 py-4">
                                        <label class="inline-flex items-center gap-2">
                                            <input name="rules[{{ $row['category'] }}][retain_months]" type="number" min="1" max="1200" value="{{ old("rules.{$row['category']}.retain_months", $row['retain_months']) }}" class="w-24 rounded border border-[var(--construct-border)] bg-white px-3 py-2 text-sm">
                                            <span class="whitespace-nowrap text-[var(--construct-muted)]">months</span>
                                        </label>
                                    </td>
                                    <td class="px-3 py-4">
                                        <span class="inline-flex items-center gap-1 text-[var(--construct-muted)]">
                                            <span class="material-symbols-outlined text-[16px]">archive</span>
                                            {{ ucfirst($row['action']) }}
                                        </span>
                                    </td>
                                    <td class="px-3 py-4 text-center">
                                        <label class="relative inline-flex cursor-pointer items-center">
                                            <input type="checkbox" name="rules[{{ $row['category'] }}][is_enabled]" value="1" @checked(old("rules.{$row['category']}.is_enabled", $row['enabled'])) class="peer sr-only">
                                            <span class="h-4 w-8 rounded-full bg-[var(--construct-surface-container)] after:absolute after:left-0.5 after:top-0.5 after:h-3 after:w-3 after:rounded-full after:bg-white after:transition peer-checked:bg-[var(--construct-primary)] peer-checked:after:translate-x-4"></span>
                                        </label>
                                    </td>
                                    <td class="px-3 py-4 text-right text-xs text-[var(--construct-muted)]">
                                        {{ $row['updated_at'] ? $row['updated_at']->diffForHumans() : 'Not saved' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-[var(--construct-border)] bg-[var(--construct-surface-low)] px-5 py-4 text-center text-sm text-[var(--construct-muted)]">
                    Showing {{ $activePolicyCount }} of {{ $policyRows->count() }} active policies
                </div>
            </form>
        </section>
    </div>
@endsection