{% extends "base.html" %}
{% block title %}Plan Review — DriveCore{% endblock %}
{% block page_label %}Plan Review{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto pb-20 animate-fade-in">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
        <div>
            <h1 class="text-[28px] font-bold tracking-tight mb-1">Plan Review</h1>
            <p id="plan-summary" class="text-[14px] text-[#86868B]">Loading plan...</p>
        </div>
        <div class="flex items-center gap-3 flex-wrap">
            <!-- Name Search -->
            <input id="plan-search" type="search" placeholder="Search by name or path..."
                oninput="filterPlan()"
                class="px-4 py-2.5 rounded-[14px] border text-[13px] outline-none transition-colors w-64
                    bg-white border-[#E5E5EA] text-[#1D1D1F]
                    dark:bg-[#1C1C1E] dark:border-[#38383A] dark:text-[#F5F5F7]">
            <!-- Filter -->
            <select id="plan-filter" onchange="filterPlan()"
                class="px-4 py-2.5 rounded-[14px] border text-[13px] font-medium outline-none transition-colors
                    bg-white border-[#E5E5EA] text-[#1D1D1F]
                    dark:bg-[#1C1C1E] dark:border-[#38383A] dark:text-[#F5F5F7]">
                <option value="all">All Operations</option>
                <option value="rename">Rename</option>
                <option value="move">Move</option>
                <option value="rename_and_move">Rename & Move</option>
                <option value="create_folder">Create Folder</option>
                <option value="create_shortcut">Create Shortcut</option>
                <option value="update_description">Update Description</option>
                <option value="trash">Trash</option>
            </select>
        </div>
    </div>

    <!-- Approved Plan Banner (shown when approved-plan.json exists) -->
    <div id="approved-banner" class="hidden mb-4"></div>

    <!-- Last Applied Panel (shown when a rollback log exists) -->
    <div id="last-applied-panel" class="hidden mb-4"></div>

    <!-- Action Bar -->
    <div class="glass-card p-4 mb-6 flex items-center gap-3 flex-wrap">
        <button onclick="planApproveAll()"
            class="px-4 py-2 rounded-xl text-[13px] font-semibold transition-colors
                bg-[#F5F5F7] hover:bg-[#E5E5EA] text-[#1D1D1F]
                dark:bg-[#2C2C2E] dark:hover:bg-[#38383A] dark:text-[#F5F5F7]">
            <i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i>
            Select Visible
        </button>
        <button onclick="planRejectAll()"
            class="px-4 py-2 rounded-xl text-[13px] font-semibold transition-colors
                bg-[#F5F5F7] hover:bg-[#E5E5EA] text-[#1D1D1F]
                dark:bg-[#2C2C2E] dark:hover:bg-[#38383A] dark:text-[#F5F5F7]">
            <i data-lucide="x-circle" class="w-4 h-4 inline mr-1"></i>
            Deselect Visible
        </button>
        <div class="h-6 w-px bg-[#E5E5EA] dark:bg-[#38383A]"></div>
        <button id="bulk-select-safe" onclick="planSelectSafeOnly()"
            class="px-4 py-2 rounded-xl text-[13px] font-semibold transition-colors
                bg-green-50 hover:bg-green-100 text-green-700
                dark:bg-green-500/10 dark:hover:bg-green-500/20 dark:text-green-400"
            title="Select every op except TRASH (deletions). When the plan has no TRASH ops this is equivalent to Select All.">
            <i data-lucide="shield-check" class="w-4 h-4 inline mr-1"></i>
            Select All (Skip Trash)
        </button>
        <button id="bulk-deselect-trash" onclick="planDeselectAllTrash()"
            class="hidden px-4 py-2 rounded-xl text-[13px] font-semibold transition-colors
                bg-orange-50 hover:bg-orange-100 text-orange-700
                dark:bg-orange-500/10 dark:hover:bg-orange-500/20 dark:text-orange-400"
            title="Remove all TRASH operations from the selection">
            <i data-lucide="trash-2" class="w-4 h-4 inline mr-1"></i>
            <span>Deselect all TRASH (<span id="bulk-trash-count">0</span>)</span>
        </button>
        <div class="ml-auto">
            <button onclick="planApply()" class="jelly-btn text-[13px] py-2.5 px-5">
                <i data-lucide="play" class="w-4 h-4"></i>
                <span>Approve Selected</span>
            </button>
        </div>
    </div>

    <!-- Plan Items -->
    <div id="plan-container" class="space-y-4">
        <div class="flex justify-center py-12"><div class="spinner"></div></div>
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirm-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="glass-card p-8 max-w-md w-full mx-4 shadow-2xl">
        <h3 class="text-[18px] font-bold mb-4 flex items-center gap-2">
            <i data-lucide="alert-triangle" class="w-5 h-5 text-orange-500"></i>
            Confirm Plan Approval
        </h3>
        <div id="confirm-summary" class="space-y-2 mb-4 text-[14px]"></div>
        <div id="confirm-trash-warning" class="hidden mb-4 p-3 rounded-xl bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30">
            <p class="text-[13px] text-red-600 dark:text-red-400 font-medium">
                <i data-lucide="trash-2" class="w-4 h-4 inline mr-1"></i>
                This plan includes TRASH operations. Type <strong>apply</strong> below to confirm.
            </p>
            <input type="text" id="confirm-input" placeholder="Type 'apply' to confirm"
                class="mt-2 w-full px-3 py-2 rounded-lg border text-[13px] outline-none
                    bg-white border-[#E5E5EA] text-[#1D1D1F]
                    dark:bg-[#1C1C1E] dark:border-[#38383A] dark:text-[#F5F5F7]">
        </div>
        <div class="flex justify-end gap-3">
            <button onclick="closeConfirmModal()"
                class="px-4 py-2.5 rounded-xl text-[13px] font-semibold transition-colors
                    bg-[#F5F5F7] hover:bg-[#E5E5EA] text-[#1D1D1F]
                    dark:bg-[#2C2C2E] dark:hover:bg-[#38383A] dark:text-[#F5F5F7]">
                Cancel
            </button>
            <button id="confirm-apply-btn" onclick="confirmPlanApply()"
                class="jelly-btn text-[13px] py-2.5 px-5">
                <i data-lucide="check" class="w-4 h-4"></i>
                <span>Confirm Apply</span>
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', loadPlan);
</script>
{% endblock %}