<?php
if (!defined('ABSPATH')) {
    exit;
}
?>

<div class="lm-settings">
    <div class="lm-settings__section">
        <h3><?php esc_html_e('API Configuration', 'launchmind-blog'); ?></h3>
        <form action="options.php" method="post">
            <?php
            settings_fields('launchmind-blog');
            do_settings_sections('launchmind-blog');
            submit_button(__('Save Settings', 'launchmind-blog'));
            ?>
        </form>
        <div class="lm-actions lm-actions--inline">
            <button type="button" class="button" id="lm-test-connection"><?php esc_html_e('Test Connection', 'launchmind-blog'); ?></button>
            <button type="button" class="button lm-button--danger" id="lm-clear-cache"><?php esc_html_e('Clear Cache', 'launchmind-blog'); ?></button>
            <div id="lm-test-result" class="lm-result" style="display:none;"></div>
        </div>
    </div>

    <?php
    $blog_page_id = (int) Launchmind_Blog_Connector::get_option('blog_page_id', 0);
    $blog_page_url = $blog_page_id ? get_permalink($blog_page_id) : '';
    $blog_page_edit = $blog_page_id ? admin_url('post.php?post=' . $blog_page_id . '&action=edit') : '';
    ?>

    <div class="lm-settings__section">
        <h3>✨ <?php esc_html_e('Automatic Blog Page', 'launchmind-blog'); ?></h3>
        <p class="description">
            <?php esc_html_e('Launchmind Blog automatically creates a clean /blog page (title + blog grid) when activated. This works even on custom themes that do not render WordPress shortcodes correctly.', 'launchmind-blog'); ?>
        </p>
        <?php if (!empty($blog_page_url)): ?>
            <p>
                <strong><?php esc_html_e('Blog page:', 'launchmind-blog'); ?></strong>
                <a href="<?php echo esc_url($blog_page_url); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html($blog_page_url); ?></a>
                <?php if (!empty($blog_page_edit)): ?>
                    &nbsp;·&nbsp;
                    <a href="<?php echo esc_url($blog_page_edit); ?>"><?php esc_html_e('Edit page', 'launchmind-blog'); ?></a>
                <?php endif; ?>
            </p>
        <?php else: ?>
            <p class="description">
                <?php esc_html_e('No blog page found yet. Deactivate + activate the plugin once to auto-create it, or create a page with slug “blog” and add the shortcode below.', 'launchmind-blog'); ?>
            </p>
        <?php endif; ?>
        <p class="description">
            <?php esc_html_e('Tip: if you use caching (server cache / plugin cache), purge cache after activation.', 'launchmind-blog'); ?>
        </p>
    </div>

    <div class="lm-settings__section lm-settings__section--highlight">
        <h3>🔑 <?php esc_html_e('Where to Find Your API Key', 'launchmind-blog'); ?></h3>
        <ol class="lm-steps">
            <li><span class="lm-step-number">1</span><span><?php esc_html_e('Go to your Launchmind Dashboard', 'launchmind-blog'); ?></span></li>
            <li><span class="lm-step-number">2</span><span><?php esc_html_e('Open the "Webshop Plugins" tab', 'launchmind-blog'); ?></span></li>
            <li><span class="lm-step-number">3</span><span><?php esc_html_e('Copy the API key from the green box', 'launchmind-blog'); ?></span></li>
        </ol>
        <a href="https://launchmind.io/backlinks/dashboard?utm_source=wordpress&utm_medium=plugin" target="_blank" rel="noopener noreferrer" class="button button-primary"><?php esc_html_e('Open Dashboard', 'launchmind-blog'); ?></a>
    </div>

    <div class="lm-settings__section">
        <h3>📖 <?php esc_html_e('How to Display Blog Content', 'launchmind-blog'); ?></h3>
        
        <div style="background:#fef3c7;border-left:4px solid #f59e0b;padding:1rem;margin-bottom:1.5rem;border-radius:4px;">
            <strong>⚠️ <?php esc_html_e('Important - First Time Only:', 'launchmind-blog'); ?></strong><br>
            <?php esc_html_e('After installing/updating: go to Settings → Permalinks and click "Save Changes" to activate blog post URLs.', 'launchmind-blog'); ?>
        </div>
        
        <div class="lm-usage-options">
            <div class="lm-usage-option">
                <h4><?php esc_html_e('Option 1: Gutenberg Block', 'launchmind-blog'); ?> <span class="lm-badge lm-badge--recommended"><?php esc_html_e('Recommended', 'launchmind-blog'); ?></span></h4>
                <ol>
                    <li><?php esc_html_e('Edit any page or post', 'launchmind-blog'); ?></li>
                    <li><?php esc_html_e('Add the "Launchmind Blog" block', 'launchmind-blog'); ?></li>
                    <li><?php esc_html_e('Configure layout, columns, and styling', 'launchmind-blog'); ?></li>
                </ol>
            </div>
            <div class="lm-usage-option">
                <h4><?php esc_html_e('Option 2: Shortcodes', 'launchmind-blog'); ?></h4>
                <div class="lm-shortcode">
                    <h5><?php esc_html_e('Blog List', 'launchmind-blog'); ?></h5>
                    <code>[launchmind_blog base_url="/blog/" columns="3"]</code>
                    <p class="description">
                        <strong><?php esc_html_e('Essential Options:', 'launchmind-blog'); ?></strong><br>
                        • <code>base_url</code> - <?php esc_html_e('⚠️ Important: Link path for blog posts, e.g. "/blog/" creates /blog/post-slug URLs. Must end with slash. Required for blog links to work correctly.', 'launchmind-blog'); ?><br>
                        • <code>columns</code> - <?php esc_html_e('Grid columns 1-4 (default: 3)', 'launchmind-blog'); ?><br>
                        • <code>limit</code> - <?php esc_html_e('Number of posts (default: 12)', 'launchmind-blog'); ?><br>
                        <br>
                        <strong><?php esc_html_e('Styling Options:', 'launchmind-blog'); ?></strong><br>
                        • <code>theme</code> - <?php esc_html_e('"dark" or "light" for dark/light backgrounds', 'launchmind-blog'); ?><br>
                        • <code>accent_color</code> - <?php esc_html_e('teal, blue, gold, green, or #hexcode', 'launchmind-blog'); ?><br>
                        • <code>show_intro</code> - <?php esc_html_e('"true" or "false" for welcome text (default: true)', 'launchmind-blog'); ?>
                    </p>
                </div>
                <div class="lm-shortcode">
                    <h5><?php esc_html_e('Examples', 'launchmind-blog'); ?></h5>
                    <code>[launchmind_blog base_url="/blog/" theme="dark" accent_color="gold"]</code>
                    <p class="description"><?php esc_html_e('Dark background with gold accent', 'launchmind-blog'); ?></p>
                    <br>
                    <code>[launchmind_blog base_url="/blog/" accent_color="teal"]</code>
                    <p class="description"><?php esc_html_e('Light background with teal accent', 'launchmind-blog'); ?></p>
                    <br>
                    <code>[launchmind_blog base_url="/blog/" accent_color="#00a69c"]</code>
                    <p class="description"><?php esc_html_e('Use exact hex color to match your website', 'launchmind-blog'); ?></p>
                </div>
                <div class="lm-shortcode">
                    <h5><?php esc_html_e('Single Post', 'launchmind-blog'); ?></h5>
                    <code>[launchmind_post slug="your-post-slug"]</code>
                    <p class="description"><?php esc_html_e('Options: show_title, show_image, show_date, show_author, show_tags', 'launchmind-blog'); ?></p>
                </div>
                <div class="lm-shortcode">
                    <h5><?php esc_html_e('Quick Test', 'launchmind-blog'); ?></h5>
                    <code>[launchmind_test]</code>
                    <p class="description"><?php esc_html_e('Shows a connection/status box (useful for custom themes).', 'launchmind-blog'); ?></p>
                </div>
            </div>
        </div>
    </div>

    <div class="lm-settings__section lm-settings__section--highlight">
        <h3>🚀 <?php esc_html_e('Quick Start: Creating a New Blog Page', 'launchmind-blog'); ?></h3>
        <p class="description">
            <?php esc_html_e('Follow these steps to create a perfectly styled blog page that matches your website:', 'launchmind-blog'); ?>
        </p>
        
        <div style="background:#f0f9ff;border-left:4px solid #0ea5e9;padding:1.5rem;margin:1.5rem 0;border-radius:4px;">
            <h4 style="margin-top:0;"><?php esc_html_e('Step-by-Step Guide', 'launchmind-blog'); ?></h4>
            <ol style="margin-left:1.5rem;">
                <li><strong><?php esc_html_e('Create a new page', 'launchmind-blog'); ?></strong><br>
                    <?php esc_html_e('Go to Pages → Add New. Give it a title like "Blog" or "News".', 'launchmind-blog'); ?>
                </li>
                <li><strong><?php esc_html_e('Choose your method', 'launchmind-blog'); ?></strong><br>
                    <?php esc_html_e('Use the Gutenberg block (recommended) or add a shortcode in the editor.', 'launchmind-blog'); ?>
                </li>
                <li><strong><?php esc_html_e('Match your website colors', 'launchmind-blog'); ?></strong><br>
                    <?php esc_html_e('Use the accent_color parameter to match your website\'s primary color. Find your color in your theme settings or use a color picker.', 'launchmind-blog'); ?>
                </li>
                <li><strong><?php esc_html_e('Set the base URL', 'launchmind-blog'); ?></strong><br>
                    <?php esc_html_e('Use base_url="/blog/" to create clean URLs like /blog/post-title. This matches the automatic blog page structure.', 'launchmind-blog'); ?>
                </li>
                <li><strong><?php esc_html_e('Test and refine', 'launchmind-blog'); ?></strong><br>
                    <?php esc_html_e('Preview the page and adjust columns, limit, or styling until it looks perfect. The plugin automatically inherits your website\'s fonts and colors.', 'launchmind-blog'); ?>
                </li>
            </ol>
        </div>

        <div style="background:#fef3c7;border-left:4px solid #f59e0b;padding:1rem;margin:1.5rem 0;border-radius:4px;">
            <strong>💡 <?php esc_html_e('Pro Tip:', 'launchmind-blog'); ?></strong><br>
            <?php esc_html_e('The plugin automatically detects your website\'s colors and fonts. If something doesn\'t match perfectly, use the accent_color parameter or add custom CSS (see CSS Variables section below).', 'launchmind-blog'); ?>
        </div>
    </div>

    <div class="lm-settings__section">
        <h3>🎨 <?php esc_html_e('Layout Options Explained', 'launchmind-blog'); ?></h3>
        <p class="description">
            <?php esc_html_e('Customize how your blog content appears to perfectly match your website design. All options work with both shortcodes and Gutenberg blocks.', 'launchmind-blog'); ?>
        </p>

        <div class="lm-shortcode" style="margin-top:1.5rem;">
            <h4><?php esc_html_e('Blog List Options', 'launchmind-blog'); ?></h4>
            
            <h5><?php esc_html_e('Grid Layout', 'launchmind-blog'); ?></h5>
            <code>[launchmind_blog columns="3" limit="12"]</code>
            <p class="description">
                <strong><?php esc_html_e('columns', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Number of columns in the grid (1-4). Default: 3. Automatically becomes 2 columns on tablets and 1 column on mobile.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('limit', 'launchmind-blog'); ?></strong> - <?php esc_html_e('How many posts to show. Default: 12. Use smaller numbers (6-9) for featured sections.', 'launchmind-blog'); ?>
            </p>

            <h5><?php esc_html_e('Styling Options', 'launchmind-blog'); ?></h5>
            <code>[launchmind_blog accent_color="#11888F" theme="auto"]</code>
            <p class="description">
                <strong><?php esc_html_e('accent_color', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Primary color for links, buttons, and accents. Use preset names (teal, blue, gold, green) or hex codes (#11888F). The plugin automatically uses your website colors if not specified.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('theme', 'launchmind-blog'); ?></strong> - <?php esc_html_e('"auto" (default) automatically detects dark/light mode from user\'s device settings (phone/computer). Use "dark" to force dark mode or "light" to force light mode. Perfect for users with dark mode enabled on their phones!', 'launchmind-blog'); ?>
            </p>
            
            <div style="background:#dbeafe;border-left:4px solid #3b82f6;padding:1rem;margin:1rem 0;border-radius:4px;">
                <strong>🌓 <?php esc_html_e('Automatic Theme Detection:', 'launchmind-blog'); ?></strong><br>
                <?php esc_html_e('By default (theme="auto"), the plugin automatically detects if a user has dark mode enabled on their device and adjusts the styling accordingly. This means users with dark mode on their phone will see a dark-themed blog, while users with light mode will see a light-themed blog. No configuration needed!', 'launchmind-blog'); ?>
            </div>

            <h5><?php esc_html_e('Display Options', 'launchmind-blog'); ?></h5>
            <code>[launchmind_blog show_intro="true" show_excerpt="true" show_date="true"]</code>
            <p class="description">
                <strong><?php esc_html_e('show_intro', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show welcome text above blog grid. Default: true. Set to "false" to hide.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_excerpt', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show post excerpt/preview text. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_image', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show featured images. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_date', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show publication date. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_author', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show author name. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_tags', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show post tags. Default: false.', 'launchmind-blog'); ?>
            </p>

            <h5><?php esc_html_e('URL Structure', 'launchmind-blog'); ?></h5>
            <code>[launchmind_blog base_url="/blog/"]</code>
            <p class="description">
                <strong><?php esc_html_e('base_url', 'launchmind-blog'); ?></strong> - <?php esc_html_e('The URL path for blog post links. Use "/blog/" to create URLs like /blog/post-title. Must end with a slash. Default: empty (uses current page URL).', 'launchmind-blog'); ?>
            </p>

            <h5><?php esc_html_e('Multi-Language Support', 'launchmind-blog'); ?></h5>
            <code>[launchmind_blog lang="nl"]</code>
            <p class="description">
                <strong><?php esc_html_e('lang', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Language code: en (English), nl (Dutch), de (German), fr (French), es (Spanish), it (Italian), hi (Hindi). Default: automatically detects from WordPress locale. If a post is available in multiple languages, users can switch languages using the language switcher on single post pages.', 'launchmind-blog'); ?>
            </p>
            
            <div style="background:#dbeafe;border-left:4px solid #3b82f6;padding:1rem;margin:1rem 0;border-radius:4px;">
                <strong>🌍 <?php esc_html_e('Multi-Language Content:', 'launchmind-blog'); ?></strong><br>
                <?php esc_html_e('If your Launchmind account has content in multiple languages, the plugin automatically shows a language switcher on single post pages. Users can click their preferred language to read the article in that language. The language switcher only appears when multiple languages are available for a post.', 'launchmind-blog'); ?>
            </div>
        </div>

        <div class="lm-shortcode" style="margin-top:2rem;">
            <h4><?php esc_html_e('Single Post Options', 'launchmind-blog'); ?></h4>
            
            <h5><?php esc_html_e('Basic Usage', 'launchmind-blog'); ?></h5>
            <code>[launchmind_post slug="your-post-slug"]</code>
            <p class="description">
                <strong><?php esc_html_e('slug', 'launchmind-blog'); ?></strong> - <?php esc_html_e('The post slug from your Launchmind dashboard. Required. Find it in the Articles tab.', 'launchmind-blog'); ?>
            </p>

            <h5><?php esc_html_e('Display Options', 'launchmind-blog'); ?></h5>
            <code>[launchmind_post slug="post-slug" show_title="true" show_image="true" show_date="true"]</code>
            <p class="description">
                <strong><?php esc_html_e('show_title', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show post title. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_image', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show featured image. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_date', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show publication date. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_author', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show author name. Default: true.', 'launchmind-blog'); ?><br>
                <strong><?php esc_html_e('show_tags', 'launchmind-blog'); ?></strong> - <?php esc_html_e('Show post tags. Default: true.', 'launchmind-blog'); ?>
            </p>
        </div>

        <div style="background:#f0fdf4;border-left:4px solid #10b981;padding:1rem;margin:1.5rem 0;border-radius:4px;">
            <strong>✅ <?php esc_html_e('Automatic Styling:', 'launchmind-blog'); ?></strong><br>
            <?php esc_html_e('The plugin automatically inherits your website\'s fonts, colors, and spacing. No custom CSS needed in most cases! If you need more control, see the CSS Variables section below.', 'launchmind-blog'); ?>
        </div>
    </div>

    <div class="lm-settings__section">
        <h3>🔧 <?php esc_html_e('CSS Variables & Custom Styling', 'launchmind-blog'); ?></h3>
        <p class="description">
            <?php esc_html_e('For advanced customization, the plugin uses CSS variables that you can override in your theme\'s CSS. This gives you full control while maintaining automatic styling.', 'launchmind-blog'); ?>
        </p>

        <div class="lm-shortcode" style="margin-top:1.5rem;">
            <h4><?php esc_html_e('Available CSS Variables', 'launchmind-blog'); ?></h4>
            <p class="description">
                <?php esc_html_e('Add these to your theme\'s CSS file (Appearance → Customize → Additional CSS) to customize styling:', 'launchmind-blog'); ?>
            </p>
            
            <div style="background:#1e293b;color:#e2e8f0;padding:1.5rem;border-radius:8px;margin:1rem 0;font-family:monospace;font-size:13px;overflow-x:auto;">
                <code style="color:#e2e8f0;">
/* Accent colors */<br>
--lm-accent: #11888F;<br>
--lm-accent-hover: #0f7a80;<br>
<br>
/* Card styling */<br>
--lm-card-bg: rgba(255, 255, 255, 0.95);<br>
--lm-card-border: rgba(0, 0, 0, 0.08);<br>
--lm-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);<br>
--lm-card-radius: 12px;<br>
<br>
/* Text colors */<br>
--lm-text-primary: inherit;<br>
--lm-text-secondary: currentColor;<br>
<br>
/* Spacing */<br>
--lm-gap: 1.5rem;
                </code>
            </div>

            <h5 style="margin-top:1.5rem;"><?php esc_html_e('Example: Match Your Theme Colors', 'launchmind-blog'); ?></h5>
            <p class="description">
                <?php esc_html_e('If your theme uses specific CSS variables (like Elementor, Divi, or custom themes), the plugin automatically detects them. You can also manually override:', 'launchmind-blog'); ?>
            </p>
            
            <div style="background:#1e293b;color:#e2e8f0;padding:1.5rem;border-radius:8px;margin:1rem 0;font-family:monospace;font-size:13px;overflow-x:auto;">
                <code style="color:#e2e8f0;">
/* For Elementor themes */<br>
.launchmind-blog-list {<br>
&nbsp;&nbsp;--lm-accent: var(--e-global-color-primary);<br>
}<br>
<br>
/* For custom themes */<br>
.launchmind-blog-list {<br>
&nbsp;&nbsp;--lm-accent: var(--theme-primary, #11888F);<br>
&nbsp;&nbsp;--lm-card-bg: var(--theme-card-bg, #f0f7f8);<br>
}
                </code>
            </div>

            <h5 style="margin-top:1.5rem;"><?php esc_html_e('When to Use Custom CSS', 'launchmind-blog'); ?></h5>
            <ul style="margin-left:1.5rem;">
                <li><?php esc_html_e('Your website uses very specific color schemes that need exact matching', 'launchmind-blog'); ?></li>
                <li><?php esc_html_e('You want full-width featured images on single posts', 'launchmind-blog'); ?></li>
                <li><?php esc_html_e('You need to adjust spacing or typography beyond what shortcode parameters offer', 'launchmind-blog'); ?></li>
                <li><?php esc_html_e('Your theme has unique layout requirements', 'launchmind-blog'); ?></li>
            </ul>

            <div style="background:#fef3c7;border-left:4px solid #f59e0b;padding:1rem;margin:1.5rem 0;border-radius:4px;">
                <strong>⚠️ <?php esc_html_e('Note:', 'launchmind-blog'); ?></strong><br>
                <?php esc_html_e('Custom CSS always takes priority over plugin defaults. Test your changes after adding custom CSS to ensure everything looks correct.', 'launchmind-blog'); ?>
            </div>
        </div>
    </div>

    <div class="lm-settings__section">
        <h3>📋 <?php esc_html_e('Common Use Cases & Examples', 'launchmind-blog'); ?></h3>
        
        <div class="lm-shortcode" style="margin-top:1.5rem;">
            <h4><?php esc_html_e('Use Case 1: Standard Blog Page', 'launchmind-blog'); ?></h4>
            <code>[launchmind_blog columns="3" limit="12" base_url="/blog/" accent_color="teal"]</code>
            <p class="description">
                <?php esc_html_e('Perfect for a main blog page. Shows 12 posts in a 3-column grid with teal accent color. Automatically matches your website fonts.', 'launchmind-blog'); ?>
            </p>

            <h4 style="margin-top:2rem;"><?php esc_html_e('Use Case 2: Featured Blog Section', 'launchmind-blog'); ?></h4>
            <code>[launchmind_blog columns="3" limit="6" show_intro="false" accent_color="#11888F"]</code>
            <p class="description">
                <?php esc_html_e('Great for homepage sections. Shows only 6 posts, hides intro text, uses your exact brand color.', 'launchmind-blog'); ?>
            </p>

            <h4 style="margin-top:2rem;"><?php esc_html_e('Use Case 3: Dark Theme Website', 'launchmind-blog'); ?></h4>
            <code>[launchmind_blog theme="dark" accent_color="gold" columns="4"]</code>
            <p class="description">
                <?php esc_html_e('For dark backgrounds. Automatically adjusts card colors and uses gold accents. Perfect for luxury brands.', 'launchmind-blog'); ?>
            </p>

            <h4 style="margin-top:2rem;"><?php esc_html_e('Use Case 4: Minimal Design', 'launchmind-blog'); ?></h4>
            <code>[launchmind_blog columns="2" limit="8" show_tags="true" accent_color="currentColor"]</code>
            <p class="description">
                <?php esc_html_e('Clean, minimal layout. Shows tags, uses website\'s default link color. Great for modern, minimalist websites.', 'launchmind-blog'); ?>
            </p>
        </div>
    </div>
</div>
