<?php
// Service/Features/StyleUtils.php
// 该文件主要负责提供样式（CSS）输出相关的辅助功能。

namespace HaoZiTeam\AIPost\Service\Features;

defined('ABSPATH') || exit;

class StyleUtils
{
    /**
     * 输出全局自定义 CSS 和文章目录 (TOC) 的 CSS。
     *
     * @param array $settings 插件的设置数组。
     * @return void
     */
    public static function output_global_styles($settings)
    {
        $global_css = $settings['global_tabs']['global_custom_css'] ?? '';
        if (!empty($global_css)) {
            echo "\n<!-- Custom CSS -->\n<style>\n" . esc_html($global_css) . "\n</style>\n";
        }

        // 新增：为文章目录添加基础CSS
        if ($settings['global_tabs']['enable-toc'] ?? false) {
            echo "\n<style>\n";
            echo ".ai-post-toc .toc-title { cursor: pointer; }\n";
            echo ".ai-post-toc, .ai-post-toc * { box-sizing: border-box; }\n";
            echo ".ai-post-toc .toc-list { list-style: disc !important; list-style-position: inside !important; padding: 0 !important; margin: 0 !important; overflow: hidden; transition: max-height 0.3s ease-out; }\n";
            echo ".ai-post-toc ul, .ai-post-toc ol { margin: 0 !important; padding-left: 0 !important; }\n";
            echo ".ai-post-toc li { margin: 0 0 6px 0 !important; padding: 0 !important; }\n";
            // 保留层级：嵌套列表统一固定缩进，避免受主题影响
            echo ".ai-post-toc .toc-list ul, .ai-post-toc .toc-list ol { padding-left: 18px !important; margin: 0 !important; list-style: circle !important; list-style-position: inside !important; }\n";
            // 链接颜色继承正文（覆盖生成器内联 color）
            echo ".ai-post-toc a, .ai-post-toc .toc-link { color: inherit !important; text-decoration: none !important; }\n";
            echo ".ai-post-toc a:hover, .ai-post-toc .toc-link:hover { color: inherit !important; text-decoration: underline !important; }\n";
            echo ".ai-post-toc.toc-collapsed .toc-list { max-height: 0; }\n";
            echo ".ai-post-toc.toc-expanded .toc-list { max-height: 1000px; /* Or a large enough value */ }\n"; // 展开时的高度
            echo ".ai-post-toc .toc-toggle-icon { display: inline-block; margin-left: 5px; transition: transform 0.3s ease; font-size: 12px; vertical-align: middle; }\n";
            echo ".ai-post-toc.toc-collapsed .toc-toggle-icon { transform: rotate(-90deg); }\n";
            // 新增：控制 Open/Close 文本显示
            echo ".ai-post-toc.toc-expanded .toc-text-open { display: none; }\n";
            echo ".ai-post-toc.toc-collapsed .toc-text-close { display: none; }\n";
            echo ".ai-post-toc .toc-status-text { display: inline-block; vertical-align: middle; }\n"; // 确保文本和图标对齐
            echo "</style>\n";
        }

        // 新增：特性卡片基础样式（2 列网格 + 卡片排版）
        echo "\n<style>\n";
        echo ".ai-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 32px 0; }\n";
        echo ".ai-feature-card { display: flex; align-items: flex-start; padding: 16px 18px; border-radius: 10px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.04); border: 1px solid #f1f1f1; }\n";
        echo ".ai-feature-icon { flex: 0 0 auto; width: 2em; height: 2em; font-size: 24px; line-height: 2em; text-align: center; margin-right: 12px; }\n";
        echo ".ai-feature-icon img.emoji, .ai-feature-icon img.wp-smiley { width: 2em !important; height: 2em !important; display: inline-block; }\n";
        echo ".ai-feature-body { flex: 1 1 auto; }\n";
        echo ".ai-feature-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #222222; }\n";
        echo ".ai-feature-desc { margin: 0; font-size: 14px; line-height: 1.6; color: #555555; }\n";
        echo "@media (max-width: 768px) { .ai-feature-grid { grid-template-columns: 1fr; gap: 12px 0; } .ai-feature-card { padding: 14px 16px; } }\n";
        echo "</style>\n";

        // 新增：实用技巧提示卡样式（整体更醒目、字号稍大）
        echo "\n<style>\n";
        echo ".ai-tips-card { display: flex; align-items: flex-start; padding: 20px 22px; margin: 28px 0; border-radius: 14px; background: #fff8e6; border: 1px solid #f3d28c; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif; }\n";
        echo ".ai-tips-icon { flex: 0 0 auto; width: 2.6em; height: 2.6em; font-size: 24px; line-height: 2.6em; text-align: center; margin-right: 16px; border-radius: 9999px; background: linear-gradient(135deg, #ffe08a, #fffbeb); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }\n";
        echo ".ai-tips-body { flex: 1 1 auto; }\n";
        echo ".ai-tips-label { font-size: 15px; font-weight: 700; color: #7a4b00; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }\n";
        echo ".ai-tips-text { margin: 0; font-size: 15px; line-height: 1.8; color: #3a2b10; }\n";
        echo "@media (max-width: 768px) { .ai-tips-card { padding: 16px 18px; margin: 22px 0; } .ai-tips-icon { margin-right: 12px; width: 2.4em; height: 2.4em; font-size: 22px; line-height: 2.4em; } .ai-tips-label { font-size: 14px; } .ai-tips-text { font-size: 14px; } }\n";
        echo "</style>\n";

        // 新增：数据统计卡片样式（桌面 1×4，移动端 2×2）
        echo "\n<style>\n";
        echo ".ai-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0; }\n";
        echo ".ai-stats-card { background: linear-gradient(135deg, #ffb347, #ffcc33); border-radius: 14px; padding: 20px 16px; text-align: center; color: #ffffff; box-shadow: 0 10px 22px rgba(255,180,71,0.35); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif; }\n";
        echo ".ai-stats-value { font-size: 26px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.01em; line-height: 1.1; }\n";
        echo ".ai-stats-label { font-size: 14px; font-weight: 500; opacity: 0.96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; line-height: 1.2; }\n";
        echo "@media (max-width: 1024px) { .ai-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n";
        echo "@media (max-width: 640px)  { .ai-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; } .ai-stats-card { padding: 16px 12px; } .ai-stats-value { font-size: 22px; } .ai-stats-label { font-size: 12px; } }\n";
        echo "</style>\n";
    }

    /**
     * 输出文章目录 (TOC) 的 JavaScript。
     *
     * @param array $settings 插件的设置数组。
     * @return void
     */
    public static function output_toc_script($settings)
    {
        // 检查是否启用了TOC功能，并且只在单个文章页面输出脚本
        if (!empty($settings['global_tabs']['enable-toc']) && is_single()) {
            // 获取TOC设置
            $toc_title_text = esc_js($settings['global_tabs']['toc-title-text'] ?? '文章目录');
            $default_state = $settings['global_tabs']['toc-default-state'] ?? 'expanded';
            $initial_class = ($default_state === 'collapsed') ? 'toc-collapsed' : 'toc-expanded';

            // JavaScript for TOC toggle and smooth scroll
            ?>
            <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function() {
                const tocDiv = document.querySelector(".ai-post-toc");
                if (!tocDiv) return;

                // Add initial state class based on settings
                tocDiv.classList.add('<?php echo $initial_class; ?>');

                const tocTitle = tocDiv.querySelector(".toc-title");
                const tocList = tocDiv.querySelector(".toc-list");
                const tocLinks = tocDiv.querySelectorAll(".toc-link");

                if (tocTitle && tocList) {
                    tocTitle.addEventListener("click", function() {
                        tocDiv.classList.toggle("toc-collapsed");
                        tocDiv.classList.toggle("toc-expanded");
                    });
                }

                if (tocLinks) {
                    tocLinks.forEach(function(link) {
                        link.addEventListener("click", function(e) {
                            e.preventDefault();
                            const targetId = this.getAttribute("href").substring(1);
                            const targetElement = document.getElementById(targetId);
                            if (targetElement) {
                                const offset = 80; 
                                const bodyRect = document.body.getBoundingClientRect().top;
                                const elementRect = targetElement.getBoundingClientRect().top;
                                const elementPosition = elementRect - bodyRect;
                                const offsetPosition = elementPosition - offset;

                                window.scrollTo({
                                    top: offsetPosition,
                                    behavior: "smooth"
                                });

                                if (tocDiv.classList.contains("toc-collapsed")) {
                                    tocDiv.classList.remove("toc-collapsed");
                                    tocDiv.classList.add("toc-expanded");
                                }
                            } else {
                                window.location.href = this.getAttribute("href");
                            }
                        });
                    });
                }
            });
            </script>
            <?php
        }
    }
} 