<?php
/**
 * Dashboard Component for Postology Plugin.
 */


if ( ! function_exists( 'render_dashboard_component' ) ) {
    function render_dashboard_component() {
        $widget_visibility    = get_option( 'postology_widget_visibility', true );
        $heading_text_option = get_option( 'postology_heading_text', esc_html__( 'Get an AI-generated summary of this article.', 'postology' ) );
        $button_text_option  = get_option( 'postology_button_text', esc_html__( 'Generate Summary', 'postology' ) );
    
        $user_info  = PostologySettings::get_user_from_website();
        
        $user_email = $user_info['email'];
        ?>
        <!-- Dashboard Page HTML -->
        <div class="postology-dashboard" style="display: grid; grid-template-columns: 1fr 1fr; gap: 21px; margin-block-start: 21px; margin-inline-end: 21px;">
            <!-- Status Card -->
            <div class="dashboard-container-divs">
                <section class="heading-section">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#1063ef">
                        <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <h2 class="section-headings"><?php esc_html_e( 'Status', 'postology-pro' ); ?></h2>
                </section>
                <table class="status-table">
                    <tbody>
                        <tr>
                            <td><strong>Plugin Status:</strong></td>
                            <td class="right" style="color: #16db16;">Active</td>
                        </tr>
                        <tr>
                            <td><strong>Widget Visibility:</strong></td>
                            <td class="right" style='display:flex;align-items:center;justify-content:flex-end;gap:9px;'>
                                <span id="widget-visibility-status-span" style="margin-top:1px;color: <?php echo $widget_visibility ? '#16db16' : '#ed7858'; ?>">
                                    <?php if ($widget_visibility == 1) {echo "Visible";} else { echo "Not Visible"; } ?>
                                </span>
                                <label class="switch" >
                                    <input type="checkbox" id="widget-visibility-checkbox" <?php if ($widget_visibility == 1) {echo "checked";} ?>>
                                    <span class="slider"></span>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>API Connection:</strong></td>
                            <td class="right" style="color: <?php echo get_option( 'postology_api_key' ) ? '#16db16' : '#ed7858'; ?>">
                                <?php echo get_option( 'postology_api_key' ) ? esc_html__( 'Connected', 'postology' ) : esc_html__( 'Not Connected', 'postology' ); ?>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>License:</strong></td>
                            <td class="right" style="color: #000;">Free</td>
                        </tr>
                    </tbody>
                </table>
            </div>
    
            <!-- Credits Card -->
            <div class="dashboard-container-divs">
                <section class="heading-section">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="10" stroke="#1063ef" stroke-width="1.5"></circle>
                        <path d="M12 6V18" stroke="#1063ef" stroke-width="1.5" stroke-linecap="round"></path>
                        <path d="M15 9.5C15 8.11929 13.6569 7 12 7C10.3431 7 9 8.11929 9 9.5C9 10.8807 10.3431 12 12 12C13.6569 12 15 13.1193 15 14.5C15 15.8807 13.6569 17 12 17C10.3431 17 9 15.8807 9 14.5" stroke="#1063ef" stroke-width="1.5" stroke-linecap="round"></path>
                    </svg>
                    <h2 class="section-headings"><?php esc_html_e( 'Credits', 'postology-pro' ); ?></h2>
                </section>
                <div class="credits-info">
                    <section style="justify-content: space-between; inline-size: 100%;">
                        <strong>Available Credits</strong>
                        <strong><?php echo $user_info["credits"]; ?></strong>
                    </section>
                    <p>Each credit allows for one summary generation.</p>
                </div>
                <div class="credit-buy">
                    <strong style="margin-top:15px;">Need more credits?</strong>
                    <section class="credits-buy-links">
                        <a href="<?php echo esc_url( "https://buy.stripe.com/bIY01FeSn24Q38AeUU?prefilled_email={$user_email}" ); ?>">2,500 Credits ($5)</a>
                        <a href="<?php echo esc_url( "https://buy.stripe.com/dR6bKn7pV38UcJaaEG?prefilled_email={$user_email}" ); ?>">30,000 ($49)</a>
                    </section>
                    <section class="pro-buy-link" style="margin-block-start: 12px; justify-content:center;">
                        <a href="https://postology-pro.com/#Pro" target="_blank" style="font-size:15px;font-weight:500; color: #ed7858; display: flex; align-items: center;">
                            Upgrade to Pro ($49)
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#ed7858" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                        </a>
                    </section>
                </div>
            </div>
    
            <!-- Quick Settings Card -->
            <div class="dashboard-container-divs">
                <section class="heading-section">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 12L6 5" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M12 8L12 5" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M6 19L6 16" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M18 19L18 17" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M12 19L12 12" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M10 8L14 8" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M4 16L8 16" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M16 17H20" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                        <path d="M18 13L18 5" stroke="#1063ef" stroke-width="2" stroke-linecap="round"></path>
                    </svg>
                    <h2 class="section-headings"><?php esc_html_e( 'Quick Settings', 'postology-pro' ); ?></h2>
                </section>
                <form action="#" method="POST" style="margin-top: 24px;">
                    <ul>
                        <li>
                            <label for="bullet_points" style="display:flex;align-items:center;gap:6px;">
                                <strong style="line-height:1.5;font-weight: 500;">Number of Bullet Points</strong>
                                <?php
                                    echo '<svg style="width:21px;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16Z" fill="#1C274C"></path></g></svg>';
                                ?>
                            </label>
                            <section style="align-items:center;">
                                <input type="number" id="bullet_points" name="bullet_points" value="2" min="1" max="2" disabled>
                                <em>Max 2 in free version</em>
                            </section>
                        </li>
                        <li>
                            <label for="widget_heading"><strong style="line-height:1.5;font-weight: 500;">Widget Heading</strong></label>
                            <input type="text" name="postology_heading_text" value="<?php echo esc_attr( $heading_text_option ); ?>" size="50" style="inline-size:100%;" />
                        </li>
                        <li>
                            <label for="button_text"><strong style="line-height:1.5;font-weight: 500;">Button Text</strong></label>
                            <input type="text" name="postology_button_text" value="<?php echo esc_attr( $button_text_option ); ?>" size="50" style="inline-size:100%;" />
                        </li>
                    </ul>
                    <section style="display:flex;justify-content: space-between; align-items: center; font-size: 15px; margin-top:18px;">
                        <a href="?page=postology-settings&tab=general" style="color:#1063ef;display: flex; align-items: center;">
                            More Settings
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#1063ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <button type="submit" style="margin:0;">Save Changes</button>
                        <input type="hidden" name="postology_widget_visibility" value=<?php if ($widget_visibility == 1) {echo 1;} ?>>
                    </section>
                </form>
            </div>
    
            <!-- Help & Resources Card -->
            <div class="dashboard-container-divs">
                <section class="heading-section">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 10C9 9.40666 9.17595 8.82664 9.50559 8.33329C9.83524 7.83994 10.3038 7.45543 10.852 7.22836C11.4001 7.0013 12.0033 6.94189 12.5853 7.05765C13.1672 7.1734 13.7018 7.45912 14.1213 7.87868C14.5409 8.29824 14.8266 8.83279 14.9424 9.41473C15.0581 9.99667 14.9987 10.5999 14.7716 11.1481C14.5446 11.6962 14.1601 12.1648 13.6667 12.4944C13.1734 12.8241 12.5933 13 12 13V14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#1063ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <circle cx="12" cy="17" r="1" fill="#1063ef"></circle>
                    </svg>
                    <h2 class="section-headings"><?php esc_html_e( 'Help & Resources', 'postology-pro' ); ?></h2>
                </section>
                <ul class="help-links-list">
                    <li>
                        <a href="https://postology-pro.tawk.help/" target="_blank">
                            <svg viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path stroke="#1063ef" stroke-linecap="round" stroke-linejoin="round" stroke-width="12" d="M68 89h56m-56 24h56m-56 24h36"></path><path fill="#1063ef" fill-rule="evenodd" d="M52 28a2 2 0 0 0-2 2v132a2 2 0 0 0 2 2h88a2 2 0 0 0 2-2V62h-28a6 6 0 0 1-6-6V28H52Zm68 8.485L133.515 50H120V36.485ZM38 30c0-7.732 6.268-14 14-14h62c1.591 0 3.117.632 4.243 1.757l34 34A6 6 0 0 1 154 56v106c0 7.732-6.268 14-14 14H52c-7.732 0-14-6.268-14-14V30Z" clip-rule="evenodd"></path></g></svg>
                            <section>
                                <strong>Documentation</strong>
                                <p>Read detailed documentation and FAQ</p>
                            </section>
                        </a>
                    </li>
                    <li>
                        <a href="mailto:contact@postology-pro.com" target="_blank">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="support"> <g> <circle cx="12" cy="12" fill="none" r="4" stroke="#1063ef" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-5 12) rotate(-45)"></circle> <circle cx="12" cy="12" fill="none" r="10" stroke="#1063ef" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-5 12) rotate(-45)"></circle> <line fill="none" stroke="#1063ef" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="9" y1="5" y2="9"></line> <line fill="none" stroke="#1063ef" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15" x2="19" y1="9" y2="5"></line> <line fill="none" stroke="#1063ef" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15" x2="19" y1="15" y2="19"></line> <line fill="none" stroke="#1063ef" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9" x2="5" y1="15" y2="19"></line> </g> </g> </g> </g></svg>
                            <section>
                                <strong>Support</strong>
                                <p>Contact our team for help with any issue</p>
                            </section>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Upgrade button row -->
        <div class="upgrade-container">
            <section>
                <strong style="margin-bottom: 9px;">Upgrade to Postology Pro</strong>
                <p>Elevate your content with quick summaries that captivate and retain readers.</p>
            </section>

            <a class="upgrade-button" href="https://postology-pro.com/#Pro">
                <?php esc_html_e('Upgrade Now', 'postology'); ?>
            </a>
        </div>
        <?php
    }
}
