<?php

// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedNamespaceFound -- APD is the established namespace shared with the Pro add-on and retained for backward compatibility.
namespace APD\Admin;

use APD\Documentation\DocumentationCatalog;

defined('ABSPATH') || exit;

final class DocumentationPage
{
    public function render(): void
    {
        if (! current_user_can('manage_asuka_designer')) {
            wp_die(esc_html__('You are not allowed to access this page.', 'asuka-product-designer'));
        }

        $overview = AdminOverview::snapshot();
        $theme = sanitize_html_class((string) ($overview['settings']['admin_theme'] ?? 'light'));
        $publicDocsUrl = DocumentationCatalog::publicBaseUrl();
        $guides = DocumentationCatalog::guides(['publish']);
        $groupedGuides = [];
        foreach ($guides as $guide) {
            $groupedGuides[$guide['group']][] = $guide;
        }
        ?>
        <div class="wrap apd-admin-shell apd-admin-theme-<?php echo esc_attr($theme); ?> apd-docs-page">
            <header class="apd-workspace-header">
                <div>
                    <span class="apd-dashboard-eyebrow"><?php esc_html_e('Knowledge base', 'asuka-product-designer'); ?></span>
                    <h1><?php esc_html_e('Documentation', 'asuka-product-designer'); ?></h1>
                    <p><?php esc_html_e('Follow the complete path from installation to a validated customer order, with focused guides for every workspace.', 'asuka-product-designer'); ?></p>
                </div>
                <div class="apd-docs-header-actions">
                    <a class="button button-secondary" href="<?php echo esc_url(admin_url('admin.php?page=apd-support')); ?>">
                        <?php esc_html_e('Support center', 'asuka-product-designer'); ?>
                    </a>
                    <a class="button button-primary" href="<?php echo esc_url((string) $publicDocsUrl); ?>" target="_blank" rel="noreferrer">
                        <?php esc_html_e('View public documentation', 'asuka-product-designer'); ?>
                    </a>
                </div>
            </header>

            <section class="apd-docs-start">
                <div>
                    <span class="apd-dashboard-kicker"><?php esc_html_e('Recommended path', 'asuka-product-designer'); ?></span>
                    <h2><?php esc_html_e('From activation to the first production-ready order.', 'asuka-product-designer'); ?></h2>
                    <p><?php esc_html_e('Complete these milestones in order. Each one leaves a result you can verify before moving to the next step.', 'asuka-product-designer'); ?></p>
                </div>
                <ol>
                    <li><span>1</span><?php esc_html_e('Connect licensing and integrations', 'asuka-product-designer'); ?></li>
                    <li><span>2</span><?php esc_html_e('Prepare shared assets and production methods', 'asuka-product-designer'); ?></li>
                    <li><span>3</span><?php esc_html_e('Create, save, and publish a product configuration', 'asuka-product-designer'); ?></li>
                    <li><span>4</span><?php esc_html_e('Bind a WooCommerce product and place a test order', 'asuka-product-designer'); ?></li>
                </ol>
                <a href="<?php echo esc_url(admin_url('admin.php?page=apd-qa-diagnostics')); ?>">
                    <?php esc_html_e('Run QA & Diagnostics', 'asuka-product-designer'); ?> <span aria-hidden="true">&rarr;</span>
                </a>
            </section>

            <section class="apd-docs-library" aria-labelledby="apd-docs-library-title">
                <div class="apd-docs-section-head">
                    <div>
                        <span class="apd-dashboard-kicker"><?php esc_html_e('Complete manual', 'asuka-product-designer'); ?></span>
                        <h2 id="apd-docs-library-title"><?php esc_html_e('Find the task you need', 'asuka-product-designer'); ?></h2>
                    </div>
                    <p><?php esc_html_e('Every guide explains where to click, what each option means, how to verify success, and which mistakes to avoid.', 'asuka-product-designer'); ?></p>
                </div>

                <div class="apd-docs-search">
                    <span class="dashicons dashicons-search" aria-hidden="true"></span>
                    <label for="apd-docs-search-field" class="screen-reader-text"><?php esc_html_e('Search documentation', 'asuka-product-designer'); ?></label>
                    <input
                        id="apd-docs-search-field"
                        type="search"
                        placeholder="<?php echo esc_attr__('Search views, fonts, pricing, WooCommerce, portals...', 'asuka-product-designer'); ?>"
                        data-apd-docs-search
                    >
                    <span data-apd-docs-result-count><?php echo esc_html((string) count($guides)); ?></span>
                </div>

                <div data-apd-docs-library>
                    <?php foreach ($groupedGuides as $group => $items) : ?>
                        <section class="apd-docs-group" data-apd-docs-group>
                            <header>
                                <h3><?php echo esc_html($group); ?></h3>
                                <span
                                    data-apd-docs-group-count
                                    data-apd-docs-single-label="<?php echo esc_attr__('guide', 'asuka-product-designer'); ?>"
                                    data-apd-docs-plural-label="<?php echo esc_attr__('guides', 'asuka-product-designer'); ?>"
                                ><?php echo esc_html(sprintf(/* translators: Placeholder values are populated from the current administration record. */ _n('%d guide', '%d guides', count($items), 'asuka-product-designer'), count($items))); ?></span>
                            </header>
                            <div class="apd-docs-grid">
                                <?php foreach ($items as $guide) : ?>
                                    <article
                                        class="apd-docs-card"
                                        data-apd-docs-card
                                        data-apd-docs-search-text="<?php echo esc_attr(strtolower(implode(' ', [$guide['title'], $guide['copy'], $guide['keywords'], $group]))); ?>"
                                    >
                                        <div class="apd-docs-card__meta">
                                            <span class="apd-docs-card__number"><?php echo esc_html($guide['number']); ?></span>
                                        </div>
                                        <strong><?php echo esc_html($guide['title']); ?></strong>
                                        <p><?php echo esc_html($guide['copy']); ?></p>
                                        <span class="apd-docs-card__action">
                                            <a href="<?php echo esc_url($guide['view_url']); ?>" target="_blank" rel="noreferrer"><?php esc_html_e('Read guide', 'asuka-product-designer'); ?> <i aria-hidden="true">&rarr;</i></a>
                                        </span>
                                    </article>
                                <?php endforeach; ?>
                            </div>
                        </section>
                    <?php endforeach; ?>
                    <div class="apd-docs-empty" data-apd-docs-empty hidden>
                        <span class="dashicons dashicons-search" aria-hidden="true"></span>
                        <strong><?php esc_html_e('No guide matches this search.', 'asuka-product-designer'); ?></strong>
                        <p><?php esc_html_e('Try a menu name such as Products, Assets, Commerce, Settings, or Diagnostics.', 'asuka-product-designer'); ?></p>
                    </div>
                </div>
            </section>

            <section class="apd-docs-glossary">
                <div class="apd-docs-section-head">
                    <div>
                        <span class="apd-dashboard-kicker"><?php esc_html_e('Four concepts to remember', 'asuka-product-designer'); ?></span>
                        <h2><?php esc_html_e('The vocabulary behind the plugin', 'asuka-product-designer'); ?></h2>
                    </div>
                </div>
                <dl>
                    <div>
                        <dt><?php esc_html_e('Configuration', 'asuka-product-designer'); ?></dt>
                        <dd><?php esc_html_e('The complete rules and visual state for one customizable product experience.', 'asuka-product-designer'); ?></dd>
                    </div>
                    <div>
                        <dt><?php esc_html_e('Template', 'asuka-product-designer'); ?></dt>
                        <dd><?php esc_html_e('A reusable customer workspace that controls modules, zones, contextual tools, and portals.', 'asuka-product-designer'); ?></dd>
                    </div>
                    <div>
                        <dt><?php esc_html_e('Element', 'asuka-product-designer'); ?></dt>
                        <dd><?php esc_html_e('A configurable part of the product itself, such as a body, handle, sole, or material.', 'asuka-product-designer'); ?></dd>
                    </div>
                    <div>
                        <dt><?php esc_html_e('Layer', 'asuka-product-designer'); ?></dt>
                        <dd><?php esc_html_e('Customer-added content such as text, image, design, or shape.', 'asuka-product-designer'); ?></dd>
                    </div>
                </dl>
            </section>

            <section class="apd-docs-help">
                <div>
                    <span class="dashicons dashicons-sos" aria-hidden="true"></span>
                    <div>
                        <h2><?php esc_html_e('Something does not match the guide?', 'asuka-product-designer'); ?></h2>
                        <p><?php esc_html_e('Capture the diagnostics report before changing configuration. It records the runtime, license, assets, bindings, and commerce checks support will need.', 'asuka-product-designer'); ?></p>
                    </div>
                </div>
                <div>
                    <a class="button button-secondary" href="<?php echo esc_url(admin_url('admin.php?page=apd-support')); ?>"><?php esc_html_e('Open support center', 'asuka-product-designer'); ?></a>
                    <a class="button button-primary" href="<?php echo esc_url(admin_url('admin.php?page=apd-qa-diagnostics')); ?>"><?php esc_html_e('Open diagnostics', 'asuka-product-designer'); ?></a>
                </div>
            </section>
        </div>
        <?php
    }

}
