<?php
// pages/components/site_panel_docs.php
require_once BEEZUI_ROOT . '/components/index.php';
require_once BEEZUI_ROOT . '/pages/layout.php';

use Components\Button;

ob_start();
?>
<div class="prose max-w-none dark:prose-invert">
  <h1 class="text-2xl font-semibold">SitePanel Documentation</h1>
  <p class="text-gray-600 dark:text-gray-300">The <code>SitePanel</code> is a multifunctional sidepanel located to the right of the main application area. It supports features like onboarding flows, assistants, AI chat, and notifications.</p>

  <h2 class="text-xl font-semibold mt-6">Features</h2>
  <ul class="list-disc ml-5">
    <li><strong>Animated:</strong> Smooth slide-in appearance.</li>
    <li><strong>Resizable:</strong> Drag the vertical bar to resize between 300px and 600px. Double-click to toggle.</li>
    <li><strong>State Persistence:</strong> Panel width and collapsed state are persisted in local storage.</li>
    <li><strong>HTMX Support:</strong> Load content dynamically via HTMX.</li>
    <li><strong>Programmatic Control:</strong> Global JavaScript API for easy integration.</li>
  </ul>

  <h2 class="text-xl font-semibold mt-6">JavaScript API</h2>
  <p>The <code>window.MBSitePanel</code> object provides methods to control the panel from anywhere in your scripts.</p>

  <h3 class="text-lg font-semibold mt-4">Open the panel</h3>
  <pre class="bg-gray-900 text-gray-100 p-3 rounded"><code>window.MBSitePanel.open({
  title: 'Assistant',
  url: '<?= BEEZUI_ENTRYPOINT ?>?page=assistant_content&partial=1'
});</code></pre>
  <ul class="list-disc ml-5">
    <li><code>title</code> (string): Optional. Sets the title displayed in the panel header.</li>
    <li><code>url</code> (string): Optional. If provided, HTMX will load content from this URL into the panel body.</li>
  </ul>

  <h3 class="text-lg font-semibold mt-4">Close the panel</h3>
  <pre class="bg-gray-900 text-gray-100 p-3 rounded"><code>window.MBSitePanel.close();</code></pre>

  <h2 class="text-xl font-semibold mt-6">Usage Examples</h2>

  <h3 class="text-lg font-semibold mt-4">HTMX Trigger (Button)</h3>
  <p>You can use a standard button to open the panel by calling the JavaScript API in the <code>@click</code> handler.</p>
  <pre class="bg-gray-900 text-gray-100 p-3 rounded"><code>&lt;button @click="window.MBSitePanel.open({title: 'Help', url: 'api/help'})"&gt;
  Open Help
&lt;/button&gt;</code></pre>

  <h3 class="text-lg font-semibold mt-4">Command API (Declarative)</h3>
  <p>Alternatively, use the command-based API for a more declarative approach. This is the recommended way to target the panel from anywhere.</p>
  <pre class="bg-gray-900 text-gray-100 p-3 rounded"><code>&lt;button 
    command="show-sitepanel" 
    commandfor="app-site-panel-body" 
    data-title="Help" 
    data-url="api/help"&gt;
  Open Help
&lt;/button&gt;</code></pre>

  <div class="mt-4 flex gap-2">
    <?php
    echo Button::render('Demo: JS API', [
        'variant' => 'primary',
        'attrs' => [
            '@click' => "window.MBSitePanel.open({title: 'JS API Demo', url: '../external_modal.php'})",
        ],
    ]);
    echo Button::render('Demo: Command API', [
        'variant' => 'outline',
        'attrs' => [
            'command' => 'show-sitepanel',
            'commandfor' => 'app-site-panel-body',
            'data-title' => 'Command API Demo',
            'data-url' => '../external_modal.php'
        ],
    ]);
    echo Button::render('Demo: Close Panel', [
        'variant' => 'secondary',
        'attrs' => [
            'command' => 'close',
            'commandfor' => 'app-site-panel-body',
        ],
    ]);
    ?>
  </div>

  <h3 class="text-lg font-semibold mt-6">PHP Rendering</h3>
  <p>The <code>SitePanel</code> is automatically rendered in <code>app.php</code>. If you need to render it elsewhere (not recommended as it's a singleton in the app shell), use:</p>
  <pre class="bg-gray-900 text-gray-100 p-3 rounded"><code>echo \Components\SitePanel::render([
  'id' => 'custom-panel-id',
  'body_id' => 'custom-body-id'
]);</code></pre>

  <h2 class="text-xl font-semibold mt-6">CSS / Styling</h2>
  <p>The panel uses Tailwind CSS and follows the application's design system:</p>
  <ul class="list-disc ml-5">
    <li><code>rounded-2xl</code>: Matches the main content area.</li>
    <li><code>bg-canvas</code>: Standard background color.</li>
    <li><code>border-divider/70</code>: Standard border color.</li>
  </ul>

  <h2 class="text-xl font-semibold mt-6">Implementation Details</h2>
  <p>The panel is built with Alpine.js and integrates with the <code>app-shell-main</code> transitions to ensure a smooth layout shift when opening or closing.</p>
</div>
<?php
$content = ob_get_clean();

echo layout($content);
