<?php
/**
 * Proto Preview — WordPress Admin Board View
 */
if (!defined('ABSPATH')) exit;
?>

<div class="proto-preview-wp-wrap min-h-screen bg-[#edf2f6] text-[#2D3748] font-sans antialiased">
  
  <!-- =========================================================================
       1. TOP BAR
       ========================================================================= -->
  <header class="h-16 bg-white border-b border-slate-200 px-6 flex items-center justify-between sticky top-8 z-30 shadow-sm">
    <div class="flex items-center gap-3">
      <img src="https://bowdenworks.com/wp-content/uploads/2023/07/bowdenworks_square.jpg" alt="Bowden Works" class="w-8 h-8 rounded-lg object-cover shadow-sm border border-[#b02b2b]/20" />
      <div>
        <h1 class="text-base font-serif-heading font-bold text-slate-900 leading-tight">Proto<span class="text-[#b02b2b]">Preview</span> CMS</h1>
        <p class="text-[10px] text-slate-400">InVision-Style Screen Management & Client Approvals</p>
      </div>
      <span class="text-xs text-slate-400 font-mono bg-slate-100 px-2.5 py-0.5 rounded-md border border-slate-200 ml-2">● WordPress v<?php echo get_bloginfo('version'); ?></span>
    </div>

    <div class="flex items-center gap-3">
      <!-- Search -->
      <div class="relative hidden sm:block">
        <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
        <input type="text" id="admin-search" placeholder="Search projects, screens..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-[#b02b2b] focus:outline-none w-56">
      </div>

      <!-- Add Project Button -->
      <button onclick="window.adminApp.openModal('create-project-modal')" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#b02b2b] hover:bg-[#872e21] text-white text-xs font-bold shadow-md shadow-[#b02b2b]/20 transition cursor-pointer">
        <i data-lucide="plus" class="w-4 h-4"></i>
        <span>New Project</span>
      </button>

      <!-- Open Client Player Link -->
      <a href="<?php echo esc_url(home_url('/?proto_preview=1')); ?>" target="_blank" class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold transition shadow-sm">
        <i data-lucide="external-link" class="w-3.5 h-3.5 text-red-300"></i>
        <span>Open Player ↗</span>
      </a>
    </div>
  </header>

  <!-- =========================================================================
       2. MAIN CONTENT BODY
       ========================================================================= -->
  <main class="p-6 space-y-6 max-w-7xl mx-auto">

    <!-- Stats Bar -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Active Projects</p>
          <p id="stat-projects-count" class="text-2xl font-bold text-slate-900 mt-0.5">0</p>
        </div>
        <div class="w-10 h-10 rounded-xl bg-[#fbeeed] text-[#b02b2b] flex items-center justify-center">
          <i data-lucide="folder" class="w-5 h-5"></i>
        </div>
      </div>

      <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Screen Variations</p>
          <p id="stat-layouts-count" class="text-2xl font-bold text-slate-900 mt-0.5">0</p>
        </div>
        <div class="w-10 h-10 rounded-xl bg-slate-100 text-[#1A202C] flex items-center justify-center">
          <i data-lucide="layers" class="w-5 h-5"></i>
        </div>
      </div>

      <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Open Comments</p>
          <p id="stat-comments-count" class="text-2xl font-bold text-slate-900 mt-0.5">0</p>
        </div>
        <div class="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center">
          <i data-lucide="message-circle" class="w-5 h-5"></i>
        </div>
      </div>

      <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Walkthrough Sections</p>
          <p id="stat-steps-count" class="text-2xl font-bold text-slate-900 mt-0.5">0</p>
        </div>
        <div class="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
          <i data-lucide="check-circle-2" class="w-5 h-5"></i>
        </div>
      </div>
    </div>

    <!-- Projects List Container -->
    <div id="projects-list-container" class="space-y-6">
      <!-- Injected dynamically via JS -->
    </div>

  </main>

  <!-- =========================================================================
       3. MODALS
       ========================================================================= -->

  <!-- CREATE PROJECT MODAL -->
  <div id="create-project-modal" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-md w-full p-6 animate-in fade-in zoom-in-95 duration-200">
      <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
        <div>
          <h3 class="text-base font-bold text-slate-900">Create New Project</h3>
          <p class="text-xs text-slate-500">Group client layouts and prototypes under a single project.</p>
        </div>
        <button onclick="window.adminApp.closeModal('create-project-modal')" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 cursor-pointer">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <form id="form-create-project" class="space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Project Name</label>
          <input type="text" id="new-proj-name" required placeholder="e.g. Acme Corp Web Redesign" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Client / Company Name</label>
          <input type="text" id="new-proj-client" placeholder="e.g. Acme Technologies Inc." class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Project Description</label>
          <textarea id="new-proj-desc" rows="2" placeholder="Brief project scope or review goals..." class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b] resize-none"></textarea>
        </div>

        <div class="pt-2 flex items-center justify-end gap-2">
          <button type="button" onclick="window.adminApp.closeModal('create-project-modal')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition cursor-pointer">
            Cancel
          </button>
          <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-[#b02b2b] hover:bg-[#872e21] shadow-md shadow-[#b02b2b]/20 transition cursor-pointer">
            Create Project
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- ADD PAGE / SCREEN MODAL -->
  <div id="add-page-modal" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-md w-full p-6 animate-in fade-in zoom-in-95 duration-200">
      <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
        <div>
          <h3 class="text-base font-bold text-slate-900">Add New Screen / Page</h3>
          <p class="text-xs text-slate-500">Add a new page flow under this project (e.g. Pricing, Checkout).</p>
        </div>
        <button onclick="window.adminApp.closeModal('add-page-modal')" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 cursor-pointer">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <form id="form-admin-add-page" class="space-y-4">
        <input type="hidden" id="admin-page-project-id" value="1">

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Page / Screen Name</label>
          <input type="text" id="admin-page-name" required placeholder="e.g. Pricing & Plans" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">URL Slug</label>
          <input type="text" id="admin-page-slug" placeholder="e.g. pricing" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
        </div>

        <div class="pt-2 flex items-center justify-end gap-2">
          <button type="button" onclick="window.adminApp.closeModal('add-page-modal')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition cursor-pointer">
            Cancel
          </button>
          <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-[#b02b2b] hover:bg-[#872e21] shadow-md shadow-[#b02b2b]/20 transition cursor-pointer">
            Add Screen
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- ADD LAYOUT VARIATION MODAL -->
  <div id="add-layout-modal" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-md w-full p-6 animate-in fade-in zoom-in-95 duration-200">
      <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
        <div>
          <h3 class="text-base font-bold text-slate-900">Add Layout Variation</h3>
          <p class="text-xs text-slate-500">Attach a new prototype option to this page for client review.</p>
        </div>
        <button onclick="window.adminApp.closeModal('add-layout-modal')" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 cursor-pointer">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <form id="form-admin-add-layout" class="space-y-4">
        <input type="hidden" id="admin-layout-project-id" value="1">

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Target Page / Screen</label>
          <select id="admin-layout-page-id" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
            <option value="1">Homepage</option>
          </select>
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Variation Name</label>
          <input type="text" id="admin-layout-name" required placeholder="e.g. Option B (Dark Cyber Modern)" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Badge / Tag</label>
          <input type="text" id="admin-layout-badge" placeholder="e.g. High Conversion Concept" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-700 mb-1">Prototype Template or Custom File</label>
          <select id="admin-layout-template" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#b02b2b] mb-2">
            <option value="<?php echo esc_url(PROTO_PREVIEW_PLUGIN_URL . 'layouts/saas-v1.html'); ?>">Modern SaaS Prototype</option>
            <option value="<?php echo esc_url(PROTO_PREVIEW_PLUGIN_URL . 'layouts/dark-v2.html'); ?>">Cyber AI Prototype</option>
            <option value="<?php echo esc_url(PROTO_PREVIEW_PLUGIN_URL . 'layouts/agency-v3.html'); ?>">Editorial Studio Prototype</option>
          </select>
        </div>

        <div class="pt-2 flex items-center justify-end gap-2">
          <button type="button" onclick="window.adminApp.closeModal('add-layout-modal')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition cursor-pointer">
            Cancel
          </button>
          <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-[#b02b2b] hover:bg-[#872e21] shadow-md shadow-[#b02b2b]/20 transition cursor-pointer">
            Save Variation
          </button>
        </div>
      </form>
    </div>
  </div>

</div>
